所謂的“麵包屑導航”就是本站文章頁面上方和導航欄下方之間的那部分(如下圖)
本站原主題不帶這個功能，之前在瀏覽同一個分類下的多篇文章很麻煩，需要一直返回首頁，重新找到分類入口。
對於麵包屑導航有很多公開的實現方法，很多代碼甚至十分細心的提供了包括對主頁、標籤頁，搜索頁、獨立頁等頁面的支持，但是黑鳥君當前的需求是在瀏覽文章的時候希望用到，因此這邊只提供文章頁面添加此功能的方法，其他頁面的添加可參照此法自行搞定。
在主題的functions.php文件中添加以下面代碼。
//麵包屑導航生成函數-by 小白博客
function guihet_breadcrumbs(){
if( !is_single() ) return false;
$categorys = get_the_category();
$category = $categorys[0];
return '當前位置： <small>>/<small> '.get_category_parents($category->term_id, true, ' <small>>/<small> ').get_the_title();
}
在主題的single.php文件中添加以下代碼，黑鳥君把它放在了導航欄下面的位置，這個需要根據需求和主題的代碼來具體修改..
1
2
3
4
<div class="breadcrumbs">
<div class="container">php echo guihet_breadcrumbs() ?>div>
div>
美化
完成以上的兩個步驟後，先清理下瀏覽器緩存，就可以顯示麵包屑導航了，但還不夠好看。因此還需添加顯示樣式代碼。一般的主題是把以下的這段代碼添加到style.css文件，並且以下只是黑鳥博客使用的樣式，僅供窗口，具體要根據你自己的主題做一些調整。
1
2
3
4
5
6
7
8
/** 麵包屑導航 - 小白博客樣式參考 **/
.breadcrumbs{padding: 15px 0;font-size: 12px;line-height: 1;text-align: left;background-color: #fff;margin-bottom: 15px;margin-top: -15px;border-bottom: 1px solid #EBEBEB; box-shadow: 0 1px 3px rgba(0,0,0,.04);color: #999;}
.breadcrumbs small{font-size: 12px;font-family: serif;color: #bbb;margin: 0 2px;font-weight: bold;}
.breadcrumbs a{color: #999;}
.breadcrumbs a:hover{color: #666;}
@media (max-width:640px){
.breadcrumbs{margin-top: 1px;margin-bottom: 0;padding: 10px 15px;border-bottom: none;margin-bottom: 1px;}
}
演示
繼續吹一波：麵包屑導航有利於幫助用戶快速學習和了解網站內容和組織方式，快速定位需要瀏覽的內容，從而形成很好的位置感..
以上效果可以在小白博客任意文章頁面查看
博客網址：www.xiaobaiseo.top
建站-白帽-網絡技術交流請加qq群：595993233
閱讀更多 一個網工 的文章
