wordpress 主题怎么添加面包屑导航

html-css021

wordpress 主题怎么添加面包屑导航,第1张

wordpress主题添加面包屑导航一般有两种方法，一种是通过使用插件来实现，另一种是不使用插件，纯代码实现，下面我来介绍一下这两种方法。

一，纯代码实现

在functions中添加

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') .'">网站首页</a></li>'

if ( is_category() )

{

$catTitle = single_cat_title( "", false )

$cat = get_cat_ID( $catTitle )

echo "<li> &raquo ". get_category_parents( $cat, TRUE, " &raquo " ) ."</li>"

}

elseif ( is_archive() && !is_category() )

{

echo "<li> &raquo Archives</li>"

}

elseif ( is_search() ) {

echo "<li> &raquo Search Results</li>"

}

elseif ( is_404() )

{

echo "<li> &raquo 404 Not Found</li>"

}

elseif ( is_single() )

{

$category = get_the_category()

$category_id = get_cat_ID( $category[0]->cat_name )

echo '<li> &raquo '. get_category_parents( $category_id, TRUE, " &raquo " )

echo the_title('','', FALSE) ."</li>"

}

elseif ( is_page() )

{

$post = $wp_query->get_queried_object()

if ( $post->post_parent == 0 ){

echo "<li> &raquo ".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> &raquo <a href="'. get_permalink($ancestor) .'">'. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</a></li>'

} else {

echo '<li> &raquo '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</li>'

}

}

}

}

// End the UL

echo "</ul>"

}

}

在有需要添加面包屑插件的页面适当位置添加

<php get_breadcrumbs()

打开主题所在的style.css，添加

ul.breadcrumbs {

list-style: none

padding: 0

margin: 0

font-size:12px

}

ul.breadcrumbs li {

float: left

margin: 0 5px 0 0

padding: 0

}

通过上述三步就可以实现无插件面包屑效果，稍微的样式和布局可以修改。

二，用插件实现

这里我推荐的插件是Breadcrumb NavXT，它提供5种面包屑导航样式，如下图所示

插件的设置界面如下

看不懂英文的用翻译工具翻译一下也能大概知道意思了，其它具体的使用您可以自己去安装一下这款插件体验一下，如果有不懂再问吧。

#crumbs ul li a:after{

    /*styles

    .

    .

    .

    */

    /*加一个zindex就可以了*/

    z-index:100

}