Добавление описания для пунктов меню в WordPress

Опубликовано: 01.09.2018

видео Добавление описания для пунктов меню в WordPress

Настраиваем меню Wordpress

В некоторых премиум шаблонах WordPress есть для навигационного меню одна интересная опция — под названием пункта меню располагается 2-3слова краткого описания (см. иллюстрацию слева). Недавно пришлось разбираться с данный вопросом и я нашел одну статью по теме, перевод которой вам и предлагаю. Публикация о том, как реализовать подобное улучшенное меню для  Wordpress.



Для вывода меню, созданного из админки WordPress, используется специальная функция wp_nav_menu . В итоге получаем код по типу этого:

< ul id = "menu-main" > < li >< a href = "#" > Home </ a></ li > < li >< a href = "#" > About </ a></ li > < li >< a href = "#" > Contact </ a></ li > < li >< a href = "#" > Blog </ a></ li > </ ul >

<ul id="menu-main"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> </ul>


Правильные настройки и обзор админ панели WordPress

Однако для добавления описаний в пункты меню нам нужен несколько иной HTML код, как минимум вот такой:

< ul id = "menu-main" > < li >< a href = "#" >< strong > Home </ strong >< span > Starting the journey </ span ></ a></ li > < li >< a href = "#" >< strong > About </ strong >< span > What to expect </ span ></ a></ li > < li >< a href = "#" >< strong > Contact </ strong >< span > Get in touch !</ span ></ a></ li > < li >< a href = "#" >< strong > Blog </ strong >< span > Latest storys </ span ></ a></ li > </ ul >

<ul id="menu-main"> <li><a href="#"><strong>Home</strong><span>Starting the journey</span></a></li> <li><a href="#"><strong>About</strong><span>What to expect</span></a></li> <li><a href="#"><strong>Contact</strong><span>Get in touch!</span></a></li> <li><a href="#"><strong>Blog</strong><span> Latest storys</span></a></li> </ul>

Здесь теги strong оборачивают названия пунктов меню, а span — используются для описаний. Дальше стилизовать их нужны образом можно через CSS.

Настройки в админке

Мало кто знает, что меню в WordPress обладает возможностью добавления не только атрибутов title для ссылки, но имеет также и описание. Однако по умолчанию эта функция скрыта. Вам нужно зайти в админку в раздел «Внешний вид» — «Меню», а затем кликнуть по кнопке «Настройки экрана» (Screen Option) в правом верхнем углу.

Как только вы ее включите, то увидите поле «Описание» для каждого пункта меню.

По умолчанию WordPress добавляет в поле описания определенный текст (например, из description). Его можете удалить и добавить нужную вам фразу, которая будет отображаться на сайте под названием пункта навигации.

Кстати, в этих настройках экрана встречаются и другие полезные элементы, например там активируется использование в WooCommerce меню категорий товара . Плохо, что изначально данные опции скрыты, и не всегда понятно, что они там есть.

Реализация улучшенного меню

Система  Wordpress использует специальный класс “Walker” для прохода всех записей БД и затем выдает определенный результат. Мы попытаемся создать собственную интерпретацию этого класса с более широкой функциональностью. Вам нужно будет добавить в файл functions.php следующий код:

class description_walker 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 ) . '"' : '' ; $prepend = '<strong>' ; $append = '</strong>' ; $description = ! empty ( $item -> description ) ? '<span>' . esc_attr ( $item -> description ) . '</span>' : '' ; if ( $depth != 0 ) { $description = $append = $prepend = "" ; } $item_output = $args -> before ; $item_output .= '<a' . $attributes . '>' ; $item_output .= $args -> link_before . $prepend . apply_filters ( 'the_title' , $item -> title , $item -> ID ) . $append ; $item_output .= $description . $args -> link_after ; $item_output .= '</a>' ; $item_output .= $args -> after ; $output .= apply_filters ( 'walker_nav_menu_start_el' , $item_output , $item , $depth , $args ) ; } }

class description_walker 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 ) .'"' : ''; $prepend = '<strong>'; $append = '</strong>'; $description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : ''; if($depth != 0) { $description = $append = $prepend = ""; } $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append; $item_output .= $description.$args->link_after; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }

Функция проверяет наличие описания для пунктов меню и оборачивает их нужные нам теги.

Дальше нам при выводе меню сайта в файле header.php или в любом другом, который используется для навигации, нужно добавить вызов функции wp_nav_menu.

wp_nav_menu ( array ( 'container' => false , 'menu_class' => 'nav' , 'echo' => true , 'before' => '' , 'after' => '' , 'link_before' => '' , 'link_after' => '' , 'depth' => 0 , 'walker' => new description_walker ( ) ) ) ;

wp_nav_menu( array( 'container' =>false, 'menu_class' => 'nav', 'echo' => true, 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 0, 'walker' => new description_walker()) );

После этого меню будет иметь нужную нам структуру, о которой мы говорили в самом начале статьи. Теперь можно легко подправить отображение элементов с помощью CSS стилей. Если же захотите чтобы в моб.версии навигация выглядела по другому вам пригодится функция wp_is_mobile или плагин WP Responsive Menu . Стили добавляете в style.css или похожий файл.

.nav { height : 50px ; padding-left : 13px ; margin : 0 ; padding : 0 ; list-style-type : none ; list-style-position : outside ; position : relative ; } .nav a { display : block ; float : left ; line-height : 18px ; outline : medium none ; padding : 2px 10px ; text-decoration : none ; width : 95px ; min-height : 35px ; } .nav li a strong { display : block ; font-size : 14px ; font-weight : normal ; } .nav li a span { display : block ; font-size : 10px ; line-height : 14px ; }

.nav{ height:50px; padding-left:13px; margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; } .nav a{ display:block; float:left; line-height:18px; outline:medium none; padding:2px 10px; text-decoration:none; width:95px; min-height: 35px; } .nav li a strong { display:block; font-size:14px; font-weight:normal; } .nav li a span { display:block; font-size:10px; line-height:14px; }

В итоге получится меню по типу такого:

Спасибо авторам оригинальной статьи за подобный интересный и полезный хак.

rss