В WordPress часто используют одно или два меню, которое форматируется с помощью списков <ul> и вложенных в него <li>. Однако, далеко не всегда нам эти элементы нужны в верстке. В этой статье рассмотрим, как можно изменить форматирование меню в WordPress.
Для того чтобы добавить меню в WordPress, необходимо сделать 2 действия:
- В файле functions.php необходимо добавить поддержку одного или нескольких меню, например, так:
| 1 2 3 4 5 6 | register_nav_menus( array( 'main-menu' => esc_html__( 'Primary', 'theme-name' ), 'footer-menu' => esc_html__( 'Footer menu', 'theme-name' ), ) ); |
2. Добавить вывод меню в файле темы. Как правило, это файл header.php:
| 1 2 3 4 5 6 7 | wp_nav_menu( array( 'theme_location' => 'main-menu', 'menu_id' => 'primary-menu', 'items_wrap' => '<ul id="%1$s" class="unstyled %2$s">%3$s</ul>' ) ); |
По умолчанию к списку добавляется атрибут class="menu". Если вам нужно добавить еще какой-либо класс, то вы указываете его в параметре 'items_wrap'.
По умолчанию в качестве "обертки" для ссылок в меню выступает элемент <ul> с элементами <li>. Это удобно, так как списки можно вкладывать друг в друга и формировать вырпадающее меню с помощью позиционирования. Однако есть варианты меню, в которых совскм не нужны списки, т.к. обычно ссылок там немного + нужно выстроить их друг рядом с другом. Можно, конечно, воспользоваться свойствами Flexbox-модели, но по умолчанию ссылки являются строчными элементами, так что выстраиваются в один ряд сами по себе.
Поэтому имеет смысл убрать элементы <ul> и <li> из разметки меню. Пробуем это сделать с помощью функции wp_nav_menu(), указав параметр 'items_wrap' => '%3$s'. Кроме того, можно добавить параметр 'depth'=> 1, который регулирует глубину вложения меню. У нас не будет вложенности списков, поэтому глубина указывается равной 1.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <p class="terms"> <?php wp_nav_menu( array( 'theme_location' => 'footer-menu', 'menu_id' => 'footer-menu', 'container' => false, 'items_wrap' => '%3$s', 'depth'=> 1, ) ); ?> </p> |
На скриншоте видно, что <ul> мы действительно убрали, а вот элементы <li> никуда не делись:
Кроме того, элемент <p class="terms">...</p>, в который был вложен вызов функции wp_nav_menu() переместился до списка с ссылками, а после списка возник новый абзац, т.к. браузер Chrome таким образом исправил несемантическую разметку, в которой в абзац нельзя вкладывать элементы <li>.
Тут нужно немного изменить код, убрав с помощью параметра 'echo' => false вывод меню и удалив при выводе все <li> перед <a> с помощью функции strip_tags($menu, '<a>'):
| 1 2 3 4 5 6 7 8 9 10 | $menu = wp_nav_menu( array( 'echo' => false, 'theme_location' => 'footer-menu', 'container' => false, 'items_wrap' => '%3$s', 'depth'=> 1, ) ); echo strip_tags($menu, '<a>' ); |
То есть мы сохраняем в переменную $menu вывод нашего меню, а затем с помощью функции strip_tags() из тегов оставляем только <a>.
В результате в коде увидим следующее:
То, что и требовалось. Теги <li> теперь отсутствуют.
Еще один способ убрать ссылки можно реализовать с помощью класса Walker_Nav_Menu.
