آپلود فایل HTML در سایت و نمایش اون به کاربر

اگه یک صفحه آماده دارید و می‌خواید بدون تبدیل‌کردنش به قالب یا برگه، اون رو داخل سایتتون نمایش بدید، کافیه فایل‌های صفحه رو مستقیم روی هاست بذارید. برای آپلود فایل HTML در وردپرس نیازی به افزونه ندارید. فقط باید یک پوشه مناسب بسازید، فایل index.html رو همراه با CSS، JavaScript، فونت‌ها و تصاویر داخلش قرار بدید و آدرس اون پوشه رو در اختیار کاربرها بذارید.

توی این آموزش، آماده‌کردن فایل‌ها و آپلود اون‌ها با File Manager یا FTP رو قدم‌به‌قدم با هم جلو می‌بریم. بعد هم سراغ خطاهای ۴۰۳ و ۴۰۴، مشکل لودنشدن ظاهر صفحه، نکات امنیتی و تأثیر صفحه روی سئو می‌ریم. فقط از همین اول یادتون باشه که لازم نیست index.html رو به index.php تغییر بدید؛ این دو فایل کاربرد یکسانی ندارن.

آپلود فایل HTML در وردپرس چه کاربردی داره؟

HTML زبانیه که ساختار و محتوای یک صفحه وب رو مشخص می‌کنه. اگه یک پروژه HTML آماده دارید، می‌تونید اون رو داخل پوشه‌ای جدا و در کنار وردپرس منتشر کنید. مثلاً شاید یک صفحه معرفی محصول، رزومه، راهنمای تعاملی یا نمونه طراحی داشته باشید که قرار نیست از ویرایشگر وردپرس مدیریتش کنید.

تفاوت نمایش فایل HTML با ساخت برگه در وردپرس

برگه وردپرس داخل پیشخوان ساخته می‌شه و قالب، افزونه‌ها و ویرایشگر سایت روی نمایش اون اثر می‌ذارن. فایل HTML چنین وضعی نداره و یک صفحه ایستاست؛ یعنی محتوا مستقیم داخل فایل نوشته شده و برای تغییرش باید خود فایل رو ویرایش کنید.

با آپلود فایل HTML، اون فایل به برگه یا قالب وردپرس تبدیل نمی‌شه. صفحه فقط کنار سایت وردپرسی شما قرار می‌گیره و با آدرس جداگانه خودش باز می‌شه. اگه قراره محتوا رو مرتب از پیشخوان تغییر بدید، ساخت یک برگه وردپرس معمولاً انتخاب راحت‌تریه.

چه وقت‌هایی این روش انتخاب مناسبیه؟

• یک صفحه HTML کامل دارید که روی کامپیوتر بدون مشکل نمایش داده می‌شه.
• می‌خواید یک لندینگ پیج یا نمونه طراحی مستقل رو سریع منتشر کنید.
• صفحه به امکانات وردپرس مثل دیدگاه، ویرایشگر یا محتوای پویا نیاز نداره.
• می‌خواید نسخه نمایشی یک پروژه رو با آدرسی جدا به مشتری نشون بدید.

ولی اگه صفحه باید ظاهر قالب سایتتون رو داشته باشه یا مدیر سایت بتونه محتوای اون رو از پیشخوان عوض کنه، بهتره به‌جای این روش یک برگه وردپرس بسازید.

فایل HTML بعد از آپلود چطور در دسترس کاربر قرار می‌گیره؟

فرض کنید پوشه‌ای به اسم demo داخل ریشه دامنه ساخته‌اید و فایل index.html رو توی اون گذاشته‌اید. حالا کاربر با بازکردن آدرس example.com/demo/ صفحه شما رو می‌بینه. وب‌سرور هم در بیشتر تنظیمات رایج، فایل index.html داخل پوشه رو به‌عنوان فایل پیش‌فرض پیدا و باز می‌کنه. اگه این اتفاق نیفتاد، باید تنظیم فایل پیش‌فرض پوشه رو از پشتیبانی هاست بررسی کنید.

