Отображение описания пунктов меню в WordPress

Отображение описания пунктов меню в WordPress

CMS 15.10.2016

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

Добавление описания

По умолчанию WordPress не отображает поле ввода описания. Перед тем, как продолжать, нам нужно сделать поле ввода видимым. В админпанели, во вкладке Внешний вид > Меню перейдите на вкладку «Параметры экрана» в верхнем правом углу, рядом с вкладкой «Помощь». Затем убедитесь, что флажок «Описание» включен.

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 . '', '' . $item->description . '' . $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 . '' 

Заменяем предыдущую строку этой:

'' . $item->description . '' . $args->link_after . '' 

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

'">' . $args->link_before . $item->title 

Вот что нам нужно вместо неё написать:

$args->link_before . '' . $item->description . '' . $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->description . '' . $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

Поделиться:

Отправить ответ

Оставьте первый комментарий!

avatar
  Subscribe  
Notify of