当前位置:刘天佑博客-记录生活和成长的一个自媒体博客 > WordPress > WP教程 > 正文

作者:刘天佑

放低自己,才能看到高处的风景;蹲下来,才能更好地仰望别人。低调不是愚蠢,而是智慧。

手机扫码查看

纯代码为WordPress文章页添加面包屑导航

如何纯代码为WordPress文章页添加面包屑导航,我们主要通过修改主题functions.php、single.php、main.css三个文件来实现。

以下方法转自@蝈蝈要安静。注意以下并非本站所用的面包屑,无法于本站一样,但基本原理相同,经供参考

一、修改functions.php

首先在自己的主题文件中找到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

这里是把面包屑导航显示到文章页面,所以我们第二步是修改主题single.php文件,把下面代码加到自己想显示的位置即可。
这里是把面包屑导航显示到文章页面,所以我们第二步是修改主题single.php文件,把下面代码加到自己想显示的位置即可。

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

如果是想显示到文章内容页面的导航栏下,请把上面代码添加到“<?php get_header(); ?>”下即可。
纯代码为WordPress文章页添加面包屑导航

三、添加样式代码

完成上面两个步骤后,清理下浏览器缓存,我们就可以看到正常显示面包屑导航了,但是不美观。所以我们还需进行添加显示样式代码步骤。一般得人主题是把下面这段代码添加到style.css文件,DUX主题是添加到main.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;}  }
未经允许不得转载:

作者:刘天佑, 转载或复制请以 超链接形式 并注明出处 刘天佑博客-记录生活和成长的一个自媒体博客
原文地址:《纯代码为WordPress文章页添加面包屑导航》 发布于2018-11-26

分享到:
赞(0) 打赏

评论 2

7 + 6 =
  1. #1

    6666666666666666666666六

    久旧2周前 (11-30)回复
  2. #2
    qq_avatar

    厉害哦 666

    久旧2周前 (11-30)回复

感谢打赏

支付宝扫一扫打赏

微信扫一扫打赏

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册