قبل از آپلود فایل HTML چه چیزهایی لازم دارید؟

• دسترسی به پنل هاست یا FTP: برای قراردادن فایل‌ها باید بتونید به فضای هاست وصل بشید.
• فایل اصلی با نام index.html: این فایل نقطه شروع صفحه شماست و بهتره داخل پوشه اصلی پروژه قرار بگیره.
• همه فایل‌های وابسته: پوشه‌های CSS، JavaScript، تصاویر و فونت‌ها باید همراه فایل اصلی آپلود بشن.
• نسخه پشتیبان: قبل از کار با File Manager از فایل‌های مهم سایت نسخه پشتیبان بگیرید. اگه با انتخاب هاست آشنا نیستید، راهنمای انتخاب هاست مناسب هم کمکتون می‌کنه.

قبل از آپلود، پروژه رو روی کامپیوتر باز کنید و ببینید صفحه، تصاویر، فونت‌ها و دکمه‌ها درست کار می‌کنن یا نه. با این آزمایش ساده، مشکلات خود پروژه رو با ایرادهای مربوط به هاست اشتباه نمی‌گیرید.

آماده‌کردن فایل HTML برای آپلود

۱. ساختار فایل‌ها و پوشه‌ها رو بررسی کنید

پوشه پروژه باید تمام فایل‌هایی رو که صفحه به اون‌ها نیاز داره، در خودش داشته باشه. یک ساختار ساده می‌تونه شبیه نمونه زیر باشه:

project/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
├── images/
└── fonts/

اگه صفحه فقط روی کامپیوتر خودتون کار می‌کنه، احتمالاً جایی از کد به فایلی بیرون از پوشه پروژه اشاره کرده‌اید. همه فایل‌های لازم رو پیدا کنید و داخل همین ساختار بذارید.

۲. مسیر فایل‌های CSS و JavaScript رو کنترل کنید

مسیر نسبی یعنی آدرس هر فایل بر اساس محل index.html نوشته می‌شه؛ مثل css/style.css. مسیری که با / شروع می‌شه، از ریشه دامنه حساب می‌شه؛ مثل /demo/css/style.css. این نوع مسیر ممکنه بعد از انتقال پروژه به پوشه یا دامنه دیگه خراب بشه. برای پروژه‌ای که ممکنه جابه‌جا بشه، مسیرهای نسبی معمولاً دردسر کمتری دارن.

سراغ مسیرهایی مثل C:\Users\... یا آدرس فایل‌های روی کامپیوترتون نرید. این آدرس‌ها فقط روی دستگاه خودتون کار می‌کنن و سرور به اون‌ها دسترسی نداره. مسیر لینک‌های داخلی، تصاویر پس‌زمینه داخل CSS و تگ base رو هم بررسی کنید؛ چون هرکدوم می‌تونن آدرس فایل‌های صفحه رو تغییر بدن.

اگه پروژه فرم، درخواست شبکه، ماژول JavaScript یا اتصال به یک سرویس بیرونی داره، فقط آپلود فایل‌ها برای کارکردنش کافی نیست. آدرس مقصد درخواست‌ها، HTTPS، محدودیت CORS و مجوز کلیدهای API رو هم بررسی کنید. CORS همون قانونی در مرورگره که مشخص می‌کنه صفحه اجازه ارتباط با یک دامنه دیگه رو داره یا نه. یادتون نره کلید خصوصی یا رمز رو داخل کدهای قابل‌مشاهده صفحه نذارید.

۳. فایل index.html رو در پوشه اصلی پروژه قرار بدید

فایل index.html باید مستقیم داخل همون پوشه‌ای باشه که می‌خواید آدرسش رو باز کنید. نام فایل رو با حروف کوچک بنویسید و به index.php تغییرش ندید. عوض‌کردن پسوند، کد HTML رو به PHP تبدیل نمی‌کنه.

