خانه وردپرس و سایت‌سازها اضافه کردن حالت شب (Dark Mode) به وردپرس: راهنمای کامل ۲۰۲۵
تاریخ به‌روزرسانی : 1399/08/18
به قلم : شهاب بیرامی
زمان مطالعه : 5 دقیقه

اضافه کردن حالت شب (Dark Mode) به وردپرس: راهنمای کامل ۲۰۲۵

حالت شب Dark Mode در وردپرس - آموزش برتینا

📌 خلاصه مطلب (TL;DR)

  • Dark Mode چیست؟ حالتی که رنگ پس‌زمینه سایت تیره و متن روشن می‌شود - کاهش خستگی چشم.
  • بهترین افزونه: WP Dark Mode (رایگان، AI-powered، سازگار با ووکامرس)
  • روش ساده: نصب افزونه → فعال کردن سوییچ شناور → تمام!
  • ویژگی مهم: تشخیص خودکار تنظیمات سیستم‌عامل کاربر (OS Aware)

🔍 آیا سایت من به Dark Mode نیاز دارد؟

  • سایت محتوایی/بلاگ: شدیداً توصیه می‌شود (خواندن طولانی)
  • فروشگاه آنلاین: توصیه می‌شود (تجربه کاربری بهتر)
  • سایت شرکتی: اختیاری (اما مدرن و حرفه‌ای)
  • پورتفولیو: بسته به طراحی (برای عکاسان و طراحان عالی است)

حالت شب یا Dark Mode امروزه به یک استاندارد در طراحی وب تبدیل شده است. سایت‌هایی مانند YouTube، Twitter، GitHub و حتی گوگل این قابلیت را دارند. در این مقاله، نحوه اضافه کردن Dark Mode به سایت وردپرسی را با بهترین افزونه‌های ۲۰۲۵ یاد می‌گیرید.

چرا Dark Mode برای سایت مهم است؟

  1. کاهش خستگی چشم: در نور کم، صفحه تیره راحت‌تر خوانده می‌شود
  2. صرفه‌جویی در باتری: در صفحات OLED، تا ۴۰٪ مصرف کمتر
  3. تجربه کاربری بهتر: کاربران دوست دارند خودشان انتخاب کنند
  4. دسترس‌پذیری (Accessibility): برای افراد با حساسیت به نور
  5. ظاهر مدرن: سایت حرفه‌ای‌تر به نظر می‌رسد

جدول مقایسه: بهترین افزونه‌های Dark Mode وردپرس (۲۰۲۵)

افزونه ویژگی‌ها نسخه رایگان توصیه
WP Dark Mode AI-powered، ووکامرس، ۲۱ استایل سوییچ ✅ کامل ⭐ بهترین
Darkify فرانت‌اند + ادمین، زمان‌بندی ✅ خوب ⭐ عالی
Dark Mode Toggle سبک، ساده، سریع ✅ کامل ✅ ساده
Dusky Dark Mode ۳۸ استایل، Elementor/Gutenberg ✅ محدود ✅ خوب

آموزش اضافه کردن Dark Mode با WP Dark Mode

WP Dark Mode با بیش از ۱۰۰,۰۰۰ نصب فعال، محبوب‌ترین افزونه حالت شب برای وردپرس است. نسخه رایگان آن تمام ویژگی‌های اساسی را دارد.

مرحله ۱: نصب و فعال‌سازی

  1. از پیشخوان وردپرس → افزونه‌هاافزودن
  2. جستجوی "WP Dark Mode"
  3. روی نصب و سپس فعال‌سازی کلیک کنید

مرحله ۲: تنظیمات اولیه

  1. به منوی WP Dark Mode بروید
  2. در تب General Settings:
  • ☑️ Enable Frontend Dark Mode: فعال کنید
  • ☑️ Enable OS Aware Dark Mode: تشخیص خودکار تنظیمات سیستم کاربر
  • ☑️ Show Floating Switch: نمایش دکمه شناور

مرحله ۳: سفارشی‌سازی دکمه

در تب Switch Settings می‌توانید:

  • استایل دکمه را از ۲۱ طرح انتخاب کنید
  • موقعیت دکمه را تنظیم کنید (پایین راست، پایین چپ، ...)
  • رنگ دکمه را تغییر دهید

💡 نکته: با فعال کردن "OS Aware"، اگر کاربر روی گوشی یا کامپیوترش Dark Mode فعال باشد، سایت شما هم خودکار تیره می‌شود.

فعال‌سازی Dark Mode برای پیشخوان ادمین

اگر شب‌ها روی سایت کار می‌کنید، می‌توانید پیشخوان وردپرس را هم تیره کنید:

  1. به تنظیمات WP Dark Mode بروید
  2. تب Admin Panel Dark Mode را باز کنید
  3. گزینه Enable Admin Dashboard Dark Mode را فعال کنید
  4. از تنظیمات ذخیره کنید

تنظیمات پیشرفته

فعال‌سازی خودکار بر اساس زمان

می‌توانید تنظیم کنید که Dark Mode به‌صورت خودکار از غروب آفتاب فعال شود:

  • در تب Time Based Dark Mode
  • ساعت شروع و پایان را تنظیم کنید (مثلاً ۱۹:۰۰ تا ۰۷:۰۰)

میانبر کیبورد

کاربران می‌توانند با فشردن Ctrl + Alt + D بین حالت روشن و تیره جابجا شوند.

نکات مهم برای Dark Mode

⚠️ توجه:

  • تصاویر با پس‌زمینه سفید ممکن است در Dark Mode بد به نظر برسند - از PNG شفاف استفاده کنید
  • رنگ‌های برند خود را در حالت تیره تست کنید
  • مطمئن شوید متن کاملاً خوانا است (کنتراست کافی)

سوالات متداول درباره Dark Mode وردپرس

آیا Dark Mode روی سئو تأثیر دارد؟

Dark Mode مستقیماً روی سئو تأثیری ندارد، اما با بهبود تجربه کاربری، می‌تواند باعث افزایش زمان ماندن کاربر در سایت شود که یک سیگنال مثبت برای سئو است.

آیا Dark Mode سرعت سایت را کم می‌کند؟

افزونه‌های سبک مثل WP Dark Mode یا Dark Mode Toggle تأثیر محسوسی روی سرعت ندارند. فقط چند کیلوبایت CSS و JavaScript اضافه می‌کنند که قابل چشم‌پوشی است.

چطور رنگ‌های Dark Mode را سفارشی کنم؟

در نسخه رایگان WP Dark Mode می‌توانید از پالت‌های آماده استفاده کنید. در نسخه پرو، می‌توانید رنگ پس‌زمینه، متن، لینک‌ها و دکمه‌ها را کاملاً سفارشی کنید.

آیا با Elementor و Gutenberg سازگار است؟

بله، WP Dark Mode و Dusky Dark Mode هر دو با صفحه‌سازهای محبوب مثل Elementor، Gutenberg، Divi و WPBakery سازگار هستند و رنگ‌ها را به‌درستی اعمال می‌کنند.

فروشگاه ووکامرس هم Dark Mode می‌شود؟

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

نتیجه‌گیری

اضافه کردن Dark Mode به سایت وردپرسی با افزونه‌هایی مثل WP Dark Mode تنها چند دقیقه زمان می‌برد و تجربه کاربری سایت شما را به‌طور قابل توجهی بهبود می‌دهد. این ویژگی نه تنها برای کاربران راحت‌تر است، بلکه نشان‌دهنده توجه شما به جزئیات و مدرن بودن سایت است.

🌙 هاست وردپرس حرفه‌ای

با هاست وردپرس برتینا، سایت خود را با بهترین امکانات و سرعت بالا مدیریت کنید.

خرید هاست وردپرس
مقایسه پلن‌ها

منابع

نظرات

  • علی

    سلام امکانش هست این دکمه تغییر حالت رو به نوار منو بالای صفحه انتقال داد؟

    تارا متقی
    با سلام و احترام بله این مورد در این مقاله نیز ذکر شده است، پس از فعال‌سازی Backend Darkmode آپشن فعال و یا غیرفعال‌سازی dark mode به نوار بالایی وردپرس اضافه می‌شود.
  • علی

    مقاله خوبی بود به دردم خورد ممنون از سایت خوبتون.