Многие хотят уже сейчас использовать возможности bootstrap 4 при создании сайтов на WordPress. Ниже описывается одно из решений по созданию меню с использованием классов bootstrap 4.
Классы для navbar в bootstrap 4 отличаются от bootstrap 3.
Bootstrap 3
<ul class="nav navbar-nav">
<li><a href="#">Первый</a></li>
<li><a href="#">Второй</a></li>
<li><a href="#">Третий</a></li>
</ul>
Bootstrap 4
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Первый</a></li>
<li class="nav-item"><a class="nav-link" href="#">Второй</a></li>
<li class="nav-item"><a class="nav-link" href="#">Третий</a></li>
</ul>
Если в WordPress используется bootstrap 3 можно ограничиться добавлением к wp_nav_menu
аргумента 'menu_class' => 'nav navbar-nav'
. Если используется bootstrap 4 потребуется чуть больше движений.
Предлагаемый способ однозначно не единственный, но он работает.
Новый wp_bootstrap_navwalker
Скачайте или создайте в папке своей темы WordPress файл wp_bootstrap_navwalker.php
.
Репозиторий: https://github.com/sebakerckhof/wp-bootstrap-navwalker
В моем случае файл был создан в папке ./src
темы.
Для стандартных тем WordPress в файле functions.php
вашей темы добавьте строку
require_once('./src/wp_bootstrap_navwalker.php');
Для тем на основе стартовой темы Sage ссылку на файл нужно будет добавить в includes
$sage_includes = [
'src/helpers.php',
'src/setup.php',
'src/filters.php',
'src/admin.php',
'src/wp-bootstrap-navwalker.php'
];
Измените функцию wp_nav_menu
в файле header.php
следующим образом
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
Теперь перед отображением меню будет обработано 'walker', который добавит к меню необходимые классы.
Dropdown
Для создания выпадающего списка в меню в панели администратора в Title Attribute
укажите значение dropdown-header
, а в URL
значение #
.
Если после этого ссылка в меню будет отображаться ниже остальных, то попробуйте воспользоваться модифицированным скриптом. Взять его можно здесь:
https://github.com/eustatos/wp-bootstrap-navwalker.
Иконки в меню
Данный скрипт поддерживает также и создание иконок в пунктах меню. Для этого укажите класс желаемой иконки в Title Attribute
. Если используете font-awesome, то это может быть fa fa-home
.
Nekto_Habr
Причем здесь дизайн? Почему другие веб-фреймворки не постят в поток дизайна?
eustatos
Подскажите куда перенести.