当前位置: 首页 > 其它 > 如何为WordPress添加面包屑导航

如何为WordPress添加面包屑导航

其它 1条评论 2013-12-17 2,903 views

什么是面包屑导航?

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

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

面包屑导航的优点:

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

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

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

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

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

function dimox_breadcrumbs() {

  $delimiter = '»';
  $name = 'Home'; //text for the 'Home' link
  $currentBefore = '';
  $currentAfter = '';

  if ( !is_home() && !is_front_page() || is_paged() ) {

    echo '
'; global $post; $home = get_bloginfo('url'); echo '' . $name . ' ' . $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 '' . get_the_time('Y') . ' ' . $delimiter . ' '; echo '' . get_the_time('F') . ' ' . $delimiter . ' '; echo $currentBefore . get_the_time('d') . $currentAfter; } elseif ( is_month() ) { echo '' . get_the_time('Y') . ' ' . $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[] = '' . get_the_title($page->ID) . ''; $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 '
'; } }
最后将这些代码添加到 header.php 里面,也可以放在 single.php 页面的导航标题上面,也可能因为主题的不同你添加的地方可能有:archive.phparchives.phplinks.phppage.php(根据自己的主题测试,小z的是在header.php的末尾)
1 2 3<div class="mbx-dh"> <?phpif(function_exists('dimox_breadcrumbs')) dimox_breadcrumbs();?></div>

如果想要美化下显示方式,直接通过添加CSS即可。如下:

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

当然可根据个人喜好添加,如果不会默认的即可。

One thought on “如何为WordPress添加面包屑导航”

  1. hhu说道:

    请问我现在用这个模板的问题,我另一个博客用这个模板,顶部导航可以固定。这个博客用这个模板后不能固定,请问是在哪里设置啊?麻烦了

发表评论

电子邮件地址不会被公开。 必填项已用*标注