分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress 添加面包屑导航
+

WordPress 添加面包屑导航

我们都是知道一个站点需要一个好的导航,这样的话,不仅收录会好点,而且访客也会更加明晰自己所处的位置。
首先我们要了解一下什么叫面包屑导航,我自己百度了一下:

作用

1、让用户了解当前所处位置,以及当前页面在整个网站中的位置。
2、体现了网站的架构层级,能够帮助用户快速学习和了解网站内容和组织方式,从而形成很好的位置感。
3、提供返回各个层级的快速入口,方便用户操作。
4、Google已经将面包屑导航整合到搜索结果里面,因此优化面包屑导航每个层级的名称,多使用关键字,都可以实现SEO优化。面包屑路径,对于提高用户体验来说,是很有帮助的。
5、方便用户,面包屑主要用于为用户提供导航一个网站的次要方法,通过为一个大型多级网站的所有页面提供面包屑路径,用户可以更容易的定位到上一次目录,引导用户通行;
6、减少返回到上一级页面的点击或操作,不用使用浏览器的“返回”按钮或网站的主要导航来返回到上一级页面;
7、不用常常占用屏幕空间,因为它们通常是水平排列以及简单的样式,面包屑路径不会占用页面太多的空间。这样的好处是,从内容过载方面来说,他们几乎没有任何负面影响;
8、降低跳出率,面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。比如说,一个用户通过谷歌搜索到一个页面,然后看到一个面包屑路径,这将会诱使用户点击上一级页面去浏览感兴趣的相关主题。这样,从而,可以降低网站的总体跳出率。
9、有利于百度蜘蛛对网站的抓取,蜘蛛直接沿着那个链走就可以了,很方便。
10、面包屑有利于网站内链的建设,用面包屑大大增加了网站的内部连接,提高用户体验。

看到了上面的作用之后我们就可以知道这类面包屑导航对于一个站点还是有必要的,所以我也研究了好长时间,最后也弄好了,首先声明:改代码以及教程来自微饭天空,原帖地址:http://www.weeiy.com/wordpress-add-breadcrumb.html ?要是想看原帖的用户可以直接去看。

那么我们就正式进入正题了:

首先我们看看修改过后以及修改之前的效果分别有什么不一样,这里以本站作为演示,下面是修改之前文章标题:

WordPress 添加面包屑导航-BanYuner

下面是修改之后的文章标题:

WordPress 添加面包屑导航-BanYuner

大家可以明显感觉到我的标题怎么会这么长呢,首先我来解释一下,未修改前的标题是我引用同主题下别站的文章标题,修改之后的就是本站现在的标题了,那么既然看到效果之后,我相信大家都会觉得修改之后看得会舒服一点,你们觉得呢。

接下来我们就开始添加代码了,我们需要的代码一共有三段,首先第一段我们需要添加到function.php文件中,添加到文件中哪个位置呢,我个人一般是添加在最后面?>之后的,我也建议各位这么添加。

代码段如下:

