حل مشکل بهم ریختگی صفحات وردپرس؛ قدم‌به‌قدم

وقتی یک صفحه وردپرس فقط متن نشون می‌ده، منوها زیر هم می‌افتن یا پیشخوان ظاهر همیشگی خودش رو از دست می‌ده، معمولاً یکی از فایل‌های لازم مثل CSS، JavaScript، فونت یا تصویر لود نشده. CSS رنگ، فاصله و چیدمان صفحه رو می‌سازه و JavaScript هم بخش‌های تعاملی مثل منوها و دکمه‌ها رو کنترل می‌کنه. پس قبل از اینکه قالب رو عوض کنید یا افزونه‌ها رو حذف کنید، بهتره اول فایل مشکل‌دار و پیام خطای واقعی اون رو پیدا کنید.

در این راهنما، اول با پنل Network مرورگر فایلی رو پیدا می‌کنیم که لود نمی‌شه. بعد کش، نشانی‌های وردپرس، خطاهای 403 و 404، Mixed Content، محدودیت CSP، افزونه‌ها، قالب، CDN و فایل‌های صفحه‌ساز رو بررسی می‌کنیم. همین مسیر برای حل مشکل بهم ریختگی صفحات وردپرس و خیلی از مشکلات ظاهری پیشخوان هم کاربرد داره.

چرا صفحات وردپرس و پیشخوان به‌هم می‌ریزن؟

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

• کل سایت به‌هم‌ریخته: احتمال اینکه مشکل از قالب، کش، CDN، نشانی سایت یا یک فایل مشترک باشه بیشتره.
• فقط یک صفحه مشکل داره: محتوای همون صفحه، فایل‌های صفحه‌ساز و تنظیمات اختصاصی اون رو بررسی کنید.
• فقط پیشخوان مشکل داره: درخواست‌های مسیر /wp-admin/، افزونه‌های مدیریتی و خطاهای PHP اهمیت بیشتری دارن.
• فقط بعضی کاربران مشکل رو می‌بینن: کش، CDN، وضعیت ورود کاربر یا افزونه‌ای که برای مهمان‌ها بهینه‌سازی انجام می‌ده، می‌تونه علت مشکل باشه.

اول مشخص کنید کدوم فایل لود نمی‌شه

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

باز کردن ابزارهای توسعه در Windows، Linux و macOS

در Google Chrome DevTools روی Windows و Linux کلید F12 یا ترکیب Ctrl+Shift+I رو بزنید. در macOS از Command+Option+I استفاده کنید. بعد زبانه Network رو باز کنید.

اگه ابزارهای توسعه از قبل باز نبوده، یک بار صفحه رو با Ctrl+R یا در macOS با Command+R تازه‌سازی کنید تا درخواست‌ها ثبت بشن. بهتره گزینه Disable cache رو فقط وقتی ابزارهای توسعه بازه فعال کنید تا کش قدیمی نتیجه آزمایشتون رو تغییر نده.

پیدا کردن درخواست ناموفق در پنل Network

در پنل Network می‌تونید فیلتر CSS، JS، Img یا Font رو انتخاب کنید. درخواست‌های قرمز یا ردیف‌هایی که کد خطا دارن، نقطه شروع خوبی هستن. روی هر ردیف بزنید و بخش‌های Headers و Response رو ببینید.

مثلاً اگه صفحه فقط متن نشون می‌ده، اول فیلتر CSS رو بررسی کنید. اگه منوی موبایل باز نمی‌شه، فیلتر JS هم مهمه. برای فونت‌ها یا آیکن‌هایی که نمایش داده نمی‌شن هم فیلتر Font به کارتون میاد.

بررسی کد وضعیت و نشانی فایل مشکل‌دار

ستون Status نتیجه هر درخواست رو نشون می‌ده. کد 403 یعنی سرور درخواست رو فهمیده ولی اجازه انجام اون رو نداده. کد 404 یعنی فایل در نشانی درخواست‌شده پیدا نشده. خطاهای 500 تا 599 هم نشون می‌دن پردازش درخواست در سمت سرور یا یکی از سرویس‌های مسیر با مشکل روبه‌رو شده.

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

رفع علت‌های رایج به‌هم‌ریختگی صفحات وردپرس

