当前位置:园子博客 » Wordpress » 为 WordPress 添加面包屑导航

为 WordPress 添加面包屑导航

2月 23rd, 2011 | Filed under Wordpress | 共有24,418次浏览

面包屑导航这个名字听起来就有些古怪,简单的说它就是提供给用户回溯到网站首页或入口页面的一条快速路径。本文说下wordpress 添加面包屑导航的两种方法

什么是面包屑导航?

面包屑通常出现在页面顶部,一般会位于标题或页头的下方。它提供给用户返回之前任何一个页面的链接(这些链接也是能到达当前页面的路径),在层级架构中通常是这个页面的父级页面。

也可以这样理解,面包屑提供给用户回溯到网站首页或入口页面的一条快速路径,它们绝大部分看起来就像这样:首页→分类页→次级分类页。如下图所示:

Wordpress 面包屑导航显示效果

Wordpress 面包屑导航显示效果

面包屑导航的一些好处

1.可以提供多路径的交互方式,方便用户跳转到其它页面。在页面及分类多的网站中尤其有用。

2.面包屑导航信息结构对于网站的seo也有着大的好处,它可以更多的强调网站关键字,扩大关键字的范围,从而达到更好的优化目的。

3.它从一个侧面展示了该信息集合的信息结构和集合方式,可以让用户在最快的时间之内找到需要的东西。

当然,可以通过插件来实现。本文主要说的是传统的代码方法。

方法一:直接在相关页面添加代码即可实现面包屑导航

把以下代码直接添加到你想出现面包屑导航的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="mbx-dh">
当前位置:<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> &raquo;
<?php
if( is_single() ){
$categorys = get_the_category();
$category = $categorys[0];
echo( get_category_parents($category->term_id,true,' &raquo; ') );
the_title();
} elseif ( is_page() ){
the_title();
} elseif ( is_category() ){
single_cat_title();
} elseif ( is_tag() ){
single_tag_title();
} elseif ( is_day() ){
the_time('Y年Fj日');
} elseif ( is_month() ){
the_time('Y年F');
} elseif ( is_year() ){
the_time('Y年');
} elseif ( is_search() ){
echo $s.' 的搜索结果';
}
?>
</div>

你可以把这些代码添加到 header.php 里面,也可以放在 single.php 页面的导航标题上面,你有可能需要添加的页面可能有:archive.php、archives.php、links.php、page.php。

这个方法是转载万戈同学的,原文请看这里

方法二:通过 functions.php 调用实现面包屑导航效果

首先把以下代码添加到主题的 functions.php 文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
function dimox_breadcrumbs() {
 
  $delimiter = '&raquo;';
  $name = 'Home'; //text for the 'Home' link
  $currentBefore = '<span>';
  $currentAfter = '</span>';
 
  if ( !is_home() && !is_front_page() || is_paged() ) {
 
    echo '<div id="crumbs">';
 
    global $post;
    $home = get_bloginfo('url');
    echo '<a href="' . $home . '">' . $name . '</a> ' . $delimiter . ' ';
 
    if ( is_category() ) {
      global $wp_query;
      $cat_obj = $wp_query->get_queried_object();
      $thisCat = $cat_obj->term_id;
      $thisCat = get_category($thisCat);
      $parentCat = get_category($thisCat->parent);
      if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
      echo $currentBefore . 'Archive by category &#39;';
      single_cat_title();
      echo '&#39;' . $currentAfter;
 
    } elseif ( is_day() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
      echo $currentBefore . get_the_time('d') . $currentAfter;
 
    } elseif ( is_month() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo $currentBefore . get_the_time('F') . $currentAfter;
 
    } elseif ( is_year() ) {
      echo $currentBefore . get_the_time('Y') . $currentAfter;
 
    } elseif ( is_single() ) {
      $cat = get_the_category(); $cat = $cat[0];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo $currentBefore;
      the_title();
      echo $currentAfter;
 
    } elseif ( is_page() && !$post->post_parent ) {
      echo $currentBefore;
      the_title();
      echo $currentAfter;
 
    } elseif ( is_page() && $post->post_parent ) {
      $parent_id  = $post->post_parent;
      $breadcrumbs = array();
      while ($parent_id) {
        $page = get_page($parent_id);
        $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
        $parent_id  = $page->post_parent;
      }
      $breadcrumbs = array_reverse($breadcrumbs);
      foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
      echo $currentBefore;
      the_title();
      echo $currentAfter;
 
    } elseif ( is_search() ) {
      echo $currentBefore . 'Search results for &#39;' . get_search_query() . '&#39;' . $currentAfter;
 
    } elseif ( is_tag() ) {
      echo $currentBefore . 'Posts tagged &#39;';
      single_tag_title();
      echo '&#39;' . $currentAfter;
 
    } elseif ( is_author() ) {
       global $author;
      $userdata = get_userdata($author);
      echo $currentBefore . 'Articles posted by ' . $userdata->display_name . $currentAfter;
 
    } elseif ( is_404() ) {
      echo $currentBefore . 'Error 404' . $currentAfter;
    }
 
    if ( get_query_var('paged') ) {
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
      echo __('Page') . ' ' . get_query_var('paged');
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
    }
 
    echo '</div>';
 
  }
}

最后在适当的地方(如方法一中提到的几个文件)添加以下代码调用:

1
2
3
<div class="mbx-dh">
<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?> 
</div>

如果想要美化下显示方式,直接通过添加 css 即可。园子使用的 CSS 如下:

1
.mbx-dh {padding: 5px 10px;}

以上提供的两种方法,你可以根据需要任选一种都可实现。想折腾的朋友请开始吧。

  1. firedragonpzy
    8月 17th, 201220:06

    你的评论是怎么做的啊 不错 可否告知 谢谢

  2. wordpress网站
    5月 24th, 201219:23

    我想知道,怎么在谷歌搜索引擎制作友好的面包屑导航呢。

  3. 黑白蓝
    1月 31st, 201210:42

    很好~~已经用上了,谢谢!

  4. 太原网站优化
    12月 30th, 201121:57

    今天正好再找面包屑导航的代码。谢谢博主了。欢迎回访。

  5. 壹周丽波丰胸网
    7月 3rd, 201114:38

    感谢分享,刚刚用上了!

  6. Ben
    7月 2nd, 201107:27

    谢谢分享, 第一种方法精简, 但是第二种方法判断更为完善, 对日期归档和tag 等等都有很好的处理. 逻辑上没有任何问题. 强烈建议使用第二种! 欢迎参加下在本站的使用效果!

  7. Henry
    3月 31st, 201122:36

    不错不错。园子有好多好动西啊。

  8. 倡萌
    3月 29th, 201119:33

    呵呵,文章很不错,支持一下,我的主题默认就有了

  9. 松露巧克力
    3月 15th, 201100:09

    写的不错,学习了。我以前也自己写过,没你的好。

  10. sprityaoyao
    3月 11th, 201110:16

    我爱简洁,页面不喜欢那么多字,所以把面包屑导航全去了。另外,你的这个“上上下下”的按钮,点击”评论”怎么跳不到评论发表的地方。

  11. 咋免费
    3月 6th, 201116:26

    是这回事啦!来顶下啦!不错啊

  12. MK
    3月 6th, 201111:04

    有些主题不兼容吧

  13. Louis Han
    3月 5th, 201123:18

    原来这种导航就这个名字

  14. SEO
    3月 5th, 201107:05

    我弄了个分类目录网站,有空去提交一下网站吧,谢谢

  15. 淘宝网购物
    3月 3rd, 201116:43

    虽然很复杂,但是很深刻.

  16. 杨川小博
    3月 3rd, 201116:29

    哪天有时间来试试

  17. yanyi
    3月 3rd, 201116:25

    建议博主试一试无觅的相关文章插件,对流量增长的效果挺明显。

  18. 苏州SEO
    3月 3rd, 201113:57

    不错啊 我有时间得弄试试

  19. air nailer
    3月 3rd, 201113:32

    好多代码哦,看起来有点累,更容易犯困。。。

  20. 春天
    3月 3rd, 201110:22

    哪个玩意 叫面包屑?

    左边的这个吗

  21. 任鸟飞
    3月 3rd, 201109:30

    我觉得小博客就没必要加了,目录层级也就是2或3级,没必要,当然大博客或目录层级比较深的话应该加上去。

  22. cuike
    3月 2nd, 201123:24

    文章的开通就看到了一个强悍的标题,原来是上一篇文章啊,哈哈。
    面包屑导航在博客来说也是必不可少的。

  23. 冰火影视网
    3月 2nd, 201122:49

    面包导航 ?

  24. 酷秀减肥药
    3月 2nd, 201111:19

    真是个不错的方法!

  25. in1874
    3月 1st, 201117:41

    哈哈 贴图标题 很亮眼啊 ~! 很代码 很好实现 不错 ~!

  26. 期货配资
    3月 1st, 201113:55

    学习了,文章写得很详细哦。

  27. baby stroller
    3月 1st, 201109:36

    恩,还是挺有用的,收藏了。

  28. 男装品牌排名
    2月 27th, 201120:47

    比较复杂的呢。。

  29. ShunYea
    2月 27th, 201118:12

    兄弟使用的是什么代码高亮插件啊?

  30. John
    2月 26th, 201117:27

    面包屑的说法还是第一次听说,那我的新改版的网站是不是属于这一类的?

  31. 卜珂巧克力
    2月 25th, 201121:15

    这个请教下博主为什么我的博客13天了 百度还不收录也是WP建设的

  32. 微博资讯网
    2月 24th, 201115:48

    面包屑很实用,并且丰富了显示效果。
    复习WP知识~~ 3Q

  33. wmtimes
    2月 24th, 201112:25

    好像之前老外那里也介绍过。

  34. baby stroller
    2月 24th, 201110:50

    哎,代码都看不懂的额

  35. SOHO一族
    2月 23rd, 201122:03

    又怂恿俺折腾呢!

  36. 万戈
    2月 23rd, 201120:38

    现在面包屑越来越流行了,特别的门户网站,不可缺少的一部分

  37. 韩国
    2月 23rd, 201120:29

    有插件可以实现。也谢谢博主推荐。

  38. 软件盒子
    2月 23rd, 201118:49

    我那里有了呵呵

您必须在 登录 后才能发布评论.