将wordpress分类目录与页面整合为自定义导航栏(一)

        Ribbon主题支持一个菜单,可以同时将分类目录与页面显示在导航栏中,但这个导航栏的效果与我想要的效果还有一些差距。我想要的导航栏,它可以显示分类目录下的子目录,鼠标停留在当前目录或者在浏览当前目录下的文章时,当前目录要高亮显示。

        这样的要求对于一些高手而言就是小菜一碟,但对我而言却很难,我需要经过大量的学习和大量的尝试。经过一番努力后,终于有了一点眉目,先分享与我一样的新手们。

1.ribbon主题的header.php中与导航栏相关的源代码如下:

2.要令新改造的导航栏生效,在自定义主题处不能选择”primary Menu”。

primaryMenu

3.本次导航栏改造主要的参考链接:http://www.ludou.org/wordpress-highlight.html

   修改后的header.php代码如下:

   然后在style.css中加入如下代码:

   文件修改保存,刷新博客主页,导航栏可以显示到第二层子目录。

newNav

4.修改后的导航栏基本满足我的需求,但缺陷是鼠标停留的分类与当前正在浏览的分类目录均未高亮显示(只是子目录的颜色会发生变化)。在style.css中添加的代码仅对”HOME”栏有效。

HOME

        我能查到的几乎所有的资料都显示函数wp_list_categories会自动为相应的li添加current-cat的class,但导航栏中的其他类目对新添加的css代码无反应呢?我觉得唯一的解释就是其他类目没有成功添加current-cat的class

        愚钝的我为这个问题纠结了很久才想到我可以使用”F12″来查看我的网站最终输出的HTML代码来解释我心中的疑虑。果不其然,只有HOME有current-cat的class,而其他类目则添加的是”cat-item”的class。

navOther

        经过搜索,我在http://codex.wordpress.org/Template_Tags/wp_list_categories这里看到了wp_list_categories的css selectors的相关信息,在li中出现的class有可能是这些selecotors中的任何一个。

wpCatListCss

        我继续搜索相关内容,但并没有得到更多更详细的信息,网络中似乎也有很多人对此感到迷惑。估计我在将来很长一段时间都不会明白上述描述的具体意义,但这并不影响我将我的导航栏装修成我喜欢的样子,下一篇将说明我折腾导航栏css的过程。

发表评论

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

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

Fork me on GitHub