作者:MR张尉诚 | 来源:互联网 | 2014-05-16 09:58
面包屑导航(Breadcrumbs)是网页导航设计中一个标准设计模式,在网站浏览中非常有用。这篇文章主要介绍非插件的方式在WordPress中如何打造恰当、全面的面包屑导航,包括分类嵌套和页面嵌套。需要声明的一点是我是基于bootstrap前台为元素添加相应类的:期间遇到在分类归档页面下该分类仍然是一个
面包屑导航(Breadcrumbs)是网页导航设计中一个标准设计模式,在网站浏览中非常有用。这篇文章主要介绍非插件的方式在WordPress中如何打造恰当、全面的面包屑导航,包括分类嵌套和页面嵌套。需要声明的一点是我是基于bootstrap前台为元素添加相应类的:
期间遇到在分类归档页面下该分类仍然是一个链接并且后面带有>>,这是因为系统函数get_category_parents默认循环输出分类的结果,我的解决办法是重写了get_category_parents方法,在分类目录下去调用重写的my_get_category_parents函数而不是get_category_parents,这样就解决了这个问题。
将下面的函数放在主题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 "
";
}
}
//自定义获取分类链接链的函数
function my_get_category_parents( $id, $link = true, $separator = '/', $nicename = false, $srcid, $visited = array() ) {
$chain = '';
$parent = get_category( $id );
if ( is_wp_error( $parent ) )
return $parent;
if ( $nicename )
$name = $parent->slug;
else
$name = $parent->name;
if ( $parent->parent && ( $parent->parent != $parent->term_id ) && !in_array( $parent->parent, $visited ) ) {
$visited[] = $parent->parent;
$chain .= my_get_category_parents( $parent->parent, $link, $separator, $nicename, $srcid, $visited );
}
$has_children = false;
if($id == $srcid){
$has_children = false;
}else{
$has_children = true;
}
if($has_children){
if ( $link )
$chain .= 'name ) ) . '">'.$name.'' . $separator;
else
$chain .= $name.$separator;
}else{
$chain .= $name;
}
return $chain;
}
面包屑调用代码:
面包屑分析:
- 首先,如果是首页则不显示面包屑导航;如果不是首页则添加首页的链接;
- 然后是一些列的判断语句,覆盖了所有可能出现的不同位置,一些语句已经不言自明,比如搜索、404页面、存档页;
- 如果是一个分类,先获取分类ID,然后通过ID获取其上级分类列表,这里使用了WordPress提供的函数get_category_parents();
- 如果是一篇文章,必须先获取所属分类ID,但方法和上面稍有不同。一旦获取了分类ID,就和上面一样添加文章标题即可。
页面导航:
- 首先获取页面标题;
- 然后获取页面的祖先并颠倒他们的顺序,借助WordPress内置的get_post_ancestors()函数可以轻松实现,下一行代码将当前页面添加到祖先数组中;
- 最后使用foreach循环输出所有祖先,循环中的if语句确保最后一个祖先(即添加到数组中的当前页面)没有链接。