كيفية إنشاء قائمة متعددة المستويات (Multi-Level Menu) في ووردبريس
تُعد القوائم متعددة المستويات من أهم العناصر التي تعزز تجربة المستخدم، إذ تسمح بتجميع الروابط والمحتويات المرتبطة تحت بنية منظمة. إذا كنت ترغب في مساعدة زوارك على التنقل بسهولة بين أقسام موقعك، فإن استخدام قائمة منسدلة أو متعددة المستويات هو الحل الأمثل. في هذا الدليل المفصّل، سنشرح خطوة بخطوة كيفية إنشاء قائمة متعددة المستويات في ووردبريس، مع مراعاة أبسط المفاهيم للمبتدئين وأفضل الممارسات المتبعة في التصميم والتنفيذ.
الخطوة الأولى: تفعيل خاصية القوائم في قالبك
قبل إنشاء القائمة، تأكد من أن قالب ووردبريس الذي تستخدمه يدعم ميزة القوائم. غالبية القوالب الحديثة تأتي مع هذه الميزة، ولكن إذا أردت التأكد أو إضافة مواقع قوائم مخصصة، يمكنك فحص ملف functions.php ضمن القالب أو القالب الفرعي (Child Theme) والبحث عن كود شبيه بالآتي:
function mytheme_register_menus() {
register_nav_menus( array(
'primary' => 'القائمة الرئيسية',
'footer' => 'قائمة التذييل',
) );
}
add_action( 'after_setup_theme', 'mytheme_register_menus' );
إذا لم يكن لديك هذا السطر أو شيء مشابه، يمكنك إضافته بنفسك لتسجيل مواقع القوائم المرغوبة.
الخطوة الثانية: إنشاء القائمة من لوحة تحكم ووردبريس
- من لوحة التحكم، توجه إلى مظهر > قوائم.
- اضغط على الزر إنشاء قائمة جديدة إذا لم تكن قد أنشأت قائمة من قبل.
- اختر اسمًا يُسهل عليك التعرف عليها فيما بعد، مثل: “القائمة الرئيسية”.
- حدد موقع العرض (Display Location) المناسب، مثل: Primary أو Header.
- انقر على حفظ القائمة.
الآن أصبح لديك قائمة أساسية فارغة جاهزة لإضافة العناصر.
الخطوة الثالثة: إضافة عناصر القائمة والمستويات الفرعية
لإنشاء قائمة متعددة المستويات، تحتاج إلى إضافة عناصر رئيسية، ثم عناصر فرعية تحتها:
- انتقل إلى الجزء الأيسر في صفحة إدارة القوائم وستجد أقسامًا مثل: الصفحات، الروابط المخصصة، والتصنيفات.
- اختر العنصر (صفحة أو رابط مخصص) المراد إضافته، ثم انقر على زر أضف إلى القائمة.
- لتحديد عنصر ما كـ عنصر فرعي (Sub-Item)، اسحب العنصر قليلًا إلى اليمين أسفل العنصر الرئيسي.
كرِّر الخطوة الأخيرة لإضافة المزيد من العناصر الفرعية. يمكنك أيضًا إضافة مستويات أعمق عن طريق سحب العناصر إلى مستوى أدنى. بعد الانتهاء، انقر على حفظ القائمة.
الخطوة الرابعة: تنسيق القائمة المتعددة المستويات عبر CSS
يعتمد مظهر القائمة المنسدلة أو القائمة متعددة المستويات على خصائص CSS الخاصة بقالبك، لكن إذا أردت تخصيصها أو إضافة تأثيرات خاصة، يمكنك ذلك في ملف style.css بالقالب الفرعي أو عبر محرر CSS إضافي في لوحة تحكم ووردبريس. إليك مثال بسيط:
/* تصميم أساسي للقائمة */
.main-menu {
list-style: none;
margin: 0;
padding: 0;
}
.main-menu li {
position: relative;
display: inline-block; /* قد ترغب باستبدالها بـ block لظهور العناصر عموديًا */
margin: 0 10px;
}
.main-menu li a {
text-decoration: none;
padding: 10px 15px;
background: #f5f5f5;
color: #333;
display: block;
}
/* إخفاء القائمة الفرعية افتراضيًا */
.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 {
padding: 8px 15px;
background-color: #fff;
color: #333;
border-bottom: 1px solid #ccc;
}
.main-menu li ul li a:hover {
background-color: #f2f2f2;
}
ملاحظة: تأكد من أن اسم التصنيف (class) في الـ wp_nav_menu() أو في لوحة التحكم يتطابق مع ما تضعه هنا (مثل main-menu) لضمان تطبيق التنسيقات بنجاح.
الخطوة الخامسة: استخدام دالة wp_nav_menu() لإظهار القائمة (اختياري متقدم)
في معظم القوالب، يتم بالفعل استدعاء القائمة في ملفات header.php أو footer.php. إذا أردت تخصيص الكود يدويًا أو إضافة قائمة في مكان معين، أضف السطر التالي في الملف المناسب:
<?php
wp_nav_menu( array(
'theme_location' => 'primary', // نفس المكان المسجل في functions.php
'menu_class' => 'main-menu', // التصنيف الذي وضعته في تنسيق CSS
'container' => 'nav', // العنصر الذي سيحتوي القائمة
'fallback_cb' => false // ماذا يحدث لو لم توجد قائمة
) );
?>
هذا الكود يستدعي قائمة ووردبريس المسجلة باسم primary، ويضيف لها التصنيف main-menu للتنسيقات.
الخطوة السادسة: نصائح لتجربة المستخدم وتصميم أفضل
- استخدم تسميات واضحة: يجب أن تكون أسماء العناصر الرئيسية والفرعية بسيطة وواضحة؛ إذ تشكل القائمة جزءًا مهمًا من هيكلية الموقع.
- حد من عدد المستويات الفرعية: الإكثار من المستويات يجعل القائمة معقدة. حافظ على تنظيم منطقي يساعد المستخدم على الوصول للمحتوى بأقل عدد من النقرات.
- تجنب الحجم الكبير: إذا كانت قائمتك تحتوي على الكثير من العناصر، فكر في تقسيمها إلى قوائم فرعية متعددة أو استخدام قوائم ميغا (Mega Menus).
- ادعم الشاشات الصغيرة: تأكد من أن القائمة متجاوبة (Responsive) بحيث تتحول إلى قائمة هاتفية أو قائمة على شكل أيقونة (Hamburger Menu) عند العرض على الأجهزة المحمولة.
اختبار قائمةك متعددة المستويات
بعد إنشاء القائمة وتنسيقها، تأكد من اختبارها على مختلف الأجهزة والمتصفحات:
- الأجهزة المكتبية: جرّب تمرير الفأرة فوق العناصر الرئيسية للتحقق من ظهور القائمة الفرعية.
- الأجهزة المحمولة: تأكد من ظهور القائمة بطريقة تتناسب مع شاشة صغيرة، سواء أكنت تستخدم قائمة منسدلة أو أيقونة.
- المتصفحات المختلفة: جرّب على Chrome وFirefox وEdge وSafari للتأكد من توافق التصميم مع المعايير.
لماذا تحتاج إلى موقع احترافي مع إتقان؟
تعتبر القائمة متعددة المستويات جزءًا حيويًا من تجربة المستخدم، ولكنها ليست سوى عنصر واحد ضمن العديد من العناصر المهمة لبناء موقع ووردبريس متكامل. إذا كنت ترغب في تقديم تجربة سلسة ومميزة لزوارك، فإن فريق إتقان يقدم خبرة عميقة في تصميم وتطوير المواقع العربية باستخدام أحدث التقنيات والمعايير.
من خلال تعاونك مع إتقان، ستحصل على:
- تصميم يبرز هويتك: نركز على جعل موقعك يعكس هوية علامتك التجارية بشكل احترافي.
- تطوير متين: نعتني بالمظهر والأداء والأمان، ونطبق أفضل الممارسات في تطوير ووردبريس.
- دعم واستشارات: نرافقك خطوة بخطوة للحفاظ على موقعك وتطويره مع نمو أعمالك.
تواصل معنا الآن!
إذا كنت مستعدًا للارتقاء بموقعك وتوفير تجربة تنقل سلسة عبر قوائم متعددة المستويات، تواصل مع فريق إتقان اليوم. ابدأ رحلتك نحو موقع احترافي من خلال النقر على الرابط أدناه:
لا تدع منافسيك يسبقونك في الساحة الرقمية. ابدأ الآن بإحداث الفرق في تجربة زوار موقعك واجعل مظهرك على الإنترنت أكثر تنظيمًا وجاذبية!