分享
也是一种美德

WordPress文章页添加面包屑导航

面包屑导航

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

生成函数

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

//面包屑导航生成函数
function qgg_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 qgg_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;}
}

 

赞(0) 打赏
未经允许不得转载:宇峰博客 » WordPress文章页添加面包屑导航
分享到: 更多 (0)

评论 3

  1. #1

    Levitra Laboratoire Bayer cialis for sale Over Counter Med Comparable To Cialis Comprar Cialis Original Online Madrid Tadalis Sx Soft Drug

    匿名2周前 (06-04)回复
  2. #2

    Amoxicillin Dosage For Tooth Infection Clomid Et Duphaston 2008 cheapest levitra 20mg Magic Pharmacy Viagra. Best Price

    匿名2周前 (06-05)回复
  3. #3

    Articulo 195 avis viagra cialis levitra Viagra Flughafen Information On Keflex

    匿名4天前回复

宇峰博客 分享也是一种美德

我的微博我的博客

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