您的位置：首页 > 其它

wordpress面包屑导航

2011-10-10 20:34 190 查看


为 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> »
<?php
if( is_single() ){
$categorys = get_the_category();
$category = $categorys[0];
echo( get_category_parents($category->term_id,true,' » ') );
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
2526
27
28
29
30
3132
33
34
35
36
37
38
39
40
4142
43
44
45
46
47
48
49
50
5152
53
54
55
56
57
58
59
60
6162
63
64
65
66
67
68
69
70
7172
73
74
75
76
77
78
79
80
8182
83
84
85
86
87
88
89
90
91

function dimox_breadcrumbs() {

$delimiter = '»';
$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 '';
single_cat_title();
echo ''' . $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 '' . get_search_query() . ''' . $currentAfter;

} elseif ( is_tag() ) {
echo $currentBefore . 'Posts tagged '';
single_tag_title();
echo ''' . $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;}

以上提供的两种方法，你可以根据需要任选一种都可实现。想折腾的朋友请开始吧。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航