در سالهای اخیر، حالت تاریک یا Dark Mode به یکی از موضوعات محبوب در دنیای طراحی سایت تبدیل شده است. بسیاری از کاربران ترجیح میدهند هنگام کار با سایتها، بهخصوص در ساعات شب، از رابطهای کاربری تیرهتر استفاده کنند. به همین دلیل میخواهیم آموزش اضافه کردن حالت تاریک وردپرس را یاد بگیریم.
استفاده از دارک مود فقط به دلیل ظاهر مدرن آن نیست. بررسیها نشان میدهند که این قابلیت میتواند در شرایط نوری کم، فشار واردشده به چشم کاربران را کاهش دهد و در برخی دستگاههای موبایل با نمایشگرهای OLED به مصرف بهینهتر باتری کمک کند.
بسیاری از صاحبان سایت تصور میکنند اضافه کردن چنین قابلیتی به دانش فنی پیچیده نیاز دارد، اما ابزارهای جدید وردپرس این فرآیند را بسیار سادهتر کردهاند. امروزه با کمک افزونهها و تنظیمات آماده، میتوان بدون کدنویسی حرفهای، حالت تاریک را به بیشتر سایتهای وردپرسی اضافه کرد.
در این مقاله، روشی ساده و کاربردی برای فعال کردن Dark Mode در سایت وردپرس را بررسی میکنیم؛ روشی که روی قالبها و ساختارهای مختلف تست شده و میتواند بدون دردسر، تجربه کاربری سایت را بهبود دهد.
چرا باید حالت تاریک را به سایت وردپرسی اضافه کنیم؟
بسیاری از کاربران به دلیل راحتی بیشتر هنگام مطالعه، استفاده از حالت تاریک را ترجیح میدهند. پسزمینههای تیره باعث میشوند میزان نور شدید منتشرشده از صفحه کاهش پیدا کند و کاربر هنگام کار طولانیمدت با سایت، احساس خستگی کمتری داشته باشد.
برخی از مهمترین مزایای افزودن دارک مود به وردپرس عبارتاند از:
- مطالعه راحتتر محتوا
- بهبود دسترسیپذیری سایت
- هماهنگی با ترجیح کاربران
- ایجاد تجربهای مدرنتر
- مصرف بهینهتر باتری در برخی دستگاهها
با فعال کردن Dark Mode در سایت وردپرس، کاربران میتوانند هر زمان که بخواهند بین حالت روشن و تاریک جابهجا شوند. این کار باعث میشود برای استفاده از حالت تاریک، نیازی به افزونههای مرورگر یا تغییر تنظیمات دستگاه خود نداشته باشند و کنترل بیشتری روی تجربه استفاده از سایت داشته باشند.
قبل از فعال کردن دارک مود، به Performance سایت توجه کنید
ممکن است طراح رابط کاربری سایت، به گزینههایی دربارۀ حالت تاریک در استایل گاید اشاره کرده باشد. یکی از راههای اجرای آن، استفاده از افزونههاست. اما هر افزونهای که به ساختار نمایش سایت اضافه میشود، میتواند روی عملکرد کلی سایت تأثیر بگذارد.
برخی افزونههای دارک مود ممکن است با اضافه کردن فایلهای CSS و JavaScript اضافی، کمی سرعت بارگذاری صفحات را کاهش دهند. همچنین در بعضی سایتها احتمال دارد این افزونهها با قالب فعال یا سایر افزونهها تداخل ایجاد کنند و باعث مشکلاتی در نمایش بخشهایی از سایت شوند.
به همین دلیل، بهتر است از افزونه دارک مود وردپرس تنها زمانی استفاده کنید که این قابلیت برای کاربران سایت ارزش ایجاد میکند. قبل از فعالسازی نهایی، عملکرد سایت را در دستگاهها و مرورگرهای مختلف بررسی کنید و مطمئن شوید که سرعت، تجربه کاربری و سازگاری بخشهای مختلف سایت تحت تأثیر منفی قرار نگرفته است.
چگونه حالت تاریک را به سایت وردپرسی اضافه کنیم؟
سادهترین روش برای اضافه کردن حالت تاریک وردپرس، استفاده از افزونه WP Dark Mode است. این افزونه برای کاربرانی طراحی شده که میخواهند بدون نوشتن حتی یک خط کد، قابلیت تغییر حالت نمایش سایت را به صفحات خود اضافه کنند.
WP Dark Mode به دلیل تنظیمات ساده و اجرای خودکار، گزینه مناسبی برای کاربران مبتدی و صاحبان سایتهایی است که زمان یا دانش فنی کافی برای توسعه قابلیت دارک مود بهصورت اختصاصی ندارند. این افزونه به شما اجازه میدهد تنها با چند مرحله ساده، یک دکمه تغییر حالت روشن و تاریک به سایت اضافه کنید.
مرحله اول: نصب و فعالسازی افزونه WP Dark Mode
برای شروع، وارد پیشخوان وردپرس شوید و از مسیر زیر افزونه را نصب کنید:
افزونهها ← افزودن افزونه جدید
در بخش جستوجو، عبارت WP Dark Mode را وارد کنید. سپس افزونه را نصب کرده و بعد از پایان نصب، روی گزینه فعالسازی کلیک کنید.
بعد از فعال شدن افزونه، تنظیمات مربوط به حالت تاریک در پیشخوان وردپرس در دسترس قرار میگیرد.
مرحله دوم: فعال کردن حالت تاریک وردپرس در سایت
از منوی سمت راست پیشخوان وردپرس وارد مسیر زیر شوید:
WP Dark Mode ← Settings
در صفحه تنظیمات، گزینه Enable Frontend Dark Mode را پیدا کنید و آن را روی حالت ON قرار دهید.
با فعال کردن این گزینه، قابلیت حالت تاریک وردپرس برای بخش اصلی سایت فعال میشود؛ یعنی بازدیدکنندگان سایت میتوانند هنگام مشاهده صفحات، بین حالت روشن و تاریک جابهجا شوند.
مرحله سوم: انتخاب حالت پیشفرض نمایش سایت
بعد از فعال کردن Dark Mode در سایت وردپرس، میتوانید مشخص کنید سایت در زمان ورود کاربران با چه حالتی نمایش داده شود.
WP Dark Mode گزینههای مختلفی برای این بخش ارائه میدهد؛ برای مثال میتوانید از منوی انتخابی (Dropdown) یا دکمههای انتخابی (Radio Buttons) استفاده کنید تا حالت پیشفرض نمایش سایت را مشخص کنید.
انتخاب این بخش به نوع سایت و رفتار کاربران شما بستگی دارد. برای مثال، برخی سایتها ترجیح میدهند حالت روشن بهصورت پیشفرض فعال باشد و کاربران در صورت نیاز آن را تغییر دهند.
مرحله چهارم: ذخیره تنظیمات اولیه
بعد از انجام تغییرات، روی دکمه Save Changes کلیک کنید تا تنظیمات ذخیره شوند.
تا این مرحله، قابلیت اصلی حالت تاریک وردپرس فعال شده است؛ اما برای شخصیسازی ظاهر دکمه تغییر حالت، باید تنظیمات بیشتری انجام دهید.
مرحله پنجم: شخصیسازی دکمه تغییر حالت دارک مود
برای تغییر ظاهر دکمه دارک مود، وارد تب Customization شوید.
در این بخش میتوانید موارد مختلفی مانند موارد زیر را تنظیم کنید:
- نوع طراحی دکمه تغییر حالت
- اندازه دکمه
- محل قرارگیری آن در صفحه
همچنین امکان تغییر رنگ دکمه تغییر حالت نیز وجود دارد؛ اما برای استفاده از این قابلیت باید نسخه حرفهای (Pro) افزونه را تهیه کنید.
مرحله ششم: ذخیره تغییرات و بررسی عملکرد سایت
بعد از پایان شخصیسازی، دوباره روی دکمه Save Changes کلیک کنید تا تنظیمات جدید ذخیره شوند.
حالا وارد سایت وردپرسی خود شوید و عملکرد دکمه دارک مود را بررسی کنید. با کلیک روی این دکمه، کاربران باید بتوانند بدون مشکل بین حالت روشن و تاریک جابهجا شوند.
برای اطمینان از عملکرد صحیح، سایت را در دستگاههای مختلف مانند موبایل و تبلت نیز بررسی کنید. WP Dark Mode از نمایش در دستگاههای موبایل پشتیبانی میکند و باید مطمئن شوید که این قابلیت در تمام اندازههای صفحه بهدرستی کار میکند. اگر متوجه مشکل یا ایرادی در نمایش صفحات سایت یا عملکرد آن شدید، بهتر است فوراً نسبت به رفع این مشکل اقدام کنید.
