learn

دارک مود وردپرس؛ تنظیم حالت تاریک سایت و پیشخوان

حالت تاریک باید با رنگ برند، خوانایی و انتخاب کاربر هماهنگ باشد؛ سیاه‌کردن خودکار همهٔ عناصر کافی نیست.

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

دارک مود وردپرس را کجا پیاده کنیم؟

اگر قالب امکان تغییر حالت دارد، افزودن افزونهٔ دوم ممکن است رنگ‌ها و وضعیت انتخاب‌شده را با هم درگیر کند. برای طراحی اختصاصی نیز می‌توان پالت‌ها را با CSS پیاده کرد. ویژگی prefers-color-scheme ترجیح روشن یا تاریک سیستم کاربر را در دسترس CSS قرار می‌دهد.

برای راه‌اندازی بدون توسعهٔ اختصاصی، WP Dark Mode از WPPOOL یکی از ابزارهای موجود است. نسخهٔ رسمی و سازگاری آن را بررسی کنید. استفاده از حالت تاریک یک ترجیح طراحی است؛ تضمین بهبود سئو، سلامتی چشم یا کاهش مصرف باتری برای همهٔ کاربران نیست.

۱. حالت صفحات عمومی را تنظیم کنید

پس از نصب و فعال‌سازی، به WP Dark Mode ← Settings ← Controls ← Frontend Dark Mode بروید. طبق راهنمای فعلی سازنده، روشن‌کردن Enable Frontend Dark Mode قابلیت را فعال می‌کند و رفتار شروع جدا انتخاب می‌شود.

Default Light Mode سایت را ابتدا روشن نشان می‌دهد، Default Dark Mode ابتدا تاریک است و Use System Settings از ترجیح دستگاه پیروی می‌کند. فعال‌بودن قابلیت به‌تنهایی به معنی تاریک‌شدن اجباری برای همه نیست. گزینه‌های زمان‌بندی و ظاهر را با امکانات نسخهٔ خود تطبیق دهید.

۲. اختیار تغییر حالت را به کاربر بدهید

در Customization ← Switch Settings، گزینهٔ Display Floating Switch را برای دکمهٔ شناور بررسی کنید. محل آن نباید روی دکمهٔ خرید، چت یا ناوبری موبایل قرار گیرد. عنوان قابل‌فهم و حالت تمرکز قابل‌دید برای استفاده با صفحه‌کلید لازم است.

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

۳. رنگ‌ها و تصاویر را بازبینی کنید

پس‌زمینه، متن، لینک، دکمه، کادر فرم و پیام خطا را جدا ببینید. رنگ برند را حفظ کنید، اما ترکیب رنگ کم‌کنتراست را فقط به دلیل هماهنگی ظاهری نپذیرید. طبق راهنمای کنتراست WCAG، متن معمول در سطح AA عموماً نسبت حداقل ۴٫۵ به ۱ و متن بزرگ حداقل ۳ به ۱ نیاز دارد.

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

۴. پیشخوان و ویرایشگر را جدا فعال کنید

رنگ‌بندی داخلی حساب وردپرس با تاریک‌شدن کامل همهٔ بخش‌های مدیریت یکسان نیست. در راهنمای فعلی پیشخوان WP Dark Mode، بخش Admin Panel Dark Mode گزینه‌های مستقلی برای داشبورد، ویرایشگر بلوکی و ویرایشگر کلاسیک دارد.

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

آزمون نهایی در حالت روشن و تاریک

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

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

مطالعهٔ مرتبط

بازبینی فنی: ۱۳ آبان ۱۴۰۵. تاریخ انتشار اولیه و نشانی قبلی حفظ شده‌اند.

مطالب مرتبط

ارسال نظر

فهرست مطالب