پاک کردن کش مرورگر، وردپرس و CDN

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

1. صفحه رو در یک پنجره ناشناس مرورگر باز کنید.
2. کش مرورگر رو پاک کنید یا با Ctrl+Shift+R صفحه رو کامل تازه‌سازی کنید.
3. کش سایت وردپرسیتون رو از منوی افزونه کش پاک کنید.
4. اگه از CDN استفاده می‌کنید، کش اون رو هم پاک کنید. CDN شبکه‌ایه که نسخه فایل‌های سایت رو از سرورهای مختلف به کاربر می‌رسونه.

بعد از هر مرحله دوباره پنل Network رو ببینید. اگه فایل هنوز خطا می‌ده، چند بار پاک کردن کش چیزی رو عوض نمی‌کنه و باید علت همون خطا رو پیدا کنید.

بررسی نشانی وردپرس و نشانی سایت

در پیشخوان به مسیر تنظیمات ← عمومی برید. مقدارهای «نشانی وردپرس» و «نشانی سایت» رو ببینید. دامنه، زیردامنه و پروتکل این دو نشانی باید با آدرس واقعی سایت هماهنگ باشن.

مثلاً اگه سایت با HTTPS باز می‌شه ولی یکی از نشانی‌ها هنوز با HTTP ثبت شده، ممکنه بعضی فایل‌ها از مسیر اشتباه درخواست بشن. قبل از تغییر این گزینه‌ها از سایت نسخه پشتیبان بگیرید، چون وارد کردن نشانی اشتباه می‌تونه دسترسی به سایت یا پیشخوان رو مختل کنه.

رفع خطای 403 و دسترسی ردشده

طبق تعریف کد وضعیت 403، سرور درخواست رو فهمیده ولی از انجام اون خودداری کرده. این خطا فقط به مجوز فایل مربوط نیست؛ قانون فایروال، تنظیمات امنیتی، محدودیت CDN یا پیکربندی سرور هم می‌تونه چنین خطایی بسازه.

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

مجوز فایل‌ها رو با عددهای تصادفی تغییر ندید و مجوز عمومی مثل 777 نذارید. مقدار درست به تنظیمات هاستتون بستگی داره و بهتره پشتیبانی هاست اون رو بررسی کنه.

رفع خطای 404 فایل‌های CSS و JavaScript

خطای 404 یعنی فایل در مسیر درخواست‌شده پیدا نشده. نشانی فایل رو در یک زبانه تازه باز کنید. اگه دوباره 404 دیدید، مسیر فایل، نام اون و بزرگ یا کوچک بودن حروف رو بررسی کنید.

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

رفع خطای Mixed Content در سایت HTTPS

Mixed Content یا «محتوای ترکیبی» زمانی پیش میاد که صفحه با HTTPS باز شده ولی یکی از فایل‌ها با نشانی HTTP درخواست می‌شه. مرورگر ممکنه بعضی از این درخواست‌های ناامن رو مسدود کنه و در نتیجه ظاهر یا عملکرد صفحه به‌هم بریزه.

1. در پنل Console یا Network دنبال نشانی‌هایی بگردید که با http:// شروع می‌شن.
2. مطمئن بشید نشانی وردپرس و نشانی سایت روی HTTPS تنظیم شدن.
3. نشانی فایل داخل تنظیمات قالب، صفحه‌ساز یا محتوای صفحه رو اصلاح کنید.
4. بعد از اصلاح، همه لایه‌های کش رو پاک کنید.

اگه SSL هنوز درست نصب نشده، راهنمای نصب SSL رایگان در DirectAdmin می‌تونه برای بررسی مراحل نصب و خطاهای رایج کمکتون کنه.

بررسی خطاهای CSP و محدودیت‌های امنیتی

CSP یا Content Security Policy یک سیاست امنیتیه که مشخص می‌کنه مرورگر فایل‌ها رو از چه نشانی‌هایی می‌تونه بگیره. اگه فونت، اسکریپت یا CSS از دامنه‌ای بیرون از فهرست مجاز بیاد، مرورگر اون رو مسدود می‌کنه.

