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

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

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

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

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

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

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

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

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

الخطوة 2: إضافة كلاس walker:

تعمل كلاس 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 لعرض القوائم. كما نشرنا أيضًا برنامج تعليمي للمبتدئين حول كيفية إضافة قوائم التنقل المخصصة في قوالب ووردبريس. تضيف معظم قوالب ووردبريس القوائم في تمبلت 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 لاستخدام كلاس walker التي حددناها سابقًا في functions.php. في السطر الثاني من الكود، الحجة الإضافية الوحيدة التي نحتاج إلى إضافتها إلى حجج wp_nav_menu الموجودة لدينا هي 'walker' => $walker.

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

تعرض كلاس walker التي أضفناها سابقًا أوصاف العناصر في سطر الكود هذا:

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

يضيف الكود أعلاه فاصلًا للأسطر إلى عنصر القائمة عن طريق إضافة علامة ثم يلف أوصافك في امتداد مع كلاس sub. مثل هذا:

<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/example-page/">Example Page<br /><span class="sub">Here's a simple example of the page you might be thinking of writing!</span></a></li>

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

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

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

الموارد الإضافية

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

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