دارک مود پیشخوان وردپرس

نوشته شده در ۱۴۰۵/۰۴/۰۱ | به‌روزرسانی در ۱۴۰۵/۰۴/۰۱
دارک مود پیشخوان وردپرس

اگر روزانه ساعت‌ها با پیشخوان وردپرس کار می‌کنید، ممکن است یک آرزو داشته باشید: رابطی تاریک‌تر و خواناتر با فونت فارسی مناسب. افزونه دارک مود پیشخوان وردپرس با نام Admin Theme Switcher دقیقاً همین نیاز را برطرف می‌کند؛ یک افزونه سبک و کارآمد که حالت تاریک (Dark Mode) و انتخاب فونت سفارشی را مستقیماً به ادمین وردپرس شما اضافه می‌کند.

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

افزونه دارک مود پیشخوان وردپرس

افزونه Admin Theme Switcher یک افزونه متن‌باز و رایگان وردپرس است که دو قابلیت اساسی را به پیشخوان مدیریت اضافه می‌کند:

  • دکمه تغییر حالت تاریک/روشن در نوار ادمین (Admin Bar) — بدون نیاز به رفرش صفحه
  • صفحه تنظیمات فونت با پشتیبانی از فونت‌های فارسی مثل Vazirmatn، IranSansX و IranYekan

امکانات کلیدی افزونه

  • دارک مود با یک کلیک: دکمه ☀️/🌙 در نوار ادمین نمایش داده می‌شود. کاربر با کلیک روی آن بین حالت روشن و تاریک جابجا می‌شود و تنظیم ذخیره می‌ماند.
  • تنظیم مستقل هر کاربر: ترجیح هر کاربر جداگانه در user meta ذخیره می‌شود. هر ادمین می‌تواند حالت دلخواه خود را داشته باشد.
  • بدون رفرش (AJAX): تغییر حالت از طریق ایجکس انجام می‌شود؛ یعنی صفحه رفرش نمی‌شود و تجربه کاربری روان‌تر است.
  • انتخاب فونت فارسی: از میان چند فونت فارسی (وزیر متن، ایران سنس، ایران یکان) یکی را انتخاب کنید و روی کل پیشخوان اعمال کنید.
  • پشتیبانی از بلاک ادیتور: هر دو قابلیت دارک مود و فونت سفارشی روی iframe ویرایشگر گوتنبرگ هم اعمال می‌شوند.
  • امنیت با Nonce: تمام درخواست‌های AJAX با WordPress Nonce ایمن‌سازی شده‌اند تا از حملات CSRF جلوگیری شود.
  • متن‌باز و رایگان: افزونه به صورت متن‌باز و رایگان، تحت لایسنس GPLv2 منتشر شده است.

این افزونه برای چه کسانی مناسب است؟

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

پیش‌نیازهای استفاده از افزونه

پیش از نصب، باید موارد زیر را در اختیار داشته باشید:

  • نسخه PHP برابر یا بالاتر از 7.0
  • نسخه وردپرس برابر یا بالاتر از 5.0

آموزش نصب و راه‌اندازی گام‌به‌گام

  1. فایل افزونه را از انتهای همین نوشته یا گیت‌هاب دانلود کنید.
  2. از منوی «افزونه‌ها» در پنل مدیریت وردپرس، افزونه را نصب و فعال کنید.
  3. به مسیر تنظیمات ← ظاهر ادمین بروید تا پیکربندی فونت را انجام دهید.

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

نحوه استفاده از افزونه

دارک مود

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

انتخاب فونت

  1. به تنظیمات ← ظاهر ادمین بروید.
  2. فونت دلخواه را از بین گزینه‌های موجود انتخاب کنید.
  3. روی ذخیره تغییرات کلیک کنید.
  4. فونت روی تمام صفحات ادمین برای همه کاربرانی که به پیشخوان دسترسی دارند، اعمال می‌شود (تنظیم سراسری).

افزودن فونت سفارشی

می‌توانید فونت‌های دلخواه خود را به این افزونه اضافه کنید. مراحل به این صورت است:

گام اول: ابتدا فایل فونت (ترجیحاً فرمت woff2) را با یک نام دلخواه مثل font-option-1.woff2 در پوشه assets/fonts قرار دهید.

گام دوم: برچسب فونت را در class-font-settings.php اضافه کنید:

public static function get_font_labels() {
	return array(
	  'default'    => __('default', 'admin-theme-switcher'),
	  'myfont'     => __('myfont', 'admin-theme-switcher'),
	);
}

گام سوم: استایل SCSS را به‌روزرسانی کنید:

@font-face{ font-display:swap;
  font-family: "MyFont";
  src: url("../fonts/font-option-1.woff2") format("woff2");
 }

.ats-font-myfont {
  --wp-admin-font: "MyFont", sans-serif;
}

گام چهارم: CSS را بیلد کنید.

npm install
npm run build

معماری و ساختار فنی افزونه

این افزونه با معماری شیءگرا (OOP) نوشته شده و شامل دو کلاس اصلی است:

نام کلاسوظیفه
ATS_Font_Settingsتعریف استایل‌های فونت سفارشی و ذخیره فونت انتخابی کاربر
ATS_Dark_Modeتعریف استایل‌های موردنیاز دارک مود و ذخیره آن در متای کاربر

ساختار فایل‌ها

admin-theme-switcher/
├── admin-theme-switcher.php       # فایل اصلی: تعریف ثابت‌ها، لود کلاس‌ها
├── uninstall.php                  # پاکسازی داده‌ها هنگام حذف
├── assets/
│   ├── css/
│   │   ├── dark-mode.css         # استایل دارک مود (کامپایل‌شده)
│   │   └── admin-fonts.css       # استایل فونت‌ها (کامپایل‌شده)
│   ├── js/
│   │   └── dark-mode-toggle.js   # هندلر AJAX تغییر حالت
│   └── scss/                     # فایل‌های SCSS منبع
├── includes/
│   ├── class-dark-mode.php       # منطق دارک مود
│   └── class-font-settings.php   # صفحه تنظیمات فونت
└── languages/
    ├── admin-theme-switcher.pot	# فایل قالب زبان
    └── admin-theme-switcher-fa_IR.po	# فایل ترجمه فارسی

ذخیره‌سازی داده‌ها

  • دارک مود: در user meta با کلید ats_dark_mode به‌ازای هر کاربر ذخیره می‌شود.
  • فونت انتخابی: در Options وردپرس به صورت سراسری تنظیم می‌شود.

پشتیبانی چندزبانه و فارسی‌سازی

افزونه Admin Theme Switcher با تکست‌دامین admin-theme-switcher به‌طور کامل بین‌المللی‌سازی شده است. ترجمه فارسی به‌صورت پیش‌فرض در پوشه languages ارائه شده است؛ بنابراین کاربران فارسی‌زبان می‌توانند تمام رابط کاربری افزونه را به فارسی مشاهده کنند.

برای افزودن زبان جدید، یک فایل po جدید در پوشه languages ایجاد کنید و از قراردادهای استاندارد وردپرس پیروی کنید.

دریافت و نصب افزونه

برای دریافت آخرین نسخه افزونه Admin Theme Switcher و مشاهده جزئیات فنی بیشتر، می‌توانید به گیت‌هاب من مراجعه کنید.

اگر در زمینه این افزونه سوالی داشتید یا به مشاوره و پشتیبانی نیاز داشتید، می‌توانید از طریق کانال تلگرام byreza_net@ یا شناسه تلگرامی reza_qalekhani@ با من در ارتباط باشید.

رفع مشکلات رایج

دکمه دارک مود نمایش داده نمی‌شود

  • مطمئن شوید افزونه فعال است.
  • بررسی کنید که با یک کاربر ادمین وارد شده‌اید.
  • نوار ادمین (Admin Bar) را در بالای صفحه جستجو کنید.

فونت سفارشی لود نمی‌شود

  • فایل فونت را در پوشه assets/fonts با نام درست قرار دهید.
  • کنسول مرورگر را برای خطاهای ۴۰۴ یا CORS بررسی کنید.
  • دستور npm run build را اجرا کنید.
  • کش مرورگر و کش وردپرس را پاک کنید.

استایل‌ها اعمال نمی‌شوند

  • کش افزونه وردپرس را پاک کنید.
  • دستور npm run build را دوباره اجرا کنید.

سوالات متداول

  1. آیا این افزونه با تمام قالب‌های وردپرس سازگار است؟

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

  2. آیا تنظیمات دارک مود برای همه کاربران سایت اعمال می‌شود؟

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

  3. آیا می‌توان فونت‌های جدید اضافه کرد؟

    بله. با افزودن فایل فونت (woff2)، به‌روزرسانی متد get_font_labelsدر کلاس FontSettings و تعریف کلاس SCSS مربوطه، می‌توانید هر فونت دلخواهی اضافه کنید.

  4. آیا این افزونه با ویرایشگر گوتنبرگ کار می‌کند؟

    بله. این افزونه از هوک enqueue_block_assets استفاده می‌کند تا استایل‌ها درون iframe بلاک ادیتور هم اعمال شوند.

  5. پس از حذف افزونه، داده‌ها پاک می‌شوند؟

    بله. فایل uninstall.php افزونه، تمام داده‌های ذخیره‌شده (user meta و options) را هنگام حذف کامل پاک می‌کند.

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


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان

علاقمند به یادگیری طراحی سایت یا دنبال مشاوره در این زمینه هستی؟