الوضع المظلم في WordPress بدون البرنامج المساعد - هل هذا ممكن؟

حول WordPress Dark Mode بدون البرنامج المساعد

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

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

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

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

ابقي على اتصال!

فوائد استخدام Dark Mode في WordPress

لماذا يجب عليك استخدام Dark Mode في WordPress؟ هناك بعض الأسباب الوجيهة وراء ذلك. أنت شخصيًا تدرك حاجتها أثناء التصفح على جهاز الكمبيوتر الخاص بك في الليل بعيون متعبة.

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

هناك المزيد من الفوائد ؛ دعنا نتعرف على بعض منها أدناه.

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

حسنًا ، هذه هي الأسباب التي تجعل وضع Dark Mode خيارًا رائعًا لموقع WordPress الخاص بك.

الوضع المظلم لـ WordPress بدون البرنامج المساعد - هل هذا ممكن؟

الآن يأتي الجزء الممتع. سنرى هنا كيف يمكنك إطفاء الأنوار لموقع WordPress الخاص بك دون تثبيت أي مكون إضافي.

هناك نوعان من الطرق التي يمكنك القيام بذلك -

1. إضافة الوضع المظلم باستخدام HTML و CSS و JQuery
2. استخدام السمات الجاهزة مع تمكين الوضع الداكن

دعنا نلقي نظرة على هاتين الطريقتين بالتفصيل أدناه.

1) أضف الوضع المظلم باستخدام HTML و CSS و JQuery

إذا كنت مطورًا للقوالب ، فيجب أن تفضل هذه الطريقة اليدوية لتضمين تبديل الوضع المظلم إلى موقع WordPress الخاص بك. في هذه الطريقة ، تحتاج إلى إجراء القليل من الترميز المتعلق بـ HTML و CSS و JQuery.

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

لا تتردد في استخدام هذه المقتطفات لأنها مفتوحة المصدر ومجانية الاستخدام.

• أضف مقتطف كود HTML

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

<div class = ”wpnm-button”>

<div class = ”wpnm-button-inner-left”> </div>

<div class = ”wpnm-button-inner”> </div>

</div>

• أسلوب مع CSS

الآن عليك تصميم زر الوضع المظلم أو مفتاح التحويل باستخدام مقتطف CSS التالي.

/ * مبدل الوضع الداكن * /

.wpnm-button {

حجم الخط: 16 بكسل

}

.wpnm-button-inner-left: فارغ {

الهامش الأيسر: -0.625em

}

.wpnm-button-inner-left: قبل ، .wpnm-button-inner-left: بعد {

حجم الصندوق: مربع الحدود ؛

الهامش: 0؛

حشوة: 0 ؛

/*انتقال*/

-انتقال مجموعة الويب: 0.4s سهولة في الخروج ؛

-موز-الانتقال: 0.4 ثانية سهولة في الخروج ؛

-o-Transition: 0.4s سهولة في الخروج ؛

الانتقال: 0.4s سهولة في الخروج ؛

المخطط التفصيلي: لا شيء

}

.wpnm-button .wpnm-button-inner ، .wpnm-button .wpnm-button-inner-left {

عرض: مضمنة كتلة ؛

حجم الخط: 0.875em ؛

الموقف: نسبي ؛

الحشو: 0em ؛

ارتفاع الخط: 1em ؛

المؤشر: المؤشر.

اللون: rgba (149 ، 149 ، 149 ، 0.51) ؛

وزن الخط: عادي

}

.wpnm-button .wpnm-button-inner-left: قبل {

المحتوى: "؛

العرض محجوب؛

الموقف: مطلق.

مؤشر z: 1 ؛

ارتفاع الخط: 2.125em ؛

مسافة بادئة نصية: 2.5em ؛

الارتفاع: 1em ؛

العرض: 1em ؛

الهامش: 0.25 ميكرومتر ؛

/ * نصف قطر الحدود * /

نصف قطر مجموعة الويب الحدودية: 100٪ ؛

-موز حدود نصف قطرها: 100٪ ؛

نصف قطر الحدود: 100٪ ؛

يمين: 1.625em ؛

أسفل: 0em ؛

الخلفية: # FFB200 ؛

تحويل: تدوير (-45 درجة) ؛

ظل الصندوق: 0 0 0.625em أبيض

}

.wpnm-button .wpnm-button-inner-left: بعد {

المحتوى: ""؛

عرض: مضمنة كتلة ؛

العرض: 2.5em ؛

الارتفاع: 1.5 م ؛

-webkit-border-radius: 1em؛

-moz- الحدود- دائرة نصف قطرها: 1em ؛

نصف قطر الحدود: 1em ؛

الخلفية: rgba (255 ، 255 ، 255 ، 0.15) ؛

محاذاة عمودية: وسط ؛

الهامش: 0 0.625em ؛

الحد: 0.125em صلب # FFB200

}

.wpnm-button.active .wpnm-button-inner-left: قبل {

يمين: 1.0625em ؛

مربع الظل: 0.3125em 0.3125em 0 0 #eee ؛

الخلفية: شفافة

}

