كيفية تفعيل الوضع الليلي في ووردبريس

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

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

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

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

كيفية تنشيط الوضع الليلي على لوحة معلومات WordPress

نبدأ مع المكون الإضافي Dark Mode لـ WordPress ، والذي يسمح لك بتنشيط الوضع الليلي على لوحة معلومات WordPress. إنه سهل الاستخدام ومجاني.

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

بمجرد تثبيت المكون الإضافي Dark Mode ، سيكون لدى كل مستخدم لبرنامج WordPress الخاص بك في ملفه الشخصي خيار تنشيطه على لوحة التحكم الخاصة به:

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

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

لسوء الحظ ، هناك مشكلة معلقة في المكون الإضافي WordPress Dark Mode: لتوفير التوافق مع محرر كتلة Gutenberg. في لقطة الشاشة التالية ، يمكنك أن ترى أنه لا يزال غير قادر على تطبيق الخلفية المظلمة على Gutenberg:

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

كيفية تنشيط الوضع الليلي لزوار WordPress

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

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

هذا المكون الإضافي ، مثل Dark Mode ، مجاني تمامًا ولديك أيضًا متاح في دليل WordPress Plugin Directory.

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

في واجهة إدارة القائمة نفسها ، يجب عليك فتح خيارات الشاشة التي ستجدها في الزاوية العلوية اليمنى لتفعيل خيار إضافة فئات CSS كما ترى في الصورة التالية:

بمجرد القيام بذلك ، عندما تقوم بتحرير عنصر القائمة الذي أضفناه قبل أن ترى حقلاً إضافيًا حيث يمكنك إضافة فئات CSS. هنا يجب عليك تضمين وضع wp-night-mode لفئة CSS. هذا الفصل هو الذي يحتاجه WP Night Mode لتحديد العنصر الذي يجب استخدامه كمفتاح الوضع الليلي.

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

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

الشيء الجيد في أداة التخصيص هو أنه يمكنك مشاهدة معاينة حقيقية لكيفية ظهور موقع الويب الخاص بك مع الألوان المختارة:

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

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

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

ضع في اعتبارك أن ما يفعله المكون الإضافي حقًا هو تطبيق فئة CSS wp-night-mode-on في علامة body في موقع الويب الخاص بك. لذلك ، إذا كنت ترغب في إصلاح خلفية عنصر HTML وجعله غامقًا ، فكل ما عليك فعله هو العثور على محدد لهذا العنصر وتطبيق الإصلاح عندما body علامة النص على فئة wp-night-mode-on .

في المقارنة التالية يمكنك أن ترى مقارنة أساسية بين الوضع العادي والوضع الليلي مع الألوان التي طبقناها:

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

هل أنت مستخدم منتظم للأوضاع الليلية في تطبيقاتك؟ تذكر التعليق أدناه برأيك!

صورة مميزة بواسطة Priscilla Du Preez على Unsplash.