دارک‌مود یا حالت تاریک در وردپرس

۲۱ بهمن ۱۴۰۳
دسته بندی ها: وردپرس

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

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

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

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

اما علاوه بر این، به دلایلی مانند راحتی چشم، عمر باتری – حالت تاریک باعث صرفه جویی در عمر باتری می شود- فوکوس بهبود یافته،و البته، ما نمی توانیم عنصر زیبایی شناسی و جذابیت مدرن را از بین ببریم، محبوب شده است.

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

چندین روش وجود دارد و ما 3 روش رایج را بررسی خواهیم کرد که عبارتند از:

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

برای یادگیری مراحل اجرای آن، روی هر روشی که جالب تر به نظر می رسد کلیک کنید. همه به یک نتیجه مشترک منجر می شوند: فعال کردن حالت تاریک در سایت وردپرس شما.

روش شماره 1: استفاده از پلاگین حالت تاریک وردپرس

به پیشخوان وردپرس خود بروید

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

افزونه را نصب و فعال کنید.
پس از فعال سازی، تنظیمات افزونه را در نوار کناری داشبورد وردپرس خود خواهید دید.
در زیر منوی افزونه انتخابی خود، روی Setting کلیک کنید.

تنظیمات افزونه

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

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

پس از ذخیره تغییرات، گزینه‌های Light & Dark را در نوار بالای سایت خود خواهید یافت و همانطور که می‌بینید، من از حالت تاریک در پیشخوان مدیریت خود لذت می‌برم.

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

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

Neve
OceanWP
Hestia
Astra (with Color Customization)
GeneratePress
Kadence
Zakra
Sydney
Shapely
Soledad
ما با Neve برای این آموزش همراه خواهیم بود.

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

و تمام؛ ما با استفاده از یک تم وردپرس، حالت تاریک را با موفقیت فعال کردیم

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

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

مرحله 1: کتابخانه Darkmode.js را بارگیری یا لینک دهید

شما این انتخاب را دارید که کتابخانه را دانلود کنید و آن را روی سرور خود میزبانی کنید یا به سادگی از یک لینگ CDN استفاده کنید. در اینجا از روش CDN استفاده خواهیم کرد:

به مخزن رسمی Darkmode.js GitHub بروید: Darkmode.js GitHub
از طرف دیگر، می‌توانید از CDN برای لینک مستقیم به آخرین نسخه استفاده کنید.

در اینجا لینک CDN به کتابخانه آمده است:

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

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

به پیشخوان وردپرس بروید.
به نمایش > ویرایشگر پرونده پوسته بروید.
فایل footer.php را در قسمت Theme Files در نوار کناری سمت چپ پیدا و انتخاب کنید.
اسکریپت زیر را درست قبل از بستن تگ </body> وارد کنید:

تغییرات را ذخیره کنید.

مرحله سوم: ویجت حالت تاریک را سفارشی کنید

ما می توانیم ظاهر دکمه تغییر حالت تاریک (ویجت) و رفتار آن را نیز سفارشی کنیم. Darkmode.js گزینه‌های پیکربندی مختلفی دارد.

در اینجا یک مثال پایه از نحوه تنظیم تنظیمات ویجت آورده شده است:

مرحله چهارم: حالت تاریک را در سایت خود آزمایش کنید

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

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

هاست وردپرس با وب سرور محبوب لایت اسپید و کش لایت اسپید باعث می‌شود تا سرعت لود فوق العاده‌ای را تجربه کنید.

با خرید هاست وردپرس کانفیگ حرفه‌ای و نظارت بر سرور به صورت پیوسته توسط تیم فنی پارسدِو انجام خواهد شد.

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

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

1. لوگوها به درستی ظاهر نمی شوند

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

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

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

2. تضاد ضعیف بین متن و پس زمینه

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

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

3. تست نکردن بر روی دستگاه های مختلف

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

4. رنگ هاردکدینگ

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

جمع بندی

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