Как адаптировать меню wordpress под boorstrap4?

Question

[Михаил Федотов]

Сам вопрос достаточно простой. Мне не подходит стандартное меню wordpress и я хочу сделать его таким же, как на бутстрап.
Стандартное меню wordpress такое:

<ul id="menu-top" class="navbar-nav ml-auto"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="#" class="nav-link">Аренда</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-18"><a href="#" class="nav-link">Услуги</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="#" class="nav-link">Тимбилдинг</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="#" class="nav-link">Связаться с нами</a></li>
</ul>

Мне нужно добавить класс в родительского элемента. А после него сделать нестандартную (с точки зрения wordpress) обертку дочерних элементов. В общем, получиться должно так:

<ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Аренда</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Услуги
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Связаться с нами</a>
        </li>
      </ul>

То есть убрать лишние классы в . И поставить туда nav-item. Я это сделал с помощью хука:

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
 function my_css_attributes_filter($var){
 	if( is_array($var) ){
 		$all_class_li = array('nav-item');
 		return $all_class_li;
 	}else{
 		return '';
 	}
 }

Но теперь я не понимаю, как сделать так, чтобы добавлялся еще один класс dropdown в родительский элемент, а также класс dropdown-toggle в тег a. И как потом кастомизировать все в нем? Потому что сейчас он создает список, а мне нужно

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>

UPD: хочется решить без применения плагинов. И чую, что надо копать в сторону walker, но не понимаю, как :(

Comments

[Модератор]

Михаил дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае, ваши вопросы будут удаляться по причине тег-спама.

Answer 1

[zorca]

https://github.com/wp-bootstrap/wp-bootstrap-navwa...