wordpress调用菜单并且自定义菜单样式的方法

Posted on Updated on

WordPress后台的“菜单”选项可以通过拖拽直接形成二级、三级菜单，可如何定义它们的样式，使其在前端完美的显示呢，本文就详细的介绍一下。

首先你需要在 functions.php 中使用 register_nav_menus 函数注册菜单，如本主题注册的几个菜单是：


<?php
 register_nav_menus( array(
 'header_menu'       => '头部菜单' ,
 'header_right_menu' => '头部右侧菜单' ,
 'footmenu1'         => '底部菜单1' ,
 'footmenu2'         => '底部菜单2',
 'footmenu3'         => '底部菜单3',
 ) );
 ?>

这样你在后台的“菜单”选项里面就能看到“头部菜单”、“头部右侧菜单”等几个选项了。你可以分别为它们分配一个自建的菜单。

然后，在需要显示它们的地方使用wp_nav_menu 函数进行调用，如本主题调用的头部菜单代码：

<?php 
 if ( has_nav_menu( 'header_menu' ) ) {
 wp_nav_menu( array(
 'theme_location'    => 'header_menu',
 'menu'              => 'header_menu',
 'depth'             => 0,
 'container'         => '',
 'container_class'   => '',
 'menu_class'        => 'nav navbar-nav',
 'items_wrap'        => '<ul id="%1$s" class="%2$s">%3$s</ul>',
 'walker'            => new WPMoMo_Bootstrap_Menu() ) );
 }
 ?>

其中的几个参数：

  • ‘theme_location’：要显示的菜单，必须是在register_nav_menu() 中注册过的菜单才行。
  • ‘menu’：要显示的菜单，可使用id，slug或者名字。
  • ‘depth’：显示几级菜单，0表示显示全部。
  • ‘menu_class’ ：ul 标签 class。
  • ‘items_wrap’：默认<ul id=”%1$s” class=”%2$s”>%3$s</ul>，%1$s 指的是 ‘menu_id’参数，%2$s 指的是 ‘menu_class’ 参数，%3$s 指的是显示的菜单列表。

这里简要的介绍了 wp_nav_menu 函数的几个参数，详细的请参考官方文档。

此时，这段函数生成的html代码大概为：

  1. <ul class=“nav navbar-nav”>
  2. <li><a href=“”>分类 1</a></li>
  3. <li><a href=“”>分类 2</a></li>
  4. <li><a href=“”>分类 3</a>
  5. <ul class=“sub-menu”>
  6. <li><a href=“”>分类 3.1</a></li>
  7. <li><a href=“”>分类 3.2</a></li>
  8. <li><a href=“”>分类 3.3</a></li>
  9. </ul>
  10. </li>
  11. <li><a href=“”>分类 4</a></li>
  12. </ul>

可以看到，只用到上面几个函数，只能进行简单的样式定制（只能定义到一级菜单），如果想进行深层次的定制，就需要运用到’walker’参数，该参数接受一个自定义的walker对象，对它进行定制比较复杂，最简单的办法是从 \wp-includes\nav-menu-template.php 中找到默认的Walker_Nav_Menu函数，然后只修改你想改变的地方，比如本主题改变的是二级、三级菜单的类。

改变二级、三级菜单的类:

  1. <?php
  2. function start_lvl( &$output, $depth = 0, $args = array() ) {
  3. if( $depth == 0 ){
  4. $output .= ‘<ul class=”dropdown-menu”>’;
  5. }else{
  6. $output .= ‘<ul class=”dropdown2″>’;
  7. }
  8. }
  9. ?>
  1. <?php
  2. function end_lvl( &$output, $depth = 0, $args = array() ) {
  3. if( $depth == 0 ){
  4. $output .= “</ul>”;
  5. }else{
  6. $output .= ‘</ul>’;
  7. }
  8. }
  9. ?>

上面的代码将二级菜单设置为<ul class=”dropdown-menu”>，三级菜单设置为<ul class=”dropdown2″>。

还有一种方法，利用正则表达式进行正则代换处理，参考代码如下：

<?php
$string = wp_nav_menu(array('theme_location' => 'primary', 'echo' => false)) ;
$string = ereg_replace("<li>", "<li class='menu_li'>", $string);
echo $string
?>

其他如此类推

设置下拉js代码

假如菜单调用代码如下：

<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

则jquery代码如下：

jQuery(document).ready(function($) {
$('#nav li').hover(function() {
$('ul', this).slideDown(200)},
function() {$('ul', this).slideUp(300)});});

实践如下：

1、在functions.php中加入如下代码：

<?php
/**
 * 自己在制作wordpress主题的时候遇到需要自己调用菜单并且自定义菜单样式这个问题，并且遇到了css样式错误，其实很简单，操作如下：
 * 在主题中functions.php中加入：
 */
if(function_exists('register_nav_menus')){

    register_nav_menus(
        array(
            'header-menu' => __( '顶部导航自定义菜单' ),
            'footer-menu' => __( '底部自定义菜单' ),
            'sider-menu' => __('侧边栏菜单')
        )
    );
}
/**
 * 移除菜单的多余CSS选择器
 * From http://www.wpdaxue.com/remove-wordpress-nav-classes.html
 */
add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
//以下为全部去除多余的css样式
function my_css_attributes_filter($var) {
    return is_array($var) ? array() : '';
}

2、在菜单调用处加入如下代码：

