尽管名称俗称,但面包屑是改善网站的用户体验(UX)和搜索引擎优化(SEO)的非常有用的工具。在插件或少量自定义代码的帮助下,启用它们很简单。

在这篇文章中,我们将向您介绍WordPress面包屑,并说明它们的工作原理。然后,我们将向您展示如何将它们添加到您的网站,设置其样式并删除它们。有很多内容,所以让我们开始吧!

什么是WordPress面包屑?

与WordPress(或任何网站)相关的面包屑是显示在帖子或页面顶部的导航链接。它们向用户显示更高级别的类别,使他们可以转到当前正在查看的内容,还可以轻松导航回以前查看的页面。

只需移至Kinsta,即可将WordPress网站的速度提高200%。
        
          今天免费迁移

例如,考虑以下示例:

Kinsta博客上的面包屑

在标题右侧的左侧,您可以看到单词Home> Resource Center> Kinsta Blog。每个都是从当前帖子返回到其对应页面的链接。这使我们博客上的读者只需单击即可导航到这些关键内容区域中的任何一个,而不必使用后退按钮,菜单或搜索功能。

面包屑就是这样命名的:它们创建了一条线索,将用户引导到“家”。它们对于博客和在线商店等网站特别有用,在这些网站上,访问者可能希望在各个帖子,产品页面和类别归档之间移动,以找到相似的内容。

WordPress面包屑如何工作?

有三种不同类型的WordPress面包屑。如上所述,所有功能都包含导航链接,但方式略有不同:

  • 基于层次结构:这些面包屑向用户显示他们在您网站的结构中的位置,如上例所示。

  • 基于属性:这些痕迹主要在电子商务网站上使用,显示用户搜索的属性,这些属性将其引导至他们当前正在查看的产品。

  • 基于历史记录:随着用户在您的网站中从一个页面移到另一个页面,这些面包屑将带回他们来到的方式。

各种面包屑可用于不同目的。但是,所有这些都可以改善导航和扩展UX。

它们也有利于SEO。面包屑清楚地显示了您网站上不同内容之间的关系。这样一来,搜索引擎抓取工具或“机器人”可以更轻松地了解您网站的结构。

这使这些漫游器可以更准确地为您的网站页面编制索引。搜索引擎还可能在结果列表中显示您的面包屑,因此用户可以在您的网站上看到与所需信息有关的其他内容。

如何将WordPress面包屑添加到您的网站(4种方法)

无论您是编码专家还是WordPress初学者,都可以通过几个步骤快速轻松地将面包屑添加到您的网站。您可以通过以下四种不同方式完成此任务。

1.在Yoast SEO中启用面包屑

Yoast SEO是一个受欢迎的插件,可以帮助WordPress用户估算其搜索引擎排名并相应地优化其内容。它还包括其他一些可增强网站可见性的功能,包括面包屑。

如果尚未安装插件,请在WordPress仪表板中安装并激活该插件:

安装Yoast SEO插件

接下来,您需要将此代码段添加到主题中:

