WordPress4.6+ 导航菜单调用方式

导航在主题根目录下的header.php中添加，以便全站调用

WordPress 导航菜单导航菜单调用方式

<?php wp_nav_menu(
array(
'theme_location'  => '' //指定显示的导航名，如果没有设置，则显示第一个
'menu'            => 'header-menu',
'container'       => 'nav', //最外层容器标签名
'container_class' => 'primary', //最外层容器class名
'container_id'    => '',//最外层容器id值
'menu_class'      => 'sf-menu', //ul标签class
'menu_id'         => 'topnav',//ul标签id
'echo'            => true,//是否打印，默认是true，如果想将导航的代码作为赋值使用，可设置为false
'fallback_cb'     => 'wp_page_menu',//备用的导航菜单函数，用于没有在后台设置导航时调用
'before'          => '',//显示在导航a标签之前
'after'           => '',//显示在导航a标签之后
'link_before'     => '',//显示在导航链接名之后
'link_after'      => '',//显示在导航链接名之前
'items_wrap'      => '<ul id="%1$s">%3$s</ul>',
'depth'           => 0,////显示的菜单层数，默认0，0是显示所有层
'walker'          => ''// //调用一个对象定义显示导航菜单 )); ?>

二级菜单UL的Class类名称修改

看网上的教程，需要修改的文件地址都是旧版本的地址，新版本已经不适用，4.6.1版本在以下文件54行

wp-includes\class-walker-nav-menu.php

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

修改：xxxxxxxxx为需要的。默认为sub-menu。并在header中添加了如下内容

<header>
    <?php 
        wp_nav_menu( array( 'menu' => 'main',
         'depth'           => 2,
         'container'       => 'nav',
         'container_class' => 'animenu' ,
         'items_wrap'      => '<button class="animenu__toggle">
                             <span class="animenu__toggle__bar"></span>
                             <span class="animenu__toggle__bar"></span>
                             <span class="animenu__toggle__bar"></span>
                             </button><ul class="animenu__nav">%3$s</ul>',
         ) );
    ?>
    <script type="text/javascript">
        (function(){
          var animenuToggle = document.querySelector('.animenu__toggle'),
              animenuNav    = document.querySelector('.animenu__nav'),
              hasClass = function( elem, className ) {
                return new RegExp( ' ' + className + ' ' ).test( ' ' + elem.className + ' ' );
              },
              toggleClass = function( elem, className ) {
                var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
                if( hasClass(elem, className ) ) {
                  while( newClass.indexOf( ' ' + className + ' ' ) >= 0 ) {
                    newClass = newClass.replace( ' ' + className + ' ' , ' ' );
                  }
                  elem.className = newClass.replace( /^\s+|\s+$/g, '' );
                } else {
                  elem.className += ' ' + className;
                }
              },           
              animenuToggleNav =  function (){        
                toggleClass(animenuToggle, "animenu__toggle--active");
                toggleClass(animenuNav, "animenu__nav--open");        
              }

          if (!animenuToggle.addEventListener) {
              animenuToggle.attachEvent("onclick", animenuToggleNav);
          }
          else {
              animenuToggle.addEventListener('click', animenuToggleNav);
          }
        })()
    </script>
</header>

输出的格式为

<nav class="animenu">
<!--button是响应式小窗口菜单整合成的按钮-->
    <button class="animenu__toggle">
         <span class="animenu__toggle__bar"></span>
         <span class="animenu__toggle__bar"></span>
         <span class="animenu__toggle__bar"></span>
     </button>
     <!--菜单开始-->
     <ul class="animenu__nav">
     <!--一级菜单-->
        <li>
            <a href="#">主页</a>
        </li>
        <li>
            <a href="#">文章分类</a>
            <!--二级菜单-->
            <ul class="animenu__nav__child">
                <li>
                    <a href="#">网文分享</a>
                </li>
                <li>
                    <a href="#">热点资讯</a>
                </li>
                <li>
                    <a href="#">WordPress</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">水漫金山</a>
        </li>
        <li>
            <a href="#">留言板</a>
        </li>
        <li>
            <a href="#">常用链接</a>
        </li>
    </ul>
</nav>

附上初始CSS文件,根据自己需要修改