给博客添加面包屑导航条的三种方法

Breadcrumb Navigation——面包屑导航,许多博客及大型网站都在使用的浏览导航功能。它就好像公路边的路标,无论我们走到哪里都清楚自己所处的位置,不会迷失方向。话说在博客中创建一条面包屑导航条,不仅仅有利于提高用户体验的质量,也对搜索引擎十分友好,我觉得不管博客大小如何,用上了总是件好事,特别对于CMS型的博客,不可或缺哦!有的WordPress主题本身已经集成了面包屑的导航功能,但有的没有,这时我们就得自己折腾了。本文提供三种实现面包屑导航的方法,前两种不用插件,后一种使用插件。

一.非插件的方法

1.最简单的方法,在主题的functions.php文件中添加下面这段代码:

function the_breadcrumb() {
	echo '您现在的位置: ';
	if (!is_front_page()) {
		echo '<a href="';
		echo get_option('home');
		echo '">Home';
		echo "</a> » ";
		if (is_category() || is_single()) {
			the_category(' ');
			if (is_single()) {
				echo " » ";
				the_title();
			}
		} elseif (is_page()) {
			echo the_title();
		}
	}
	else {
		echo 'Home';
	}
}

然后在想要显示面包屑导航条的页面模板(category.php或single.php等)适当地方插入这一行:

<?php
          the_breadcrumb();
?>

2.稍复杂的,但功能强劲的,在主题的functions.php文件中添加下面这段代码:

function dimox_breadcrumbs() {
  $delimiter = '&raquo;';
  $name = 'Home'; //text for the 'Home' link
  $currentBefore = '<span class="current">';
  $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() && !is_attachment() ) {
      $cat = get_the_category(); $cat = $cat[0];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo $currentBefore;
      the_title();
      echo $currentAfter;
    } elseif ( is_attachment() ) {
      $parent = get_post($post->post_parent);
      $cat = get_the_category($parent->ID); $cat = $cat[0];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo '<a href="' . get_permalink($parent) . '">' . $parent->post_title . '</a> ' . $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>';
  }
}

然后在想要显示面包屑导航条的页面模板文件适当位置插入这一行:

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

最后可在主题的样式表文件style.css中给.current和#crumbs这两个CSS元素加上一些值以样式化一下导航条。

二.使用插件Breadcrumb NavXT

Breadcrumb NavXT 是专门用来生成日志路径导航的一款WordPress插件,提供了 WordPress 上几乎所有页面的导航设置, 包括存档页面, 独立页面, 模板页面 (包括子模板), 分类页面 (包括子分类), 标签页面等等,实用性非常强, 对搜索引擎和用户体验都很友好, 是 WordPress 导航系统方面的一个有力补充.

breadcrumb-sample

图片来源:mtekk

插件下载地址:http://wordpress.org/extend/plugins/breadcrumb-navxt/

插件安装好后从后台设置页面进行设置,后台设置页面截图:

Breadcrumb NavXT Settings

导航条的调用,可以使用下面的代码:

<div class="breadcrumb">
<?php
	if(function_exists('bcn_display')) {
		bcn_display();
	}
?>

详细安装及使用方法可访问插件作者主页:Breadcrumb NavXT’s

如无特别说明,本站文章皆为原创,若要转载,必须注明以下原文信息:
日志标题: 《给博客添加面包屑导航条的三种方法》
日志链接: http://www.chenchunlin.info/3-ways-to-add-a-breadcrumb-navigation-to-your-blog.html
博客名称: Chenchunlinblog

This entry was posted in WordPress and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

4 Comments

  1. Posted 2011/06/02 at 22:31 | Permalink

    路过,留下脚印!!!

  2. Posted 2011/06/02 at 14:19 | Permalink

    我喜欢第一种里面的第二个

    • Posted 2011/06/03 at 00:06 | Permalink

      我总感到代码太多,如果我要用,还是选择用插件,哈哈!

欢迎发表评论

我们不会公开您的邮箱地址, 标有*号的是必填项哦!

*
*

您可以使用这些HTML标签及其属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>