上一次稍微整理了点wordpress导航的相关资料http://yjyj.net/learn/wordpress-learn/3774.html

趁着这次请假回山东空闲不少,赶紧的继续折腾起.
既然资料齐备,剩下的就是动手开工了.
为了显示哥的决心,当然是要拿哥心爱的囧客圈(http://jokeoo.com)开刀.

为了让无意中来到这里的小伙伴也能尽快熟悉上手,哥就不拽那些装逼的了.
直接上脑残小白无脑版:

0.先给你的主题注册一个导航:
拿囧客圈做例子,代码伺候:

//添加导航
    register_nav_menus(array(
      'top-menu' => '顶部菜单',
    ));

1.接着再主题内原导航菜单的位置用这个替换:

<?php wp_nav_menu(
	array(
		'container'=>'false',
		'items_wrap' => '<ul class="jokeoo-menu">%3$s</ul>',
		'theme_location' => 'top-menu'
		)
	);
?>

当然,某些情况下,会发现哎呦卧槽怎么调用不出内容,那是因为还没在后台建立相应的导航菜单啊亲!

2.最简单的一部到了,上传好刚修改的两枚页面,接着伸出左手中指,心中挚诚的默念:"money money go my home"999999次.按下键盘上的"F5".哒铛~! 导航出现了!

当然,又有某些情况下,导航没有高亮显示,到这里,恭喜你! 你的脑残指数跟哥的淫荡指数差不远了!
没有写高亮的css,导航当然不会高亮!

于是接下来我们分析一下生成的导航代码:

你会找到这些css选择器里面的某一个:
current-post-ancestor
current-menu-ancestor
current-menu-item
current-menu-parent
怎么样,只看字面意思也能够知道该怎么做了吧?没错,就是给他们写好想要的高亮样式,比如:"color:#fff;background:#000;"之类的.

再进阶一点,刚刚检查代码的时候,会发现class真是他喵的好大一串,太烦人了.
例如:

<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6"><a href="http://www.jokeoo.com/">首页</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="http://jokeoo.com/category/funnygif">囧来囧去</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8"><a href="http://jokeoo.com/category/mm">福利社</a></li>

如果你像哥一样热爱生活,当然会想要不相干的class消失掉.那么可以这么做:

过滤一下常用的当前导航高亮选择器:
current-post-ancestor
current-menu-ancestor
current-menu-item
current-menu-parent

代码如下:

/**
 * 移除菜单的多余CSS选择器
 */
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);
function my_css_attributes_filter($var) {
	return is_array($var) ? array_intersect($var, array('current-menu-item','current-post-ancestor','current-menu-ancestor','current-menu-parent')) : '';
}
//修改上面这行可以添加更多想要保留的项目

修改之后 就会变成:

<li class="current-menu-item"><a href="http://www.jokeoo.com/">首页</a></li>
<li><a href="http://jokeoo.com/category/funnygif">囧来囧去</a></li>
<li><a href="http://jokeoo.com/category/mm">福利社</a></li>

哎呦,这样就成功了!
给你的class写上中意的样式吧!
哥的囧客圈小宝贝儿已经改好了,一个字:真他喵的帅毙了!