如何为Wordpress网站添加面包屑导航

对于面包屑导航,很多泰州做网站的人都了解,就是分类页或者是内容页上的一个导航设定(如下图所示)。面包屑导航能够改善网站的用户体验,是一种对搜索引擎优化很有用的设定。

图1 无忧泰州网站优化的面包屑导航

今天我们就在这篇文章中为大家介绍下如何为自己的wordpress网站添加上面包屑导航功能。

面包屑导航的作用

网站上的面包屑导航一般可以分为三种类型,一种是我们最常见的,就是按照网站的结构:首页>一级分类>二级分类>内容页等这样的形式,这种形式的面包屑导航可以让用户可以随时了解自己所在网站的位置,并且可以返回到上一层分类中。
第二种类型是基于属性,这主要是在一些电子商务类的网站上,比如淘宝京东上的面包屑导航会显示用户的一些搜索属性,这些属性可以让用户能够快速的查找到自己想要的类似产品。
第三种类型是基于历史记录,这种方式方便用户在网站中能够回到原先浏览的页面中。

不管是什么样类型的面包屑导航,对于SEO都是有帮助的,它能够帮助搜索引擎机器人比如百度蜘蛛更加容易了解你的网站结构。

如何为自己的wordpress网站添加面包屑导航

一般情况下,只要是合格的wordpress主题,都会有面包屑导航的,但是也有很多wordpress模板主题却并没有自带面包屑导航,这个时候你可以通过下面的几种方法来实现。

1、在Yoast SEO中启用面包屑

Yoast SEO是wordpress上的一款功能强大的SEO插件,使用量是非常大的,也很优秀,其中它就自带了一些增强型的网站功能,比如面包屑导航功能。

如果你还没有安装Yoast SEO,可以下载安装一个。

如果你还没有安装Yoast SEO,可以下载安装一个

安装完成以后,你需要将下面的这段代码添加到主题中:

<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ );
}
?>

添加的具体位置取决你现在使用的主题,如果你要在文章页中使用面包屑导航,可以将它添加到主题的single.php模板文件中。另外如果将它粘贴到header.php文件的末尾则会在全站使用面包屑导航。

将它粘贴到header.php文件的末尾则会在全站使用面包屑导航
当你添加好调用代码以后,还需要在Yoast SEO中启用这个功能,位置在:SEO>搜索外观>面包屑:将“ 面包屑”设置开关切换为启用。

将“ 面包屑”设置开关切换为启用。

2、使用其他wordpress插件来实现面包屑导航

虽然Yoast SEO的功能很强大,但是如果你已经使用了其他的seo插件,就不想再安装它了,这个时候你可以选择其他的一些面包屑插件来实现这样的功能。我们推荐大家一款:Breadcrumb NavXT。

Breadcrumb NavXT的面包屑功能比Yoast SEO更加强大,因为它能够让你将面包屑导航添加到很多位置上,比如边栏和页脚上,而且它是高度可定制的,你可以选择显示在哪些页面或者分类上。

Breadcrumb NavXT的面包屑功能比Yoast SEO更加强大

Breadcrumb NavXT的使用也是很简单的,直接在外观>小工具中进行添加和设置就可以了。

除了Breadcrumb NavXT外,我们再介绍一款轻量级的wordpress面包屑插件,这就是Breadcrumb,它的特色是可以通过简码的方式让你在网站的任何位置添加面包屑,具体的效果可以参见下面这张图:

Breadcrumb
具体的设置和使用方法我们就不介绍了,都是一些傻瓜式的操作,你只要安装以后就能够自己看懂的。

这款插件自带了一些样式,但是如果你具有一定的编写代码的能力,你可以对样式进行更多的自定义。

Breadcrumb自定义样式

3、手动添加面包屑

虽然使用插件或者是主题自带的面包屑导航很方便,但是对于一些有更高要求的网站来说,这样现有的条件并不能满足自己的需求,这个时候就可以自己编写面包屑导航代码了。要想手动添加面包屑导航,你首先要将一个函数添加到functions.php文件中:

function get_breadcrumb() {
echo ‘<a href=””’.home_url().’”” rel=””nofollow””>Home</a>’;
if (is_category() || is_single()){
echo “ » ”;
the_category (‘ • ‘);
if (is_single()) {
echo “ » ”;
the_title();
}
} elseif (is_page()) {
echo “ » ”;
echo the_title();
} elseif (is_search()) {
echo “ » ”;Search Results for…
echo ‘“<em>’;
echo the_search_query();
echo ‘</em>”’;
}
}

添加以后,你就可以在想要它出现的模板文件中调用它,比如要在内容页上显示,你可以在single.php中调用这个函数,下面是面包屑导航的调用代码:

<div class=”breadcrumb”><?php get_breadcrumb(); ?></div>

但是这样的面包屑是很简陋的,你要想和自己的主题相匹配,就还不需要使用一些CSS样式表。

你可以在主题的样式表(style.css)中进行添加,比如下面的这段CSS代码:

.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}

通过上面的方式你就能获得一个初步的wordpress面包屑导航条功能了。

总结

以上就是泰州无忧网络为大家介绍的如何在wordpress使用面包屑导航的例子,上面的这是一个简单的介绍,如果大家在建站的时候,操作的方法肯定比上面介绍的要高级一些,这样才能够获得不错的显示效果。

总的来说,面包屑导航虽然是一个小的点,但是还是很有必要的,也建议大家都给自己的网站做上。

Contact Us

159-6100-4617

在线咨询:点击这里给我发消息

邮件:thinkou@126.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code