نحوه رفع خرابی CSS در پنل مدیریت وردپرس

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

CSS شکسته در قسمت مدیریت نیز مانع از کار بر روی وب سایت شما می شود که آن را به یک مشکل جدی تبدیل می کند. و از آنجایی که دلایل احتمالی زیادی وجود دارد، بسیاری از مبتدیان مطمئن نیستند که چگونه این مشکل را برطرف کنند.

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

در اینجا مروری سریع از موضوعات و مراحل عیب یابی است که در این مقاله به آنها خواهیم پرداخت:

چه چیزی باعث شکسته شدن CSS در قسمت مدیریت وردپرس می شود؟

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

در تجربه ما، دلایل اصلی شکستن CSS در قسمت مدیریت وردپرس موارد زیر است:

تضاد پلاگین: افزونه‌های کدگذاری ضعیف با CSS خود می‌توانند با نادیده گرفتن یا تداخل با سبک‌های ناحیه مدیریت با سبک‌های پیش‌فرض وردپرس در تضاد باشند.
عدم تطابق HTTP/HTTPS: مشکلات محتوای مختلط، که در آن برخی فایل‌ها به جای HTTPS از طریق HTTP بارگیری می‌شوند، می‌تواند باعث شود مرورگرها فایل‌های CSS را مسدود کنند.
تداخل تم: برخی از تم ها CSS را در قسمت مدیریت بارگیری می کنند که می تواند باعث تداخل شود. اگر از یک تم ادمین سفارشی استفاده می‌کنید، می‌تواند باعث مشکلات استایل نیز شود.
مشکلات حافظه پنهان: حافظه پنهان مرورگر ممکن است نسخه های قدیمی فایل های CSS را در خود نگه دارد. افزونه‌های کش ممکن است فایل‌های قدیمی CSS را ارائه دهند و باعث ایجاد مشکلاتی در استایل شوند.
مشکلات CDN: شبکه‌های تحویل محتوا (CDN) با پیکربندی نادرست می‌توانند نسخه‌های قدیمی فایل‌های CSS را ارائه دهند که منجر به گم شدن یا شکسته شدن سبک‌ها می‌شود.
مجوزهای فایل نادرست: فایل های CSS با مجوزهای نادرست ممکن است توسط سرور قابل خواندن نباشند.
فایل‌های خراب: فایل‌های CSS ممکن است در طول به‌روزرسانی یا آپلود خراب یا گم شوند.
برنامه های افزودنی مرورگر: برنامه های افزودنی، به ویژه مسدود کننده های محتوا، می توانند در نحوه نمایش CSS اختلال ایجاد کنند.

درک این دلایل به شما کمک می کند تا تشخیص دهید که چرا ناحیه مدیریت وردپرس شما دچار CSS شکسته شده است تا بتوانید در واقع آن را برطرف کنید.

مرحله 1: تداخل پلاگین را بررسی کنید

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

در اینجا نحوه شناسایی و حل تداخل افزونه ها آورده شده است.

غیرفعال کردن همه افزونه ها

ابتدا باید به داشبورد مدیریت وردپرس خود بروید و به صفحه پلاگین ها » افزونه های نصب شده بروید.

اکنون، همه افزونه‌ها را انتخاب کرده و از منوی کشویی «عملکردهای انبوه» گزینه «غیرفعال کردن» را انتخاب کنید، سپس روی «اعمال» کلیک کنید.

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

پلاگین ها را یک به یک دوباره فعال کنید

برای تعیین اینکه کدام افزونه باعث این مشکل شده است، باید هر کدام را جداگانه فعال کنید. شما می توانید این کار را به سادگی با کلیک بر روی پیوند “فعال سازی” در زیر افزونه انجام دهید.

پس از فعال‌سازی هر افزونه، باید قسمت مدیریت را به‌روزرسانی کنید تا بررسی کنید که آیا CSS دوباره خراب می‌شود یا خیر.

این به شما کمک می کند تا افزونه خاصی را که باعث این مشکل شده است شناسایی کنید.

یک جایگزین پیدا کنید یا افزونه را به روز کنید

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

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

   اگر قصد یادگیری طراحی سایت با وردپرس را دارید از صفحه دوره های طراحی سایت ما بازدید کنید.

مرحله 2: بارگیری فایل های ناامن در HTTPS

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

این زمانی اتفاق می افتد که وب سایت شما تنظیم شده باشد که از پروتکل امن HTTPS استفاده کند، اما CSS از پروتکل HTTP یا پروتکل ناامن ارائه می شود.

هنگامی که این اتفاق می افتد، مرورگرهای محبوب مانند Google Chrome به طور خودکار منابع ناامن را مسدود می کنند و در نتیجه CSS در ناحیه مدیریت وردپرس شما خراب می شود.

این مشکل را می توان با استفاده از ابزار Inspect در مرورگر خود تأیید کرد. به سادگی به تب Console بروید و خطای Mixed Content را مشاهده خواهید کرد.

برای رفع این مشکل، ابتدا باید مطمئن شوید که تنظیمات وردپرس شما URL های صحیحی دارند.

به صفحه تنظیمات » عمومی بروید و مطمئن شوید که آدرس وردپرس و آدرس سایت دارای HTTPS در URL ها هستند.

اگر از قبل HTTPS در هر دو URL دارید، می توانید به صورت دستی وردپرس را مجبور کنید از پروتکل HTTPS استفاده کند.

به سادگی فایل wp-config.php خود را ویرایش کنید و کد زیر را اضافه کنید:

define('FORCE_SSL_ADMIN', true);
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false) {
    $_SERVER['HTTPS'] = 'on';
}

از طرف دیگر، می توانید از افزونه هایی مانند Really Simple SSL برای اعمال HTTPS برای همه URL ها استفاده کنید.

برای جزئیات بیشتر، آموزش ما در مورد نحوه رفع خطای محتوای مختلط در وردپرس را ببینید.

مرحله 3: تداخل پوسته را بررسی کنید

ما متوجه شدیم که تداخل پوسته ها نیز یکی از دلایل رایج شکستن CSS در ناحیه مدیریت وردپرس است.

در اینجا نحوه شناسایی و حل مسائل قالب آمده است.

به یک پوسته پیش‌فرض بروید

برای اینکه ببینید آیا قالب وردپرس شما باعث خرابی CSS شده است یا خیر، ابتدا باید به یک قالب پیش فرض وردپرس بروید.

به داشبورد وردپرس خود بروید و به صفحه نمایش » پوسته بروید.

در اینجا، شما باید یک پوسته پیش فرض وردپرس مانند Twenty Twenty-Four را فعال کنید.

توجه: اگر هیچ تم پیش‌فرضی نصب نکرده‌اید، می‌توانید با کلیک بر روی دکمه «افزودن تم جدید» در بالا، یکی را نصب کنید. تم های پیش فرض وردپرس که به نام سال های میلادی نامگذاری شده اند را نصب کنید.

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

اگر CSS اکنون به درستی بارگیری می شود، پس مشکل از موضوع قبلی شماست.

رفع تضاد موضوع

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

به نمایش » پوسته بروید، موضوع خود را انتخاب کنید و روی گزینه Update now کلیک کنید.

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

به طور خاص، شما می خواهید هر CSS اضافی یا کد سفارشی موجود در فایل functions.php را برای اشتباهات بررسی کنید.

به عنوان آخرین راه حل، برای پشتیبانی با توسعه دهنده تم تماس بگیرید یا به موضوع دیگری تغییر دهید.

توصیه می کنیم از WPCode برای جلوگیری از این نوع اشتباهات در آینده استفاده کنید. این بهترین افزونه قطعه کد وردپرس است که به شما امکان می دهد تمام CSS سفارشی خود را در یک مکان مدیریت کنید و نیازی به ویرایش فایل functions.php ندارد.

در اینجا برخی از مزایای WPCode آورده شده است:

می توانید کد CSS سفارشی خود را راحت تر ذخیره و مدیریت کنید.
WPCode شامل بررسی های داخلی برای جستجوی خطاها است.
هنگام تعویض تم CSS سفارشی خود را از دست نمی دهید.

نسخه رایگان WPCode نیز با ویژگی های محدود موجود است.

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

   برای یادگیری حرفه ای تر css میتوانید به دوره جامع آموزش css کدروز نگاه بندازید.

مرحله 4: رفع مشکلات حافظه پنهان

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

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

برای رفع این مشکل، ابتدا باید کش مرورگر خود را پاک کنید.

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

این حافظه پنهانی است که توسط افزونه کش وردپرس شما ایجاد می شود. ما یک آموزش دقیق در مورد نحوه پاک کردن کش در افزونه های مختلف کش وردپرس داریم.

مرحله 5: رفع مشکلات CDN

اگر از یک سرویس شبکه تحویل محتوا (CDN) استفاده می‌کنید، گاهی اوقات یک پیکربندی نادرست می‌تواند باعث ایجاد مشکلات CSS در قسمت مدیریت وردپرس شود.

در اینجا نحوه شناسایی و حل این مشکلات آمده است.

ابتدا باید از ابزار Inspect در مرورگر خود استفاده کنید و به تب “کنسول” بروید. در اینجا، اگر فایل‌های CSS شما مسدود شده یا یافت نشد، خطاهایی را مشاهده خواهید کرد.
خطاهای CDN باعث خرابی CSS می شود

در مرحله بعد، باید به وب سایت خدمات CDN خود بروید و وارد داشبورد حساب خود شوید.

از اینجا به بخش Caching » Configuration بروید و روی دکمه Purge Everything در زیر گزینه Purge Cache کلیک کنید.

توجه: ما اسکرین شات Cloudflare CDN را به شما نشان می دهیم. با این حال، شما به راحتی قادر خواهید بود گزینه پاکسازی کش را در تمام ارائه دهندگان CDN پیدا کنید.

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

اگر رفع نشد، به مرحله بعد ادامه دهید.

مرحله 6: رفع مجوزهای فایل نادرست

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

در اینجا نحوه بررسی و رفع مجوزهای فایل آورده شده است.

ابتدا باید با استفاده از FTP به سایت وردپرس خود متصل شوید.

پس از اتصال، باید به دایرکتوری ریشه وردپرس خود بروید. این دایرکتوری حاوی پوشه‌های wp-admin، wp-includes و wp-content است.

اکنون روی پوشه wp-admin کلیک راست کرده و گزینه File Permissions یا Properties را انتخاب کنید.

ابتدا باید مطمئن شوید که همه دایرکتوری ها روی 755 تنظیم شده اند.

اگر اینطور نیست، مجوزها را تغییر دهید و آنها را به صورت بازگشتی در همه زیر شاخه ها اعمال کنید.

اکنون می توانید این فرآیند را تکرار کنید، مجوزها را روی 644 تنظیم کنید و آنها را به صورت بازگشتی فقط برای همه فایل ها اعمال کنید.

برای جزئیات بیشتر، به آموزش ما در مورد نحوه تنظیم مجوزهای فایل در وردپرس مراجعه کنید.

پس از آن، از قسمت مدیریت بازدید کنید تا ببینید آیا مشکل CSS شکسته حل شده است یا خیر. اگر هنوز وجود دارد، باید به مرحله بعدی بروید.

مرحله 7: فایل های خراب را تعمیر کنید

فایل های خراب می توانند باعث خرابی CSS در قسمت مدیریت وردپرس شوند.

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

در اینجا نحوه تعمیر یا جایگزینی فایل های آسیب دیده آمده است.

ابتدا باید یک نسخه جدید از وردپرس را از WordPress.org دانلود کنید.

سپس فایل ZIP دانلود شده را در رایانه خود استخراج کنید.

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

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

پس از اتمام، می توانید از قسمت مدیریت وردپرس خود بازدید کنید تا ببینید آیا این مشکل CSS شکسته را حل کرده است یا خیر.

اگر این مشکل را حل نکرد، وقت آن است که به مرحله بعدی بروید.

مرحله 8: افزونه های مرورگر را بررسی کنید

پسوندهای مرورگر، به ویژه آنهایی که مربوط به محتوا و مسدود کردن تبلیغات هستند، می توانند در نحوه نمایش CSS در قسمت مدیریت وردپرس اختلال ایجاد کنند.

در اینجا نحوه شناسایی و حل مشکلات ناشی از افزونه های مرورگر آمده است.

ابتدا باید مرورگر خود را باز کنید و به منوی افزونه ها/افزونه ها بروید.

به طور موقت همه برنامه های افزودنی، به ویژه مسدود کننده های تبلیغات و افزونه های امنیتی را غیرفعال کنید.

به سادگی می توانید افزونه ها را غیرفعال کنید یا به طور کامل آنها را حذف کنید.

پس از اتمام، می توانید به قسمت مدیریت وردپرس بروید تا ببینید آیا مشکل CSS حل شده است یا خیر.

اگر مشکل حل شد، باید دریابید که کدام افزونه باعث این مشکل شده است.

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

پس از شناسایی برنامه‌های افزودنی مشکل، می‌توانید تنظیمات برنامه افزودنی را بررسی کنید تا از مسدود کردن CSS مدیریت وردپرس جلوگیری کنید.

اگر کار نکرد، پس سعی کنید یک افزونه جایگزین پیدا کنید.

نکات عیب یابی

امیدواریم که مراحل بالا مشکلات CSS در قسمت مدیریت وردپرس را حل کند. با این حال، اگر هیچ یک از مراحل بالا جواب نداد، می توانید این نکات اضافی را امتحان کنید:

به روز رسانی پیوندهای ثابت:

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

اسکن بدافزار:

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

امیدواریم این مقاله به شما کمک کرده باشد که مشکل CSS خراب در قسمت مدیریت وردپرس را برطرف کنید.

منبع : wpbeginner