7

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

 3 years ago
source link: https://yjyj.net/learn/wordpress-learn/4447.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

2014-01-15

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK