محتوای آموزشی وبلاگ نت‌آرام
رنگ دکمه سایت را در CSS عوض کرده‌اید، اما بعد از ذخیره هنوز رنگ قبلی دیده می‌شود. ممکن است تغییر منتشر نشده باشد، انتخابگر به آن دکمه نخورد، فایل CSS بارگذاری نشود یا قانون دیگری بر آن غلبه کند. پاک کردن همه کش‌ها گاهی مفید است، اما برای هر چهار حالت راه‌حل نیست.
در این آموزش یک دکمه آزمایشی را قدم‌به‌قدم دنبال می‌کنیم تا بفهمیم کدام قسمت مشکل دارد. می‌توانید همین روش را برای اندازه متن، فاصله یا ظاهر یک بخش دیگر هم استفاده کنید. بهتر است ابتدا در نسخه آزمایشی سایت کار کنید؛ CSS می‌تواند ظاهر صفحه‌های دیگر و تجربه مشتریان را تغییر دهد.
اول بدانیم قرار است دقیقاً چه چیزی تغییر کند
نشانی صفحه، نام بخشی که می‌خواهید تغییر دهید، محل نوشتن CSS و ظاهر مورد انتظار را یادداشت کنید. مثلاً: «در صفحه تماس، رنگ پس‌زمینه دکمه آزمایشی باید فیروزه‌ای شود». صفحه را پس از ذخیره در یک پنجره خصوصی هم باز کنید تا پیش‌نمایش و نسخه عمومی را با هم اشتباه نگیرید.
اگر کل متن و تصویر صفحه برای مدیر تازه است اما برای مهمان قدیمی مانده، اول راهنمای تفاوت نمایش مدیر و بازدیدکننده را ببینید. راهنمای حاضر زمانی مفید است که می‌خواهید بفهمید یک قانون ظاهری مشخص چرا به عنصر موردنظر نمی‌رسد یا چرا قانون دیگری آن را کنار می‌زند.
قدم اول: CSS را کجا نوشته‌اید و واقعاً ذخیره شده است؟
در قالب‌های کلاسیکی که از سفارشی‌ساز پشتیبانی می‌کنند، مسیر معمول نمایش ← سفارشی‌سازی ← CSS اضافی است. بعد از ویرایش، دکمه انتشار را بزنید؛ دیدن تغییر در پیش‌نمایش پیش از انتشار کافی نیست. اگر این منو را نمی‌بینید، ممکن است قالب شما بلوکی باشد یا دسترسی حساب محدود شده باشد.
در بسیاری از قالب‌های بلوکی، مسیر از نمایش ← ویرایشگر ← استایل‌ها و سپس منوی سه‌نقطه و گزینه CSS اضافی می‌گذرد. محل گزینه با نسخه وردپرس و قالب فرق می‌کند. راهنمای رسمی استایل‌های وردپرس تفاوت CSS سراسری و CSS مخصوص یک نوع بلوک را نشان می‌دهد. در بخش مخصوص یک نوع بلوک ممکن است فقط نوشتن ویژگی و مقدار لازم باشد؛ کد کامل دارای انتخابگر را بدون توجه به نوع ویرایشگر جای‌گذاری نکنید.
اگر کد را در تنظیمات صفحه‌ساز یا افزونه‌ای نوشته‌اید، اول ذخیره همان صفحه و فعال بودن افزونه را بررسی کنید. اگر کد در فایل قالب است، بدانید ویرایش مستقیم فایل قالب اصلی ممکن است با به‌روزرسانی از بین برود؛ قبل از تغییر فایل از آن نسخه نگه دارید و از روش توصیه‌شده سازنده یا قالب فرزند استفاده کنید.
قدم دوم: یک انتخابگر قابل شناسایی بسازید
CSS باید بداند روی کدام عنصر اعمال شود. نقطه قبل از نام، در انتخابگر CSS معمولاً به معنی کلاس است. برای یک آزمایش کنترل‌شده، در ویرایشگر بلوکی وردپرس یک دکمه آزمایشی بسازید و در تنظیمات پیشرفته همان بلوک، در کادر کلاس CSS اضافی، فقط نام زیر را بنویسید؛ بدون نقطه:
کد / دستورnetaram-test-button
سپس در بخش CSS سراسری مناسب قالب، این نمونه را قرار دهید و صفحه و تغییر CSS را منتشر کنید:
کد / دستور.netaram-test-button {
outline: 3px solid #00a99d;
}
در این مثال، نقطه قبل از نام می‌گوید عنصری با این کلاس انتخاب شود و outline یک خط دور آن رسم می‌کند. این فقط آزمایش است: بسته به ساختار بلوک، خط ممکن است دور ظرف دکمه دیده شود، نه دور خود متن یا لینک داخل آن. اگر قالب یا افزونه همین کلاس را جای دیگری به کار ببرد، آن بخش هم ممکن است تحت تأثیر قرار بگیرد؛ برای آزمایش از کلاس یکتای خودتان استفاده کنید.
اگر خط را می‌بینید، قانون به دست‌کم یک عنصر با آن کلاس رسیده است. حالا می‌توانید با شناخت ساختار همان دکمه، قانون دلخواه و محدودتر را بنویسید. اگر خط دیده نمی‌شود، هنوز نمی‌دانیم علت کش است یا انتخابگر یا فایل؛ به قدم بعد بروید. پس از آزمایش، کلاس و قانون موقت را حذف و صفحه را دوباره ذخیره کنید.
قدم سوم: در مرورگر ببینید کلاس واقعاً روی کدام بخش است
در رایانه، صفحه منتشرشده را در Chrome یا Edge باز کنید. روی دکمه راست‌کلیک کنید و Inspect / بازرسی را بزنید. بخش Elements ابزار توسعه‌دهنده باز می‌شود. با حرکت نشانگر روی ردیف‌های HTML، بخش متناظر صفحه روشن می‌شود. عنصری را پیدا کنید که واقعاً کلاس آزمایشی شما را دارد؛ ممکن است کلاس روی ظرف دکمه باشد و خود لینک درون آن قرار گرفته باشد.
اگر کلاس در صفحه منتشرشده نیست، ابتدا همان بلوک و صفحه درست را ویرایش و منتشر کنید. مطمئن شوید نام کلاس را بدون نقطه در کادر وردپرس گذاشته‌اید و اشتباه تایپی ندارد. اگر کلاس روی ظرف است اما می‌خواهید رنگ خود لینک را تغییر دهید، انتخابگر باید ساختار واقعی همان قالب را هدف بگیرد. نام کلاس داخلی در همه قالب‌ها یکسان نیست؛ آن را از صفحه خودتان بخوانید، نه از یک آموزش نامرتبط.
در پنل Styles کنار Elements، قانون مربوط را جست‌وجو کنید. این قسمت نشان می‌دهد کدام قوانین به عنصر انتخاب‌شده مربوط‌اند. اگر عنصر نادرستی را انتخاب کنید، طبیعی است قانون دکمه را نبینید. توضیح تصویری Chrome DevTools درباره قوانین بی‌اثر و لغوشده برای آشنایی بیشتر مفید است.
اگر قانون را می‌بینید اما روی آن خط کشیده شده است
در پنل Styles، خط‌خوردن یک ویژگی معمولاً یعنی آن مقدار اعمال نشده است. ممکن است یک قانون دیگر برنده شده باشد یا مقدار نامعتبر باشد؛ کنار خط ممکن است علامت هشدار ببینید. در بخش Computed مقدار نهایی همان ویژگی و گاهی منبع آن را نگاه کنید.
برای مثال، اگر برای رنگ پس‌زمینه دکمه دو قانون وجود دارد، قانون قالب، صفحه‌ساز، حالت موبایل یا استایل داخلی عنصر ممکن است بر نتیجه اثر بگذارد. ابتدا قانون برنده و عنصر دقیق را پیدا کنید. بعد در تنظیمات همان صفحه‌ساز یا قالب، اگر گزینه مناسب وجود دارد، رنگ را همان‌جا اصلاح کنید. در غیر این صورت انتخابگر درست و محدود برای همان بخش بنویسید و اثر آن را در نسخه آزمایشی ببینید.
به همه خط‌ها عبارت important اضافه نکنید. این کار ممکن است تداخل را پنهان کند و تغییر ظاهر در آینده را سخت‌تر کند. همچنین ویرایش داخل DevTools معمولاً موقتی و فقط روی مرورگر شماست؛ برای ماندگار شدن، اصلاح تأییدشده را در محل مناسب وردپرس ثبت و منتشر کنید.
اگر قانون اصلاً دیده نمی‌شود
اول مطمئن شوید عنصر درست را انتخاب کرده‌اید و قانون از نظر نگارشی صحیح است. جا افتادن یک آکولاد، نقطه یا دونقطه ممکن است باعث نادیده گرفتن بخشی از CSS شود. در کادر CSS اضافی، پیغام خطا یا تغییر رنگ کد را ببینید و با نمونه کوتاه و سالم آزمایش کنید. اگر پیش از قانون جدید، یک بلوک باز مانده باشد، مشکل ممکن است از همان خط قبلی باشد.
اگر CSS در فایل جداگانه قرار دارد، در ابزار مرورگر به زبانه Network بروید، صفحه را تازه کنید و فهرست CSS را ببینید. روی فایل موردنظر بزنید و نشانی و وضعیت پاسخ را بررسی کنید:
- پاسخ 404 معمولاً یعنی فایل در نشانی درخواست‌شده پیدا نشده است؛ مسیر و نام فایل را با محل واقعی آن تطبیق دهید.
- پاسخ 403 می‌تواند به محدودیت دسترسی مربوط باشد؛ تنظیم مجوز یا قانون امنیتی باید با صاحب سرویس بررسی شود، نه با باز کردن دسترسی همه فایل‌ها.
- پاسخ 200 به‌تنهایی ثابت نمی‌کند محتوای فایل همان نسخه تازه است؛ محتوای پاسخ و نشانی کامل، از جمله نسخه فایل، را هم ببینید.
- اگر اصلاً در فهرست نیست، ممکن است فایل در آن صفحه بارگذاری نشده باشد یا مسیر بررسی شما اشتباه باشد. از توسعه‌دهنده قالب بخواهید روش بارگذاری را با مستندات قالب تطبیق دهد.
در قالب فرزند، وجود فایل style.css به‌تنهایی همیشه تضمین نمی‌کند مرورگر آن را در صفحه بارگذاری کند. روش بارگذاری به قالب والد و نوع قالب بستگی دارد؛ در بعضی قالب‌ها فایل‌ها از قبل بارگذاری می‌شوند و افزودن دوباره کد می‌تواند نسخه تکراری بسازد. مستندات رسمی قالب فرزند وردپرس این تفاوت را توضیح می‌دهد.
کش و نمایش موبایل را در جای درست بررسی کنید
اگر پاسخ فایل، CSS قدیمی است، ابتدا در پنجره خصوصی تازه آزمایش کنید. اگر افزونه کش یا CDN دارید، طبق راهنمای همان سرویس نسخه مربوط به همان صفحه یا فایل را پاک کنید و دوباره پاسخ را ببینید. پس از تغییر کد قالب، نسخه‌دهی درست فایل می‌تواند کمک کند مرورگر فایل تازه را بخواهد؛ حذف بی‌دلیل پارامتر نسخه یا افزودن عدد تصادفی دائمی، راه‌حل استانداردی برای همه سایت‌ها نیست.
اگر تغییر فقط روی موبایل دیده نمی‌شود، عرض صفحه و قوانین شرطی مخصوص اندازه صفحه را در Styles بررسی کنید. ممکن است یک قانون ویژه نمایش کوچک بر قانون دیگر غلبه کرده باشد یا عنصر موبایل در ساختار قالب با نسخه دسکتاپ فرق کند. با حالت نمایش دستگاه در ابزار مرورگر شروع کنید و در پایان روی یک گوشی واقعی هم آزمایش بگیرید.
نتیجه را در صفحه واقعی تأیید کنید
پس از اصلاح، قانون موقت را حذف کنید و ظاهر موردنظر را در نشانی منتشرشده، در مرورگر مهمان و روی دسکتاپ و موبایل ببینید. اگر قانون سراسری نوشته‌اید، چند صفحه مرتبط را هم نگاه کنید تا ناخواسته دکمه‌های دیگر تغییر نکرده باشند. در فروشگاه، سبد خرید و تسویه‌حساب را نیز با یک سفارش آزمایشی بدون پرداخت واقعی بررسی کنید.
اگر هنوز مشکل باقی است، نشانی دقیق صفحه، نام قالب و افزونه، محل قرار دادن CSS، تصویر عنصر انتخاب‌شده در Inspect و وضعیت پاسخ فایل را برای توسعه‌دهنده بفرستید. برای آشنایی با امکانات میزبانی سایت نیز صفحه هاست وردپرس نت‌آرام را ببینید.
برچسب‌ها:
اشتراک‌گذاری:
لینکدینتلگرامایکس
مقاله قبلی
مقاله قبلی وجود ندارد.
مقاله بعدی
دیدگاه‌ها (۰)
دیدگاه‌های تاییدشده و پاسخ‌های تیم نت‌آرام