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

概述几乎每个网站都有一个导航栏，导航栏一般将网站的内容分成几个类目，然后在导航栏中显示出来，以方便读者查阅相关内容。WordPress博客也提供了此功能，但是不同的博客主题在导航栏的设置方面也不尽相同，现在大多数主题是以页面（page）作为导航栏类目的，但是这种方式似乎达不到“导航”的… 几乎每个网站都有一个导航栏，导航栏一般将网站的内容分成几个类目，然后在导航栏中显示出来，以方便读者查阅相关内容。wordpress博客也提供了此功能，但是不同的博客主题在导航栏的设置方面也不尽相同，现在大多数主题是以页面（page）作为导航栏类目的，但是这种方式似乎达不到“导航”的目的，个人觉得用分类（category）和页面(Page一起)做为导航栏更合适。本文将指导你在wordpress中，如何设计一个用分类和页面作为菜单的导航栏，并高亮显示当前所在的栏目。@H_301_0@为了让读者了解当前所在的文章分类，网页设计师常常用一些比较突出的方式显示导航栏中的当前栏目，抬头看一下本文的上方，导航栏中的“教程指南”项目就被高亮显示了。

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

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

/* 代码一 */
<ul>
<li><a Title="Home" <?PHP if (is_home()) { echo 'class="current"';} ?> href="/">博客主页</a></li>

<?PHP wp_List_categorIEs('depth=1&Title_li=0&orderby=ID&show_count=0&hIDe_empty=0&child_of=0'); ?>

<?PHP wp_List_pages('depth=1&Title_li=0&sort_column=menu_order'); ?>
</ul>@H_301_0@上面那段代码是通过无序列表的形式来显示导航栏的，第一个 <li> 显示的是博客主页，如果当前所在是主页，则高亮显示"博客主页"，高亮显示则是通过class=&quotcurrent&quot样式来定义的，这个可以根据自己的需要定义。上面代码的第二行通过调用wp_List_categorIEs()和wp_List_pages()这两个函数来罗列所有的分类目录和页面，并且WordPress程序会自动将当前所在的分类或页面所在的<li>加上class="current-cat"的CSS属性，你只需在你的主题CSS文件中定义一个名为current-cat的class，来定义高亮形式即可。

但是上面的那段代码也有一定的缺陷，就是进入文章页面后，导航栏就无法高亮了，访客就不容易知道这篇文章是属于哪个分类的了，那怎么解决呢？解决起来也比较简单，加入以上*代码一*后，先在浏览器里面浏览你的博客，然后“查看源文件”，找到导航栏的代码，我的是这样子的：

<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>@H_301_0@我们给上面的代码加入动态PHP代码：

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

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

总结

以上是内存溢出为你收集整理的WordPress 分类做导航栏，并高亮显示全部内容，希望文章能够帮你解决WordPress 分类做导航栏，并高亮显示所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。