كيفية إضافة الوضع المظلم إلى موقع WordPress الخاص بك من خلال هذه الخطوات الأربع البسيطة

نشرت: 2022-06-16

عندما أضاف Instagram واثنين من مواقع الويب والتطبيقات الرئيسية الأخرى الوضع المظلم في أكتوبر 2019 ، شهدنا ارتفاعًا كبيرًا في اهتمام الناس بهذه الميزة.

How to Add Dark Mode to Your WordPress Website with These 4 Simple Steps

ومع ذلك ، حتى إذا استبعدنا الشكل الخارجي المتمثل في اعتماد Instagram للوضع الليلي المظلم ، فإن الرسم البياني أعلاه يشير بوضوح إلى نمو شعبية الميزة على مدار السنوات القليلة الماضية.

إلى جانب Instagram ، انتقلت العديد من الشركات الكبرى الأخرى إلى عصر الوضع الليلي ، ويجب أن تفكر في إجراء التبديل أيضًا. ليس فقط لأنها مواكبة للموضة ، ولكن لفوائدها العديدة للمستخدمين ، بما في ذلك على سبيل المثال لا الحصر تقليل إجهاد العين للمستخدمين ، وزيادة عمر البطارية للأجهزة المستخدمة لزيارة موقعك ، وحقيقة أنه يبدو أكثر برودة.

حسنًا ، قد يكون الأخير شخصيًا بعض الشيء ، لكننا نتمسك به.

لحسن الحظ ، فإن إضافة الوضع المظلم إلى موقع WordPress الخاص بك أمر بسيط للغاية. لا يمكنك فقط إعداد كيفية ظهور موقع الويب الخاص بك لكل مستخدم ، ولكن يمكنك أيضًا إضافة الميزة إلى لوحة تحكم المسؤول وإعطاء عينيك فترة راحة.

إذا كنت تفكر في إضافة الوضع المظلم إلى موقعك ، فهناك عدة طرق للقيام بذلك ، ولكن استخدام مكون إضافي هو الأبسط ، كما قد تتخيل.

في هذا المنشور ، سنقدم مكونًا إضافيًا توصي به معظم شركات تصميم مواقع الويب في لوس أنجلوس - WP Dark Mode - ونراجع جميع الخطوات التي تحتاج إلى اتخاذها لإضافة هذه الوظيفة وتخصيصها بحيث تناسب موقع الويب الخاص بك وموضوع WordPress.

لكن أولاً ، دعنا نلقي نظرة على ماهية الوضع المظلم وأبرز فوائده. واصل القراءة!

ما هو الوضع الداكن ولماذا هو مفيد؟

يُعرف الوضع المظلم أيضًا باسم الوضع الليلي ، وهو عبارة عن تبديل عرض بسيط يغير نظام ألوان موقع الويب من الضوء إلى الظلام.

على موقع ويب نموذجي به أحرف سوداء على خلفية بيضاء ، يبدو هذا عادةً وكأن الألوان مقلوبة ببساطة ، ولكن ، كما سنشرح أدناه ، هناك ما هو أكثر قليلاً من ذلك.

يقلل هذا التعديل البسيط الضوء الأبيض المنبعث من الشاشة بشكل كبير ، مما يقلل إجهاد العين ، خاصة إذا كان المستخدم يزور الموقع الإلكتروني في المساء.

يتوفر خيار تمكين الوضع المظلم في معظم أنظمة التشغيل ومتصفحات الويب الحديثة.

أبرز فوائد الوضع الداكن

لقد ذكرنا بالفعل بعض مزايا هذه الميزة في جميع أنحاء هذا المنشور ، لكننا اعتقدنا أننا سنحددها جميعًا هنا في قائمة نقطية لطيفة لراحتك.

لذا ، فإن مزايا الوضع المظلم تشمل ما يلي:

  • ضغط أقل على العينين
  • انخفاض استهلاك الطاقة وزيادة عمر البطارية
  • ضوء أبيض أقل من الشاشات
  • قضى المزيد من الوقت على صفحتك

كما تعلم بالفعل ، فإن المتصفحات وأنظمة التشغيل الحديثة تقدم بالفعل الوضع المظلم كخيار ، ولكن إذا كنت تريد أن يظهر موقع الويب الخاص بك في نظام الألوان المناسب للمستخدمين الذين يفضلونه ، فستحتاج إلى إضافته بنفسك.

