纯代码实现wordpress面包屑(breadcrumb)导航功能

问题集锦 杭州seo 1,414 0评论

在网站的内容页,我们常常能看到这样一个样式:首页>分类名>文章名,这就是我们所说的面包屑导航。

面包屑导航的作用:增加用户体验感,让用户知道当前页面的位置,方便用户返回首页或者分类页,有利于网站内页的建设,有利于蜘蛛对网站的抓取。

实现面包屑导航的两种方法:

1、使用Breadcrumbs 插件

在wordpress后台添加该插件,启用后,在需要面包屑导航的地方调用该插件。

优点:操作简单,适合新手

缺点:样式难调,增加了在页面上引用js和css的数量,会影响网站加载速度

2、纯代码实现

我用的代码比较简单,不像网上这么麻烦,我的页面效果是这样的

纯代码实现wordpress面包屑导航示意图

在首页代码这增加这段代码

 < a title="返回首页" href="http://www.zhouqiseo.com/">< /a>

首页代码比较简单,就是在a标签里增加网站首页的链接就可以了。
下面是分类名及链接

 < ?php the_category(', ') ?>

标题实现的代码

 < ?php the_title() ?>

这样就实现功能了,整完的代码:

 < div class="breadcrumbs">
      	< a title="返回首页" href="http://www.zhouqiseo.com/">< i class="fa fa-home"> > 
		< ?php the_category(', ') ?> >  < ?php the_title() ?>< /div>

相对来说纯代码实现wordpress面包屑(breadcrumb)导航功能比插件容易操作,也容易修改样式。希望大家能多学点代码,减少网站插件的使用

杭州seo>纯代码实现wordpress面包屑(breadcrumb)导航功能,版权所有,转载请写明出处。

喜欢 0 or分享

发表评论

()个小伙伴在吐槽
  1. 还没有任何评论,你来说两句吧