给WordPress主题添加面包屑导航

前段时间,在折腾SEO博客的MIP主题,进行一些调整,也就给它增加了个面包屑导航功能,也是为了优化而折腾。

对于不清楚面包屑导航是什么的伙伴,也就不需要看看了。

折腾的时候,也就在网上找了一些实现这个代码的。代码还是比较简单的,懂得的人自然会直接写,不懂得人,就在网上寻找了,再配合css就可以做到。

以下是DUX主题的一个面包屑导航代码,目前SEO博客MIP主题也是使用的这个,还不错。

将以下代码添加到主题的 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();
}

在以上代码添加好之后,再在需要展示的地方添加以下代码:

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

将以上代码添加好后,页面就会展示面包屑导航,但不够美观,于是,这里也就分享下DUX的面包屑导航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;}
}

将以上这些都搞好后,一个完整的且美观的面包屑导航就已经出来了。如下展示。

未经允许不得转载:朱曙明SEO博客 » 给WordPress主题添加面包屑导航

赞 (1)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址