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

最新推荐文章于 2023-12-27 07:50:45 发布

dengwenquan2011

最新推荐文章于 2023-12-27 07:50:45 发布

阅读量2.3k

点赞数

分类专栏： WordPress 文章标签： wordpress class list 生活浏览器 css

WordPress 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

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

Ludou

人气: 6,798

几乎每个网站都有一个导航栏，导航栏一般将网站的内容分成几个类目，然后在导航栏中显示出来，以方便读者查阅相关内容。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 = '&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，来定义高亮形式即可，如：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

好了，将上面的代码改成你的内容，替换掉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

dengwenquan2011

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
WordPress 分类做导航栏，并高亮显示

WordPress 分类做导航栏，并高亮显示Ludou人气: 6,798 几乎每个网站都有一个导航栏，导航栏一般将网站的内容分成几个类目，然后在导航栏中显示出来，以方便读者查阅相关内容。WordPress博客也提供了此功能，但是不同
复制链接

扫一扫

专栏目录