إضافة خاصية لعناصر تنقل WP ذات الفروع

2 دقائق

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

جدول المحتوى

أهمية التعامل مع عناصر القائمة التي تحتوي على عناصر فرعية

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

كيفية إضافة سمات لعناصر التنقل في ووردبريس

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

الفكرة هنا هي استخدام الفلتر nav_menu_link_attributes، وهو فلتر تتيح لك تعديل سمات الروابط داخل القائمة. الهدف هو إضافة سمة onclick لتحفيز وظائف جافا سكريبت، بالإضافة إلى إضافة الفئة "sub-menu-toggle" لتعزيز تفاعل المستخدم.

كود لإضافة السمات إلى العناصر الرئيسية

فيما يلي نموذج لكود يمكن استخدامه لتحقيق هذه الغاية:

function add_classname_to_parent_nav_link($atts, $item) {
    if ($item->menu_item_parent == 0 && in_array('menu-item-has-children', $item->classes)) {
        $atts['onclick'] = 'twentytwentyoneExpandSubMenu(this)';
        $atts['class'] = 'sub-menu-toggle';
        $atts['aria-expanded'] = 'false';
    }
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_classname_to_parent_nav_link', 10, 2);

هذا الكود يتحقق مما إذا كان العنصر الرئيسي هو والد (Parent) لعناصر فرعية، ومن ثم يضيف السمات وفقًا لذلك.

توضيح لعمل الكود

هنا يقوم الكود بالتحقق أولاً مما إذا كان العنصر (Item) هو عنصر رئيسي. بعد ذلك، يجب أن يتحقق مما إذا كان يحتوي على خاصية "menu-item-has-children". إذا كانت الشروط مستوفية، سيتم إضافة الخصائص إلى رابط العنصر (a href) وليس إلى العنصر (li) نفسه.

المزايا الناتجة عن هذا التعديل

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

الختام

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