Как добавить описания к меню в своей теме WordPress

Система меню WordPress имеет встроенную функцию, с помощью которой вы сможете добавлять описания к каждому элементу меню. Однако, эта функция по-умолчанию скрыта. И даже если ее включить, то не обойтись без добавления кода. Большинство тем разрабатываются без поддержки оговариваемой функции. В этой статье опишу, как включить описания к меню в WordPress и как добавить их в свою тему ВП.

Внимание: Эта статья предполагает ваших знаний HTML, CSS, и знаний в разработке тем для WordPress.

Прежде всего, давайте выясним зачем нужно добавлять подписи к меню? Ну, многие люди думают, что это помогает в плане SEO. Однако, по моему мнению, основной причиной использования подписей должно являться удобство для пользователей вашего сайта. Описания могут использоваться для того, чтобы сообщить пользователям, что именно они увидят, кликнув по ссылке в меню. Интригующее описание привлечет больше кликов!

Шаг 1: Включаем подписи к меню

Идем в Внешний вид » Меню. Кликаем на кнопку Настройки экрана в правом верхнем углу страницы. Отмечаем пункт Описание.

Это «включит» поле описания в каждом элементе меню. Примерно так:

Теперь можно добавлять описания из админки. Однако, эти описания нигде не отобразятся в вашей теме. Для того, чтобы исправить это, нужно добавить код, которого совсем немного.

Шаг 2: Добавляем класс walker:

Класс walker расширяет существующий класс в WordPress. Он просто добавляет строку кода для отображения подписей в меню. Вставьте следующий код в файл 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

Темы WordPress используют функцию wp_nav_menu() для вывода меню. Большинство из них содержат код вывода в файле header.php шаблона. Однако, если его там не окажется, то необходимо будет поискать в других файлах шаблона.
Нам нужно выяснить, где вызывается эта функция (чаще всего в 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. Во второй строке кода добавили дополнительный параметр к уже существующим —

'walker' => $walker

шан 4. Оформляем описания

Класс walker , который мы добавили ранее, выводит описания с помощью этой строки кода:

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

Этот код добавляет перенос строки в элемент меню с помощью тега < br />, а затем оборачивает описания в 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/about/">О нас<br /><span class="sub">Кто мы такие?</span></a></li>

Если захотите изменить вывод описаний на своем сайте, необходимо будет покопаться в CSS стилях вашей темы. Я тестировал на стандартной теме WordPress — Twenty Twelve, поэтому и стили использовались оттуда.

.menu-item {
border-left: 1px solid #ccc;
}

span.sub { 
font-style:italic;
font-size:small;
}

Надеюсь, что статья поможет начинающим разработчикам оформить меню в своих темах по собственному вкусу.

Дополнительная информация

Бил Эрикссон Меню с классом описания