Многие хотят уже сейчас использовать возможности 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', который добавит к меню необходимые классы.




Для создания выпадающего списка в меню в панели администратора в Title Attribute укажите значение dropdown-header, а в URL значение #.


Если после этого ссылка в меню будет отображаться ниже остальных, то попробуйте воспользоваться модифицированным скриптом. Взять его можно здесь:
https://github.com/eustatos/wp-bootstrap-navwalker.


Иконки в меню


Данный скрипт поддерживает также и создание иконок в пунктах меню. Для этого укажите класс желаемой иконки в Title Attribute. Если используете font-awesome, то это может быть fa fa-home.

Поделиться с друзьями
-->

Комментарии (2)


  1. Nekto_Habr
    14.10.2016 21:45

    Причем здесь дизайн? Почему другие веб-фреймворки не постят в поток дизайна?


    1. eustatos
      14.10.2016 21:48
      -1

      Подскажите куда перенести.