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

يحتوي نظام قائمة ووردبريس WordPress على ميزة مضمنة حيث يمكنك إضافة أوصاف مع عناصر القائمة. 

ومع ذلك ، يتم إخفاء هذه الميزة افتراضيًا. حتى عند التمكين ، لا يتم دعم عرضها بدون إضافة بعض التعليمات البرمجية.

سنوضح لك في هذه المقالة كيفية تمكين أوصاف القوائم في ووردبريس WordPress وكيفية إضافة أوصاف القوائم في سمات ووردبريس WordPress الخاصة بك.

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

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

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

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

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

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

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

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

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

الخطوة الثانية: أضف فئة Walker:

تعمل فئة Walker على توسيع الفئة الموجودة في ووردبريس WordPress. 

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

أضف هذا الرمز في ملف 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

تستخدم سمات ووردبريس WordPress وظيفة wp_nav_menu () لعرض القوائم. 

تضيف معظم سمات ووردبريس WordPress قوائم في 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 واستخدمنا هذا المغلق.

.menu-item {

border-left: 1px solid #ccc;

}

span.sub { 

font-style:italic;

font-size:small;

}

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

إذا أعجبك هذا المقال ، فالرجاء أضافة تعليق وتققيم للموضوع .

أذا كان لديك أي أستفسار لاتتردد بمراسلتنا هنا 

يمكنك أيضًا العثور علينا على Twitter و Facebook