WordPress 分类做导航栏，并高亮显示
几乎每个网站都有一个导航栏，导航栏一般将网站的内容分成几个类目，然后在导航栏中显示出来，以方便读者查阅相关内容。WordPress博客也提供了此功能，但是不同的博客主题在导航栏的设置方面也不尽相同，现在大多数主题是以页面（page）作为导航栏类目的，但是这种方式似乎达不到"导航"的目的，个人觉得用分类（category）和页面(Page一起)做为导航栏更合适。本文将指导你在WordPress中，如何设计一个用分类和页面作为菜单的导航栏，并高亮显示当前所在的栏目。
为了让读者了解当前所在的文章分类，网页设计师常常用一些比较突出的方式显示导航栏中的当前栏目，抬头看一下本文的上方，导航栏中的"教程指南"项目就被高亮显示了。
其实稍微懂一点网页设计的朋友都知道，这可以通过CSS来实现，但关键是如何确定该文章属于哪个分类，WordPress已经提供了现成的方法，更简单，调用几个函数就可以实现，而且不需要太多额外的代码。下面我们一步一步地来实现我们的目的。
WordPress主题都提供了导航栏，一般导航栏的代码在header.php这个文件中，找到相应的导航栏代码（如果你的导航栏现在显示的是页面列表，你只需找到 wp_list_pages 就可以了 ），改成如下形式，修改完毕后在浏览器里看看效果吧！注意：本文不讲解导航栏的样式设计，可根据需要自己定义相关的CSS和HTML。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <ul> <li<?php if (is_home()) { echo ' class="current-cat"';} ?>><a title="Home" href="/">博客主页</a></li> <?php $currentcategory = ''; // 以下这行代码用于在导航栏添加分类列表， // 如果你不想添加分类到导航中， // 请删除 6 - 14 行代码 if (!is_page() && !is_home()) { $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，来定义高亮形式即可，如：
1 2 3 | li.current-cat a { color:red; } |
<————————————–以下内容已过时————————————–>
但是上面的那段代码也有一定的缺陷，就是进入文章页面后，导航栏就无法高亮了，访客就不容易知道这篇文章是属于哪个分类的了，那怎么解决呢？解决起来也比较简单，加入以上*代码一*后，先在浏览器里面浏览你的博客，然后"查看源文件"，找到导航栏的代码，我的是这样子的：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ul> <li><a title="Home" href="/">博客主页</a></li> <li class="cat-item cat-item-1 "><a href="/category/diaries" title="生活随感">生活随感</a></li> <li class="cat-item cat-item-3 "><a href="/category/encyclopedia" title="百科全书">百科全书</a></li> <li class="cat-item cat-item-4 "><a href="/category/material" title="素材下载">素材下载</a></li> <li class="cat-item cat-item-5 "><a href="/category/showcase" title="橱窗展示">橱窗展示</a></li> <li class="cat-item cat-item-6 current-cat"><a href="/category/tutorials" title="教程指南">教程指南</a></li> <li class="cat-item cat-item-17 "><a href="/category/freebies" title="免费资源">免费资源</a></li> <li class="page_item page-item-2 "><a href="/about" title="关于露兜">关于露兜</a></li> </ul> |
我们给上面的代码加入动态PHP代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ul> <li><a title="Home" <?php if (is_home()) { echo 'class="current"';} ?> href="/">博客主页</a></li> <li class="cat-item cat-item-1 <?php if ( (is_category('1') || in_category('1')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/diaries" title="生活随感">生活随感</a></li> <li class="cat-item cat-item-3 <?php if ( (is_category('3') || in_category('3')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/encyclopedia" title="百科全书">百科全书</a></li> <li class="cat-item cat-item-4 <?php if ( (is_category('4') || in_category('4')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/material" title="素材下载">素材下载</a></li> <li class="cat-item cat-item-5 <?php if ( (is_category('5') || in_category('5')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/showcase" title="橱窗展示">橱窗展示</a></li> <li class="cat-item cat-item-6 <?php if ( (is_category('6') || in_category('6')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/tutorials" title="教程指南">教程指南</a></li> <li class="cat-item cat-item-17 <?php if ( (is_category('17') || in_category('17')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/freebies" title="免费资源">免费资源</a></li> <li class="page_item page-item-2 <?php if ( is_page('2') && !is_category() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/about" title="关于露兜">关于露兜</a></li> </ul> |
好了，将上面的代码改成你的内容，替换掉header.php中的导航栏代码即可。is_category()和is_page()函数的使用方法可以参阅条件标签，is_category()括号中的数字是根据前面的 cat-item-? 来确定的，如前面的class中是cat-item-6，则写成is_category('6')。
如果你有一定的网页设计基础，相信这并不是一件难事。如果遇到什么问题，可以在此发表评论，我会乐意效劳的。
本文版权归露兜博客所有，转载引用请完整注明以下信息：
本文作者：Ludou
本文标题：WordPress 分类做导航栏，并高亮显示
本文地址：http://www.ludou.org/wordpress-highlight.html
google了好几篇文章，还是找到这里来。
非常感谢，又学到很多。
可惜单页文章高亮，没有取category动态编号的函数…
文章已更新，可动态获取分类id，动态高亮分类链接，无需将导航代码静态化。
除了首页
其他页上的 class="current-cat" 怎么动态加上去？
没在文章中找到诶。。。。
你可以使用新的函数，wp_nav_menu()，使用这个函数更加方便：
http://codex.wordpress.org/Function_Reference/wp_nav_menu
关注站长很久，非常有耐心和专业。今天遇到一个问题，如果高亮后，能否定义字体颜色，我发现改过之后“color:#F00”好像并不起作用，希望指教~~#nav li.current-cat{color:#F00;background:#fff;}
定义链接属性：
#nav li.current-cat a {color:#F00;}
一直想学习菜单导航栏的制作，现在终于让我找到了..
还好没有JQ呵呵。。。
您的分割线，以下代码已过时是什么意思？
上面的代码已经实现了下面代码的所有功能，而且下面的代码操作比较麻烦，手动修改的东西太多。
但是感觉下面的更加的灵活，那比如我的li里面不仅仅有a还有span这样的标签怎么办？上面的貌似用wp来生成的li
http://codex.wordpress.org/Function_Reference/get_categories
用get_categories获取所有分类，你自行逐个输出就可以了
下面的代码的静态代码，如果是要发布的主题，不可能这么写，如果是你自己的博客当然没问题
确实，自己的博客可以随意些，您考虑的挺周到
Ludou好，我按照您的这篇教程，能够制作导航栏了。我的问题是我原来已经把页面都做好了，比如index.php,about.php,contact.php,new.php等，现在想要集成到wp里面，我不知道怎么把我的这些转换成wp里面的页面，请指教
我想用wp里面的后台管理能够在new.php里面发表一些新闻，用wp的一些get_header等函数替换掉每个的头部，这样不用每个模块都写。所以我要把我原来的导航制作成wp认识的导航，把我原来的页面做成wp认识的页面，这样我就能在每个页面里面用wp的函数了，但是不知道怎么把我的那些contact.php等转换成wp认识的….
上面问题解决了，O(∩_∩)O~
终于弄好了
呵呵
我用的wordpress是3.1.2的版本能这样做吗？
可以
感谢 总算搞定了。
似乎只要定义这两个CLASS不同样式就可以高亮了，但可以改class的名字吗。在哪里改？
#hearder li.current_page_item,#header li.current-cat
class的名字是WordPress生成的，没法改。
我用了最新版3.3.1，不知道这个方法有没有用，先试一下再说。
楼主，求学习，怎么像你那样，添加文章 时，，代码框在里面的啊。
你好，我用的是hotnews pro 2.7这个主题，我想把导航最后一个项目在任何时候都高亮显示。
请问如何能够做到呢？
直接将导航部分全部替换成html代码，然后给最后一个项目添加高亮的class
博主，你好，那个像“露兜博客》wordpress"这个是怎么做的啊？叫什么名字啊？先谢谢啦
面包屑导航
wp_list_pages header里没有这句话啊
不同主题不一样
很不错啊，不过我的主题使用不上，呵呵