几乎每个网站都有一个导航栏,导航栏一般将网站的内容分成几个类目,然后在导航栏中显示出来,以方便读者查阅相关内容。WordPress博客也提供了此功能,但是不同的博客主题在导航栏的设置方面也不尽相同,现在大多数主题是以页面(page)作为导航栏类目的,但是这种方式似乎达不到"导航"的目的,个人觉得用分类(category)和页面(Page一起)做为导航栏更合适。本文将指导你在WordPress中,如何设计一个用分类和页面作为菜单的导航栏,并高亮显示当前所在的栏目。
为了让读者了解当前所在的文章分类,网页设计师常常用一些比较突出的方式显示导航栏中的当前栏目,抬头看一下本文的上方,导航栏中的"教程指南"项目就被高亮显示了。
其实稍微懂一点网页设计的朋友都知道,这可以通过CSS来实现,但关键是如何确定该文章属于哪个分类,WordPress已经提供了现成的方法,更简单,调用几个函数就可以实现,而且不需要太多额外的代码。下面我们一步一步地来实现我们的目的。
WordPress主题都提供了导航栏,一般导航栏的代码在header.php
这个文件中,找到相应的导航栏代码(如果你的导航栏现在显示的是页面列表,你只需找到 wp_list_pages 就可以了 ),改成如下形式,修改完毕后在浏览器里看看效果吧!注意:本文不讲解导航栏的样式设计,可根据需要自己定义相关的CSS和HTML。
<ul>
<li<?php if (is_home()) { echo ' class="current-cat"';} ?>><a title="Home" href="/">博客主页</a></li>
<?php
$currentcategory = '';
// 以下这行代码用于在导航栏添加分类列表,
// 如果你不想添加分类到导航中,
// 请删除 6 - 14 行代码
if (is_category() || is_single()) {
$catsy = get_the_category();
$myCat = $catsy[0]->cat_ID;
$currentcategory = '¤t_category='.$myCat;
}
wp_list_categories('depth=1&title_li=&show_count=0&hide_empty=0&child_of=0'.$currentcategory);
// 以下这行代码用于在导航栏添加页面列表
// 如果你不想添加页面到导航中,
// 请删除16 - 19行代码
wp_list_pages('depth=1&title_li=&sort_column=menu_order');
?>
</ul>
上面那段代码是通过无序列表的形式来显示导航栏的,第一个 <li>
显示的是博客主页,如果当前所在是主页,则高亮显示"博客主页",高亮显示则是通过class="current-cat"
样式来定义的,这个可以根据自己的需要定义。上面代码中通过调用 wp_list_categories 和 wp_list_pages 这两个函数来罗列所有的分类目录和页面,并且程序会自动判断当前文章所在的分类,也会自动判断当前分类和当前页面,然后将其所在的 <li>
加上 class="current-cat"
的CSS类选择器,你只需在你主题目录下的style.css中定义一个名为 .current-cat
的 class
,来定义高亮形式即可,如:
li.current-cat a {
color:red;
}