看本文之前先扫个盲,“面包屑导航”也许有知道的,不过还是照顾一下不知道的朋友们。面包屑导航是站内优化(也就是SEO中)常接触的一个名词,我刚听到时也不知道是神马,不过后来查了查,也了解了一些。
面包屑导航(BreadcrumbNavigation)这个概念来自童话故事”汉赛尔和格莱特”,当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路,所以,在现在的网站中,面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。
虽然目前很多网站都流行使用面包屑导航,但是并不是所有的网站都适用。符合下面两个条件的网站才适合使用面包屑导航。
1、层级较深的网站,面包屑导航适合层级较深的网站,如果只有一级分类的话,通过主导航就可以起到快速定位的作用。比如“豆瓣网”类型扁平构架的网站就没有使用面包屑导航的作用。
2、独立不交叉的网站机构,由于面包屑网站导航路径是线性结构的,因此网站内容必须划分的非常清晰,且不存在交叉;否则,面包屑导航的路径就不是唯一的,同一分类可能出现在不同的路径中,让用户感到困惑。
在wordpress中添加面包屑导航的话,可以直接使用插件来实现,不过很多站长都不喜欢用插件,还是认为如果能用代码解决的话是最理想的。我最近也找了一些关于面包屑导航的资料。下文中就有详细解决怎么用代码来实现wordpress面包屑导航:
一、在wordpress博客当前主题的functions.php文件(没有就创建一个)中添加以下代码:
//面包屑导航
function get_breadcrumbs()
{
global $wp_query;
if ( !is_home() ){
// Start the UL
echo '
';
// Add the Home link
echo '
- '. get_bloginfo('name') .'
';
if ( is_category() )
{
$catTitle = single_cat_title( "", false );
$cat = get_cat_ID( $catTitle );
echo "
- » ". get_category_parents( $cat, TRUE, " » " ) ."
";
}
elseif ( is_archive() && !is_category() )
{
echo "
- » Archives
";
}
elseif ( is_search() ) {
echo "
- » Search Results
";
}
elseif ( is_404() )
{
echo "
- » 404 Not Found
";
}
elseif ( is_single() )
{
$category = get_the_category();
$category_id = get_cat_ID( $category[0]->cat_name );
echo '
- » '. get_category_parents( $category_id, TRUE, " » " );
echo the_title('','', FALSE) ."
";
}
elseif ( is_page() )
{
$post = $wp_query->get_queried_object();
if ( $post->post_parent == 0 ){
echo "
- » ".the_title('','', FALSE)."
";
} 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 '
- » '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'
';
} else {
echo '
- » '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'
';
}
}
}
}
// End the UL
echo "
";
}
}
二、在显示面包屑导航的位置添加以下调用代码:
三、在主题的css样式文件中添加以下样式代码:
ul.breadcrumbs {list-style: none; font-size:12px;}
ul.breadcrumbs li {float: left; margin-right:5px;}
好了,完成以上几个步骤即可实现面包屑导航,快去试试吧
转载文章请注明,转载自:妍熙饭 [http://www.yanxifan.com]
原文链接:http://www.yanxifan.com/1760.html