۴. از کل پروژه یک فایل ZIP بسازید

همه فایل‌ها و پوشه‌های پروژه رو انتخاب کنید و از اون‌ها یک فایل ZIP بسازید. بهتره وقتی ZIP رو باز می‌کنید، index.html و پوشه‌های پروژه همون اول دیده بشن. اگه همه‌چیز داخل یک پوشه اضافه باشه، بعد از استخراج باید اسم اون پوشه رو هم در آدرس وارد کنید.

آپلود فایل HTML در وردپرس از طریق هاست

در بیشتر هاست‌ها می‌تونید فایل‌ها رو با File Manager آپلود کنید. ممکنه اسم یا جای بعضی دکمه‌ها در پنل‌های مختلف کمی فرق کنه، ولی مسیر کلی کار همینه.

پیداکردن Document Root دامنه

Document Root یعنی پوشه‌ای که فایل‌های عمومی دامنه داخلش قرار می‌گیرن. در خیلی از حساب‌های cPanel، ریشه دامنه اصلی پوشه public_html هست؛ ولی این مسیر برای همه هاست‌ها و دامنه‌ها یکسان نیست. حواستون باشه نام درست این پوشه public_html با خط زیره، نه public-html.

دامنه افزوده یا زیردامنه ممکنه Document Root جداگانه‌ای داشته باشه. قبل از آپلود، بخش Domains پنل هاست رو باز کنید و مسیر ثبت‌شده برای دامنه موردنظرتون رو ببینید. اگه مسیر رو پیدا نکردید، از پشتیبانی هاست بپرسید فایل‌های عمومی اون دامنه باید داخل کدوم پوشه قرار بگیرن.

ساخت پوشه جدا برای صفحه HTML

داخل Document Root یک پوشه تازه بسازید. مثلاً اگه اسم پوشه رو template بذارید، آدرس صفحه به example.com/template/ تبدیل می‌شه. بهتره یک نام کوتاه، انگلیسی و بدون فاصله انتخاب کنید. برای جداکردن چند کلمه هم می‌تونید از خط تیره کمک بگیرید.

آپلود فایل ZIP در File Manager

پوشه‌ای رو که تازه ساخته‌اید باز کنید و گزینه Upload رو بزنید. بعد فایل ZIP پروژه رو انتخاب کنید و منتظر بمونید تا نوار آپلود کامل بشه. محدودیت حجم آپلود به تنظیمات هاستتون بستگی داره. اگه فایل خیلی بزرگه یا اتصال مدام قطع می‌شه، استفاده از SFTP می‌تونه راحت‌تر و امن‌تر باشه.

استخراج فایل‌ها با گزینه Extract

وقتی آپلود تموم شد، فایل ZIP رو انتخاب کنید و گزینه Extract رو بزنید. مسیر استخراج باید همون پوشه‌ای باشه که ساخته‌اید. بعد از استخراج، فایل‌ها رو بررسی کنید. اگه همه‌چیز سر جاش بود، ZIP رو پاک کنید تا نسخه فشرده پروژه بی‌دلیل در دسترس نمونه.

جای درست فایل index.html رو بررسی کنید

بعد از استخراج باید به ساختاری مثل public_html/demo/index.html برسید؛ البته فقط وقتی public_html مسیر واقعی دامنه شماست. اگه مسیر به‌شکل public_html/demo/project/index.html شده، فایل index.html و پوشه‌های کنارش رو یک سطح بالاتر ببرید. راه دیگه اینه که پوشه project رو هم در آدرس صفحه بنویسید.

نمایش صفحه HTML به کاربر

حالا مرورگر رو باز کنید و آدرس پوشه رو بنویسید. مثلاً اگه پوشه demo داخل ریشه دامنه example.com ساخته شده، صفحه با این آدرس باز می‌شه:

https://example.com/demo/

اگه تنظیم فایل پیش‌فرض پوشه روی وب‌سرور شامل index.html باشه، بدون نوشتن نام فایل هم صفحه باز می‌شه. برای بررسی مستقیم فایل می‌تونید آدرس https://example.com/demo/index.html رو هم امتحان کنید. اگه آدرس مستقیم کار کرد ولی آدرس پوشه کار نکرد، از پشتیبانی هاست بخواید تنظیم فایل پیش‌فرض پوشه رو بررسی کنه.

صفحه رو هم با موبایل و هم با کامپیوتر ببینید. روی چند لینک و دکمه بزنید و مطمئن بشید تصاویر، فونت‌ها و اسکریپت‌ها کامل لود می‌شن. بد نیست یک بار هم صفحه رو در پنجره ناشناس مرورگر باز کنید تا کش قدیمی روی نتیجه آزمایشتون اثر نذاره.

آپلود فایل HTML با FTP

FTP راهی برای جابه‌جایی فایل بین کامپیوتر و هاسته، ولی FTP معمولی اطلاعات ورود و داده‌ها رو رمزگذاری نمی‌کنه. اگه هاستتون SFTP داره، بهتره از همین روش امن‌تر استفاده کنید. اگه پروژه بزرگه یا File Manager وسط آپلود قطع می‌شه، می‌تونید از یک برنامه انتقال فایل کمک بگیرید. اطلاعات اتصال شامل نام هاست، نام کاربری، رمز و پورت رو هم از پنل هاست یا پشتیبانی بگیرید.

1. برنامه انتقال فایل رو باز کنید و اطلاعات اتصال رو وارد کنید. اگه هاست SFTP در اختیارتون می‌ذاره، همین اتصال رمزگذاری‌شده رو انتخاب کنید و فقط وقتی سراغ FTP برید که هاست روش امن‌تری ارائه نمی‌ده.
2. بعد از اتصال، Document Root دامنه رو باز کنید. این مسیر برای دامنه اصلی در خیلی از هاست‌ها public_html هست، ولی بهتره حتماً مسیر واقعی دامنه خودتون رو بررسی کنید.
3. یک پوشه مثل demo بسازید و همه فایل‌ها و پوشه‌های پروژه رو داخل اون انتقال بدید.
4. منتظر بمونید تا صف انتقال کاملاً خالی بشه. بعد آدرس example.com/demo/ رو در مرورگر امتحان کنید.

رفع مشکل بازنشدن فایل HTML

اگه صفحه باز نشد، قبل از هر کاری آدرس، محل فایل‌ها و نام index.html رو بررسی کنید. برای این روش معمولاً نیازی نیست فایل .htaccess رو تغییر بدید. یک تغییر اشتباه در این فایل ممکنه بخش‌های دیگه سایت رو هم از دسترس خارج کنه.

رفع خطای ۴۰۴

خطای ۴۰۴ یعنی سرور نتونسته فایل یا مسیری رو که خواسته‌اید پیدا کنه. برای پیداکردن مشکل، این موارد رو به‌ترتیب بررسی کنید:

• نام پوشه داخل آدرس باید دقیقاً با نام همون پوشه روی هاست یکی باشه.
• نام فایل اصلی باید index.html باشه، نه index.html.txt یا اسم مشابه دیگه‌ای.
• فایل باید داخل Document Root واقعی همون دامنه استخراج شده باشه.
• اسم پوشه نباید با نام یک برگه، نوشته یا مسیر فعلی وردپرس تداخل داشته باشه. اگه چنین تداخلی هست، نام پوشه رو عوض کنید.
• آدرس کامل example.com/demo/index.html رو امتحان کنید. اگه این آدرس باز شد ولی آدرس پوشه باز نشد، از پشتیبانی هاست بخواید تنظیم فایل پیش‌فرض پوشه رو بررسی کنه.

رفع خطای ۴۰۳

خطای ۴۰۳ یعنی سرور درخواست رو فهمیده، ولی اجازه نمایش فایل رو نمی‌ده. اول سطح دسترسی پوشه و فایل‌ها رو بررسی کنید. در خیلی از هاست‌های لینوکسی، مقدار رایج برای پوشه‌ها 755 و برای فایل‌ها 644 هست؛ ولی تنظیم درست به پیکربندی سرور بستگی داره. پس سطح دسترسی رو حدسی تغییر ندید و از مقدارهایی مثل 777 هم استفاده نکنید.

اگه سطح دسترسی درست به نظر میاد، تنظیمات امنیتی سرور یا فایل .htaccess رو خودسرانه دست‌کاری نکنید. آدرس صفحه و متن خطا رو برای پشتیبانی هاست بفرستید تا محدودیت‌های حساب یا وب‌سرور رو بررسی کنن.

رفع مشکل لودنشدن CSS و JavaScript

اگه متن صفحه نمایش داده می‌شه ولی ظاهر اون به‌هم‌ریخته‌ست یا دکمه‌ها کار نمی‌کنن، معمولاً آدرس فایل‌های CSS یا JavaScript اشتباهه. این موارد رو یکی‌یکی بررسی کنید:

• مسیر نوشته‌شده در ویژگی‌های href و src باید با ساختار واقعی پوشه‌ها هماهنگ باشه.
• مسیر فایل‌های داخل CSS، لینک‌های داخلی و تگ base رو هم بررسی کنید؛ چون مشکل همیشه فقط از href و src داخل HTML نیست.
• نام و پسوند فایل باید دقیق نوشته شده باشه؛ مثلاً style.css با styles.css فرق داره.
• روی خیلی از سرورها، حروف بزرگ و کوچک یکسان نیستن. پس Images و images دو مسیر متفاوت به حساب میان.
• صفحه رو باز کنید، کلید F12 رو بزنید و بخش‌های Console و Network ابزار توسعه مرورگر رو ببینید. آدرس‌هایی که خطای ۴۰۴ دارن، معمولاً شما رو به مسیر اشتباه فایل‌ها می‌رسونن. خطاهای CORS یا درخواست‌های ناموفق سرویس‌های بیرونی هم در همین بخش‌ها دیده می‌شن.
• اگه سایت با HTTPS باز می‌شه، فایل‌های وابسته رو از آدرس ناامن HTTP فراخوانی نکنید؛ چون ممکنه مرورگر جلوی لودشدن اون‌ها رو بگیره.

رفع مشکل نمایش صفحه اصلی وردپرس به‌جای فایل HTML

اول ببینید پوشه داخل Document Root درست ساخته شده و index.html مستقیم داخل همون پوشه قرار گرفته یا نه. بعد آدرس کامل فایل رو باز کنید. اگه اسم پوشه با نام یکی از برگه‌ها یا نوشته‌ها یکسانه، نام پوشه رو تغییر بدید.

بعد کش افزونه، سرور و مرورگر رو پاک کنید و دوباره آدرس مستقیم فایل رو آزمایش کنید. اگه هنوز صفحه اصلی وردپرس نمایش داده می‌شه، از پشتیبانی هاست بخواید ترتیب پردازش فایل‌های واقعی، فایل پیش‌فرض پوشه و قانون‌های بازنویسی وردپرس رو بررسی کنه. فایل .htaccess یا تنظیمات پیوندهای یکتا رو فقط برای حدس‌زدن علت مشکل تغییر ندید.

نکات امنیتی بعد از آپلود فایل HTML

• فایل محرمانه آپلود نکنید: هر فایلی که داخل پوشه عمومی می‌ذارید، ممکنه از طریق وب در دسترس باشه. نسخه پشتیبان، اطلاعات مشتری، فایل تنظیمات و کلیدهای خصوصی نباید داخل این پوشه قرار بگیرن.
• فایل ZIP رو حذف کنید: وقتی استخراج فایل‌ها و آزمایش صفحه تموم شد، نسخه فشرده پروژه رو از پوشه عمومی پاک کنید.
• رمز رو داخل JavaScript ننویسید: بازدیدکننده می‌تونه کدهای سمت مرورگر رو ببینه. پس رمز، کلید خصوصی یا اطلاعات اتصال به سرویس‌ها رو داخل فایل‌های HTML و JavaScript نذارید.
• از فایل مطمئن استفاده کنید: پروژه رو از منبعی بگیرید که بهش اعتماد دارید. قبل از آپلود هم فایل‌ها و لینک‌های خارجی داخل کد رو بررسی کنید.
• نسخه پشتیبان داشته باشید: فایل‌های اصلی سایت رو با فایل‌های پروژه جایگزین نکنید. اگه به وجود کد مخرب شک دارید، راهنمای پاکسازی سایت وردپرسی ویروسی رو ببینید.

تأثیر صفحه HTML روی وردپرس و سئو

صفحه HTML از نوشته‌ها و برگه‌های وردپرس جداست و افزونه سئوی وردپرس هم معمولاً محتوای این فایل رو مدیریت نمی‌کنه. به همین خاطر باید عنوان، توضیحات متا و اطلاعات دیگه صفحه رو مستقیم داخل بخش <head> فایل HTML بذارید.

<title>عنوان دقیق صفحه</title>
<meta name="description" content="توضیح کوتاه و روشن درباره محتوای صفحه">
<link rel="canonical" href="https://example.com/demo/">

تگ canonical آدرس اصلی محتوا رو به موتور جستجو معرفی می‌کنه. اگه همین محتوا در آدرس دیگه‌ای هم منتشر شده، مقدار canonical رو با دقت انتخاب کنید تا نسخه اصلی مشخص بمونه.

از بخش‌های مرتبط سایت به صفحه HTML لینک بدید و داخل خود صفحه هم راهی برای برگشت به سایت اصلی بذارید. اگه می‌خواید صفحه در نتایج جستجو دیده بشه، اول بررسی کنید نقشه سایت فعلیتون امکان اضافه‌کردن یک آدرس مستقل رو داره یا نه؛ چون نقشه سایت خودکار وردپرس و بعضی افزونه‌های سئو معمولاً فایل HTML جدا رو خودکار اضافه نمی‌کنن. اگه این امکان رو ندارید، لازم نیست فقط برای همین صفحه فایل نقشه سایت رو دستی ویرایش کنید. می‌تونید آدرس صفحه رو با ابزار بررسی نشانی در Google Search Console بررسی و درخواست ایندکس بدید. این درخواست تضمین نمی‌کنه که گوگل صفحه رو ایندکس کنه یا در نتایج نشون بده. راهنمای ساخت نقشه سایت در وردپرس هم جزئیات بیشتری درباره نقشه سایت در اختیارتون می‌ذاره.

قبل از درخواست ایندکس، محتوا، نمایش صفحه در موبایل، سرعت، لینک‌ها و تگ noindex رو بررسی کنید. اگه صفحه فقط یک نمونه خصوصی یا نسخه آزمایشی پروژه‌ست، بهتره اون رو عمومی نکنید و برای ثبتش در موتور جستجو درخواست ندید.

سؤال‌های رایج

جمع‌بندی

حالا می‌تونید صفحه HTML خودتون رو بدون تغییر پسوند و بدون نصب افزونه، کنار وردپرس نمایش بدید. فقط قبل از فرستادن آدرس برای بقیه، صفحه رو روی موبایل و دسکتاپ امتحان کنید، فایل ZIP رو پاک کنید و برای تغییرهای مهم همیشه یک نسخه پشتیبان داشته باشید.

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.