لحسن الحظ ، يمكن أن يؤدي تثبيت المكون الإضافي WP Dark Mode إلى جعل هذه العملية مباشرة ، بالإضافة إلى منحك جميع أنواع التحكم في مظهر الوضع المظلم لموقع الويب الخاص بك.

الوضع الداكن مقابل الوضع الليلي

قبل أن نمضي قدمًا ، نود معالجة مشكلة محتملة قد يواجهها القراء المتحمسون. وبالتحديد ، كنا نستخدم المصطلحين "الوضع المظلم" و "الوضع الليلي" وسنستمر في استخدامهما بالتبادل خلال هذه المقالة ، على الرغم من أنهما يمكنهما وصف ميزتين مختلفتين تقنيًا.

غالبًا ما يُستخدم مصطلح "الوضع الليلي" للإشارة إلى ميزة متوفرة في معظم الهواتف الذكية الحديثة ، والتي تزيل الضوء الأزرق كليًا أو جزئيًا من شاشتك مع حلول الليل لتقليل تأثير وقت الشاشة على دورة نومك.

ومع ذلك ، كما أوضحنا سابقًا ، يمكن استخدام المصطلحين بالتبادل ، وهو النهج الذي اخترناه في هذا المنشور.

الآن بعد أن خرجنا من هذا الطريق ، فلنلقِ نظرة على كيفية إضافة الوضع المظلم (أو الليلي) إلى مواقع WordPress الخاصة بك.

كيفية إضافة الوضع المظلم إلى موقع WordPress الخاص بك باستخدام المكون الإضافي WP Dark Mode

الآن بعد أن عرفت جميع الأسباب التي قد تجعلك ترغب في إضافة الوضع المظلم إلى موقع WordPress الخاص بك ، سنوضح لك كيفية القيام بذلك من خلال أربع خطوات بسيطة.

ساعدنا أصدقاؤنا من شركة تصميم مواقع الويب في ميامي في إنشاء هذا الدليل التفصيلي الذي يعتمد على مكون إضافي متخصص يسمى WP Dark Mode.

1. تثبيت البرنامج المساعد

على الرغم من وجود العديد من إضافات WordPress للوضع المظلم ، وجدنا أن WP Dark Mode هو الأكثر سهولة في الاستخدام والموثوقية.

إنه مكون إضافي يتيح لك إنشاء نسخة مظلمة من موقعك بسرعة وبدون عناء ، دون الحاجة إلى التعامل مع الإعدادات المعقدة أو التعليمات البرمجية.

كما قد تتوقع ، فإن دليل WordPress Plugin هو المكان الذي ستتمكن من العثور فيه على هذه الأداة.

نفترض أنك أضفت مكونات إضافية إلى موقعك من قبل ، ولكن في حالة حدوث ذلك ، كل ما عليك فعله هو الانتقال إلى لوحة تحكم المسؤول وتحديد إضافة جديد من علامة التبويب المكونات الإضافية .

من هناك ، يمكنك العثور على WP Dark Mode والنقر فوق Install Now and Activate .

2. قم بتشغيل الإعدادات المطلوبة

يمكنك تبديل الوضع الداكن وإيقاف تشغيله في علامة التبويب " الإعدادات العامة ". بمجرد فتح علامة التبويب هذه ، سترى أن هناك خيارين قيد التشغيل بالفعل افتراضيًا.

هذه هي تمكين Frontend Dark Mode و تمكين OS Aware Dark Mode .

الأول يمكّن الوضع المظلم على موقع الويب الخاص بك ، بينما يعني الأخير أنه سيتم تنشيط الميزة تلقائيًا إذا تم ضبط نظام التشغيل أو المتصفح الخاص بالمستخدم على الوضع الداكن.

خيار آخر هو جعل الوضع الداكن افتراضيًا . هذا واحد واضح بذاته - إذا قمت بتشغيله ، فسيشاهد جميع المستخدمين الإصدار المظلم من موقع الويب الخاص بك بغض النظر عن تفضيلاتهم.

3. تشغيل وتخصيص التبديل العائم

إذا كنت ترغب في منح المستخدمين خيار التبديل بين الوضعين الداكن والفاتح في أي وقت ، يمكنك أيضًا تمكين خيار إظهار التبديل العائم .

سيفعل هذا الخيار بالضبط ما يقوله على العلبة - ضع مفتاح تبديل على الواجهة الأمامية لموقعك ، مما يسمح للمستخدمين بتشغيل الوضع المظلم أو إيقاف تشغيله كما يحلو لهم.

