В WordPress часто используют одно или два меню, которое форматируется с помощью списков <ul> и вложенных в него <li>. Однако, далеко не всегда нам эти элементы нужны в верстке. В этой статье рассмотрим, как можно изменить форматирование меню в WordPress.

Для того чтобы добавить меню в WordPress, необходимо сделать 2 действия:

  1. В файле functions.php необходимо добавить поддержку одного или нескольких меню, например, так:

2. Добавить вывод меню в файле темы. Как правило, это файл header.php:

По умолчанию к списку добавляется атрибут class="menu". Если вам нужно добавить еще какой-либо класс, то вы указываете его в параметре 'items_wrap'.

Отображение меню в WordPress по умолчанию

По умолчанию в качестве "обертки" для ссылок в меню выступает элемент <ul> с элементами <li>. Это удобно, так как списки можно вкладывать друг в друга и формировать вырпадающее меню с помощью позиционирования. Однако есть варианты меню, в которых совскм не нужны списки, т.к. обычно ссылок там немного + нужно выстроить их друг рядом с другом. Можно, конечно, воспользоваться свойствами Flexbox-модели, но по умолчанию ссылки являются строчными элементами, так что выстраиваются в один ряд сами по себе.

Поэтому имеет смысл убрать элементы <ul> и <li> из разметки меню. Пробуем єто сделать с помощью функции wp_nav_menu(),  указав параметр 'items_wrap' => '%3$s'. Кроме того, можно добавить параметр 'depth'=> 0, который регулирует глубину вложения меню. У нас не будет вложености списков, поэтому глубина указывается равной 0.

На скриншоте видно, что <ul> мы действительно убрали, а вот єлементы <li> никуда не делись:

Меню без обертки в виде ul

Кроме того, элемент <p class="terms">...</p>, в который был вложен вызов функции wp_nav_menu() переместился до списка с ссылками, а после списка возник новый абзац, т.к. браузер Chrome таким образом исправил несемантическую разметку, в которой в абзац нельзя вкладывать элементы <li>.

Тут нужно немного изменить код, убрав с помощью параметра 'echo' => false вывод меню и убрав при выводе все <li> перед <a>:

В результате в коде увидим следующее:

Меню без элементов li

То, что и требовалось. Теги <li> теперь отсутствуют.

Автор: Админ

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

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