SEO观察
研究搜索引擎优化(SEO)技术。

WordPress实现面包屑导航Breadcrumb的三种方法

面包屑通常出现在WordPress页面左侧顶部,介于标题或页头的下方。它是提供给用户回溯到WordPress网站首页或入口页面的一条快速路径,让用户明确所处的网站当前位置。尤其是在大中型网站中,面包屑的作用就非常关键了,可以说用户体验非常好。

WordPress博客优化

面包屑是表现形式:一级页面 > 二级页面 > 三级页面或者一级页面 / 二级页面 /三级页面。

如我的网站面包屑导航,如下:

当前位置:茹莱神兽 > WordPress > 正文

面包屑的作用表现在以下三个方面:

1、表面当前页面所处的位置,方便定位和导航,辅助用户寻找路径;

2、方便跳转到之前的页面,告知用户「你在哪里」,减少操作次数;

3、总体上为主导航做补充,占用屏幕空间小,干扰性性小,具有临时性。

那么,如何在WordPress网站在添加面包屑导航呢?

方法一、选择一款好的WordPress主题

WordPress功能开发非常完善,很多开发者在设计WordPress模板时,都会融入SEO思维,仔细分析你会发现,很多前端开发的个人网站排名和流量都很不错。

像面包屑导航这种小功能是比较符合用户体验的,WordPress模板开发者不会忽略,所以选择一款好的WP模板很重要,像茹莱神兽的WordPress博客,使用的是大前端DUX模板,自带面包屑功能,并且这款WordPress模板一直在升级。

方法二、通过代码实现面包屑导航

众所周知,WordPress插件开发非常丰富,可以实现任何你想要的功能,但这并不意味着推崇它;因为WordPress插件安装太多,会影响网站的加载速度和用户体验。

所以有些功能免插件实现是最好不过的了,像给WordPress添加面包屑导航这种小功能,通过添加代码实现,效果也不错。

1、在functions.php添加代码

为了方便在WordPress模板中调用面包屑导航功能,我们可以给面包屑导航创建一个函数;然后,在需要用到面包屑导航的页面直接调用这个函数就可以了。

在wordpress网站模板的functions.php文件中添加如下代码:

// 面包屑导航function the_breadcrumb() 
{echo '<ul id="crumbs">';
if (!is_home()) 
{ 
//如果不是首页
echo '<li><a href="'.get_option("home_url").'">首页</a> > </li>';
if (is_category() || is_single()) 
{ 
//如果是分类或文章页echo '<li>';
the_category(' </li><li> ');
if (is_single())
 { 
//如果是文章页
echo " > </li><li>".get_the_title().'</li>';
}}
 elseif (is_page()) 
 { 
//如果是单页面
echo '<li>'.get_the_title().'</li>';
}
elseif(is_tag())
{ 
//如果是tag标签页
single_cat_title();
 }
 elseif (is_author()) 
{ 
//如果是作者页
echo"<li>作者页面";
 echo'</li>';
 }
 elseif (isset($_GET['paged']) && !empty($_GET['paged'])) 
 { 
 //如果是分页
 echo "<li>列表分页"; 
 echo'</li>';
 }
 elseif (is_search()) 
 { 
 //如果是搜索页
 echo"<li>搜索页"; 
 echo'</li>';
 }
 elseif (is_day())
 {
 echo"<li>日期归档(天) "; 
 the_time('F jS, Y'); 
 echo'</li>';
 }
 elseif (is_month()) 
 {
 echo"<li>日期归档(月)r ";
 the_time('F, Y');
 echo'</li>';
 }
 elseif (is_year()) 
 {
 echo"<li>日期归档(年) ";
 the_time('Y');
 echo'</li>';
 }
 }
 echo '</ul>';}

注意:这个代码之前是没有换行的,我自己换行的,不知道是否正确,希望不要笑话我。

面包屑函数创建好了,就可以在WordPress网站模板中调用它,代码如下:

< div class="breadcrumb"><?php the_breadcrumb(); ?></div>

一般WordPress博客网站需要使用面包屑导航功能的地方是正文页面,企业网站和商城等模板,我们在进行调用。

2、在每个WP模板页添加对应的面包屑导航代码

我们可以在WordPress想要显示面包屑导航的地方,添加面包屑导航代码。WordPress需要面包屑导航的地方有:分类页模板、文章页模板、单页面模板、tag标签页模板、搜索页模板、作者页模板等。

WordPress网站分类页模板面包屑导航代码:

<?php echo '< a href="'.get_option("home_url").'">首页</a> > '; the_category(' > '); ?>

WordPress网站文章页模板面包屑导航代码:

<?php echo '< a href="'.get_option("home_url").'">首页</a> > '; the_category(' > '); echo " > ";the_title(); ?>

WordPress网站单页面模板面包屑导航代码:

<?php echo '< a href="'.get_option("home_url").'">首页</a> > '; the_title(); ?>

缺点:需要在wordpress网站的每个需要面包屑导航的模板中添加代码,一旦更换WordPress模板,面包屑功能将会消失,后期维护比较麻烦。

方法三、安装WordPress面包屑插件Breadcrumb NavXT

现在一些主流的WordPress SEO 插件都带有面包屑导航的功能,如Yoast SEO,All in One SEO Pack和Rank Math都内置有面包屑导航功能。

如果只是单纯的实现面包屑导航,茹莱神兽建议还是选择专业的WordPress面包屑插件比较好,像Breadcrumb NavXT面包屑导航插件就不错,非常热门,很多WordPress爱好者都比较推崇它。

到WordPress管理后台>插件>安装插件>搜索“Breadcrumb NavXT”,然后安装启用。在文章页面single.php合适的位置添加面包屑导航展示代码,代码如下:

<div class="breadcrumbs">  
<?php  
if(function_exists('bcn_display')){  
    bcn_display();  
}  
?>  
</div>

这是插件设置比较关键的地方,剩下的Breadcrumb NavXT面包屑插件设置方法,我们就不在这里一一介绍了。

本篇最后总结

面包屑导航的宗旨是让用户可以更方便地访问你的网站。从用户体验上来说一个“重要的小角色”,既要让用户看得清楚,又不能醒目;它看似简单,但却可以很好地优化用户体验,增加用户粘性。

以上三种给WordPress添加面包屑导航的技巧是茹莱神兽通过网络整理的,如果出现了代码故障或错误,请自行研究哈。

本文地址: https://www.badpon.com/3853.html,作者茹莱神兽,转载请注明出处。

赞(1) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
免责申明:本站部分内容、图片来源于网络,版权归原作者所有,如有侵权,请联系底部QQ邮箱,本站将及时删除,谢谢!

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

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

微信扫一扫打赏

error: Content is protected !!