Главная › Новости

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

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

Страница Отзывов. Плагин Strong Testimonials

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

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

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

Как создать галерею на wordpress без плагинов

Шаг 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) и изменить его в такую сторону.