Как добавить описание к ярлыкам меню

Примечание: Этот текст может содержать некоторые партнерские ссылки, а это значит, что я зарабатываю небольшую комиссию без каких-либо дополнительных затрат с вашей стороны, если вы воспользуетесь этими ссылками. Спасибо за понимание и поддержку.

Наверняка вы видели такие расширенные навигационные меню на разных сайта: под названием страницы — мелкими буквами идет короткое описание:

 menudescriptions

 

WordPress имеет встроенную функцию, где вы можете добавить описания пунктов меню. Для этого вам надо перейти в раздел Внешний вид => Меню, в правом верхнем углу найти ярлык — Настройки экрана, открыть настройки, поставить флажок напротив слова — Описание:

 menu-descriptions

 Поле Описание появится в настройках ярлыков (пунктов меню):

menu-descriptions2

Одно важное НО — если в вашей теме эта функция поддерживается и написана автором — разработчиком темы.

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

Примечание: Этот урок требует, чтобы вы имели ясное понимание HTML, CSS, и PHP.

Прежде всего, хотел бы спросить: а зачем вы хотите добавить описание к ярлыкам в меню?

Некоторые владельцы сайтов думают, что это поможет для СЕО. Лично я считаю, что больше всего необходимость в описаниях ярлыков нужна для более качественной «маршрутизации» ваших читателей на вашем сайте.

Качественно и коротко написанное описание может не только правильно направить читателя, но и заинтриговать его. Главное — что вы там напишите. Ведь места не так и много, всего 2-3 слова максимум.

Первый шаг. Сначала вы включаете описание на странице Меню (см. скриншот выше).

Они станут включенными, но еще не появятся в вашем меню, так как надо прописать специальный код PHP.

Второй шаг. Добавляем класс 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 );
        }
}

Третий шаг. Включаем дополнительный класс в функцию вызова пользовательского меню.

Советую прочитать еще:  Как сделать адаптивное меню на сайте WordPress

Функция wp_nav_menu вызывает работу пользовательского меню. Чаще всего она располагается в файле заголовка — header.php. Мы должны с вами найти ее и изменить таким образом:

<?php $walker = new Menu_With_Description; ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>

В первой строке мы добавили класс walker, а во второй — добавили в функцию вызова меню подключение аргумент walker.

Хочу обратить внимание на функцию подключения класса walker. В строке 23 мы подключаем стили для нашего описания: span class="sub"

Четвертый шаг. Добавляем стили в CSS

Я не буду писать чересчур «вычурный» стиль для созданного описания, всего несколько строк:

.menu-item {
border-left: 1px solid #ccc; /* Граница слева для ярлыка и описания
}
span.sub {
font-style:Arial; /* подберите здесь свое семество шрифтов
font-size:11px; /* размеры шрифта для описания
text-decoration:none !important; /* я отключил все стили оформления текста
text-transform:none !important; /* я отключил все варианты преобразования текста
}

Смотрите мои комментарии к каждой строке.

Пример реализации — на скриншоте ниже. Я применил по-шагово все описанные мной действия для добавления описания ярлыков меню в дефолтной теме 2012:

menu-descriptions3

Вам надо включить фантазию и написать стили для своей темы.

Если материал вам понравился, нажмите или расскажите о нем друзьям!

Важно! Эта запись может содержать ссылки на плагины, которые к моменту вашего чтения и скачивания могут работать не корректно. Будьте внимательны.

Добавить комментарий

Ваш email нигде не будет показан. Обязательные поля помечены *