استفاده از حالت شب در وردپرس

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

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

تصویر(۱)

حالت شب در وردپرس چیست؟

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

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

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

تصویر(۲)

و تصویر زیر همان سایت در حالت شب و تاریک است:

تصویر(۳)

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

چرا باید حالت شب در وردپرس فعال گردد؟

دلایل زیادی برای ارائه گزینه دارک مود سایت شما وجود دارد. این دلایل می‌توانند از ترجیحات شخصی کاربران تا بهبود دسترسی پذیری و ایجاد تجربه ای راحت‌تر برای بازدیدکنندگان را شامل شوند. در ادامه به برخی از این مزایا پرداخته خواهد شد:

۱- حالت شب در وردپرس، دسترسی پذیری سایت را بهبود می‌دهد

یکی از مزایای مهم ارائه دارک مود سایت این است که می‌تواند به افزایش دسترسی‌پذیری سایت کمک کند. دسترسی‌پذیری بدان معنا است که امکان استفاده از وب‌سایت برای بیشترین تعداد افراد ممکن، مانند افراد دارای معلولیت وجود داشته باشد.
برای مثال، اطمینان از این که افرادی با صفحه‌خوان‌های کمکی، بتوانند تجربه کاربری خوبی در سایت داشته باشند، یکی از جنبه های دسترسی‌پذیری است. این کار از نظر اخلاقی گامی مثبت برای بهبود تجربه کاربران می باشد و در بسیاری از کشورها نیز یک الزام قانونی به شمار می‌رود. به عنوان نمونه، قوانین “آمریکایی‌های دارای معلولیت” (ADA) و «قانون دسترسی‌پذیری اروپا» در این زمینه وجود دارند.
اگرچه ارائه حالت تاریک به طور مستقیم در دستورالعمل‌های دسترسی‌پذیری محتوای وب (WCAG) ذکر نشده است اما می‌تواند در بهبود دسترسی‌پذیری به روش‌های دیگر مؤثر باشد.

برخی از جنبه های مهمی که حالت شب در وردپرس می‌تواند دسترسی‌پذیری را بهبود بخشد:

• افزایش کنتراست برای محتوای متنی: حالت شب در وردپرس معمولاً تضاد قوی‌تری بین رنگ پس‌زمینه و رنگ متن ایجاد می‌کند. این موضوع می‌تواند خواندن و درک محتوا را برای افرادی که مشکلات بینایی دارند، آسان‌تر کند. کنتراست بالا یکی از الزامات دستورالعمل‌های دسترسی‌پذیری محتوای وب (WCAG) است؛ بنابراین ارائه دارک مود می‌تواند به طور غیرمستقیم جهت رعایت این استاندارد کمک کند.
• درک آسان‌تر برای برخی بازدیدکنندگان: افرادی که دچار نارساخوانی (dyslexia) یا اختلالات پردازش بصری هستند، ممکن است در خواندن متن‌های سیاه روی پس‌زمینه سفید مشکل داشته باشند. حالت شب در وردپرس می‌تواند تجربه بهتری برای این گروه از کاربران فراهم کند.
• کاهش مشکلات برای افراد مبتلا به میگرن: اغلب به افرادی که دچار میگرن هستند توصیه می‌شود که از نورهای روشن دوری کنند. ارائه یک تجربه کاربری تاریک می‌تواند به این بازدیدکنندگان کمک کند تا بدون تحریک علائم میگرن، از سایت شما استفاده نمایند.

با این حال، حالت شب در وردپرس همیشه بهترین گزینه برای دسترسی‌پذیری نیست. برای مثال، افرادی که دچار آستیگماتیسم هستند ممکن است در خواندن متن‌های روشن روی پس‌زمینه تاریک دچار مشکل شوند زیرا این ترکیب می‌تواند باعث ایجاد یک اثر تاری به نام «هاله نور (Halation)» شود که به همین دلیل، ارائه گزینه ای برای انتخاب از بین حالت روشن و تاریک توسط کاربران می‌تواند مزیت بزرگی باشد.

حالت شب در وردپرس می تواند برای بازدیدکنندگان شما سالم تر باشد

ارائه حالت شب سایت می‌تواند از چند جهت به ایجاد یک تجربه سالم‌تر برای بازدیدکنندگان کمک کند:

• کمک به بهبود کیفیت خواب: حالت شب در وردپرس می‌تواند به کاربران در رعایت بهداشت خواب کمک کند، خصوصا زمانی که نزدیک به زمان خواب در حال وبگردی هستند. متخصصان خواب توصیه می‌کنند که افراد طی ساعات قبل خواب از قرار گرفتن در معرض نورهای روشن پرهیز نمایند.
  هرچه وب‌سایت شما روشن‌تر باشد، تأثیر منفی بیشتری بر کیفیت خواب بازدیدکنندگان دارد. با ارائه دارک مود سایت، می‌توانید به کاربران اجازه دهید بدون تأثیر زیاد بر برنامه خواب خود، از سایت وردپرسی شما استفاده کنند.
• هماهنگی خودکار با تنظیمات سیستم‌عامل: بسیاری از ابزارهای پیاده‌سازی‌ حالت شب در وردپرس، این قابلیت را دارند که به طور خودکار بر اساس تنظیمات سیستم‌عامل بازدیدکننده فعال شوند. اگر کاربری سیستم خود را طوری تنظیم کرده باشد که نزدیک به زمان خواب وارد دارک مود شود، وب‌سایت شما نیز می‌تواند مطابق با همان برنامه تغییر نماید.
• کاهش خستگی چشم: Dark mode می‌تواند باعث کاهش خستگی چشم شود. برای مثال، در مطالعه‌ای که توسط دانشگاه فلوریدای مرکزی (UCF) انجام شد، محققان دریافتند که خستگی بصری شرکت‌کنندگان به طور قابل توجهی در حالت تاریک کمتر از حالت روشن بود.
  علاوه بر این، شرکت‌کنندگان در حالت شب در وردپرس دقت بصری بالاتری داشتند و آزمون‌های مطالعه را با خطاهای کمتری نسبت به حالت روشن انجام دادند.

حالت تاریک می‌تواند مصرف انرژی را کاهش دهد

اگرچه این مزیت برای همه کاربران به یک اندازه قابل توجه نیست اما یکی از فواید دیگر حالت شب در وردپرس، کاهش مصرف انرژی در نمایشگرهای OLED است. این نمایشگرها می‌توانند برخی پیکسل‌ها را خاموش کنند، در نتیجه برای نمایش رنگ‌های تاریک به انرژی کمتری نیاز دارند.
میزان صرفه‌جویی در مصرف انرژی با توجه به تنظیمات روشنایی صفحه نمایش متفاوت است اما به طور میانگین در روشنایی کم، صرفه‌جویی می‌تواند بین ۳ الی ۹ درصد و در روشنایی بالا، ۳۹ تا ۴۷ درصد باشد. این آمار از مطالعه‌ای در دانشگاه پردو (Purdue University) به دست آمده که مصرف انرژی صفحه نمایش را در سطوح مختلف روشنایی بررسی کرده است.

برخی کاربران Dark mode را صرفاً به دلیل سلیقه شخصی ترجیح می‌دهند

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

نحوه افزودن حالت شب: ۴ روش مختلف

اگر تصمیم گرفته‌اید حالت تاریک را به سایت وردپرسی خود اضافه کنید، چند روش ساده برای این کار وجود دارد:

1. استفاده از افزونه‌های وردپرس
2. انتخاب قالبی که از حالت تاریک پشتیبانی کند.
3. استفاده از یک کتابخانه جاوا اسکریپت مخصوص
4. کدنویسی دستی و سفارشی

۱. استفاده از افزونه دارک مود وردپرس

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

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

تصویر(۴)

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

چند افزونه دارک مود وردپرس رایگان دیگر:

• WP Dark Mode
• Dracula Dark Mode
• Dark Mode Toggle
• DarkMySite

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

تصویر(۵)

۲. استفاده از قالبی که حالت تاریک را پشتیبانی کند

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

۳. استفاده از کتابخانه‌های جاوا اسکریپت برای دارک مود

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

کتابخانه‌های مختلفی برای این کار وجود دارند اما محبوب‌ترین آنها عبارتند از:

• darkmode.js
• drkmd.js

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

darkmode.js

کتابخانه darkmode.js توسط VanillaJS و ویژگی CSS با نام mix-blend-mode، حالت شب در وردپرس را بدون نیاز به تنظیمات پیچیده فعال می‌کند. به صورت پیش‌فرض، یک سوییچ شناور در صفحه اضافه می‌شود که کاربران می‌توانند از آن برای تغییر بین حالت روشن و تاریک استفاده کنند. البته می‌توانید این ابزارک را غیرفعال کرده و روش سفارشی خود را پیاده‌سازی کنید.

در اولین بازدید کاربر، این کتابخانه حالت نمایش را بر اساس تنظیمات سیستم‌عامل کاربر انتخاب می‌نماید و همچنین از فرآیند ذخیره سازی محلی پشتیبانی می‌کند تا ترجیحات کاربران برای بازدیدهای بعدی ذخیره شود. پیش‌نمایش عملکرد این کتابخانه در صفحه رسمی darkmode.js قابل مشاهده است. از آنجا که این کتابخانه mix-blend-mode را استفاده می‌کند و نیازی به اضافه کردن دستورات CSS جدید ندارد، راه‌اندازی آن تقریباً به صورت plug-and-play انجام می‌شود.

drkmd.js

کتابخانه drkmd.js رویکرد متفاوتی دارد. به جای استفاده از mix-blend-mode برای ایجاد خودکار حالت تاریک، کمک می کند که دستورات CSS مخصوص حالت شب در وردپرس را خودتان تعریف کنید. سپس می‌توانید این دستورات را با استفاده از کلاس‌های theme-light و theme-dark به وب‌سایت اضافه نمایید.

این کتابخانه امکان اضافه کردن سوییچ دلخواه جهت تغییر بین حالت‌ها را نیز فراهم می‌کند. برای این کار کافی است ویژگی data-drkmd-attach را به تگ اسکریپت اضافه کنید.

علاوه بر این، drkmd.js قابلیت‌های مفید دیگری از جمله شناسایی خودکار تنظیمات حالت نمایش در سیستم‌عامل کاربر و ذخیره انتخاب‌های کاربر برای استفاده در بازدیدهای بعدی را نیز ارائه می‌دهد.

۴. استفاده از کدنویسی اختصاصی

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

یکی از گزینه‌ها این است که jQuery را استفاده کنید. به این صورت که دستورات CSS مخصوص هر دو حالت را تعریف می‌کنید و سپس یک دکمه یا سوییچ برای فعال کردن حالت شب در وردپرس اضافه می‌نمایید. وقتی کاربر این سوییچ را فعال کند، می‌توانید با استفاده از جاوا اسکریپت تعیین کنید که کدام کلاس‌های CSS اعمال شوند. این کار با استفاده از متدهای ()hasClass()، addClass و ()removeClass در jQuery انجام می‌شود.

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

• شناسایی خودکار حالت نمایش ترجیحی کاربر بر اساس تنظیمات سیستم‌عامل
• ذخیره ترجیحات کاربر و فعالسازی خودکار حالت درست در بازدیدهای بعدی

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

نحوه افزودن حالت شب در پیشخوان وردپرس 

تا اینجا روی اضافه کردن دارک مود به بخش فرانت‌اند وب‌سایت وردپرسی تمرکز شده اما شاید بخواهید حالت تاریک را به پیشخوان وردپرس نیز اضافه کنید تا مدیریت سایت در یک رابط کاربری بهتر (user-friendly) انجام شود.

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

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

اگر می‌خواهید دقیقاً پیشخوان وردپرس پیشفرض را حفظ کنید اما گزینه حالت شب را اضافه نمایید، می‌توانید از افزونه Dark Mode for WP Dashboard استفاده کنید که ظاهر آن مشابه تصویر زیر خواهد بود.

تصویر(۶)

برخی از افزونه‌های حالت تاریک دیگر مانند افزونه WP Dark Mode نیز قابلیت فعالسازی حالت تاریک در پیشخوان وردپرس را دارند. اگر می‌خواهید یک تجربه کاملاً جدید از پیشخوان وردپرس همراه با گزینه حالت تاریک داشته باشید می‌توانید افزونه‌های زیر را نیز امتحان کنید:

• UiPress
• WP Adminify
• CommandUI

جمع‌بندی

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

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

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