يمكنك العبث بموضع الرمز ونمطه في قسم إعدادات العرض. خياراتك من حيث الأسلوب محدودة إلى حد ما في الإصدار المجاني من البرنامج المساعد ، ولكن الوظيفة الأساسية (تشغيل الوضع المظلم أو إيقاف تشغيله) موجودة.

4. تجربة أنظمة ألوان مختلفة في الوضع الداكن

في هذه المرحلة ، يحتوي موقع WordPress الخاص بك على وضع مظلم يعمل بكامل طاقته ، وإذا كان هذا هو كل ما كنت تبحث عنه ، فيمكنك تخطي هذه الخطوة.

ومع ذلك ، إذا كنت لا تريد أن يبدو موقعك عامًا ، فنحن نوصي بشدة بتخصيص ألوان الوضع الداكن. ستجد جميع الخيارات التي تحتاجها في قسم إعدادات النمط .

تقدم هذه الشاشة لوحة ألوان يمكن أن تعمل مع الهوية المرئية لموقعك.

كما قد تتخيل ، يقدم الإصدار المجاني من المكون الإضافي WP Dark Mode خيارات محدودة إلى حد ما هنا ، ولكن يجب أن تكون قادرًا على إيجاد حل مناسب.

إذا كنت ترغب في تخصيص الألوان بشكل أكبر ، فإن الإصدار المتميز يوفر نطاقًا أوسع من لوحات الألوان المحددة مسبقًا ويسمح لك بإنشاء مخططك الخاص.

المكافأة - تمكين الوضع المظلم على لوحة تحكم مسؤول WordPress

إذا كنت ستقدم لعملائك وتوقعاتك جميع مزايا الوضع المظلم في الواجهة الأمامية لموقع WordPress الخاص بك ، فلماذا لا تمد نفس المجاملة لنفسك وتضيف الوضع إلى لوحة تحكم المسؤول أيضًا؟

إذا كان نظام ألوان WordPress الافتراضي مشرقًا جدًا لذوقك ، فإن المكون الإضافي WP Dark Mode لديه الحل. هيريس كيفية القيام بذلك:

  1. قم بتثبيت المكون الإضافي WP Dark Mode - ليس هناك الكثير لتوضيحه هنا. انظر إلى القسم أعلاه للحصول على إرشادات حول كيفية إكمال هذه الخطوة.
  2. تمكين Backend Dark Mode - يوجد هذا الخيار في نفس علامة التبويب مثل الإعدادات الأساسية الأخرى التي تحدثنا عنها من قبل ( الإعدادات العامة ). سيتعين عليك الانتقال إلى هذا القسم وقلب المفتاح المسمى Enable Backend Darkmode. لا تنس التمرير لأسفل والنقر فوق حفظ الإعدادات لتطبيق التغيير.
  3. قم بتبديل الوضع الداكن على لوحة تحكم المسؤول - ستحتوي لوحة تحكم المسؤول الآن على مفتاح في الجزء العلوي ، مما يتيح لك تشغيل الوضع المظلم. هذا مفيد بشكل خاص لمواقع الويب التي بها مشرفون متعددون ، حيث يمكن لكل شخص تشغيل الوضع المظلم أو إيقاف تشغيله بشكل مستقل.
  4. (اختياري) اضبط مخطط ألوان لوحة تحكم المسؤول - مع تشغيل الوضع الداكن ، قد ترغب في تبديل بعض الألوان لجعل كل شيء يبدو أكثر جمالًا. للقيام بذلك ، انتقل إلى المستخدمون> الملف الشخصي وحدد اللوحة التي تفضلها. بمجرد تعيين الألوان ، انقر فوق تحديث ملف التعريف لتطبيق الإعدادات الجديدة.

وهذا كل ما في الأمر. نأمل أن يساعدك هذا الدليل في تنفيذ الوضع المظلم على موقع WordPress الخاص بك بالإضافة إلى لوحة تحكم المشرف الخاصة بك.

يكاد يكون من السهل جدًا تجاهل هذه الترقية مع المكون الإضافي WP Dark Mode ، لذلك نشجعك على إضافة هذه الوظيفة الممتازة إلى موقعك.

السيرة الذاتية للمؤلف: كريستوفر متخصص في التسويق الرقمي في شركة Digital Strategy One ومدون مستقل. يركز على اتجاهات تقنية الويب الجديدة وتوزيع الصوت الرقمي عبر قنوات مختلفة. في أوقات فراغه ، يعزف كريستوفر الطبول والسحر: التجمع.