Как добавить описание в nav_menu WordPress
Как добавить описание в nav_menu WordPress
Нужно добавить небольшую часть описания вашего WordPress nav_menu? Сделаем это в четыре простых шага.
Шаг 1 – добавление пользовательского обходчика в functions.php
if( !class_exists('Custom_Description_Walker') ): //////////////////////////////////////////////////////////////////// // add description to wp_nav /////////////////////////////////////////////////////////////////// class Custom_Description_Walker extends Walker_Nav_Menu { /** * Start the element output. * * @param string $output Passed by reference. Used to append additional content. * @param object $item Menu item data object. * @param int $depth Depth of menu item. May be used for padding. * @param array $args Additional strings. * @return void */ function start_el(&$output, $item, $depth, $args) { $classes = empty ( $item->classes ) ? array () : (array) $item->classes; $class_names = join(' ', apply_filters('nav_menu_css_class',array_filter( $classes ), $item) ); ! empty ( $class_names ) and $class_names = ' class="'. esc_attr( $class_names ) . '"'; $output .= "<li id='menu-item-$item->ID' $class_names>"; $attributes = ''; ! empty( $item->attr_title ) and $attributes .= ' title="' . esc_attr( $item->attr_title ) .'"'; ! empty( $item->target ) and $attributes .= ' target="' . esc_attr( $item->target ) .'"'; ! empty( $item->xfn ) and $attributes .= ' rel="' . esc_attr( $item->xfn ) .'"'; ! empty( $item->url ) and $attributes .= ' href="' . esc_attr( $item->url ) .'"'; // insert description for top level elements only // you may change this $description = ( ! empty ( $item->description ) and 0 == $depth ) ? '<small class="nav_desc">' . esc_attr( $item->description ) . '</small>' : ''; $title = apply_filters( 'the_title', $item->title, $item->ID ); $item_output = $args->before . "<a $attributes>" . $args->link_before . $title . '<br /><span>' . $description . '</span>' . '</a> ' . $args->link_after . $args->after; // Since $output is called by reference we don't need to return anything. $output .= apply_filters( 'walker_nav_menu_start_el' , $item_output , $item , $depth , $args ); } } endif; |
Шаг 2 – добавление пользовательского обходчика в ваш wp_nav_menu ()
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false, 'menu_class' => 'sf-menu', 'fallback_cb' => 'revert_wp_menu_page','walker' => new Custom_Description_Walker )); ?> |
добавить ‘walker’ => new Custom_Description_Walker в существующий wp_nav_menu () Шаг 3 – добавление описания для каждого пункта меню перейдите в “панель администратора” -> “Внешний вид” -> “Меню”, выберите в правом верхнем углу экрана “Настройки экрана” и проверьте (отметьте) галочкой “Описание”. открыть любой пункт меню и текста в поле описания, как показано ниже
Шаг 4 – добавить CSS к описанию В этом случае описание было помещено внутрь тэга , поэтому нам нужно добавить некоторые дополнительные CSS для тэга. Например, как показано ниже
.sf-menu a span { font-size: 10px !important; } |
После того как каждый шаг завершен, Вы увидите небольшое описание каждого из пунктов меню.