工具:wordpress
創(chuàng)新互聯(lián)是一家專業(yè)從事做網(wǎng)站、成都網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)依托的技術(shù)實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計開發(fā)服務(wù)!
步驟:
1、打開wordpress,在當(dāng)前wordpress主題中的 functions.php 文件添加下面的代碼。
2、修改”我的博客首頁”的鏈接。在需要使用面包屑導(dǎo)航的主題文件的對應(yīng)位置添加下面的調(diào)用代碼即可。?php seobreadcrumbs(); ?
3、使用谷歌”Rich Snippets Testing Tool”工具來測試網(wǎng)址??梢钥吹匠霈F(xiàn)在網(wǎng)站的搜索結(jié)果中的面包屑。
wordpress主題添加面包屑導(dǎo)航一般有兩種方法,一種是通過使用插件來實現(xiàn),另一種是不使用插件,純代碼實現(xiàn),下面我來介紹一下這兩種方法。
一,純代碼實現(xiàn)
在functions中添加
function?get_breadcrumbs()
{
global?$wp_query;
if?(?!is_home()?){
//?Start?the?UL
echo?'ul?class="breadcrumbs"';
//?Add?the?Home?link
echo?'lia?href="'.?get_settings('home')?.'"網(wǎng)站首頁/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";
}
}
在有需要添加面包屑插件的頁面適當(dāng)位置添加
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;
}
通過上述三步就可以實現(xiàn)無插件面包屑效果,稍微的樣式和布局可以修改。
二,用插件實現(xiàn)
這里我推薦的插件是Breadcrumb NavXT,它提供5種面包屑導(dǎo)航樣式,如下圖所示
插件的設(shè)置界面如下
看不懂英文的用翻譯工具翻譯一下也能大概知道意思了,其它具體的使用您可以自己去安裝一下這款插件體驗一下,如果有不懂再問吧。
直接改一下樣式隱藏起來,或者去主題中修改。比較簡單應(yīng)該沒有人去開發(fā)這種插件吧。
1、層級較深的網(wǎng)站,面包屑導(dǎo)航適合層級較深的網(wǎng)站,如果只有一級分類的話,通過主導(dǎo)航就可以起到快速定位的作用。比如“豆瓣網(wǎng)”類型扁平構(gòu)架的網(wǎng)站就沒有使用面包屑導(dǎo)航的作用。
2、獨立不交叉的網(wǎng)站機構(gòu),由于面包屑網(wǎng)站導(dǎo)航路徑是線性結(jié)構(gòu)的,因此網(wǎng)站內(nèi)容必須劃分的非常清晰,且不存在交叉;否則,面包屑導(dǎo)航的路徑就不是唯一的,同一分類可能出現(xiàn)在不同的路徑中,讓用戶感到困惑。
在wordpress中添加面包屑導(dǎo)航的話,可以直接使用插件來實現(xiàn),不過很多站長都不喜歡用插件,還是認(rèn)為如果能用代碼解決的話是最理想的。我最近也找了一些關(guān)于面包屑導(dǎo)航的資料。下文中就有詳細(xì)解決怎么用代碼來實現(xiàn)wordpress面包屑導(dǎo)航:
一、在wordpress博客當(dāng)前主題的functions.php文件(沒有就創(chuàng)建一個)中添加以下代碼:
//面包屑導(dǎo)航
function get_breadcrumbs()
{
global $wp_query;
if ( !is_home() ){
// Start the UL
echo 'ul class="breadcrumbs"';
// Add the Home link
echo 'lia 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";
}
}
二、在顯示面包屑導(dǎo)航的位置添加以下調(diào)用代碼:
?php
if (function_exists('get_breadcrumbs')){
get_breadcrumbs();
}
?
三、在主題的css樣式文件中添加以下樣式代碼:
ul.breadcrumbs {list-style: none; font-size:12px;}
ul.breadcrumbs li {float: left; margin-right:5px;}