蓝盟诗人[LUC]蓝客联盟

WordPress 分类做导航栏,并高亮显示

2010-09-19 19:55 作者: 来源: 本站 浏览: 1,887 views 我要评论 字号:

几乎每个网站都有一个导航栏,导航栏一般将网站的内容分成几个类目,然后在导航栏中显示出来,以方便读者查阅相关内容。WordPress博客也提供了此功能,但是不同的博客主题在导航栏的设置方面也不尽相同,现在大多数主题是以页面(page)作为导航栏类目的,但是这种方式似乎达不到“导航”的目的,个人觉得用分类(category)和页面(Page一起)做为导航栏更合适。本文将指导你在WordPress中,如何设计一个用分类和页面作为菜单的导航栏,并高亮显示当前所在的栏目。

为了让读者了解当前所在的文章分类,网页设计师常常用一些比较突出的方式显示导航栏中的当前栏目,抬头看一下本文的上方,导航栏中的“教程指南”项目就被高亮显示了。

WordPress 分类做导航栏,并高亮显示

其实稍微懂一点网页设计的朋友都知道,这可以通过CSS来实现,但关键是如何确定该文章属于哪个分类,WordPress已经提供了现成的方法,更简单,调用几个函数就可以实现,而且不需要太多额外的代码。下面我们一步一步地来实现我们的目的。

WordPress主题都提供了导航栏,一般导航栏的代码在header.php这个文件中,找到相应的导航栏代码,改成如下形式,修改完毕后在浏览器里看看效果吧!注意:本文不讲解导航栏的样式设计,可根据需要自己定义相关的CSS和HTML。

上面那段代码是通过无序列表的形式来显示导航栏的,第一个

  • 显示的是博客主页,如果当前所在是主页,则高亮显示“博客主页”,高亮显示则是通过class=”current”样式来定义的,这个可以根据自己的需要定义。上面代码的第二行通过调用wp_list_categories()和wp_list_pages()这两个函数来罗列所有的分类目录和页面,并且WordPress程序会自动将当前所在的分类或页面所在的
  • 加上class=”current-cat”的CSS属性,你只需在你的主题CSS文件中定义一个名为current-cat的class,来定义高亮形式即可。但是上面的那段代码也有一定的缺陷,就是进入文章页面后,导航栏就无法高亮了,访客就不容易知道这篇文章是属于哪个分类的了,那怎么解决呢?解决起来也比较简单,加入以上*代码一*后,先在浏览器里面浏览你的博客,然后“查看源文件”,找到导航栏的代码,我的是这样子的:

    我们给上面的代码加入动态PHP代码:

    好了,将上面的代码改成你的内容,替换掉header.php中的导航栏代码即可。is_category()和is_page()函数的使用方法可以参阅条件标签,is_category()括号中的数字是根据前面的 cat-item-? 来确定的,如前面的class中是cat-item-6,则写成is_category('6')。

    如果你有一定的网页设计基础,相信这并不是一件难事。如果遇到什么问题,可以在此发表评论,我会乐意效劳的。

  • 转载自:露兜博客 http://www.ludou.org/wordpress-highlight.html

    打印
    分享到:
    复制链接

    发表评论

    *

    * (保密)

    Ctrl+Enter 快捷回复

    会员登录关闭

    记住我 忘记密码

    注册会员关闭

    小提示: 您的密码会通过填写的"电子邮箱"发送给您.