Выпадающее меню в wordpress на bootstrap

Пример испробован на 4 версии wordpress (на 3 тоже будет работать) и 3 версии bootstrap

Вывод меню будет выгляеть примерно так. Это стандартная верстка меню в bootstrap 2-3 

<div class="container">
<div class="navbar navbar-default" role="navigation">

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
  </button>
  
	<span class="navbar-brand">меню</span>
</div>

<div class="navbar-collapse collapse">

 <?php
	wp_nav_menu(array(
		 'theme_location' => 'top',
		 'menu_class'=> 'nav navbar-nav',
		 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
         //Здесь приходится создать свой шаблон вывода, чтобы поставить bootstrap верстку в меню
		 'walker' => new mywalker_menu()
	));
 ?>

<div class="navbar-right">
</div>

</div>

</div>
</div><!--/.container-->

 

Свой расширяющий класс меню в function.php, чтобы добавить к вложенному меню (<ul>) класс dropdown-menu и к пункту меню имеющим это вложенние специальный атрибут.

class mywalker_menu extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu dropdown-menu\">\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    
       ... ...
       
       if(in_array("menu-item-has-children", $classes)){
           $atts['data-toggle'] = 'dropdown';
       }
       
       //Это кусок просто для примера того где вставляется код
       $attributes = '';
	   foreach ( $atts as $attr => $value ) { ... ...
          
    }

}

Оригинал доступных методов лежит у вас в инклудах wp-includes/nav-menu-template.php, просто скопируйте и удалите громоздкие комменты.

В нашем классе расширяющем класс Walker_Nav_Menu в функции start_lvl добавляем css класс dropdown-menu ко вложенному меню.

public function start_lvl( &$output, $depth = 0, $args = array() ) {
	$indent = str_repeat("\t", $depth);
	$output .= "\n$indent<ul class=\"sub-menu dropdown-menu\">\n";
}

 

В функции start_el добавляем атрибут data-toggle = 'dropdown' к ссылке. Функция большая поэтому весь код не выкладываю.

//Если элемент имеет вложенное меню
if(in_array("menu-item-has-children", $classes)){
    $atts['data-toggle'] = 'dropdown';
}

 

Ну и конечно не забываем зарегистрировать нашу область для вывода меню в function и создать меню в админке.

function register_my_menus(){
    register_nav_menus(array( 
        'top' => 'Главное меню',
    ));
}