سیستم منوی وردپرس یک ویژگی داخلی دارد که می توانید توضیحات را برای آیتم های منو اضافه کنید. با این حال ، این ویژگی به طور پیش فرض پنهان است. حتی در صورت فعال بودن ، نمایش آنها بدون اضافه کردن کد پشتیبانی نمی شود. بیشتر قالب ها با توضیحات آیتم های منو طراحی نشده اند. در این مقاله به شما نشان خواهیم داد که چگونه می توانید توضیحات منو را در وردپرس فعال کنید و چگونه توضیحات منو را در قالب های وردپرس خود قرار دهید.

 

چگونگی افزودن توضیحات منوی وردپرس
چگونگی افزودن توضیحات منوی وردپرس

 

توجه: این آموزش شما را ملزم به درک صحیح از توسعه HTML ، CSS و وردپرس می کند.

چه زمانی و چرا می خواهید توضیحات منو اضافه کنید؟

برخی از کاربران فکر می کنند اضافه کردن توضیحات منو به سئو کمک می کند. با این حال ، ما فکر می کنیم که دلیل اصلی استفاده از آنها ارائه یک تجربه کاربری بهتر در سایت شماست.

توضیحات را می توان مورد استفاده قرار داد تا بازدید کنندگان را در صورت کلیک روی یک مورد از منو ، پیدا کنند. توضیحات جالب, توجه کاربران بیشتری را برای کلیک بر روی منوها جذب می کند.

 

ایجاد تجربه کاربری جالب
ایجاد تجربه کاربری جالب

 

مرحله 1: توضیحات منو را روشن کنید

به صفحه ” نمایش » فهرست ها ” در منوی پیشخوان وردپرس بروید. بر روی دکمه تنظیمات صفحه در گوشه بالا سمت چپ صفحه کلیک کنید. کادر توضیحات را علامت بزنید.

بیشتر‌بخوانید تا بیشتر‌بدانید
ارور Cannot redeclare در وردپرس نسخه جدید 5.4.2

 

فعال کردن توضیحات منو
فعال کردن توضیحات منو

 

این قسمت زمینه توضیحات را در آیتم های منو فعال می کند. مثل این:

 

نمایش توضیحات منو در زیر آیتم
نمایش توضیحات منو در زیر آیتم

 

اکنون می توانید توضیحات منو را به آیتم های موجود در منوی وردپرس خود اضافه کنید. با این حال ، این توضیحات هنوز در قالب شما ظاهر نمی شوند. برای نمایش توضیحات فهرست باید مقداری کد اضافه کنیم.

مرحله 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 اضافه می کنند. با این حال ، ممکن است که قالب شما از برخی از پرونده های قالب دیگر برای نمایش منوها استفاده کرده باشد.

بیشتر‌بخوانید تا بیشتر‌بدانید
ارسال خبرنامه به کاربران در وردپرس با SendPress

کاری که اکنون باید انجام دهیم این است که تابع 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>';

برای تغییر استایل توضیحات خود در سایت ، می توانید CSS را در صفحه استایل خود اضافه کنید. ما روی قالب دو هزارودوازده آزمایش این کار را انجام دادیم و از این css استفاده کردیم.

.menu-item {
border-left: 1px solid #ccc;
}
 
span.sub { 
font-style:italic;
font-size:small;
}
منابع
_ WpBeginner
تیم تولید محتوا _ آلتیمیت وردپرس
ما در تیم تولید محتوای آلتیمیت وردپرس، سخت در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را برای شما فراهم کنیم. محتوای این صفحه توسط یوسف حسینی کنترل و بررسی خواهد شد.

دیدگاهتان را بنویسید