再次折腾,wordpress导航继续研究

上一次稍微整理了点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写上中意的样式吧!
哥的囧客圈小宝贝儿已经改好了,一个字:真他喵的帅毙了!

小 虾

哦也,我是小虾

10 条评论

  1. 很久没有过来了,今天过来看一看!

  2. 不错的站点,以后一定常来。

  3. 你居然已经回来了!

    • @solifugus 因为我爱的板面正在呼唤我!所以哥义不容辞的回来了~!!

      • @小虾 那就别回去了吧。

        • @solifugus 联通线路太囧了...不然哥还真留着不走咧哇哈哈哈哈

          • @小虾 那就开铁通吧,哈哈,啥时候有空,出来坐坐,请你吃个饭呗。

          • @solifugus 支持哈哈,铁通上大学那会儿给哥留下了不可磨灭的恐怖回忆...等乃们放假了约个时间粗来面基吧挖哈哈哈哈哈

          • @小虾 OK,哪天有时间,我提前跟你说哈。

          • @solifugus 好的 加了个油挖!

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

相关推荐

使用 PHP 禁止国内 ip 访问网站

php怎么禁止国内ip访问网站? 用php代码限制国内IP访问我们网站 原理: 利用淘宝的IP接口来判断IP,是否是国内的ip,是国内(CN)的就不允许访问。 $ip = $_SERVER['REMOTE_ADDR']; $content = file_get_c ...