首页 » WordPress

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

日期：2009-08-26 标签：WordPress教程，网页设计

如需帮忙改代码，或者WordPress二次开发、PHP网站建设等需求，可联系我购买付费服务：点此联系我

几乎每个网站都有一个导航栏，导航栏一般将网站的内容分成几个类目，然后在导航栏中显示出来，以方便读者查阅相关内容。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 = '&current_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;
}

<--------------------------------------以下内容已过时-------------------------------------->

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

<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代码：

<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')。

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

-- 完 --

本文采用「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：
原文出处：露兜即刻 https://www.ludou.org/wordpress-highlight.html

作者：露兜 » kaapass@outlook.com

业余编程爱好者。

139 条留言

点此留言

« 1 2 3 28

小王
2012年10月11日 13:46

博主我下载了个国外主题 header.php这个文件中没找到wp_list_pages 应该怎么办？主页也是显示页面导航的

回复
- Ludou
  2012年10月11日 19:23
  
  @小王或者你可以参考这篇文章介绍的最新的方法：
  https://www.ludou.org/wordpress-create-navigation-menu.html
  
  回复
鼬
2012年11月20日 20:53

想请教Ludou一个问题，先说说历史原因：由于我的首页只想显示分类1的文章，所以导致首页和分类1文章目录的页面一模一样，于是我就在导航中设置不包含分类1，并且把导航中“首页”的名字改成了“分类1”。

正题：为了实现以上的效果，导致我看分类1的文章时，没办法使导航中的“分类1”高亮（因为它本来就是首页，不是分类1），所以想请教Ludou我该写什么代码才可以实现当点击分类1的文章时，导航中的“分类1”高亮？？谢谢

回复
- Ludou
  2012年11月20日 23:38
  
  @鼬 <?php if ( is_home() || is_category('1') || in_category('1') ) { echo ' class="current-cat"';} ?>
  
  回复
  - 鼬
    2012年11月21日 08:23
    
    @Ludou 哇~太强大了！这么特殊的功能都可以实现！谢谢Ludou！
    
    回复
子非我
2012年12月1日 00:45

若分类有二级菜单，切换到某二级分类，父级不会高亮；若在css添加“ #navigation #nav ul li.current_page_item > a,#navigation #nav ul li.current-menu-ancestor > a,#navigation #nav ul li.current-menu-item > a,#navigation #nav ul li.current-menu-parent > a ”，前面的情况会高亮，但文章页还是不会高亮。想要的效果是，父级二级都高亮。
还有关于自定义菜单的二级下拉菜单的实现，搜索了很久都没合适的，能否指教

回复
- Ludou
  2012年12月1日 10:35
  
  @子非我那你直接用WP的自定义菜单吧，使用更简单：
  https://www.ludou.org/wordpress-create-navigation-menu.html
  
  回复
郭易通
2013年2月10日 16:03

请问下Ludou
如果是调用自定义导航，那样的话如何定义高亮？

回复
- Ludou
  2013年2月13日 22:19
  
  @郭易通可以看看这篇文章：
  https://www.ludou.org/wordpress-create-navigation-menu.html
  
  回复
乐乐SEO博客
2013年5月7日 01:36

我想请问个问题如何实现分类下拉菜单呀

回复
- Ludou
  2013年5月7日 17:41
  
  @乐乐SEO博客问题太复杂，在此没法解答
  
  回复
Mutou
2013年8月1日 16:56

部分中文显示乱码，不晓得什么原因。例如，标签，分类，下面的子菜单也是中文，但是正常显示。非常感谢，建议可以加了支付宝借口，让喜欢课程的人捐赠一些小额支付。

回复
Mutou
2013年8月1日 17:27

谢谢，已经解决，是编码问题。改成utf8不带bom即可

回复
Qoros
2013年9月5日 14:18

老师，你好！我想请教你一下如何实现创建一个新的页面来调用文章的不同category。我参照了网上一些教程，比如这个方法<?php
/*
Template Name: adsense
*/
?>最后确实出来了模板，但是没有调用相应的分类。<?php
/*
Template Name: adsense
*/
?>

<?php get_header(); ?>

<?php $has_sidebar = ss_framework_check_page_layout(); ?>

<?php $page_title = ss_framework_get_custom_field( 'ss_page_title', get_option('page_for_posts') ) ? ss_framework_get_custom_field( 'ss_page_title', get_option('page_for_posts') ) : get_the_title( get_option('page_for_posts') ); ?>

<section id="content" class="clearfix <?php echo ss_framework_check_sidebar_position(); ?>">

<div class="container">

<header class="page-header">

<h1 class="page-title"><?php echo $page_title ?></h1>

<?php if( ss_framework_get_custom_field('ss_page_description') ): ?>

<hr />

<h2 class="page-description"><?php echo ss_framework_get_custom_field('ss_page_description'); ?></h2>

<?php endif; ?>

<?php if( ss_framework_get_custom_field('ss_page_subdescription') ): ?>

<hr />

<h2 class="page-subdescription"><?php echo ss_framework_get_custom_field('ss_page_subdescription'); ?></h2>

<?php endif; ?>

</header><!– end .page-header –>

<?php if( $has_sidebar ): ?>