.wpnm-button.active .wpnm-button-inner-left: بعد {

الخلفية: rgba (0 ، 0 ، 0 ، 0.15) ؛

الحدود: 0.125em أبيض صلب

}

.wpnm-button .wpnm-button-inner-left {

اللون: rgba (250 ، 250 ، 250 ، 0.51) ؛

وزن الخط: غامق

}

.wpnm-button.active .wpnm-button-inner-left {

اللون: rgba (149 ، 149 ، 149 ، 0.51) ؛

وزن الخط: عادي

}

.wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {

اللون: rgba (250 ، 250 ، 250 ، 0.51) ؛

وزن الخط: غامق

}

هذا المقتطف مأخوذ من مكون إضافي ، ويرجع الفضل إلى مؤلف المكون الإضافي Marko Arula.

• أضف فئة CSS Dark Mode إلى Body Tag

أنت الآن بحاجة إلى إضافة هذه الفئة المعينة إلى علامة الجسم لأن هذا سيسمح لك بتخصيص التخطيط لاحقًا.

لنفعل ذلك.

jQuery (الوظيفة ($) {

/ * انقر على أيقونة الوضع الداكن. أضف فئات ومغلفات الوضع المظلم.

تخزين تفضيلات المستخدم من خلال الجلسات * /

$ ('. wpnm-button'). انقر فوق (الوظيفة () {

// اعرض القمر أو الشمس

$ ('. wpnm-button'). toggleClass ('active')؛

// إذا تم تحديد الوضع المظلم

إذا ($ ('. wpnm-button'). hasClass ('active')) {

// إضافة فئة الوضع المظلم إلى الجسم

$ ('body'). addClass ('الوضع المظلم')؛

// حفظ تفضيلات المستخدم في التخزين

localStorage.setItem ('darkMode'، true) ؛

} آخر {

$ ('body'). removeClass ('dark-mode')؛

localStorage.removeItem ('darkMode') ،

}

})

// تحقق من التخزين. عرض تفضيلات المستخدم

if (localStorage.getItem (“darkMode”)) {

$ ('body'). addClass ('الوضع المظلم')؛

$ ('. wpnm-button'). addClass ('نشط') ؛

}

})

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

وضع الجسم. * {

الخلفية: # 333 ؛

}

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

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

• استخدم ملفات تعريف الارتباط لتخزين تفضيلات المستخدم من خلال الجلسات

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

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

jQuery (الوظيفة ($) {

// قم بإنشاء كائن ملف تعريف الارتباط

var cookieStorage = {

setCookie: function setCookie (مفتاح ، قيمة ، وقت ، مسار) {

var expires = new Date () ؛

expires.setTime (expires.getTime () + time) ؛

var pathValue = ”؛

إذا (typeof path! == 'undefined') {

pathValue = 'path =' + path + '؛' ؛

}

document.cookie = key + '=' + value + '؛' + pathValue + 'expires =' + expires.toUTCString () ؛

} ،

getCookie: function getCookie (مفتاح) {

var keyValue = document.cookie.match ('(^ |؛)؟' + key + '= ([^؛] *) (؛ | $)')؛

عودة keyValue؟ keyValue [2]: null؛

} ،

removeCookie: وظيفة removeCookie (مفتاح) {

document.cookie = key + '= ؛ الحد الأقصى للعمر = 0 ؛ المسار = / '؛

}

} ؛

// انقر على أيقونة الوضع المظلم. أضف فئات ومغلفات الوضع المظلم. تخزين تفضيلات المستخدم من خلال الجلسات

$ ('. wpnm-button'). انقر فوق (الوظيفة () {

// اعرض القمر أو الشمس

$ ('. wpnm-button'). toggleClass ('active')؛

// إذا تم تحديد الوضع المظلم

إذا ($ ('. wpnm-button'). hasClass ('active')) {

// إضافة فئة الوضع المظلم إلى الجسم

$ ('body'). addClass ('الوضع المظلم')؛

cookieStorage.setCookie ('yonkovNightMode'، 'true'، 2628000000، '/') ؛

} آخر {

$ ('body'). removeClass ('dark-mode')؛

setTimeout (الوظيفة () {

cookieStorage.removeCookie ('yonkovNightMode') ؛

} ، 100) ؛

}

})

// تحقق من التخزين. عرض تفضيلات المستخدم

إذا (cookieStorage.getCookie ('yonkovNightMode')) {

$ ('body'). addClass ('الوضع المظلم')؛

$ ('. wpnm-button'). addClass ('نشط') ؛

}

})

• أضف فئة الوضع المظلم عبر مرشح فئة الجسم

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

انسخ المقتطف التالي والصقه في ملف jobs.php في نسق الطفل الخاص بك.

<؟ php

/ **

* تمكين وضع السمة الداكنة

* مفترق من https://wordpress.org/plugins/wp-night-mode/

* /

الوظيفة yonkov_dark_mode (فئات $) {

$ yonkov_night_mode = isset ($ _ COOKIE ['yonkovNightMode'])؟ $ _COOKIE ['yonkovNightMode']: "؛

// إذا تم تخزين ملف تعريف الارتباط ..

إذا ($ yonkov_night_mode! == ”) {

// إضافة فئة الجسم "الوضع المظلم"

إرجاع array_merge (فئات $ ، مصفوفة ("الوضع المظلم")) ؛

}

إرجاع فئات $؛

}

