Отображение описания пунктов меню в WordPress
WordPress имеет возможность добавлять описания для каждого пункта в Пользовательском меню. Однако, по умолчанию они не отображаются на странице сайта. В этой статье мы разберемся как же их вывести на front-end.
Добавление описания
По умолчанию WordPress не отображает поле ввода описания. Перед тем, как продолжать, нам нужно сделать поле ввода видимым. В админпанели, во вкладке Внешний вид > Меню перейдите на вкладку «Параметры экрана» в верхнем правом углу, рядом с вкладкой «Помощь». Затем убедитесь, что флажок «Описание» включен.
Теперь для каждого пункта меню в редакторе появится окно для ввода описания. Переходим к отображению этих пунктов на странице.
Отображение описания
В сети довольно много статей, которые объясняют, как использовать пользовательский класс walker, для настройки вывода меню. Тем не менее я надеялась, что не придется объяснять этот класс для реализации такой не сложной задачи как выведение описания меню. К счастью, я наткнулась на эту статью: Adding Menu Descriptions to WordPress Menus, автор Ben Gillbanks. Он отметил, что тема Twenty Fifteen использует простой фильтр, чтобы добавить описания и в ней нет необходимости использовать весь класс walker.
Обратите внимание: Приведенный ниже код добавит поддержку описаний ко всем меню. Если вы хотите добавить поддержку описаний в определенном месте меню, в определенной теме, пожалуйста, смотрите статью Ben Gillbanks, которая упоминается в предыдущем пункте.
function prefix_nav_description( $item_output, $item, $depth, $args ) {
if ( !empty( $item->description ) ) {
$item_output = str_replace( $args->link_after . '', '
' . $args->link_after . '', $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );
Обратите внимание на то, что мы добавляем нашу функцию к фильтру walker_nav_menu_start_el. У него есть четыре параметра:
$item_output | string | The menu item’s starting HTML output. |
$item | object | Menu item data object. |
$depth | int | Depth of menu item. Used for padding. |
$args | array | An array of wp_nav_menu() arguments. |
Сначала мы проверяем есть ли описание для текущего пункта меню. Если оно существует, выводим его ссылкой используя функцию str_replace (). Описание выведется после основного текста ссылки.
Альтернативный вывод: Изменение места размещения описания
Теперь предположим, что мы хотим поместить описание перед основным текстом ссылки, а не после него. Для этого нам нужно изменить наш вызов функции str_replace (). Изменяем эту строку:
$args->link_after . ''
Заменяем предыдущую строку этой:
'
' . $args->link_after . ''
Для того, чтобы поместить описание перед основным текстом ссылки, нам нужно заменить эту строку:
'">' . $args->link_before . $item->title
Вот что нам нужно вместо неё написать:
$args->link_before . '
' . $item->title
Таким образом, наша новая функция должна выглядеть следующим образом (изменилась только $item_output ):
function prefix_nav_description( $item_output, $item, $depth, $args ) {
if ( !empty( $item->description ) ) {
$item_output = str_replace( '">' . $args->link_before . $item->title, '">' . $args->link_before . '
' . $item->title, $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );
Стилизация описания
Стилизировать меню вы можете как пожелаете. Однако, так как мы поместили описание в тег span вместо div, он будет отображаться на той же строке, что и основной текст ссылки. Как правило, мы хотим, чтобы описание отображалось выше или ниже основного текста ссылки. Чтобы сделать это, нам нужно отобразить описание в виде block, а не inline. Мы можем сделать это, поместив следующий код в таблицу стилей:
.menu-item-description {
display: block;
}
Так как стили меню очень разнообразны, я не буду вдаваться в подробности отображения, за исключением того, что укажу на один момент, с которым я столкнулась во время стилизации моего собственного меню. Если описание есть только у некоторых пунктов меню, а не у всех, возможно, потребуется указать вертикальное выравнивание текста в меню. По какой-то причине, мой основной текст ссылки при отсутствии описания, опускался вниз — в строку описания. Это решило мою проблему:
.menu a {
vertical-align: top;
}
Надеюсь, эта статья будет полезна при добавлении описания пунктов меню на ваш сайт.
Источник: THEME FOUNDATION