<section id="main">

<?php endif; ?>

<?php query_posts('showposts=15&cat=32');?>
<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?>>

<?php get_template_part( 'content', get_post_format() ); ?>

</article><!– end .hentry –>

<?php endwhile; ?>

<?php echo ss_framework_pagination(); ?>

<?php else: ?>

<article id="post-0" class="post no-results not-found">

<h3><?php _e( 'It seems we can’t find what you’re looking for…', 'ss_framework' ); ?></h3>

</article><!– end .hentry –>

<?php endif; ?>

<?php if( $has_sidebar ): ?>

</section><!– end #main –>

<?php get_sidebar(); ?>

<?php endif; ?>

</div><!– end .container –>

</section><!– end #content –>

<?php get_footer(); ?>
我的QQ是377418202，求指教。自己摸索几天了，搞不出来这个问题

回复
x小胡
2013年10月14日 18:00

这个的手机界面样式如何将菜单分类名字显示出来呢？每个名字背景颜色都不一样！还是说非得要统一格式的 li 样式然后循环？只能这样？怎么个性化读取呢？

回复
- Ludou
  2013年10月14日 20:21
  
  @x小胡可使用get_categories函数调用所有分类，对不同分类li添加不太的css，文档：
  http://codex.wordpress.org/Function_Reference/get_categories
  
  可参考：
  https://www.ludou.org/wordpress-create-navigation-menu-by-code.html/comment-page-1#comment-6807
  
  回复
太头
2014年5月8日 06:52

这个必须顶，和老师多学习

回复
一天
2014年10月16日 13:56

请问二级导航被点击后一级导航如何高亮？

回复
小白太菜
2014年11月21日 17:25

wp_list_categories('title_li=0&orderby=ID&order=asc&show_count=0&depth=1@&include=1,2,3,4'.$currentcategory);

我的代码，为什么显示的菜单，只有首页2、3能高亮，ID为1、4的菜单选项不能正常亮呢。

回复
- 露兜
  2014年11月21日 21:12
  
  @小白太菜 wen文中代码已更新。更好的方法参加：https://www.ludou.org/wordpress-create-navigation-menu.html
  
  回复
tony
2015年1月2日 09:20

成功了，但是未分类也跑出来了咋整。。。

回复
- tony
  2015年1月2日 09:23
  
  @tony 会了，未分类可以改名的。。。
  
  回复
Silencr
2015年5月15日 22:25

你好，按照你的代码，wp_list_pages和wp_list_categories写出来的导航栏，不能控制页面和分类目录的顺序，首页都跑到最后去了，请问怎样才能控制呢？

回复
- 露兜
  2015年5月17日 21:56
  
  @Silencr 可以将页面或分类的别名前添加1、2、3…
  
  回复
jsoncode
2015年6月29日 10:32

找到wp_list_pages函数所在的文件post-template.php,将$css_class[] = 'current_page_item';改成 $css_class[] = 'active';,或者,在style.css中对current_page_item进行样式定义,就可以了,不用这么麻烦.我是从你博客里学到wp的用法的.谢谢你

回复
山顶洞人
2015年9月27日 09:21

新人，刚学习wordpress，感谢博主的无私付出、

回复
GD
2016年2月15日 10:52

露兜你好，我想将wordpress自由的分类目录修改一下，但本人刚入门，能力有限，希望可以解决一下：
我的分类目录子分类很多，
①侧栏默认显示根目录
②根目录点开后扩展二级目录
③二级目录点击打开后扩展三级目录，往后目录同理
其实就是类似自身分类目录的“体现层级”关系的效果，只是子分类较多，需要添加点击扩展的效果。
谢谢！

回复
沈的笔记
2016年4月5日 11:46

博主您好！最近无意中发现了您的博客网站，丰富的教程给像我这样的wordpress小白们帮助很大，非常谢谢~由于本人对于编程完全小白，所以有些教程研读起来还是比较烧脑。
个人最近也在尝试建设自己的兴趣交流博客站，但主题导航的问题始终困扰着我。就像博主文章说到的那样“现在大多数主题是以页面（page）作为导航栏类目的，但是这种方式似乎达不到"导航"的目的”，我目前采用的是由Cryout Creations创建的Parabola主题，版本：1.6.1。

目前我的“页面导航”中的几个主题页面下拉菜单分两到三个层级，我想达到的效果是【最子级页面可以链接到我博客站中的相关文章，让导航真正发挥它的作用】。

因为是小白，说了一大堆废话，见谅！！还希望博主能够给予帮助~谢谢！！

回复
你好
2017年4月9日 20:45

支持，楼主强大

回复
你好
2017年4月9日 20:46

请问楼主用的评论插件是什么？

回复
- 露兜
  2017年4月9日 22:00
  
  @你好自己写的，没用插件。WordPress原生支持嵌套评论，并不需要插件，自己写css即可
  
  回复
  - 你好
    2017年4月9日 22:05
    
    @露兜 Ajax更新是怎么写的？
    
    回复
    - 露兜
      2017年4月9日 22:08
      
      @你好网上搜索：WordPress ajax 评论
      
      回复
  - 你好
    2017年4月9日 22:09
    
    @露兜好的，谢谢。
    
    回复