add_filter ('body_class'، 'yonkov_dark_mode') ؛

انت انتهيت

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

2. استخدم ثيمات WordPress الجاهزة التي تحتوي على خيار الوضع الداكن

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

إذن ما هي بعض سمات WordPress التي تدعم الوضع المظلم جنبًا إلى جنب مع وضع الإضاءة؟ هنا ، قدمنا ​​لك بعض سمات WordPress الشائعة بتنسيق الوضع المظلم. هيا نكتشف.

• Twenty Twenty One: هذه هي سمة WordPress الافتراضية التي تأتي مع تخطيط الوضع المظلم. بشكل افتراضي ، يتم تعطيله ، ويجب عليك تمكينه من خيارات السمة.
• Estera: إنها سمة WordPress شائعة لمواقع WooCommerce. يأتي مزودًا بزر تبديل للوضع المظلم يسمح للمستخدمين بالتبديل بين الوضع الفاتح والظلام.
• HIghStarter: سمة WordPress خفيفة الوزن هذه مشهورة بمواقع المحفظة. يحتوي على مفتاح الوضع المظلم بدون تثبيت مكون إضافي بشكل منفصل. وهذا يسمح للمستخدم بالتبديل بين الوضع الفاتح والداكن.
• Mate: إنها سمة WordPress مصممة بشكل جميل تسمح بالاختيار بين الوضع الفاتح أو الداكن مباشرة من رأس الموقع.

يدوي أو البرنامج المساعد ما هي الطريقة التي يجب استخدامها لتنشيط الوضع الداكن؟

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

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

بالحديث عن مكون إضافي مثالي ، فلدينا البرنامج المفضل لدينا الذي نوصي به هنا: البرنامج المساعد QS Dark Mode. إنه مكون إضافي يجلب مخططًا مظلمًا رائعًا إلى موقعك ويتيح لك التعامل مع اتجاه "الظلام".

دعنا نتحقق من سبب تثبيت مكون إضافي للوضع المظلم - خاصةً البرنامج المساعد QS Dark Mode وعدم اتباع الطريقة اليدوية.

البرنامج المساعد QS Dark Mode: الحل المثالي للوضع المظلم

هناك عدد غير قليل من الأسباب التي تجعل QS Dark Mode Plugin حلاً مثاليًا للوضع المظلم لموقعك على الويب. بعض هذه تشمل:

• انه مجانا
• دعم CSS المخصص
• أنماط تبديل داكنة مختلفة ، بما في ذلك الرسوم المتحركة المختلفة ونصوص CTA
• يوفر الوضع المظلم المستند إلى الوقت
• خيار لتحسين موقع الزر
• مجموعة واسعة من أنظمة الألوان الداكنة
• دعم الصورة وحجم الخط على أساس الوضع الداكن
• دعم WooCommerce

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

• قم بتنزيل ملحق QS Mode وقم بتحميل الملفات إلى الدليل المعني ، والذي يكون بشكل عام / wp-content / plugins / plugin-name directory
• لتثبيت البرنامج المساعد مباشرة من شاشة مكونات WordPress الإضافية. انقر فوق الإضافات> إضافة جديد من لوحة معلومات WP ، ثم ابحث عن المكون الإضافي في شريط البحث ، وانقر فوق تثبيت.
• قم بتنشيط المكون الإضافي QS Dark Mode من شاشة "المكونات الإضافية"
• بمجرد التنشيط ، يجب تمكين الوضع المظلم الخاص بك.
• يمكنك التبديل إلى الوضع المظلم من خلال النقر على زر التبديل على شاشتك
• انقر فوق زر التبديل مرة أخرى لتنشيط وضع الإضاءة
• للتخصيص ، يمكنك التحقق من جميع الإعدادات في الشريط الجانبي WP Admin Dark Mode للمكون الإضافي

هل يمكنني استخدام مخطط الألوان عندما يكون الوضع الداكن نشطًا؟

يعمل الوضع الداكن على تقليل مقدار اللون الأبيض أو الضوء الأزرق القادم من الشاشة. هذا لا يعني أنك ستصبح أسودًا طوال الوقت. لا يزال بإمكانك الاختيار بين أنظمة الألوان حتى عند تنشيط الوضع المظلم ، مثل ما يمكنك القيام به باستخدام QS Dark Mode Plugin.

ولكن يتم اختيار الألوان بطريقة يتم فيها عرض المحتوى بتباين عالٍ مع الألوان الأمامية الفاتحة والألوان الداكنة.

استنتاج

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

بدلاً من ذلك ، سيكون من الحكمة والأسهل إضافة مكون إضافي للوضع المظلم. لقد ذكرنا المكون الإضافي المفضل لدينا ، وهو QS Dark Mode Plugin ، والذي يمكنك التفكير فيه لجعل موقعك أكثر جاذبية وتهدئة للعين.

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

Astra Pro vs Elementor Pro - وجهاً لوجه مقارنة