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

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

什么是WordPress面包屑?

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

例如,考虑以下示例:

kinsta breadcrumbs example

Kinsta博客上的面包屑

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

这就是面包屑的名称:它们创建了一条线索,将用户引导到“家”。它们对于博客和 网上商店,访问者可能希望在各个帖子之间切换, 产品页面,以及可以在其中找到相似内容的类别档案。

WordPress面包屑如何工作?

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

  • 基于层次结构: 如上例所示,这些面包屑向用户显示了它们在您的网站结构中的位置。
  • 基于属性: 这些面包屑主要在电子商务网站上使用,显示用户搜索的属性,这些属性将其引导到他们当前正在查看的产品。
  • 基于历史记录: 当用户在您的网站上从一个页面移到另一个页面时,这些面包屑将带回它们的出现方式。

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

他们也是 有利于SEO。面包屑清楚地显示了您网站上不同内容之间的关系。这样,它们使搜索引擎爬网程序或“机器人”更容易了解您的网站结构。

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

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

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

1.在Yoast SEO中启用面包屑

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

如果尚未安装,请在您的计算机上安装并激活该插件 WordPress仪表板:

install yoast seo

安装Yoast SEO插件

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


 ','

'); }?>

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

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

edit header php

添加Yoast面包屑激活代码

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

yoast breadcrumbs settings

Yoast SEO面包屑设置

切换 面包屑设置 切换到 已启用。 然后,预览您的网站:

live breadcrumbs example

带有Yoast SEO的活面包屑

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

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

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

面包屑NavXT

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

breadcrumb navxt

面包屑NavXT插件

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

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

breadcrumb navxt widget

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

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

breadcrumb navxt fields

面包屑NavXT小部件选项

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

breadcrumb navxt live

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

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

面包屑

作为备选, 面包屑 是为WordPress添加面包屑的最受好评的插件:

flexy breadcrumb

Flexy Breadcrumb插件

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

安装Flexy Breadcrumbs之后,您会在仪表板侧栏中看到一个新项目:

flexy breadcrumb dashboard

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

然后,您将需要配置一些设置。在里面 一般 标签,您可以更改主页的文本和图标,设置字符数限制并确定层次结构:

flexy breadcrumb general

Flexy Breadcrumb常规设置

在里面 版式 标签,您还可以调整面包屑的字体颜色和大小:

flexy breadcrumb typography

灵活的面包屑版式设置

自定义足迹之后,您需要在想要面包屑出现的任何位置添加[flexy_breadcrumb]短代码。尽管您可以在网站上发布的每个帖子中都可以执行此操作,但将简码添加到 WordPress小部件:

flexy breadcrumb live

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

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

WooCommerce面包屑

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

woocommerce breadcrumbs

WooCommerce面包屑插件

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

安装和激活后,您可以导航到 设置> WC面包屑 自定义面包屑路径:

woocommerce breadcrumbs settings

WooCommerce面包屑设置页面

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

woocommerce breadcrumbs live

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

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

面包屑

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

breadcrumb

面包屑插件

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

breadcrumb dashboard link

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

第一个标签被标记为 选件,并包括一些常规设置,例如自定义文本,分隔符和字符限制:

breadcrumb general settings

面包屑插件设置页面

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

breadcrumb styling settings

Breadcrumb插件样式选项

如果您具有一些编码技能,并且想要更好地控制样式,则还可以使用 自定义CSS 标签:

breadcrumb custom css

面包屑插件自定义CSS字段

最后,重要的是要访问 短代码 标签,以便将面包屑添加到您的网站:

breadcrumb shortcode options

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

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

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

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

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

但是,如果 您正在启动一个新的WordPress网站 或正在重新设计网站, 选择一个主题 包含面包屑的一种省力方法是将它们添加到您的网站。另外,在 WordPress主题目录.

海洋WP

海洋WP 是最受欢迎的多功能WordPress主题之一:

oceanwp theme

OceanWP主题

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

add oceanwp shortcode

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

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

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

只需将这些参数中的任何一个或全部添加到短代码括号中即可:

遇到停机和WordPress问题吗? Kinsta是一款托管解决方案,设计时考虑了性能和安全性! 查看我们的计划

oceanwp breadcrumb parameters

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

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

阿斯特拉

同样 阿斯特拉 还可以轻松地将面包屑添加到您的网站:

astra theme

阿斯特拉主题

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

astra access customizer

从WordPress仪表板访问定制程序

然后,选择 面包屑 标签:

astra customizer breadcrumbs

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

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

astra breadcrumb position

选择Astra主题的面包屑位置

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

astra breadcrumb styling

Customizer中的Astra面包屑样式选项

确保单击定制器 发布 按钮以保存您的更改。

4.手动添加面包屑

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

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


功能get_breadcrumb(){回声'家庭';如果(is_category()|| is_single()){回显“»”; the_category('•'); if(is_single()){回显“»”;标题(); }} elseif(is_page()){回声“»”;回声the_title(); } elseif(is_search()){echo“»”;搜索结果为…echo'“ ';回声the_search_query();回显“”; }}

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

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



修改这些文件将在您的站点上显示面包屑,但不允许您设置其样式以使其与设计相匹配。为此,您还需要动手使用一些CSS。

如何设置WordPress面包屑的样式

