Google一直都以简介美观为设计要求，今天倡萌看到一篇介绍面包屑导航的文章，教你为WordPress主题创建一个Google风格的面包屑导航，操作比较简单，一起来看看吧。

Google面包屑导航预览：丢失。

Google面包屑导航添加方法：
1.下载需要的背景图片（下载地址），将其上传到你主题目录下的img文件夹（注意图片所在的路径和下面提供的css样式代码中的调用的路径要一致）
2.在你主题的functions.php文件中添加下面的代码

// Breadcrumb Navigation
function the_breadcrumb() {
if ( !is_home() ) {
echo '<div id="breadcrumb"> <ul class="crumbs"><li class="first"><span></span>';
echo ''. bloginfo('name') . '';
echo "</li>";
}
      
if ( is_category() || is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
$output .= '<a href="'.get_category_link($cat->term_id).'" style="z-index:8;">
'.$cat->name.'</a>';
echo '<li>'.$output.'</li>';
}
      
if(is_single())
{
echo '<li>';the_title();echo '</li>';
}
if(is_page())
{
echo '<li>';the_title();echo '</li>';
}
      
echo "</ul></div><div class=\"clear\"></div>";
}
;

#breadcrumb {
display : block;
float : left;
margin-left : 15px;
font-weight : 600;
}
#breadcrumb ul {
font-family : Helvetica, sans-serif;
list-style : none;
}
.crumbs {
display : block;
}
.crumbs li.first {
padding-left : 8px;
}
.crumbs li a, .crumbs li a:link, .crumbs li a:visited {
color : #616d7e;
display : block;
float : left;
font-size : 12px;
margin-left : -13px;
padding : 7px 17px 11px 25px;
position : relative;
text-decoration : none;
}
.crumbs li a {
background-image : url(../img/bg-crumbs.png);
background-position : 100% 0%;
background-repeat : no-repeat;
position : relative;
}
.crumbs li a:hover {
background-position : 100% -48px;
color : #333;
cursor : pointer;
}
.crumbs li a:active {
background-position : 100% -96px;
color : #333;
}
.crumbs li.first a span {
border-left : 1px solid #d9d9d9;
height : 29px;
left : 0;
position : absolute;
top : 0;
width : 3px;
}

4.在需要使用面包屑导航的主题文件（一般为single.php, page.php 和 archive.php）的对应位置添加下面的调用代码即可

<?php the_breadcrumb(); ?>