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

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

كل ما عليك القيام به هو فتح موضوع الخاص بك functions.php الملف. ثم الصق الكود التالي:

function wpb_first_and_last_menu_class($items) {
    $items[1]->classes[] = 'first';
    $items[count($items)]->classes[] = 'last';
    return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');

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

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

ملاحظة: إذا كان لديك الكثير من المستخدمين على المتصفحات القديمة (إنترنت إكسبلورر) ، فربما تريد تجنب الأسلوب التالي.

نأمل أن يكون هذا المقال قد ساعدك. لقد أنشأنا ورقة غش على فئات CSS الافتراضية التي أنشأناها  ووردبريس والتي قد تكون مفيدة عند تصميم عناصر القائمة أيضًا.

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

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