WordPress 文章页添加面包屑导航

浏览网站的时候经常会发现许多网站页面上有个如下图所示的面包屑导航，非常漂亮而且有利于帮助用户快速学习和了解网站内容和组织方式，从而形成很好的位置感。DUX主题4.0版本开始增加了这么个功能，那么如何在DUX3.0中添加呢？

额，出于好奇，还是先了解一下为什么这个导航叫面包屑导航吧。以下内容来自百度百科。

汉赛尔与格莱特是一对兄妹，为樵夫的前妻所生，在后母的逼迫下被父亲抛弃。兄妹俩前后经历了两次遗弃，第一次，汉赛尔沿途用石子做记号，兄妹俩重新回到了家中。第二次被遗弃，汉赛尔用面包屑做记号，却被鸟儿啄食干净，兄妹俩在森林中迷了路。不天的寻路，让他们饥饿难忍，腿脚无力，来到了一个用面包做屋项，糖果做窗户的小屋。饥饿让他们忘记了疲惫，及潜在的危险，啃起了屋子。结果在巫婆的诱骗下，哥哥被锁屋中，妹妹被迫做劳力，就在巫婆要吃掉哥哥之时，妹妹借向巫婆学习添柴之机。将巫婆推入炉中，兄妹俩带着巫婆的财宝，回到了家中。后母己经去世，兄妹俩和父亲一起过上了幸福的生活。

对于面包屑导航网上有很多实现的方法，很多代码也非常细心的提供了对主页、标签页，搜索页、独立页等的支持，但是个人感觉一般也就文章页上真正能用的上，其他页面添加这个功能后多少显得累赘，故这里只提供文章页面添加此功能的方法，其他页面的添加可参照此法进行。

生成函数

将以下代码添加到主题的 functions.php 文件中去：

//面包屑导航生成函数
function generate_breadcrumbs(){
    if( !is_single() ) return false;
 
    $categorys = get_the_category();
    $category = $categorys[0]; 
    return '当前位置：<a href="'.get_bloginfo('url').'">'.get_bloginfo('name').'</a> <small>></small> '.get_category_parents($category->term_id, true, ' <small>></small> ').get_the_title();
}

前端显示

将以下代码添加到主题的 single.php 文件中去：

<!-- 面包屑导航前端显示代码 -->
<div class="breadcrumbs">
 <div class="container"><?php echo generate_breadcrumbs() ?></div>
</div>

样式美化

将以下代码添加到主题的主样式表里面去，DUX主题是 main.css文件，其他主题可能是 style.css 文件，具体请咨询主题作者。

.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;}
}

样式代码直接复制的 DUX 主题的，具体样式大家可自行调整。

最后记得清除浏览器缓存，更新CDN缓存才能看到css效果。