<div class="mh-main-nav-wrap">
            <nav class="mh-navigation mh-main-nav mh-container mh-container-inner clearfix" itemscope="itemscope">
                <div class="menu-navigation-container">
                    <!--           在主题导航栏贴上导航代码： -->
           <?php wp_nav_menu(
               array(
                    'theme_location'  => '',//指定显示的导航名，如果没有设置，则显示第一个
                    'menu'            => 'header-menu',
                    'container'       => '', //最外层容器标签名
                    'container_class' => '', //最外层容器class名
                    'container_id'    => '',//最外层容器id值
                    'menu_class'      => 'menu', //菜单最外面（顶级菜单）的ul的class属性值
                    'menu_id'         => 'menu-navigation', //菜单最外面（顶级菜单）的ul的id属性值
                    'echo'            => true,//是否打印，默认是true，如果想将导航的代码作为赋值使用，可设置为false
                    'fallback_cb'     => 'wp_page_menu',//备用的导航菜单函数，用于没有在后台设置导航时调用
                    'before'          => '',//显示在导航a标签之前,示例：<li>qian<a
                    'after'           => '',//显示在导航a标签之后，示例：</a>hou</li>
                    'link_before'     => '',//显示在导航链接名之后，示例：<a href="/" aria-current="page">linkqian_Home_linkhou</a>
                    'link_after'      => '',//显示在导航链接名之前，示例：<a href="/" aria-current="page">linkqian_Home_linkhou</a>
                    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                    'depth'           => 0,//显示的菜单层数，默认0，0是显示所有层
                    'walker'          => '',//调用一个对象定义显示导航菜单
                    'item_spacing'    => 'preserve', //是否保留菜单html标签之间的空格空白，默认是保留preserve，丢弃则是discard
           ));

        ?>
                </div>
            </nav>
        </div>

效果如下：

<!--           在主题导航栏贴上导航代码： -->
           <ul id="menu-navigation" class="menu"><li><a href="/" aria-current="page">Home</a></li>
<li><a href="https://www.snake123.com/category/bite_treatment/">Bite treatment</a></li>
<li><a href="https://www.snake123.com/category/encyclopedia/">Encyclopedia</a>
<ul class="sub-menu">
	<li><a href="https://www.snake123.com/category/encyclopedia/viper/">Viper</a></li>
	<li><a href="https://www.snake123.com/category/encyclopedia/micro-venomous/">micro-venomous</a></li>
	<li><a href="https://www.snake123.com/category/encyclopedia/non-venomous-snake/">Non-venomous snake</a></li>
</ul>
</li>
<li><a href="https://www.snake123.com/category/farming/">Farming</a></li>
<li><a href="https://www.snake123.com/category/news/">News</a></li>
<li><a href="https://www.snake123.com/category/other/">Other</a></li>
<li><a href="https://www.snake123.com/category/products/">Products</a>
<ul class="sub-menu">
	<li><a href="https://www.snake123.com/category/products/dried-snake/">Dried snake</a></li>
	<li><a href="https://www.snake123.com/category/products/snake-blood/">Snake blood</a></li>
	<li><a href="https://www.snake123.com/category/products/snake-egg/">Snake egg</a></li>
	<li><a href="https://www.snake123.com/category/products/snake-gall/">Snake gall</a></li>
	<li><a href="https://www.snake123.com/category/products/snake-meat/">Snake meat</a></li>
	<li><a href="https://www.snake123.com/category/products/snake-oil/">Snake oil</a></li>
	<li><a href="https://www.snake123.com/category/products/snake-skin/">Snake skin</a></li>
	<li><a href="https://www.snake123.com/category/products/snake-venom/">Snake venom</a></li>
	<li><a href="https://www.snake123.com/category/products/snake-whip/">Snake whip</a></li>
	<li><a href="https://www.snake123.com/category/products/snake-wine/">Snake wine</a></li>
</ul>
</li>
<li><a href="https://www.snake123.com/category/protection_policy/">Protection</a></li>
<li><a href="https://www.snake123.com/category/recipe/">Recipe</a></li>
<li><a href="https://www.snake123.com/category/typical_species/">Typical species</a>
<ul class="sub-menu">
	<li><a href="https://www.snake123.com/category/typical_species/agkistrodon-acutus/">Agkistrodon acutus</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/agkistrodon-halys/">Agkistrodon halys</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/bungarus-fasciatus/">Bungarus fasciatus</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/bungarus-multicinctus/">Bungarus multicinctus</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/calamaria-septentrionalis-boulenger/">Calamaria septentrionalis Boulenger</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/cobra/">cobra</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/crotalusadamanteus/">Crotalusadamanteus</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/dendroaspis-polylepis/">Dendroaspis polylepis</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/elaphe-guttata/">Elaphe guttata</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/elaphe-schrenckii/">Elaphe schrenckii</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/enhydris-chinensis/">Enhydris chinensis</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/eurypholis-major/">EuryPholis major</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/hydrophis-cyanocinctus/">Hydrophis cyanocinctus</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/king-cobra/">King Cobra</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/king-rat-snake/">King rat snake</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/lampropeltis-getulus-nigrita/">Lampropeltis getulus nigrita</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/lampropeltis-triangulum/">Lampropeltis triangulum</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/lycodon-rufozonatus/">Lycodon rufozonatus</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/oriental-rat-snake/">Oriental rat-snake</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/other-snakes/">other snakes</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/oxyuranus-scutellatus/">Oxyuranus Scutellatus</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/pet-snake/">Pet snake</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/pythonboa/">pythonboa</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/ramphotyphlops-braminus/">Ramphotyphlops braminus</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/rhabdophis-tigrinus/">Rhabdophis tigrinus</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/trimeresurus-stejnegeri/">Trimeresurus stejnegeri</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/striped-racer/">Striped Racer</a></li>
	<li><a href="https://www.snake123.com/category/typical_species/zaocys-dhumna/">Zaocys dhumna</a></li>
</ul>
</li>
</ul>                    <!--           菜单导航代码结束       -->