Как в wordpress зарегистрировать и добавить выпадающее при наведении меню?

Question

[ligisayan]

Всем привет! Есть сайт на wordpress, где в тему хочу добавить bootstrap меню с выпадающим списком при наведении. Регистрирую меню стандартным способом:

register_nav_menus(array(
'top'    => 'Верхнее меню'
));

wp_nav_menu( array(
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse navbar-ex1-collapse', 
    'menu_class'=>'nav navbar-nav navbar-right',
    'theme_location'=>'top'
) );

Затем хочу перенести в него функционал этого меню, но есть проблемы с добавлением в ссылку классов class="dropdown-toggle" атрибутов data-toggle="dropdown" и во внутренний список ul класса dropdown-menu. Как это можно сделать? фидл

.dropdown:hover > .dropdown-menu {
  display: block;
}

<nav class="navbar navbar-default navbar-static">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".js-navbar">
        <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="#" style="padding:15px 15px;">Название проекта</a>
    </div>
    <div class="collapse navbar-collapse js-navbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Главная</a>
        </li>
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a>
            </li>
            <li><a href="#">Текст подпункта</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a>
            </li>
            <li><a href="#">Текст подпункта</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a>
            </li>
            <li><a href="#">Текст подпункта</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

[id_baton4eg]

скидываю свою рабочую заготовку:

functions.php

register_nav_menus(array(
	'top' => 'Верхнее',
	'bottom' => 'Внизу'
));
if (!class_exists('bootstrap_menu')) {
	class bootstrap_menu extends Walker_Nav_Menu {
		private $open_submenu_on_hover;
		function __construct($open_submenu_on_hover = true) {
	        $this->open_submenu_on_hover = $open_submenu_on_hover;
	    }
		function start_lvl(&$output, $depth = 0, $args = array()) {
			$output .= "\n<ul class=\"dropdown-menu\">\n";
		}
		function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
			$item_html = '';
			parent::start_el($item_html, $item, $depth, $args);
			if ( $item->is_dropdown && $depth === 0 ) {
			   if (!$this->open_submenu_on_hover) $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"', $item_html);
			   $item_html = str_replace('</a>', ' <b class="caret"></b></a>', $item_html);
			}
			$output .= $item_html;
		}
		function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
			if ( $element->current ) $element->classes[] = 'active';
			$element->is_dropdown = !empty( $children_elements[$element->ID] );
			if ( $element->is_dropdown ) {
			    if ( $depth === 0 ) {
			        $element->classes[] = 'dropdown';
			        if ($this->open_submenu_on_hover) $element->classes[] = 'show-on-hover';
			    } elseif ( $depth === 1 ) {
			        $element->classes[] = 'dropdown-submenu';
			    }
			}
			parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
		}
	}
}

header.php

<nav class="navbar navbar-default">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topnav" aria-expanded="false">
								<span class="sr-only">Меню</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
						</div>
						<div class="collapse navbar-collapse" id="topnav">
							<?php $args = array( 
								'theme_location' => 'top',
								'container'=> false,
						  		'menu_id' => 'top-nav-ul',
						  		'items_wrap' => '<ul id="%1$s" class="nav navbar-nav %2$s">%3$s</ul>',
								'menu_class' => 'top-menu',
						  		'walker' => new bootstrap_menu(true)		  		
					  			);
								wp_nav_menu($args);
							?>
						</div>
					</nav>

@media (min-width: 979px) { 
	ul.nav li.dropdown.show-on-hover:hover > ul.dropdown-menu {
		display: block;
	}
	.comment-list .children {
		padding: 0;
		margin-left: 74px;
		padding-bottom: 15px;
	}
	.comment-list .media {
		margin-top: 0;
	}
}

Взято из: https://github.com/saxap/clean-wp-template
Удачи в разработках =)

Comments

[ligisayan]

id_baton4eg Спасибо, супер!

[ligisayan]

id_baton4eg единственный момент - на мобильном разрешении у меня почему-то не вызываются выпадающие меню...

[ligisayan]

аа, понял - я вынес

ul.nav li.dropdown.show-on-hover:hover > ul.dropdown-menu {
    display: block;
  }

за пределы медиа-запроса. а зачем вы его туда поместили?

[ligisayan]

понял, нужно добавить к вашей заготовке еще

.navbar-collapse.in {
    overflow-y: visible;
}

[id_baton4eg]

ligisayan: странно, ничего там в заготовке делать не нужно - она полностью работает у меня на многих проектах. В медиа запросе она для корректного отображения с учетом разрешения по сетке бутстрапа.

[ligisayan]

id_baton4eg: а вы перейдите по ссылке jsfiddle.net/ydcMQ/1220 и посмотрите на выпадающие меню как зарезаются и попробуйте в ваш проект где-нить внизу добавить выпадающий список хотя бы из 3-4 пунктов и сравните - у вас также, как у меня или нет?

[bulkmaker]

У меня тоже не раскрывается меню в мобильной версии помогите пожалуйста
Вот это стоит в стилях:

media (min-width: 979px) {
ul.nav li.dropdown.show-on-hover:hover > ul.dropdown-menu { /* для раскрывания субменю по наведению */
display: block;
}
.navbar-collapse.in {
overflow-y: visible;
}
.comment-list .children { /* для комментов */
padding: 0;
margin-left: 74px;
padding-bottom: 15px;
}
.comment-list .media {
margin-top: 0;
}
}
media (min-width: 768px){
.navbar-nav>li {
float: none;
}}

Ну в functions тоже самое

Answer 2

[Борис Черепанов]

Писал у себя в блоге. Ссылка

Comments

[Кирил Васильев]

можешь подробнее описать в своем блоге
вообще не понял
Было бы круто архив с примером

[Борис Черепанов]

Кирил Васильев,
Там есть файл (WP_Bootstrap_Navwalker). Скачиваете его и копируете где-нибудь возле function.php
В function.php пишите

if ( ! file_exists( get_template_directory() . '/wp-bootstrap-navwalker.php' ) ) {
	// file does not exist... return an error.
	return new WP_Error( 'wp-bootstrap-navwalker-missing', __( 'It appears the wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
	// file exists... require it.
    require_once get_template_directory . 'wp-bootstrap-navwalker.php';
}

В header.php пишите

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="<?php echo home_url() ?>"><?php bloginfo( 'name' ); ?></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
 
        <div class="collapse navbar-collapse" id="navbarColor01">
            <?php
            wp_nav_menu( array(
                'theme_location'  => 'menu-1',
                'menu_id'        => 'primary-menu',
                'depth'           => 2,
                'container'       => false,
                'menu_class'      => 'navbar-nav mr-auto',
                'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                'walker'          => new WP_Bootstrap_Navwalker()
            ) );
            ?>
            <?php get_search_form(); ?>
        </div>
    </div><!-- Container End -->
</nav>
<!-- Navbar End -->

menu-1 - это либо произвольное меню, либо зарегистрированное в wp. Справка по регистрации меню