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

سواء كنت تريد التأكيد على ميزة جديدة أو بيع أو تحديث أساسي، فإن إبراز عناصر معينة في القائمة يمكن أن يعزز فعالية موقعك.

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

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

لماذا يجب تسليط الضوء على عنصر القائمة في ووردبريس؟

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

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

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

وبناءً على ذلك، دعنا نرى كيف يمكنك تسليط الضوء على عنصر قائمة في ووردبريس باستخدام CSS:

الطريقة الأولى: تسليط الضوء على عنصر القائمة باستخدام محرر الموقع الكامل

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

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

هنا، ما عليك سوى النقر نقر مزدوج فوق عنصر القائمة الذي تريد تمييزه، ثم انقر فوق أيقونة “الإعدادات” في الأعلى. سيؤدي هذا على الفور إلى فتح إعدادات عنصر القائمة المحدد في لوحة الكتل.

الآن، ما عليك سوى التمرير لأسفل إلى علامة التبويب “متقدم” والنقر فوق أيقونة السهم بجوارها لتوسيعها.

سيؤدي هذا إلى فتح حقل “CSS Class إضافي” حيث يتعين عليك كتابة highlighted-menu.

بعد ذلك، انقر على زر “حفظ” أعلى الصفحة لتخزين التغييرات التي أجريتها.

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

كيفية إضافة مقتطفات CSS باستخدام WPCode

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

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

عند التنشيط، انتقل إلى صفحة Code Snippets » + Add Snippet من لوحة تحكم ووردبريس الخاصة بك.

هنا، حرك الماوس فوق خيار “Add Your Custom Code (New Snippet)” وانقر فوق الزر “Use Snippet” أسفله.

سينقلك هذا إلى صفحة “Create Custom Snippet”، حيث يمكنك البدء باختيار اسم للمقتطف.

بعد ذلك، حدد “CSS Snippet” كنوع الكود من القائمة المنسدلة في الزاوية اليسري من الشاشة.

بعد ذلك، انسخ ولصق كود CSS التالي في مربع “Code Preview”:

/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

بمجرد الانتهاء من ذلك، انتقل لأسفل إلى قسم “Insertion”.

هنا، ما عليك سوى اختيار وضع “Auto Insert” حتى يمكن تنفيذ الكود تلقائيًا على موقع الويب بالكامل.

الآن، انتقل إلى أعلى الصفحة وقم بتبديل المفتاح من “Inactive” إلى “Active”.

ثم، ما عليك سوى النقر فوق الزر “Save Snippet” لتخزين إعداداتك.

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

هكذا سيبدو عنصر القائمة بعد إضافة كود CSS.

كيفية الوصول إلى أداة تخصيص القالب باستخدام قالب الكتلة

إذا كنت تريد استخدام أداة تخصيص القالب وقالب FSE، فما عليك سوى نسخ ولصق عنوان URL أدناه في متصفحك. تأكد من استبدال “example.com” باسم دومين موقعك:

https://example.com/wp-admin/customize.php

سيؤدي هذا إلى فتح مُخصص القالب لقالب الكتلة الخاصة بك، حيث يتعين عليك توسيع علامة التبويب “تنسيقات CSS إضافية”.

من هنا، انسخ ولصق مقتطف CSS في مربع “CSS الإضافي”:

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

بعد ذلك، ما عليك سوى النقر على زر “نشر” في الأعلى لتخزين إعداداتك.

الطريقة 2: تسليط الضوء على عنصر القائمة باستخدام أداة تخصيص القالب

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

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

من هنا، انقر على أيقونة الترس في أعلى اليسار لعرض الخصائص المتقدمة.

الآن، انتقل إلى المربع “CSS Classes”.

بعد ذلك، انتقل لأسفل إلى قسم “القوائم”.

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

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

ما عليك سوى النقر فوق عنصر القائمة الذي تختاره لتوسيع بعض الإعدادات. هنا، انقر فوق حقل “CSS Classes”.

كل ما عليك فعله هو كتابة “highlighted-menu” في الحقل. يمكنك إضافة فئة CSS هذه إلى عناصر قائمة متعددة، وسيتم إبرازها جميعًا.

بعد ذلك، انتقل ببساطة إلى علامة التبويب “CSS إضافية” في مخصص القالب.

بعد ذلك، انسخ ولصق كود CSS التالي:

/* Highlighted menu */
.highlighted-menu
{
background: #d7c5fc;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

مبروك! لقد قمت بتسليط الضوء على أحد عناصر القائمة بنجاح.

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

وأخيرًا، لا تنس النقر على زر “نشر” في الأعلى لتخزين إعداداتك.

تخصيص تسليط الضوء على عنصر القائمة الخاصة بك

الآن بعد أن قمت بتسليط الضوء على عنصر القائمة، يمكنك تعديل كود CSS لتخصيص عنصر القائمة بالطريقة التي تريدها.

على سبيل المثال، يمكنك تغيير لون الخلفية لعنصر القائمة.

ابحث ببساطة عن الكود التالي في مقتطف CSS الذي قمت بلصقه للتو:

background: #d7c5fc;

بعد تحديد موقعه، يمكنك ببساطة استبدال رقم كود اللون الأرجواني الفاتح بالكود السداسي لأي لون من اختيارك:

background: #f5fcc5;

في الأعلى يوجد رمز سداسي عشري للأكوامارين.

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

بعد أن تكون راضي عن اختياراتك، ما عليك سوى النقر فوق الزر “نشر” في مخصص القالب أو “Save Snippet” في WPCode لحفظ التغييرات.

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