贝壳之家

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

评分 7.9, 满分 10 分 (47 票)
Loading...

     几乎每个网站都有一个导航栏,导航栏一般将网站的内容分成几个类目,然后在导航栏中显示出来,以方便读者查阅相关内容。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_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_categorieswp_list_pages 这两个函数来罗列所有的分类目录和页面,并且程序会自动判断当前文章所在的分类,也会自动判断当前分类和当前页面,然后将其所在的 <li> 加上 class="current-cat" 的CSS类选择器,你只需在你主题目录下的style.css中定义一个名为 .current-catclass,来定义高亮形式即可,如:

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

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

露兜
ourwindow@163.com

业余编程爱好者。

标签: WordPress, 网页设计
我要提问

133 条评论

点此留言
1 2 3 28
  1. 小王

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

    • Ludou

      @小王 或者你可以参考这篇文章介绍的最新的方法:
      http://www.ludou.org/wordpress-create-navigation-menu.html

  2. 鼬

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

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

    • Ludou

      @ <?php if ( is_home() || is_category('1') || in_category('1') ) { echo ' class="current-cat"';} ?>

      • 鼬

        @Ludou 哇~太强大了!这么特殊的功能都可以实现!谢谢Ludou!

  3. 子非我

    若分类有二级菜单,切换到某二级分类,父级不会高亮;若在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

      @子非我 那你直接用WP的自定义菜单吧,使用更简单:
      http://www.ludou.org/wordpress-create-navigation-menu.html

  4. 郭易通

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

    • Ludou

      @郭易通 可以看看这篇文章:
      http://www.ludou.org/wordpress-create-navigation-menu.html

  5. 乐乐SEO博客

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

  6. Mutou

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

  7. Mutou

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

  8. Qoros

    老师,你好!我想请教你一下如何实现创建一个新的页面来调用文章的不同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&rsquo;t find what you&rsquo;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,求指教。自己摸索几天了,搞不出来这个问题

  9. x小胡

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

    • Ludou

      @x小胡 可使用get_categories函数调用所有分类,对不同分类li添加不太的css,文档:
      http://codex.wordpress.org/Function_Reference/get_categories

      可参考:
      http://www.ludou.org/wordpress-create-navigation-menu-by-code.html/comment-page-1#comment-6807

  10. 太头

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

  11. 一天

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

  12. 小白太菜

    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的菜单选项不能正常亮呢。

    • 露兜

      @小白太菜 wen文中代码已更新。更好的方法参加:http://www.ludou.org/wordpress-create-navigation-menu.html

  13. tony

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

    • tony

      @tony 会了,未分类可以改名的。。。

  14. Silencr

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

    • 露兜

      @Silencr 可以将页面或分类的别名前添加1、2、3…

  15. jsoncode

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

  16. 山顶洞人

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

  17. GD

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

  18. 沈的笔记

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

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

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

1 2 3

发表评论

评分 7.9, 满分 10 分 (47 票)
Loading...