这个是基于Bootstrap4.0+的WordPress二级菜单的回传函数，先来看一段WordPress平时写的菜单函数wp_nav_menu的用法：

wp_nav_menu( array(
    'theme_location'  => '',//导航别名
    'menu'   => '', //期望显示的菜单
    'container'  => 'div',  //容器标签
    'container_class' => '',//ul父节点class值
    'container_id'  => '',  //ul父节点id值
    'menu_class'   => 'menu',   //ul节点class值
    'menu_id'   => '',  //ul节点id值
    'echo'  => true,//是否输出菜单，默认为真
    'fallback_cb' => 'wp_page_menu',  //菜单不存在时，返回默认菜单，设为false则不返回
    'before' => '', //链接前文本
    'after'  => '', //链接后文本
    'link_before'  => '',   //链接文本前
    'link_after'  => '',//链接文本后
    'items_wrap'  => '<ul id="%1$s" class="%2$s">%3$s</ul>',   //如何包装列表
    'depth' => 0,   //菜单深度，默认0
    'walker' => ''  //自定义walker
) );

那基于Bootstrap的css样式怎么写呢？

首先肯定要引入jquery和Bootstrap的文件，这个都知道的，就不说了。

然后下载插件class-wp-bootstrap-navwalker.php提取码: vv8p，放到主题目录下，然后再functions.php里加载这个文件：

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

然后把下面的代码放到你想放的导航菜单的位置：

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
	<!-- Brand and toggle get grouped for better mobile display -->
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<a class="navbar-brand" href="#">Navbar</a>
		<?php
		wp_nav_menu( array(
			'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(),
		) );
		?>
	</div>
</nav>

这样一个现成的支持二级菜单的导航就生成了。如果是高手，可以再研究一下，精简优化代码，以适合你自己的网站。

演示可以看本站吧！

作者开源库地址：https://github.com/wp-bootstrap/wp-bootstrap-navwalker