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

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

في هذا الدليل، سنوضح لك بالتفصيل كيفية تغيير لون اختيار النص الافتراضي في ووردبريس.

لماذا تغيير لون اختيار النص الافتراضي في ووردبريس؟

يشير لون تحديد النص إلى لون الخط في ووردبريس الذي يظهر عند تمييز جزء من النص داخل المحتوى. كما يلي:

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

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

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

الطريقة 1: استخدام الكود لتغيير لون تحديد النص (يعمل مع جميع القوالب)

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

في كثير من الأحيان، ستجد أجزاء من كود CSS في دروس ووردبريس مع إرشادات لإضافتها إلى ملف functions.php الخاص بقالبك.

المشكلة الأكبر هي أن أي خطأ حتى لو كان بسيط في مقتطف الكود قد يؤدي إلى تدمير موقع ووردبريس الخاص بك تمامًا. ناهيك عن أنك ستفقد كل أكوادك المخصصة عندما تقوم بـ تحديث قالب ووردبريس.

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

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

بعد التفعيل، توجه إلى Code Snippets » Add Snippet في لوحة تحكم ووردبريس.

هنا، مرر مؤشر الماوس فوق ‘Add Your Custom Code (New Snippet)’.

عند ظهورها، انقر فوق الزر  ‘+ Add Custom Snippet’.

بعد ذلك، عليك اختيار نوع الكود من قائمة الخيارات التي تظهر على الشاشة.

بالنسبة لهذا البرنامج التعليمي، حدد ‘CSS Snippet’.

في الصفحة التالية، اكتب عنوان لمقتطف الكود المخصص.

يمكنك استخدام أي شيء يساعدك على تحديد المقتطف في لوحة تحكم ووردبريس لاحقًا، مثل ‘تغيير لون تحديد النص’.

يمكنك بعد ذلك إضافة CSS التالي إلى مربع Code Preview:

/* Customizing text selection for Firefox */
::-moz-selection {
    /* Background color when text is selected in Firefox */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in Firefox */
    color: #fff;
}
 
/* Customizing text selection for other browsers */
::selection {
    /* Background color when text is selected in other browsers */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in other browsers */
    color: #fff;
}

لاحظ أننا أضفنا أستايلان. يعمل CSS selector ::moz-selection مع متصفح فايرفوكس، بينما يعمل CSS selector ::selection مع متصفحات شائعة أخرى مثل جوجل كروم، وسفاري، وIE9+، وأوبرا.

في المثال أعلاه، سيعمل كود # hex على تغيير لون الرابط إلى اللون الأخضر، لذا ستحتاج إلى تغيير background-color: #008000 إلى اللون الذي تريد استخدامه للنص المميز.

إذا لم تكن متأكد من كود hex المراد استخدامه، يمكنك استكشاف ألوان مختلفة والحصول على الكود من موقع HTML Color Codes.

عندما تصبح راضي عن مظهر كودك، انقر على زر ‘Inactive’ لإظهار ‘Active’ بدلاً من ذلك.

بعد ذلك، انقر فوق ‘Save Snippet’ لجعل المقتفط CSS نشط.

يمكنك الأن زيارة موقعك الإلكتروني لمشاهدة التغييرات قيد التنفيذ.

هكذا بدت التغييرات على موقعنا التجريبي.

الطريقة 2: استخدام إعدادات قالب ووردبريس (تختلف حسب القالب الكلاسيكي)

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

ملحوظة: هذه الطريقة غير قابلة للتطبيق على قوالب الكتلة.

ابحث هنا عن أي إعدادات تحمل اسم ‘Colors’.

إذا رأيت علامة تبويب ‘عام’ أو ‘Global’ أو ما شابه، فغالبًا ما تحتوي على إعدادات ألوان القالب.

على سبيل المثال، إذا كنت تستخدم قالب أسترا ووردبريس، فستحتاج إلى تحديد علامة التبويب ‘Global’.

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

بعد ذلك، يجب عليك النقر فوق ‘Accent’.

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

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

عندما تصبح راضي عن التغييرات التي أجريتها، ما عليك سوى النقر فوق ‘نشر’ لجعلها نشطة.

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

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

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

اكتشف المزيد من النصائح والحيل المتعلقة بطباعة ووردبريس

هل ترغب في تخصيص خطوط موقع ووردبريس الخاص بك، ولكنك لا تعرف الطريقة؟ قم بإلقاء نظرة على هذه الأدلة لمساعدتك على البدء:

• أفضل إضافات التايبوجرافي ووردبريس لتحسين تصميمك
• كيفية تغيير حجم الخط بسهولة في ووردبريس
• ما هو الخط الآمن للويب + أفضل الخطوط الآمنة للويب (دليل المبتدئين)
• كيفية إضافة خطوط الأيقونات بسهولة إلى قالب ووردبريس
• كيفية إضافة الأحرف الكبيرة المنسدلة في منشورات ووردبريس

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