WordPress 菜单设置使用心得

由 WordPress 开始支持菜单设置时就开始使用菜单功能，感觉非常方便好用，但一直没有好好研究一下实现该功能的函数 wp_nav_menu ，因此一直在使用上犯着错误而不自知。今天在测试时重新设置了该函数的值，感觉真是天都亮了。

我遇到的问题在于没有设置菜单 ul 的类，因此当 WordPress 默认显示页面菜单时会没有 CSS 样式。查看过 HTML 代码，发现菜单 div 有默认的类 menu，因此我声明多一段菜单的 CSS，使没有选择使用的菜单时对默认的页面菜单依然有效……这纯属错误的做法，而我却一直错了好多年。因此想通过篇文章提醒一下各位。

在使用 WordPress 的菜单功能是，需要先激活主题的菜单功能，在主题的functions.php文件中加入以下代码：

if ( function_exists('register_nav_menus') ){
	register_nav_menus(array(
		'primary' => '导航栏',
                //你可以同时添加多个菜单，根据上一行格式，以逗号隔开
	));
}

这样，在后台的 外观 菜单下就会出现 菜单 选项。

然后在主题中使用菜单的位置加入：

<?php if ( function_exists('wp_nav_menu') ) { ?>
     <div id="menu">
          <?php wp_nav_menu( array('theme_location' =>'primary','container_id' => 'menu','depth' => 3,'menu_class'  => 'nav','link_before' => '<span>', 'link_after' => '</span>' )); ?>
<?php } ?>

代码中的参数是我当前使用的，在此提醒大家，最好设置 menu_class 的值，否则会遇到我前面所说到的麻烦。你可以根据以下参数的说明来修改成适合自己的：

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

菜单设置好，必须使用 CSS 加以美化，以下是我使用 inline-block 方式调整的菜单，兼容性好，支持3级（3级以上没测试过）菜单，你可以调整必要的样式以达到最佳效果。

#menu{line-height:29px;position:absolute;top:0;left:0;z-index:2}
.nav{position:relative;font-size:0;/* 所有浏览器 */*word-spacing:-1px/* IE6、7 */}
.nav li{font-size: 12px;font-weight:700;letter-spacing: normal;vertical-align:top;word-spacing: normal}
@media screen and (-webkit-min-device-pixel-ratio:0){/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */.nav{letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/}}
.nav li{display:inline-block;position:relative;*display:inline;*zoom:1}
.nav li ul li ul{top:0;left:83px}
.nav .current-menu-item a,.nav .current-post-parent a,.nav .current-menu-parent a,.nav .current-category-parent a{border-top:3px solid #CCC}
.nav a{border-top:3px solid #FFF;color:#666;display:block;text-align:center;width:83px}
.nav a:hover{background:url("images/bg.gif") repeat scroll left top #FFF;border-top:3px solid #666}
.nav li:hover a{background:url("images/bg.gif") repeat scroll left top #FFF;border-top:3px solid #666}
.nav li ul{background:#FFF;display:none;left:0;position:absolute;top:32px;width:83px;z-index:3}
.nav li ul li{display:block}
.nav li .sub-menu li a{background:#F7F7F7;border:none;width:83px}
.nav li .sub-menu li a:hover{background:#000;border:none;color:#FFF}

此外，还可以根据是否登录生成不同该菜单栏：

<?php
     if ( is_user_logged_in() ) {
          wp_nav_menu( array( 'theme_location' => 'logged-in-menu' ) );
     } else {
          wp_nav_menu( array( 'theme_location' => 'logged-out-menu' ) );
     }
?>