如果要自己编写面包屑,则必须为其设置样式。但是,如果您使用插件或主题来添加它们,也可能会有所帮助。这些工具提供的默认样式可能不适合您的网站,在这种情况下,您可能需要对其进行调整以保持一致性。

您可以 添加自定义CSS 在主题的样式表(style.css)或“定制器”的“其他CSS”区域中设置面包屑的样式:

customizer additional css

通过定制程序结合其他CSS来对面包屑进行样式设置

您可以通过多种方法来调整面包屑,使其与您的网站设计相匹配,例如通过调整其字体,大小和颜色。您可能还会考虑诸如边距,填充,边框和图标之类的元素。

这是一些CSS的示例,可用于设置面包屑的样式:


.breadcrumb {填充:8px 15px;底边距:20px;列表样式:无;背景颜色:#f5f5f5; border-radius:4px; } .breadcrumb a {color:#428bca;文字修饰:无; }

CSS的许多可能性。因此,可能需要进行一些尝试才能使面包屑看起来完全符合您的需求。

如何从您的网站中删除WordPress面包屑

尽管在您的网站上添加面包屑有很多好处,但这并不意味着它们适合所有人。某些人可能会感到困惑,或者觉得他们使网站的页面过于混乱。

如果要从WordPress网站中删除面包屑,则可以根据最初添加它们的方式使用任何有意义的方法来删除。例如,如果您对面包屑进行了自定义编码,则只需删除从主题文件中添加的代码即可。

禁用添加有插件的面包屑通常与停用插件一样简单。对于Yoast SEO,您可以导航到 面包屑 标签中 搜索外观 设置,然后将相关开关切换到 禁用.

对于通过设置或启用面包屑的主题也可以这样说。 WordPress简码。但是,有些主题默认情况下会添加面包屑。删除这些代码可能会有些棘手,特别是如果您对代码不熟悉的话。

如果是这种情况,则需要导航到您网站的 header.php 文件。在那里,运行“面包屑”搜索命令。这应该突出显示调用将面包屑添加到您的站点的函数的代码(如果在此处存在):

find breadcrumb code

在主题标题模板文件中查找面包屑代码

删除此行代码以从您的站点中删除面包屑。如果找不到正确的代码,则可以在您的 single.phppage.php 文件,以查看是否在这些模板之一中调用了该函数。

如果其他所有方法都失败,请与您的 主题的开发者 为了支持。注意 更新您的WordPress主题 可能会覆盖您对其文件所做的任何更改。因此,最佳做法建议使用 儿童主题 因此,为了无限期保留您的自定义设置。

/ *点击鸣叫* /
正文a.novashare-ctt {
显示:块;
背景:#00abf0;
边距:30px自动;
填充:20px 20px 20px 15px;
颜色:#ffffff;
文字修饰:无!重要;
box-shadow:无!重要;
-webkit-box-shadow:无!重要;
-moz-box-shadow:无!重要;
边框:无;
左边框:5px实心#00abf0;
}
正文a.novashare-ctt:hover {
颜色:#ffffff;
左边框:5px实心#008cc4;
}
正文a.novashare-ctt:visited {
颜色:#ffffff;
}
正文a.novashare-ctt * {
指针事件:无;
}
正文a.novashare-ctt .novashare-ctt-tweet {
显示:块;
font-size:18px;
行高:27px;
底边距:10px;
}
正文a.novashare-ctt .novashare-ctt-cta-container {
显示:块;
溢出:隐藏;
}
正文a.novashare-ctt .novashare-ctt-cta {
浮动:正确;
}
正文a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta {
向左飘浮;
}
正文a.novashare-ctt .novashare-ctt-cta-text {
font-size:16px;
行高:16px;
垂直对齐:中间;
}
正文a.novashare-ctt .novashare-ctt-cta-icon {
左边距:10px;
显示:inline-block;
垂直对齐:中间;
}
正文a.novashare-ctt .novashare-ctt-cta-icon svg {
垂直对齐:中间;
高度:18px;
}
/ *简单+简单备用主题* /
正文a.novashare-ctt.novashare-ctt-simple {
背景:无;
填充:10px 0px 10px 20px;
颜色:初始;
}
正文a.novashare-ctt.novashare-ctt-simple-alt {
背景:#f9f9f9;
填充:20px;
颜色:初始;
}
正文a.novashare-ctt.novashare-ctt-simple:hover,正文a.novashare-ctt.novashare-ctt-simple-alt:hover {
左边框:5px实心#008cc4;
}
正文a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,正文a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta {
颜色:#00abf0;
}
正文a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta,正文a.novashare-ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta {
颜色:#008cc4;
}

概要

强大的UX和SEO都是成功网站的关键。启用WordPress面包屑可以使访问者更轻松地浏览您的整个网站,同时还可以帮助搜索引擎了解其结构并准确地为您的页面编制索引。

在本文中,我们介绍了将面包屑添加到WordPress网站的四种方法:

  1. 打开面包屑 Yoast SEO.
  2. 安装和配置WordPress面包屑插件。
  3. 使用主题 包括面包屑。
  4. 使用代码手动添加面包屑。

您对WordPress面包屑或如何使用它们有任何疑问吗?让我们在下面的评论部分中知道!