导航在主题根目录下的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>
您可以选择一种方式赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助
赏