كيفية إنشاء قائمة منسدلة مخصصة في ووردبريس

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

الخطوة الأولى: إنشاء القوائم الأساسية في ووردبريس

قبل أن نبدأ بإضافة العنصر المنسدل، تأكد أولًا من إنشاء قائمة أساسية في ووردبريس:

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

الخطوة الثانية: إضافة العناصر الفرعية (منسدلة)

لجعل القائمة منسدلة، يجب إنشاء عناصر فرعية (Sub-Items) ضمن العنصر الرئيسي:

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

الآن أصبحت لديك قائمة رئيسية تضم عناصر أساسية، وعناصر فرعية منسدلة ضمنها.

الخطوة الثالثة: تخصيص تصميم القائمة المنسدلة بالكود

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

/* تنسيق القائمة الرئيسية */
.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* عناصر القائمة الرئيسية */
.main-menu > li {
    position: relative; /* ضروري لإظهار القوائم الفرعية بشكل صحيح */
    display: inline-block;
    margin: 0 15px;
}

/* الروابط ضمن القائمة الرئيسية */
.main-menu > li > a {
    text-decoration: none;
    font-weight: bold;
    color: #333;
    padding: 8px 12px;
    background-color: #f2f2f2;
    border-radius: 4px;
}

/* إخفاء القائمة الفرعية افتراضيًا */
.main-menu li ul {
    display: none;
    position: absolute;
    top: 40px; /* المسافة بين العنصر الرئيسي والقائمة الفرعية */
    left: 0;
    list-style: none;
    background-color: #fff;
    padding: 0;
    margin: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* عرض القائمة الفرعية عند تمرير الفأرة */
.main-menu li:hover > ul {
    display: block;
}

/* تنسيق عناصر القائمة الفرعية */
.main-menu li ul li {
    display: block;
    margin: 0;
}

/* الروابط ضمن القائمة الفرعية */
.main-menu li ul li a {
    display: block;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

.main-menu li ul li a:hover {
    background-color: #f2f2f2;
}

الخطوة الرابعة: ربط القوائم بـ CSS

لكي تنطبق التنسيقات السابقة على قائمة ووردبريس، يجب إضافة التصنيف class="main-menu" إلى القائمة في لوحة التحكم. إذا كان قالبك يدعم الاختيار اليدوي للتصنيف (CSS Classes) من داخل صفحة القوائم، قم بما يلي:

1. انتقل إلى مظهر > قوائم.
2. افتح خيارات الشاشة في أعلى يمين الصفحة، ثم فعل خيار تصنيفات CSS (CSS Classes).
3. اضغط على العنصر الرئيسي للقائمة، ثم أضف main-menu تحت خانة تصنيف CSS.
4. احفظ التغييرات.

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

الخطوة الخامسة: استخدام ملفات PHP لتخصيص القائمة (اختياري)

إذا أردت تحكمًا أكبر في كيفية عرض القائمة وسماتها، يمكنك استخدام الدوال في ووردبريس مثل wp_nav_menu(). افتح الملف المناسب في القالب الذي يعرض القائمة (غالبًا header.php أو footer.php) وأضف السطر التالي:

<?php
wp_nav_menu( array(
    'theme_location' => 'primary', // مكان التسجيل في functions.php
    'menu_class'     => 'main-menu',
    'container'      => 'ul',
    'fallback_cb'    => false
) );
?>

في هذا المثال، نستخدم 'menu_class' => 'main-menu' لإرفاق التصنيف CSS الذي أضفناه في الخطوة السابقة، مع تحديد مكان القائمة المحدد في ملف functions.php (عادةً يُسمى primary).

الخطوة السادسة: اختبار القائمة المنسدلة

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

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

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

تعزيز موقعك مع إتقان

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

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

تواصل معنا الآن!

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

تواصل مع إتقان

اجعل موقعك متميزًا واجذب عملاءك المحتملين بتجربة تصفح سهلة وجذابة. فريقنا في إتقان جاهز لمساعدتك!