<?php
如果(function_exists('yoast_breadcrumb')){
  yoast_breadcrumb('

','

');
}
?>

具体来说,添加位置取决于您自己。如果您想在博客文章中使用面包屑,可以将其添加到single.php模板文件中。

或者,将其粘贴到header.php文件的末尾会将面包屑添加到整个站点:

添加Yoast面包屑激活代码

请记住,将来的主题更新可能会覆盖此自定义代码。您需要与主题开发者联系,以获取有关如何避免此问题或仅使用子主题的信息。摘录到位后,在仪表盘中导航至SEO>搜索外观>面包屑:

Yoast SEO面包屑设置

将“面包屑”设置开关切换为启用。然后,预览您的网站:

包含Yoast SEO的活面包屑

现在,根据添加代码段的位置,您应该在网站的相关部分看到面包屑。

2.使用WordPress面包屑插件启用面包屑

如果您已经将该插件用于SEO,则在Yoast中添加面包屑特别方便。但是,如果您希望使用其他插件来优化内容,则上述方法的用处不大。幸运的是,还有其他几个可用的插件专门用于向WordPress添加面包屑。

面包屑NavXT

除了Yoast之外,用于将面包屑添加到WordPress的最受欢迎的插件是面包屑NavXT:

面包屑NavXT插件

该插件提供了一个面包屑小部件,您可以将其添加到主题提供的任何小部件区域,例如边栏或页脚。它具有高度可定制性,可让您选择在跟踪中显示哪些页面和类别。面包屑NavXT还包括用于改善SEO的架构标记。

要使用此插件添加面包屑,请导航至外观>小部件。您将看到一个新的Breadcrumb NavXT小部件,您希望将其拖到您希望其出现的小部件区域:

将Breadcrumb NavXT小部件添加到页脚区域

单击下拉箭头以打开小部件设置,然后填写必填字段:

面包屑NavXT小部件选项

确保根据需要选中复选框,以将链接添加到面包屑,确定其顺序,将其隐藏在首页上并忽略缓存。完成后,点击保存按钮,然后检查网站的前端:

使用Breadcrumb NavXT小部件创建的面包屑

面包屑现在应该在为它们选择的任何窗口小部件区域中都可见。

面包屑

另外,Flexy Breadcrumb是为WordPress添加面包屑的最受好评的插件:

Flexy Breadcrumb插件

安装并激活此插件后,您可以使用(flexy_breadcrumb)短代码将面包屑添加到您的站点。这使您可以更灵活地查看路径的显示位置。您还可以更好地控制样式组件,例如字体大小,颜色和图标。

安装Flexy Breadcrumbs之后,您会在信息中心的侧边栏中看到一个新项目:

WordPress仪表板侧栏中的Flexy Breadcrumb链接

然后,您将需要配置一些设置。在常规选项卡中,您可以更改主页的文本和图标,设置字符限制并确定层次结构:

Flexy Breadcrumb常规设置

在“版式”选项卡中,您还可以调整面包屑的字体颜色和大小:

灵活的面包屑版式设置

自定义足迹之后,您需要在想要出现面包屑的任何地方添加(flexy_breadcrumb)短代码。虽然您可以在网站上发布的每个帖子中都可以执行此操作,但是将短代码添加到WordPress小部件中会更有效:

前端有一条弯曲的面包屑小径

如果您检查站点的前端,则无论在何处添加短代码,都应该能够看到显示的面包屑。

WooCommerce面包屑

对于在线零售商而言,WooCommerce面包屑是一种向产品页面添加导航链接的简便方法:

WooCommerce面包屑插件

如果您使用流行的WooCommerce插件运行在线商店,这可能是您的最佳选择。它使您可以激活产品页面的面包屑,以改善网站上的客户导航。

安装和激活后,您可以导航至设置> WC面包屑以自定义面包屑轨迹:

WooCommerce面包屑设置页面

要考虑的最重要设置是“启用面包屑''复选框。您必须确保已选中它才能显示面包屑。然后,检查您的产品页面之一:

启用了面包屑的WooCommerce产品页面

您的面包屑跟踪应该在页面顶部可见。

面包屑

最后,面包屑是一个轻量级的插件,使您可以使用简码在站点的任何位置添加面包屑:

面包屑插件

该插件具有本文中列出的所有设置中最广泛的设置。您可以通过在WordPress仪表板侧栏中单击Breadcrumb来访问它们:

WordPress仪表板侧栏中的面包屑链接

第一个标签标记为“选项”,其中包括一些常规设置,例如自定义文本,分隔符和字符限制:

面包屑插件设置页面

还有一个专门用于样式选项的完整标签。您可以选择几个箭头按钮,以及字体大小和颜色:

Breadcrumb插件样式选项

如果您具有一些编码技能,并且想要对样式进行更多控制,则还可以使用“自定义CSS”选项卡:

面包屑插件自定义CSS字段

最后,访问Shortcode标签很重要,以便将面包屑添加到您的网站中:

Breadcrumb插件的简码和代码段选项

您可以在网站上的任何地方使用简码,就像我们介绍的其他插件一样。但是,“面包屑”还提供了一个代码段,您可以将其添加到一个模板文件中,以将迹线合并到页眉,页脚或其他位置。

3.使用包含面包屑的主题

通常在控制网站外观的背景下考虑它们,但WordPress主题也会影响您网站的功能。他们做到这一点的一种方法是在页面上添加面包屑。

使用WordPress主题为现有WordPress网站添加面包屑的缺点是,它还涉及更改网站的外观。如果您已经建立了品牌和站点标识,那么这实际上不是一个切实可行的解决方案,并且使用插件可能会更好。

但是,如果您要启动一个新的WordPress网站或正在执行网站重新设计,则选择包含面包屑的主题是将它们添加到您的网站的省力方法。另外,WordPress主题目录中有几个可用的免费选项。

海洋WP

OceanWP是最受欢迎的多功能WordPress主题之一:

OceanWP主题

它包含一个短代码,可用于轻松将面包屑应用于页面。还有一些可与OceanWP一起使用的演示,其中包含了面包屑。要使用简码,只需将(oceanwp_breadcrumb)添加到帖子,页面或文本小部件中:

将OceanWP面包屑简码添加到文本小部件

您可以使用以下参数来自定义面包屑:

  • 类:包含自定义CSS类。
  • 颜色:更改文本的颜色。
  • 悬停颜色:当用户将鼠标悬停在面包屑上时,更改文本的颜色。

只需在短代码括号内添加任何或所有这些参数:

使用简码参数自定义OceanWP面包屑

现在,您应该在相关页面上看到面包屑。

阿斯特拉

同样,Astra还使添加面包屑到您的站点变得容易:

阿斯特拉主题

使用Astra启用面包屑的最直接方法是通过定制程序。安装并激活主题后,导航至外观>自定义:

从WordPress仪表板访问定制程序

然后,选择“面包屑''选项卡:

定制程序中的Astra面包屑选项卡

在这里,您会看到一个下拉菜单,可让您选择要在页面上显示面包屑的位置:

选择Astra主题的面包屑位置

做出选择后,也会出现一些样式选项:

阿斯特拉面包屑样式

Customizer中的Astra面包屑样式选项

确保单击定制程序发布按钮以保存更改。

4.手动添加面包屑

插件和主题是使WordPress成为用户友好且可访问的平台的一部分。但是,对于一些更高级的用户和开发人员,他们可能会感到局限。代码可以是一种非常有创意的媒介,并且具有自由编写自己的面包屑的能力可能会吸引您。

要手动显示面包屑,您需要做两件事。首先,您必须在functions.php文件中添加一个函数以启用它们。这是您可能使用的代码示例:

函数get_breadcrumb(){
回声“家’;
如果(is_category()|| is_single()){
回声“»”;
the_category(“•”);
如果(is_single()){
回声“»”;
标题();
}
} elseif(is_page()){
回声“»”;
回声the_title();
} elseif(is_search()){
回声“»”;搜索结果为…
回声“”’;
回声the_search_query();
回声“
”’;
}
}

添加该功能后,您需要在希望出现面包屑的模板文件中调用该功能。在single.php中调用该函数会使面包屑出现在您的帖子中,在header.php中调用它会在您的标题出现的任何地方显示它们,依此类推。

您将使用的代码应如下所示: