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

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

فهرست مطالب

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

 

حالت تیره چیست و چرا باید آن را به وردپرس اضافه کرد؟

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

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

اضافه کردن حالت یا تم تیره به وبسایت وردپرس
اضافه کردن حالت یا تم تیره به ویندوز

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

برخی از وب سایت‌های محبوب مانند YouTube هم از یک طرح رنگی تیره استفاده می‌کنند.

اضافه کردن حالت یا تم تیره به وبسایت وردپرس
اضافه کردن حالت یا تم تیره به یوتیوب

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

نحوه افزودن تم تیره (dark mode) به داشبورد مدیریت سایت

راه سریع و آسان برای اضافه کردن تم تیره به ناحیه مدیریتی وردپرس

ساده‌ترین راه برای اضافه کردن مود تیره به داشبورد ادمین وردپرس استفاده از افزونه WP Dark Mode است. این افزونه به مدیران اجازه می‌دهد تا مود تیره را با یک کلیک فعال و غیرفعال کنند.

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

نصب و فعالسازی افزونه WP Dark Mode

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

پس از فعال‌سازی، به صفحه WP Dark Mode » Settings در داشبورد وردپرس خود بروید و سپس روی تب Admin Panel Dark Mode کلیک کنید.

سپس، دکمه ‘Enable Admin Dashboard Dark Mode’ را فعال کنید.

همچنین می‌توانید حالت تیره را برای ویرایشگر بلوک نیز فعال کنید.

سپس به پایین بروید و روی دکمه ‘Save Changes’ کلیک کنید.

نحوه افزودن تم تیره (dark mode) به داشبورد مدیریت سایت
نحوه افزودن تم تیره (dark mode) به داشبورد مدیریت سایت

در این مرحله، یک سوئیچ ‘Light / Dark’ جدید در نوار ابزار ادمین خواهید دید.

می‌توانید روی این کلید کلیک کنید تا حالت سیاه یا شب را در ناحیه ادمین فعال و غیرفعال کنید.

نحوه افزودن تم تیره (dark mode) به داشبورد مدیریت سایت
نحوه افزودن تم تیره (dark mode) به داشبورد مدیریت سایت

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

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

برای تغییر طرح رنگی مدیریتی، به بخش Users » Profile بروید و سپس یکی از گزینه‌های زیر Admin Color Scheme را انتخاب کنید.

نحوه افزودن تم تیره (dark mode) به داشبورد مدیریت سایت
نحوه افزودن تم تیره (dark mode) به داشبورد مدیریت سایت

نحوه افزودن حالت دارک (dark mode) به سایت

برای فعال کردن حالت دارک در بخش جلویی وبسایت، تب ‘Frontend Dark Mode’ تغییر وضعیت دهید و دکمه ‘Enable Frontend Dark Mode’ را فعال کنید.

نحوه افزودن حالت دارک (dark mode) به سایت
نحوه افزودن حالت دارک (dark mode) به سایت

مثل قبل، مطمئن شوید که پس از اتمام کار دکمه ‘Save Changes’ را بزنید.

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

نحوه افزودن حالت دارک (dark mode) به سایت
نحوه افزودن حالت دارک (dark mode) به سایت

توضیح بخش‌های مختلف افزونه WP Dark Mode:

۱. Controls

Frontend Dark Mode
– Enable Frontend Dark Mode: فعال یا غیرفعال کردن حالت تاریک برای بازدیدکنندگان سایت.
Admin Panel Dark Mode
– Enable Admin Panel Dark Mode: فعال یا غیرفعال کردن حالت تاریک برای داشبورد مدیریت وردپرس.

۲. Customization

Switch Settings

– Enable Floating Switch: فعال کردن کلید شناور تغییر حالت تاریک.
– Floating Switch Style: انتخاب استایل ظاهری کلید شناور (مثلاً دایره‌ای، مربعی).
– Floating Switch Position: تعیین موقعیت کلید شناور (مثلاً بالا سمت راست، پایین سمت چپ).
– Enable Shortcode Switch: فعال کردن کلید تغییر حالت تاریک از طریق کد کوتاه.
– Shortcode Switch Style: انتخاب استایل کلید تغییر حالت تاریک که با کد کوتاه نمایش داده می‌شود.

Color Settings

– Dark Mode Background Color: تنظیم رنگ پس‌زمینه حالت تاریک.
– Dark Mode Text Color: تنظیم رنگ متن در حالت تاریک.
– Dark Mode Link Color: تنظیم رنگ لینک‌ها در حالت تاریک.
– Dark Mode Button Color: تنظیم رنگ دکمه‌ها در حالت تاریک.

Image Settings

– Replace Images in Dark Mode: تنظیمات برای جایگزینی تصاویر در حالت تاریک.
– Dark Mode Specific Images: آپلود تصاویر خاص برای حالت تاریک.

Video Settings

– Replace Videos in Dark Mode: تنظیمات برای جایگزینی ویدیوها در حالت تاریک.
– Dark Mode Specific Videos: آپلود ویدیوهای خاص برای حالت تاریک.

Site Animation

– Enable Site Animation: فعال کردن انیمیشن‌های سایت در حالت تاریک.
– Animation Type: انتخاب نوع انیمیشن برای سایت (مثلاً Fade, Slide).

۳. Advanced

Performance

– Optimize Dark Mode Performance: تنظیمات بهینه‌سازی عملکرد حالت تاریک برای کاهش تأثیر بر سرعت سایت.
– Lazy Load Images: فعال کردن بارگذاری تنبل تصاویر در حالت تاریک.

Exclude Settings

– Exclude Pages/Posts: تعیین صفحاتی که نمی‌خواهید حالت تاریک در آن‌ها اعمال شود.
– Exclude Specific Elements: تعیین عناصر خاصی که حالت تاریک نباید بر آن‌ها تاثیر بگذارد.

Custom CSS

– Custom CSS: اضافه کردن کدهای CSS سفارشی برای تغییر ظاهر حالت تاریک به دلخواه.

Accessibility

– Improve Accessibility: بهبود دسترسی برای کاربران با نیازهای خاص در حالت تاریک.
– High Contrast Mode: فعال کردن حالت کنتراست بالا برای خوانایی بهتر.

Shortcode

– Dark Mode Shortcode: ارائه کدهای کوتاه برای نمایش کلید تغییر حالت تاریک در نوشته‌ها و صفحات.
– `[wp_dark_mode]`: نمایش کلید تغییر حالت تاریک.
– `[wp_dark_mode_switch]`: نمایش کلید تغییر حالت تاریک به صورت کد کوتاه.

Switch Widget

– Enable Switch Widget: فعال کردن ویجت کلید تغییر حالت تاریک.
– Widget Style: انتخاب استایل ویجت کلید تغییر حالت تاریک.

۴. Analytics

– Dark Mode Usage Analytics: نمایش داده‌های مربوط به استفاده از حالت تاریک توسط بازدیدکنندگان.
– Track Dark Mode Switches: ردیابی تعداد دفعات تغییر حالت تاریک توسط کاربران.
– Generate Reports: ایجاد گزارش‌های دوره‌ای از استفاده کاربران از حالت تاریک.
این تنظیمات به شما کمک می‌کند تا کنترل کامل و سفارشی‌سازی دقیق‌تری روی حالت تاریک سایت خود داشته باشید و تجربه کاربری بهتری را برای بازدیدکنندگان خود فراهم کنید.

سخن آخر 

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

امتیاز شما به این مطلب:

0 / 5. تعداد رای: 0

 
اشتراک گذاری مطلب:
مطالب مرتبط:

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

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