Добавление описания для пунктов меню в WordPress
В некоторых премиум шаблонах WordPress есть для навигационного меню одна интересная опция — под названием пункта меню располагается 2-3слова краткого описания (см. иллюстрацию слева). Недавно пришлось разбираться с данный вопросом и я нашел одну статью по теме, перевод которой вам и предлагаю. Публикация о том, как реализовать подобное улучшенное меню для Wordpress.
Для вывода меню, созданного из админки WordPress, используется специальная функция wp_nav_menu. В итоге получаем код по типу этого:
<ul id="menu-main"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> </ul> |
Однако для добавления описаний в пункты меню нам нужен несколько иной HTML код, как минимум вот такой:
<ul id="menu-main"> <li><a href="#"><strong>Home</strong><span>Starting the journey</span></a></li> <li><a href="#"><strong>About</strong><span>What to expect</span></a></li> <li><a href="#"><strong>Contact</strong><span>Get in touch!</span></a></li> <li><a href="#"><strong>Blog</strong><span> Latest storys</span></a></li> </ul> |
Здесь теги strong оборачивают названия пунктов меню, а span — используются для описаний. Дальше стилизовать их нужны образом можно через CSS.
Настройки в админке
Мало кто знает, что меню в WordPress обладает возможностью добавления не только атрибутов title для ссылки, но имеет также и описание. Однако по умолчанию эта функция скрыта. Вам нужно зайти в админку в раздел «Внешний вид» — «Меню», а затем кликнуть по кнопке «Настройки экрана» (Screen Option) в правом верхнем углу.
Как только вы ее включите, то увидите поле «Описание» для каждого пункта меню.
По умолчанию WordPress добавляет в поле описания определенный текст (например, из description). Его можете удалить и добавить нужную вам фразу, которая будет отображаться на сайте под названием пункта навигации.
Кстати, в этих настройках экрана встречаются и другие полезные элементы, например там активируется использование в WooCommerce меню категорий товара. Плохо, что изначально данные опции скрыты, и не всегда понятно, что они там есть.
Реализация улучшенного меню
Система Wordpress использует специальный класс “Walker” для прохода всех записей БД и затем выдает определенный результат. Мы попытаемся создать собственную интерпретацию этого класса с более широкой функциональностью. Вам нужно будет добавить в файл functions.php следующий код:
class description_walker 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 ) .'"' : ''; $prepend = '<strong>'; $append = '</strong>'; $description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : ''; if($depth != 0) { $description = $append = $prepend = ""; } $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append; $item_output .= $description.$args->link_after; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } |
Функция проверяет наличие описания для пунктов меню и оборачивает их нужные нам теги.
Дальше нам при выводе меню сайта в файле header.php или в любом другом, который используется для навигации, нужно добавить вызов функции wp_nav_menu.
wp_nav_menu( array( 'container' =>false, 'menu_class' => 'nav', 'echo' => true, 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 0, 'walker' => new description_walker()) ); |
После этого меню будет иметь нужную нам структуру, о которой мы говорили в самом начале статьи. Теперь можно легко подправить отображение элементов с помощью CSS стилей. Если же захотите чтобы в моб.версии навигация выглядела по другому вам пригодится функция wp_is_mobile или плагин WP Responsive Menu. Стили добавляете в style.css или похожий файл.
.nav{ height:50px; padding-left:13px; margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; } .nav a{ display:block; float:left; line-height:18px; outline:medium none; padding:2px 10px; text-decoration:none; width:95px; min-height: 35px; } .nav li a strong { display:block; font-size:14px; font-weight:normal; } .nav li a span { display:block; font-size:10px; line-height:14px; } |
В итоге получится меню по типу такого:
Спасибо авторам оригинальной статьи за подобный интересный и полезный хак.
комментариев 11 к статье “Добавление описания для пунктов меню в WordPress”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Оптимизируем WordPress header и удаляем лишний код (5,19 из 7, голосов - 43)
- Как создать пункт меню без ссылки в wordpress (6,39 из 7, голосов - 23)
- Добавление кнопки Вконтакте, Facebook и Twitter в wordpress блог (6,14 из 7, голосов - 21)
- Выполнение jQuery скриптов при выборе вариаций товаров в WooCommerce (3,96 из 7, голосов - 26)
- Хаки для вариаций товаров в WooCommerce (5,00 из 7, голосов - 20)
- Вывод текста в блоге только на главной (6,85 из 7, голосов - 13)
- Как убрать category в WordPress категориях — зачем это делать, плагины для реализации (5,31 из 7, голосов - 16)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
Привет уважаемый автор. У вас ошибка в заголовке: «пунтов» меню
Ded, спасибо, подправил заголовок.
Спасибо полезно, жалко что бывает тема не поддерживает меню.
Здравствуйте. Подскажите пожалуйста как включить поддержку тегов в описании меню.
надо просто несколько слов добавить и все с новой строчки. спасибо
Мария, не понял, что значит «поддержка тегов в меню», меню — это меню, там тегов нет. Вообще нужно просмотреть разные функции для работы с тегами, я, к сожалению, не могу помочь, т.к. с такой задачей не сталкивался.
У вас шаблончик поплыл, точнее перенос строки в меню, поправьте. (у меня опера)
bond2143, какая именно версия оперы? можете скинуть скриншот на stod84@gmail.com.
Здравствуйте! Подскажите пожалуйста в вашем примере кода, как можно удалить полностью class=» » у элемента li Если удаляю строчку
$class_names = ‘ class=»‘ . esc_attr( $class_names ) . ‘»‘;
то class=» » у элемента li удаляется. Но тогда активный пункт меню выглядит так при этом пропадает выделение пункта меню
Но тогда активный пункт меню выглядит так __ при этом пропадает выделение пункта меню
Алексей, код не мой, поэтому сложно прокомментировать его. Строку в любом случае лучше не удалять. А чем вам мешает тот или иной класс? это же просто для CSS стилей, его можно никак не определять и ни на что в коде он влиять не будет.
Спасибо, то что надо. Не мог понять как и где подключается, а здесь все понятно разъяснили. Спасибо!