در Console معمولاً پیام خطا نام دستور CSP و منبع مسدودشده رو نشون می‌ده. این سیاست رو کامل غیرفعال نکنید. تغییر CSP کار حساسی هست، پس پیام کامل خطا رو برای پشتیبانی هاست یا کسی که این سیاست رو تنظیم کرده بفرستید تا فقط منبع ضروری و قابل‌اعتماد رو مجاز کنه.

غیرفعال کردن موقت افزونه‌های کش و بهینه‌سازی

ترکیب یا کوچک‌سازی فایل‌ها می‌تونه ترتیب بارگذاری CSS و JavaScript رو تغییر بده. اول گزینه‌های ترکیب CSS، ترکیب JavaScript، بارگذاری با تأخیر و حذف CSS استفاده‌نشده رو موقتاً خاموش کنید. بعد کش رو پاک کنید و صفحه رو در یک پنجره ناشناس ببینید.

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

بررسی تداخل افزونه‌ها و قالب وردپرس

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

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

بررسی CDN، فایروال و تنظیمات امنیتی

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

اگه نمی‌دونید چطور CDN رو بدون تغییر خطرناک در DNS آزمایش کنید، از پشتیبانی سرویس کمک بگیرید. تنظیمات کش، SSL، فشرده‌سازی و قوانین امنیتی باید جداگانه بررسی بشن. قابلیت‌های امنیتی رو بی‌دلیل خاموش نذارید؛ هدف پیدا کردن و اصلاح قانون اشتباهه.

بازسازی فایل‌های CSS صفحه‌ساز

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

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

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

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

بررسی فایل‌های CSS و JavaScript بخش مدیریت

ابزارهای توسعه رو داخل صفحه خراب پیشخوان باز کنید و در Network فیلترهای CSS و JS رو ببینید. به مسیر فایل خطادار دقت کنید. مسیرهای /wp-admin/ و /wp-includes/ معمولاً به فایل‌های اصلی وردپرس مربوط می‌شن و مسیر /wp-content/plugins/ نام افزونه مرتبط رو نشون می‌ده.

فایل‌های اصلی وردپرس رو دستی ویرایش نکنید. اگه این فایل‌ها خطای 403، 404 یا 5xx می‌دن، نشانی کامل و کد خطا رو نگه دارید و علت رو در افزونه امنیتی، کش، مجوزها یا تنظیمات سرور بررسی کنید.

آزمایش پیشخوان بعد از غیرفعال کردن افزونه‌ها

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

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

بررسی خطاهای PHP و گزارش خطای وردپرس

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

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

چه زمانی باید با پشتیبانی هاست تماس بگیرید؟

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

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

• نشانی صفحه‌ای که به‌هم‌ریخته
• نشانی کامل فایل CSS، JavaScript، فونت یا تصویری که لود نمی‌شه
• کد وضعیت مثل 403، 404 یا 500
• زمان دقیق رخ دادن خطا همراه با منطقه زمانی
• کارهایی که تا الان برای رفع مشکل انجام دادید
• متن کامل پیام Console یا Response، بدون رمز عبور و اطلاعات محرمانه

چک‌لیست سریع حل مشکل بهم ریختگی صفحات وردپرس

1. صفحه رو در حالت ناشناس و یک مرورگر دیگه آزمایش کنید.
2. در Network درخواست‌های ناموفق CSS، JS، Font و Img رو پیدا کنید.
3. کد وضعیت، نشانی فایل و متن خطا رو یادداشت کنید.
4. کش مرورگر، وردپرس و CDN رو پاک کنید.
5. نشانی وردپرس، نشانی سایت و HTTPS رو بررسی کنید.
6. برای 403، فایروال و دسترسی سرور رو بررسی کنید؛ برای 404، سراغ مسیر فایل برید.
7. پیام‌های Mixed Content و CSP رو در Console ببینید.
8. گزینه‌های ترکیب و بهینه‌سازی فایل‌ها رو موقتاً خاموش کنید.
9. تداخل افزونه‌ها و قالب رو روی نسخه آزمایشی بررسی کنید.
10. فایل‌های CSS صفحه‌ساز رو دوباره بسازید.
11. اگه خطای سرور باقی موند، اطلاعات کامل درخواست رو برای پشتیبانی هاست بفرستید.

سؤال‌های رایج درباره به‌هم‌ریختگی وردپرس

جمع‌بندی

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

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

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