将wordpress分类目录与页面整合为自定义导航栏(一)
Ribbon主题支持一个菜单，可以同时将分类目录与页面显示在导航栏中，但这个导航栏的效果与我想要的效果还有一些差距。我想要的导航栏，它可以显示分类目录下的子目录，鼠标停留在当前目录或者在浏览当前目录下的文章时，当前目录要高亮显示。
这样的要求对于一些高手而言就是小菜一碟，但对我而言却很难，我需要经过大量的学习和大量的尝试。经过一番努力后，终于有了一点眉目，先分享与我一样的新手们。
1.ribbon主题的header.php中与导航栏相关的源代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="secondary-navigation"> <nav id="navigation" > <?php if ( has_nav_menu( 'primary-menu' ) ) { ?> <!--主题自带的菜单保留--> <?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'menu_class' => 'menu', 'container' => '' ) ); ?> <?php } else { ?> <ul class="menu"> <!--我准备在此处对导航栏进行改造--> <?php wp_list_categories('title_li='); ?> </ul> <?php } ?> </nav> </div> |
2.要令新改造的导航栏生效，在自定义主题处不能选择”primary Menu”。
3.本次导航栏改造主要的参考链接：http://www.ludou.org/wordpress-highlight.html
修改后的header.php代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="menu"> <!--<?php wp_list_categories('title_li='); ?>--> <li<?php if (is_home()) { echo ' class="current-cat"';} ?>><a title="Home" href="/">HOME</a> </li> <?php $currentcategory = ''; if (!is_page() && !is_home()) { $catsy = get_the_category(); $myCat = $catsy[0]->cat_ID; $currentcategory = '¤t_category='.$myCat; } wp_list_categories('depth=3&title_li=&show_count=0&hide_empty=0&child_of=0'.$currentcategory); wp_list_pages('depth=1&title_li=&sort_column=menu_order'); ?> </ul> |
然后在style.css中加入如下代码：
|
1 2 3 |
li.current-cat a{ color:red; } |
文件修改保存，刷新博客主页，导航栏可以显示到第二层子目录。
4.修改后的导航栏基本满足我的需求，但缺陷是鼠标停留的分类与当前正在浏览的分类目录均未高亮显示(只是子目录的颜色会发生变化)。在style.css中添加的代码仅对”HOME”栏有效。
我能查到的几乎所有的资料都显示函数wp_list_categories会自动为相应的li添加current-cat的class，但导航栏中的其他类目对新添加的css代码无反应呢？我觉得唯一的解释就是其他类目没有成功添加current-cat的class。
愚钝的我为这个问题纠结了很久才想到我可以使用”F12″来查看我的网站最终输出的HTML代码来解释我心中的疑虑。果不其然，只有HOME有current-cat的class，而其他类目则添加的是”cat-item”的class。
经过搜索，我在http://codex.wordpress.org/Template_Tags/wp_list_categories这里看到了wp_list_categories的css selectors的相关信息，在li中出现的class有可能是这些selecotors中的任何一个。
我继续搜索相关内容，但并没有得到更多更详细的信息，网络中似乎也有很多人对此感到迷惑。估计我在将来很长一段时间都不会明白上述描述的具体意义，但这并不影响我将我的导航栏装修成我喜欢的样子，下一篇将说明我折腾导航栏css的过程。
.png)
