WordPress + Bootstrap. Как интегрировать Bootstrap Navbar в WordPress тему.

Стандартная навигация (Navbar) у Bootstrap 4 использует разметку очень насыщенную элементами class и id. Этих элементов так много, что это делает невозможным использование функции wp_nav_menu() для отображения меню. Также корректно не отображается выпадающее dropdown меню. Проблема решается с помощью нестандартного Walker и добавления нескольких фильтров. Существует много решений, вот несколько из них.

Bootstrap NavWalker

Скачиваем класс wp_bootstrap_navwalker. Разработчик утверждает, что этот класс поддерживает bootstrap 3+. На третьей версии не проверял, на четвёртой — точно работает. Размещаем файл class-wp-bootstrap-navwalker.php в директории с редактируемой темой.

Открываем файл functions.php /wp-content/your-theme/functions.php — и добавляем следующий код:

Также необходимо объявить новое меню, если это не сделано ранее

 

К массиву с настройками для функции wp_nav_menu() необходимо добавить следующий код:

к стандартным параметрам добавляются ещё два — fallback_cb и walker.

По умолчанию данный класс добавляет к элементам меню микроразметку:

 

BS4NavWalker

bs4navwalker интегрирует bootstrap меню в WP, он 100% совместим с Bootstrap 4 (v4.0.0-beta.2) и WordPress 4.9.2. bs4navwalker можно загрузить с гитхаба. Устанавливается в директорию с активной темой.

Подключается в functions.php путём добавления следующего php кода:

Пример вызова и часть кода меню: