给top主题添加面包屑导航

最近使用themebetter出品的top主题搭建了一个PPT模板下载的网站,top主题是一个非常不错的wordpress图片类主题,虽然很优秀但功能上却有一些不足。比如我们今天要说的面包屑导航功能。

面包屑导航一般都是位于文章页的头部,比如地下室先生网站的内容页头部,如下图

面包屑导航

面包屑导航的作用主要有两点:

1.从用户体验角度来说,可以让用户更清楚的知道目前页面所在的栏目分类。

2,从SEO角度来说,可以让搜索引擎更清楚的知道页面的目录结构和URL层级。便于搜索引擎抓取和分析页面。

因此面包屑导航可以说是每个网站都需要的一个重要功能。然而,top主题竟然没有这个功能。如下如图:

缺少面包屑导航

没有怎么办,能怎么办,要么找主题作者添加,要么自己添加。

找主题作者这条路我放弃了,因为确实太贵了。这也是为啥我之前折腾XIU主题的原因。

那么只能自己添加这个功能了,好在这个功能并不复杂。百度下wordpress面包屑导航,可以看到很多教程。

不过我手里的XIU主题和TOP主题是一个作者开发的,而且XIU主题带面包屑导航功能,那么我直接把XIU主题的面包屑导航功能移植给TOP主题不就好了。

说干就干,看我操作步骤。

1,将打开TOP主题下的content.php文件,并且找到如下代码:

<header class="article-header">

在下面添加如下代码:

<div class="breadcrumbs"><?php echo hui_breadcrumbs() ?></div>

2,打开TOP主题下的functions-theme.php文件在末尾或者除头部意外的任何位置添加如下代码,

function hui_breadcrumbs(){
if( !is_single() ) returnfalse;
$categorys=get_the_category();
if( !$categorys ) returnfalse;
$category=$categorys[0];
return'<span class=”text-muted”>当前位置:</span><a href=”‘.get_bloginfo(‘url’).'”>’.get_bloginfo(‘name’).'</a> <small>></small> ‘.get_category_parents($category->term_id, true, ‘ <small>></small> ‘).'<span class=”text-muted”>’.’正文’.'</span>’;
}

到这里我们就添加上了面包屑导航功能了,不过还需要针对样式做一些美化。

3,添加CSS美化代码到样式表,打开style.css文件,将如下代码添加到末尾

/*

* breadcrumbs

* ====================================================

*/

.breadcrumbs {

padding: 0010px;

font-size: 12px;

text-align: left;

}

.breadcrumbs small {

font-size: 12px;

font-family: serif;

color: #bbb;

margin: 02px;

font-weight: bold;

}

.text-muted {

color: #999

}

@media (max-width:720px) {

.breadcrumbs {

display: none;

}

}

这样我们就为TOP主题添加了面包屑导航,如下图所示

TOP主题添加了面包屑导航

关于xiu主题的修改可以看这里:https://dxs12580.com/tag/xiu/

未经允许不得转载:地下室先生博客 » 给top主题添加面包屑导航

赞 (0) 打赏作者

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. wordpress建站吧大部分网站都有面包屑回复
    • 地下室先生博客没错,所以top竟然不带面包屑有点奇怪,还好找到办法解决了回复

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

支付宝扫一扫打赏

微信扫一扫打赏