Стандартная навигация (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 — и добавляем следующий код:
|
1 2 3 |
<?php // Register Custom Navigation Walker require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php'; |
Также необходимо объявить новое меню, если это не сделано ранее
|
1 2 3 4 |
<?php register_nav_menus( array( 'primary' => __( 'Primary Menu', 'THEMENAME' ), ) ); |
К массиву с настройками для функции wp_nav_menu() необходимо добавить следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'depth' => 1, // 1 = с dropdown меню, 0 = без dropdown. 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'navbar-nav mr-auto', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker() ) ); ?> |
к стандартным параметрам добавляются ещё два — fallback_cb и walker.
По умолчанию данный класс добавляет к элементам меню микроразметку:
|
1 |
itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" |
BS4NavWalker
bs4navwalker интегрирует bootstrap меню в WP, он 100% совместим с Bootstrap 4 (v4.0.0-beta.2) и WordPress 4.9.2. bs4navwalker можно загрузить с гитхаба. Устанавливается в директорию с активной темой.
Подключается в functions.php путём добавления следующего php кода:
|
1 2 |
// Register Custom Navigation Walker require_once('bs4navwalker.php'); |
Пример вызова и часть кода меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<nav class="navbar navbar-expand-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <?php wp_nav_menu([ 'menu' => 'top', 'theme_location' => 'top', 'container' => 'div', 'container_id' => 'bs4navbar', 'container_class' => 'collapse navbar-collapse', 'menu_id' => false, 'menu_class' => 'navbar-nav mr-auto', 'depth' => 2, 'fallback_cb' => 'bs4navwalker::fallback', 'walker' => new bs4navwalker() ]); ?> </nav> |
Свежие комментарии