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

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

كيفية إضافة أوصاف القوائم في قوالب ووردبريس

ملاحظة: هذا البرنامج التعليمي يتطلب منك فهمًا جيدًا لتطوير قوالب HTML و CSS و  ووردبريس.

متى ولماذا تريد إضافة أوصاف القائمة؟

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

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

أوصاف القائمة

الخطوة 1: قم بتشغيل أوصاف القائمة

انتقل إلى المظهر »القوائم . انقر على زر خيارات الشاشة في الزاوية اليمنى العليا من الصفحة. حدد مربع الأوصاف .

تفعيل أوصاف القوائم في ووردبريس

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

تمت إضافة حقل الوصف إلى عناصر القائمة

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

الخطوة 2: أضف فئة المشاة:

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

class Menu_With_Description extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
         
        $class_names = $value = '';
 
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
 
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';
 
        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
 
        $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
        $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
        $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
 
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '<br /><span class="sub">' . $item->description . '</span>';
        $item_output .= '</a>';
        $item_output .= $args->after;
 
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

الخطوة 3. قم بتمكين Walker في wp_nav_menu

تستخدم سمات  ووردبريس وظيفة wp_nav_menu () لعرض القوائم. لقد نشرنا أيضًا برنامجًا تعليميًا للمبتدئين حول كيفية إضافة قوائم تنقل مخصصة في  ووردبريس Themes . تضيف معظم سمات  ووردبريس قوائم في header.phpالقالب. ومع ذلك ، من الممكن أن يكون السمة الخاصة بك قد استخدمت ملف قالب آخر لعرض القوائم.

ما نحتاج إلى القيام به الآن هو العثور على wp_nav_menu()وظيفة في قالبك (على الأرجح في header.php) وتغييره على هذا النحو.

<?php $walker = new Menu_With_Description; ?>
 
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>

في السطر الأول ، حددنا $walkerاستخدام فئة المشاة التي حددناها سابقًا في functions.php. في السطر الثاني من التعليمات البرمجية ، فإن الوسيطة الإضافية الوحيدة التي نحتاج إلى إضافتها إلى وسيطات wp_nav_menu الموجودة لدينا هي ‘walker’ => $walker.

الخطوة 4. تصميم الأوصاف

تعرض فئة walker التي أضفناها سابقًا أوصاف العناصر في هذا السطر من التعليمات البرمجية:

$item_output .= '<br /><span class="sub">' . $item->description . '</span>';

يضيف الكود أعلاه فاصل سطر إلى عنصر القائمة عن طريق إضافة

علامة ثم يلتف الأوصاف الخاصة بك في نطاق مع فئة فرعية. مثله:

<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">About<br /><span class="sub">Who are we?</span></a></li>

لتغيير كيفية ظهور الأوصاف الخاصة بك على موقعك ، يمكنك إضافة CSS في ورقة أنماط القالب الخاص بك. كنا نختبر هذا في Twenty Twelve واستخدمنا هذا css.

.menu-item {
border-left: 1px solid #ccc;
}
 
span.sub { 
font-style:italic;
font-size:small;
}

نأمل أن تجد هذه المقالة مفيدة وستساعدك في إنشاء قوائم رائعة المظهر مع أوصاف القوائم في قالبك. أسئلة؟ اتركهم في التعليقات أدناه.

مصادر إضافية

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

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

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

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

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

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

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