امروزه در خیلی از وب سایت ها میبینیم که در کنار منوی سایت، عکس هایی کوچک و جذاب قرار داده اند که چه بسا باعث زیباتر شدن وبسایت شده است.
منوی وردپرس دارای ویژگی به نام توضیحات هستش که به صورت پیشفرض غیرفعال میباشد. حالا در این قسمت روش فعال سازی توضیحات منو وردپرس و افزودن آیکن به منو وردپرس رو به شما آموزش میدهم.
1-قدم اول
با زدن گزینه ی تنظیمات در بالای صفحه، گزینه های بالا برای شما به نمایش درمی آید.تیک گزینه ی توضیح را فعال کنید.
2-قدم دوم
بعد از زدن تیک گزینه ی توضیح، خواهید دید که به منوهای شما آپشنی جدید اضافه شده است.
3-قدم سوم
سایت رو بارگذاری مجدد کنید. تغییری ایجاد نشد؟ باید هم اینطور باشه چرا که بخش توضیح منو به صورت پیشفرض غیرفعال هستش و ما خودمون باید فعالش کنیم. برای این کار یک کلاس تعریف می کنیم. کد زیر را در 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 .= ‘<i class=”fa ‘.$item->description.'”></i>’;
$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;
$item_output .= ‘</a>’;
$item_output .= $args->after;
$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’, ‘walker’ => $walker ) ); ?>
5-قدم پنجم
حالا ذخیره کرده و سایت رو ببینید. خواهید دید که متنی که در توضیحات وارد کرده اید نمایش داده میشود. حالا برای زیبا سازی آن کد CSS دلخواهتون رو قرار بدید
اگر مشکلی و یا خطایی دیدید دوباره آموزش رو از ابتدا مطالعه کنید.
امیدوارم از این آموزش استفاده کرده باشید.