WonderCSS

无需插件实现 WordPress 面包屑导航

网站栏目结构在多层次的情况下,我们通常会在顶部加上一个“当前位置”的路径导航,一般为从首页开始逐次递进到当前页面的链接。这种网站当前页面的路径导航有一个可爱的名字:面包屑(breadcrumb)。

面包屑导航最初出自于神话故事《奇幻森林历险记》,故事的两个小主人公丢下一条面包屑路径,然后顺着这条路径回到了家中。就像这个故事一样,在互联网中,面包屑为用户提供一种追踪返回最初访问页面的方式,可以清晰的为客户指引进入网站内部也和首页之间的路线。

面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。给网站添加面包屑导航有利于提高访客体验和搜索引擎优化,所以大多数网站都设计了面包屑导航。在wordpress中有很多优秀的插件可以实现这一功能,但是很多人喜欢控制插件的数量以节省资源提升效率,那么就可以使用以下方法,在不用插件的情况下实现 wordpress 面包屑导航。

方法如下:

1、在wordpress博客当前主题的 functions.php 文件中添加以下代码:


//Get Breadcrumb
function get_breadcrumbs()
{
     global $wp_query; 
     if ( !is_home() ){ 
          // Start the UL
          echo '<ul class="breadcrumbs">';
          // Add the Home link
          echo '<li><a href="'. get_settings('home') .'">'. get_bloginfo('name') .'</a></li>'; 
          if ( is_category() )
          {
               $catTitle = single_cat_title( "", false );
               $cat = get_cat_ID( $catTitle );
               echo "<li> » ". get_category_parents( $cat, TRUE, " » " ) ."</li>";
          }
          elseif ( is_archive() && !is_category() )
          {
               echo "<li> » Archives</li>";
          }
          elseif ( is_search() ) { 
               echo "<li> » Search Results</li>";
          }
          elseif ( is_404() )
          {
               echo "<li> » 404 Not Found</li>";
          }
          elseif ( is_single() )
          {
               $category = get_the_category();
               $category_id = get_cat_ID( $category[0]->cat_name ); 
               echo '<li> » '. get_category_parents( $category_id, TRUE, " » " );
               echo the_title('','', FALSE) ."</li>";
          }
          elseif ( is_page() )
          {
               $post = $wp_query->get_queried_object(); 
               if ( $post->post_parent == 0 ){ 
                    echo "<li> » ".the_title('','', FALSE)."</li>"; 
               } else {
                    $title = the_title('','', FALSE);
                    $ancestors = array_reverse( get_post_ancestors( $post->ID ) );
                    array_push($ancestors, $post->ID); 
                    foreach ( $ancestors as $ancestor ){
                         if( $ancestor != end($ancestors) ){
                              echo '<li> » <a href="'. get_permalink($ancestor) .'">'. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</a></li>';
                         } else {
                              echo '<li> » '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</li>';
                         }
                    }
               }
          } 
          // End the UL
          echo "</ul>";
     }
}

在显示面包屑导航的位置添加以下调用代码:


<?php
if (function_exists('get_breadcrumbs')){
    get_breadcrumbs();
}
?>

在主题的 css样式表 文件中添加以下基础样式代码:


ul.breadcrumbs {
     display:block;
     padding:8px 0;
}
ul.breadcrumbs li {
     float:left;
     margin-right:8px;
}

添加完成后,就可以显示面包屑导航的效果了。

By 于湛 发布于 2013.03.9 5,237 次浏览

发表评论

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