记录成长
分享快乐

WordPress文章页添加面包屑导航

浏览网站的时候经常会发现许多网站页面上有个如下图所示的面包屑导航,非常漂亮而且有利于帮助用户快速学习和了解网站内容和组织方式,从而形成很好的位置感。DUX主题4.0版本开始增加了这么个功能,之前有网友也像我询问过这个功能,这两天刚好有时间就简单整理了下分享出来,希望大家喜欢。

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

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

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

生成函数

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

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

赞(4) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » WordPress文章页添加面包屑导航
分享到: 更多 (0)

评论 7

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #2

    如何在WP页面底部添加一个 指定栏目文章的调用功能

    小强   | Windows 7 | Chrome 55.0.2883.87 | 8个月前 (04-20)回复
    • @ 小强 类似于相关文章?

      蝈蝈要安静     | Windows NT | Chrome 65.0.3325.181 | 8个月前 (04-20)回复
      • @ 蝈蝈要安静 是的.能给个代码吗?

        123456789   | Windows 7 | Chrome 47.0.2526.106 | 8个月前 (04-22)回复
        • @ 123456789 类似于我之前发的热门文章列表与最近发的自定义文章列表,你可以参考一下,具体的话没做,不过思路应该是一样的。

          蝈蝈要安静     | Windows NT | Chrome 65.0.3325.181 | 8个月前 (04-22)回复
  2. #1

    dux的样式要在哪里修改添加?我在main.css添加了但是不起作用

    luochenzhimu   | Windows NT | Chrome 65.0.3325.181 | 8个月前 (04-17)回复
    • @ luochenzhimu 就是添加到main.css中。刷新一下浏览器缓存或则CDN试试。

      蝈蝈要安静     | Windows 7 | Chrome 49.0.2623.87 | 8个月前 (04-18)回复
      • @ 蝈蝈要安静 好了,是没刷新缓存的问题

        luochenzhimu   | Windows NT | Chrome 66.0.3359.117 | 8个月前 (04-18)回复

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