Как сделать Bootstrap меню для WordPress?! (вертикальное и обычное)

Сейчас я делаю новую тему для своего интернет-магазина shop.tool-ha.ru и хочу, чтобы там всё было круто — woocommerce, bootstrap, полный адаптив. Для большего удобства навигации я хочу сделать боковое меню. А так как всё это на bootstrap, то естественно встал вопрос о том, «как это сделать». Реализация на мой взгляд получилась отличной. Посмотрите!

Сначала мне нужен выпадающий блок. ссылка на реализацию блока в bootstrap. Там все просто. Скопировал — вставил.
На стилях я тоже не хочу долго останавливаться по ряду причин. Ну во-первых, это многие знают, а во-вторых, это не так уж сложно. Единственно я обращу внимание «самых маленьких» на пару вещей.

font-size: 1rem; — можете использовать px, rem, em. Всё что вам угодно

для класса .menu в своем проекте я использовал атрибут left:-15px; чтобы выравнивать по левому краю блока .container

.navbar-vertycal .dropdown-menu {position: absolute; top:0; left: 100%;} это для того, чтобы меню раскрывалось справа.

Меню находится в .col-lg-3. Если нужно, чтобы меню было шире или уже измените размер колонки.

/* Стиль бокового меню */
.navbar-vertycal {
    font-size: 1rem;
    margin-bottom: 0;
    width: 100%;
}
.navbar-vertycal ul {
    width: 100%;
}
.navbar-vertycal li{
    display: block;
    float: none;
    width: 100%;
}
.navbar-vertycal li a{
    display: block;
    float: none;
    width: 100%;
}
.navbar-vertycal .navbar-collapse {
    padding: 0px;
}
.navbar-vertycal a {
    padding: 0.5em 1rem !important;
}
.menu {
    position: relative;
    border-left: 2px solid #1ce2e2;
}
.navbar-vertycal .dropdown-menu {
    position: absolute;
    top:0;
    left: 100%;
}
.caret {
    position: absolute;
    right: 0;
    top: 0.125rem;
    display: block;
    transform: rotate(270deg);
    height: 0.5rem;
    padding: 0.75rem 0;
}

Далее самое главное

Создайте файл Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu.php и подключите в файле function.php. В созданный файл поместите следующий текст:

class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {

/**
* Display Element
*/
function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
$id_field = $this->db_fields['id'];

if ( isset( $args[0] ) && is_object( $args[0] ) )
{
$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );

}

return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}

/**
* Start Element
*/
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
if ( is_object($args) && !empty($args->has_children) )
{
$link_after = $args->link_after;
$args->link_after = ' <b class="caret"></b>';
}

parent::start_el($output, $item, $depth, $args, $id);

if ( is_object($args) && !empty($args->has_children) )
$args->link_after = $link_after;
}

/**
* Start Level
*/
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("t", $depth);
$output .= "\n$indent<ul class=\"dropdown-menu list-unstyled\">\n";
}
};
add_filter('nav_menu_link_attributes', function($atts, $item, $args) {
if ( $args->has_children )
{
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
}

return $atts;
}, 10, 3);

Это код вывода вертикального меню. Его нужно разместить внутри container>row>col-lg-3 (или например col-md-4)

<div class="menu collapse in" id="collapseExample" aria-expanded="true"> 
  <nav class="navbar navbar-vertycal" role="navigation">
  <!-- Collect the nav links, forms, and other content for toggling -->
   <div class="collapse navbar-collapse navbar-ex1-collapse">
    <?php wp_nav_menu(array(
     'container_class' => 'navbar-vertycal',
     'theme_location' => 'primary',
     'items_wrap' => '<ul id="%1$s" class="nav navbar-nav">%3$s</ul>',
     'walker' => new Bootstrap_Walker_Nav_Menu,
    )); ?>
   </div><!-- /.navbar-collapse --> 
  </nav>
</div>

Меню Bootstrap целиком

Вы так же можете вывести и всё меню bootstrap, горизонтально например, используя следующий код

// Вставляйте этот код
<nav id="nav" class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header visible-xs">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Kawaii Walls</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <?php wp_nav_menu(array(
        'container_class' => 'menu-header',
        'theme_location' => 'primary',
        'items_wrap' => '<ul id="%1$s" class="%2$s nav navbar-nav">%3$s</ul>',
        'walker' => new Bootstrap_Walker_Nav_Menu,
        )); ?>
    </div><!-- /.navbar-collapse -->
</nav>

Обратите внимание, что в случае с полным меню 'container_class' => 'menu-header', а в случае с вертикальным 'container_class' => 'navbar-vertycal'. Это основное отличие.