<?php
/*
* WordPress 添加面包屑导航,支持谷歌结构化数据测试!
*http://www.weeiy.com/wordpress-add-a-breadcrumb.html
* 代码转载自:http://dimox.net/wordpress-breadcrumbs-without-a-plugin/
*/
function dimox_breadcrumbs() {
/*=微Fan建议,请保持下列设置,以免产生错误!=*/
$text['home']     = '首页'; // 文字为“主页”链接
$text['category'] = '文章目录 "%s"'; // 文本的分类页面
$text['search']   = '搜索结果 "%s" Query'; // 文本的搜索结果页面
$text['tag']      = '文章标签 "%s"'; // 文本标签页
$text['author']   = '文章发表于 %s'; // 文本的作者页面
$text['404']      = 'Error 404'; // 文本404页
$show_current   = 1; // 1 - 显示当前文章/页/类别标题面包屑, 0 - 不显示
$show_on_home   = 0; // 1 - 在主页上显示面包屑, 0 - 不显示
$show_home_link = 1; // 1 - 显示“主页”链接, 0 - 不显示
$show_title     = 1; // 1 - 显示标题的链接, 0 - 不显示
$delimiter      = ' <small>&raquo;</small> '; // 面包屑之间的分隔符
$before         = '<span class="current">'; // 在当前标签之前
$after          = '</span>'; // 标签后面
/* === END OF OPTIONS === */
global $post;
$home_link    = home_url('/');
$link_before  = '<span typeof="v:Breadcrumb">';
$link_after   = '</span>';
$link_attr    = ' rel="v:url" property="v:title"';
$link         = $link_before . '<a' . $link_attr . ' href="%1$s">%2$s</a>' . $link_after;
$parent_id    = $parent_id_2 = $post->post_parent;
$frontpage_id = get_option('page_on_front');
if (is_home() || is_front_page()) {
if ($show_on_home == 1) echo '<div class="breadcrumbs"><a href="' . $home_link . '">' . $text['home'] . '</a></div>';
} else {
echo '<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">';
if ($show_home_link == 1) {
echo '<a href="' . $home_link . '" rel="v:url" property="v:title">' . $text['home'] . '</a>';
if ($frontpage_id == 0 || $parent_id != $frontpage_id) echo $delimiter;
}
if ( is_category() ) {
$this_cat = get_category(get_query_var('cat'), false);
if ($this_cat->parent != 0) {
$cats = get_category_parents($this_cat->parent, TRUE, $delimiter);
if ($show_current == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
$cats = str_replace('</a>', '</a>' . $link_after, $cats);
if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
echo $cats;
}
if ($show_current == 1) echo $before . sprintf($text['category'], single_cat_title('', false)) . $after;
} elseif ( is_search() ) {
echo $before . sprintf($text['search'], get_search_query()) . $after;
} elseif ( is_day() ) {
echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter;
echo sprintf($link, get_month_link(get_the_time('Y'),get_the_time('m')), get_the_time('F')) . $delimiter;
echo $before . get_the_time('d') . $after;
} elseif ( is_month() ) {
echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter;
echo $before . get_the_time('F') . $after;
} elseif ( is_year() ) {
echo $before . get_the_time('Y') . $after;
} elseif ( is_single() && !is_attachment() ) {
if ( get_post_type() != 'post' ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
printf($link, $home_link . '/' . $slug['slug'] . '/', $post_type->labels->singular_name);
if ($show_current == 1) echo $delimiter . $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, $delimiter);
if ($show_current == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
$cats = str_replace('</a>', '</a>' . $link_after, $cats);
if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
echo $cats;
if ($show_current == 1) echo $before . get_the_title() . $after;
}
} elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;
} elseif ( is_attachment() ) {
$parent = get_post($parent_id);
$cat = get_the_category($parent->ID); $cat = $cat[0];
if ($cat) {
$cats = get_category_parents($cat, TRUE, $delimiter);
$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
$cats = str_replace('</a>', '</a>' . $link_after, $cats);
if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
echo $cats;
}
printf($link, get_permalink($parent), $parent->post_title);
if ($show_current == 1) echo $delimiter . $before . get_the_title() . $after;
} elseif ( is_page() && !$parent_id ) {
if ($show_current == 1) echo $before . get_the_title() . $after;
} elseif ( is_page() && $parent_id ) {
if ($parent_id != $frontpage_id) {
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
if ($parent_id != $frontpage_id) {
$breadcrumbs[] = sprintf($link, get_permalink($page->ID), get_the_title($page->ID));
}
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = 0; $i < count($breadcrumbs); $i++) {
echo $breadcrumbs[$i];
if ($i != count($breadcrumbs)-1) echo $delimiter;
}
}
if ($show_current == 1) {
if ($show_home_link == 1 || ($parent_id_2 != 0 && $parent_id_2 != $frontpage_id)) echo $delimiter;
echo $before . get_the_title() . $after;
}
} elseif ( is_tag() ) {
echo $before . sprintf($text['tag'], single_tag_title('', false)) . $after;
} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . sprintf($text['author'], $userdata->display_name) . $after;
} elseif ( is_404() ) {
echo $before . $text['404'] . $after;
} elseif ( has_post_format() && !is_singular() ) {
echo get_post_format_string( get_post_format() );
}
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><!-- .breadcrumbs -->';
}
} // end dimox_breadcrumbs()
?>

代码段比较长,但是我们不用对其做任何修改,只要默默无闻的添加进去就好了,接下来,就是调用代码了,我们通过添加调用代码,可以将修改后的路径添加到你想要添加的地方,我是直接将标题替换为了这段代码了,就将原有的简单标题替换了含有路径的标题了,让人看上去一目了然,但是问题是,每个主题不一样,标题文字大小不一样以及各种变量因素的存在,可能大家还需要自己慢慢调试。下面就附上调用代码:

<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>

按照原作者所说,为了美观起见,我们还需要添加一个CSS样式,但是我是没有添加的,添加之后的效果就是这个的背景色是一个肤色。大家可以自行脑部一下,简单的说就是一段文字的背景色而已。CSS代码如下:

 .breadcrumbs {
margin: 0 0 5px;
padding: 9px 20px 7px;
background-color: #f7f7f7;
}

该段代码添加到style.css中的最后面就可以了.
其实简单来说这个内容是简单易懂的,但是难就难在你要添加到哪里,以及调用的位置是否合适,是否美观,是否影响阅读了,这个是大家需要慢慢去调试的,这里我也不能解释清楚了,还是因为主题的原因,毕竟不一样,也不好说了。但是如果大家有问题,可以直接评论或者直接邮件我,微信我都行,我尽我所能帮助你。

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
WordPress 添加面包屑导航
支付宝(点击图片切换)
扫码,支持我
WordPress 添加面包屑导航
微信(点击图片切换)
扫码,手机看
WordPress 添加面包屑导航

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

 相关推荐

换一批 换一批
  • WordPress搜索只显示标题中含有关键字的文章

    WordPress搜索只显示标题中含有关键字的文章

    今天在知更鸟博客上面看到了这篇文章,整体来说,这个功能在某些方面还是比较有用的,如果说通过标题中的关键字来寻找文章的 ...

    点击查看
  • 如何给WordPress站点添加wow.js效果

    如何给WordPress站点添加wow.js效果

    今天折腾了以下这个东西,为什么会折腾这个东西呢,因为之前经常逛知更鸟博客,后来一次更新之后,发现知更鸟博客多了一种加 ...

    点击查看
  • 如何在WordPress评论中显示更多HTML标签

    如何在WordPress评论中显示更多HTML标签

    我见过很多站点,都可以在评论里面添加各种标签,什么自己加粗,然后添加图片,添加链接等等,当时我个人觉得可能并不适合我 ...

    点击查看
  • WordPress显示一年前当天的文章

    WordPress显示一年前当天的文章

    最开始看到这个功能是在112博客,那个时候看到这个功能的第一感觉可能就是觉得,这个功能不是很实用,可能会增加SQL语句的查 ...

    点击查看
  • 给你的WordPress站点添加一个打印按钮

    给你的WordPress站点添加一个打印按钮

    这个功能很久之前就已经在知更鸟博客上面看到了,但是一直没有想过是什么原理,但是今天无意间发现了一个方法,目前觉得还是 ...

    点击查看
  • WordPress显示一周热评

    WordPress显示一周热评

    WordPress站点如何显示一周热评,我相信还是有很多人都想要知道的,那么这里就简单的说说实现方法了。

    点击查看
  • WordPress 限定显示评论者链接的输出

    WordPress 限定显示评论者链接的输出

    最近从bigfa的相关站点看到了这个更新内容,我个人觉得还是很有用的,对于一些广告用户还是有一定的作用的,毕竟有些时候, ...

    点击查看
  • WordPress文章段落间插入广告

    WordPress文章段落间插入广告

    很久之前就已经在留意这个功能了,但是一直没有找到相关的解决办法,今天我算是找到了这个相关代码。使用这个功能对于我们宣 ...

    点击查看
  • 最轻便的复制页面内容到剪切板的JS:clipboard.js

    最轻便的复制页面内容到剪切板的JS:clipboard.js

    今天早些时候在水煮鱼博客看到了这篇文章,我一开始是想要用到代码方面的,毕竟代码很多时候都是直接复制编辑的,但是后来想 ...

    点击查看
  • WordPress前台显示站点有多少注册用户

    WordPress前台显示站点有多少注册用户

    虽然我的站点目前已经关闭了注册,所有已经注册过的用户已经清理完毕了,这里说声抱歉。那么今天这个文章就是给大家一个方法 ...

    点击查看
  • WordPress添加一个底部漂浮栏

    WordPress添加一个底部漂浮栏

    站点底部添加一个通知栏的作用是起到一个通知或者说增加PV的作用,但是很多时候我们都知道,这种通知可能被人觉得很反感,但 ...

    点击查看
  • WordPress避免手残导致文章意外发布

    WordPress避免手残导致文章意外发布

    有些时候,我们编辑好了文章,但是我们可能并不想发布,但是很多时候,我们就是手残,也就是误发布了,这种事情可能对于博客 ...

    点击查看

  目前有 0 条评论 其中:访客: 0 条, 博主: 0 条

WordPress 添加面包屑导航
评分: 4 + 3 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)