添加 WordPress 面包屑的基本指南

已发表: 2021-11-26
WordPress 面包屑

想要降低跳出率、改善网站导航、提升 SEO 并提供出色的用户体验? 你当然知道!

但是,如果您不使用面包屑作为您网站的一部分,那么您将错失良机。 面包屑通过帮助用户更轻松地浏览您的网页(通过“面包屑”的踪迹)来增强站点导航。

您可能多次遇到面包屑。 它们通常出现在站点导航菜单的下方。 网站面包屑示例

资料来源:dedoles.se

今天,我们将分享我们的重要提示和技巧,以帮助您将 WordPress 面包屑添加到您的网站并开始改善这些用户体验。

什么是面包屑?

忘记金黄酥脆,新鲜烤制或panko。 这些面包屑可能非常美味,但这不是我们今天要讨论的内容。 不,我们是来讨论在线面包屑的,这是一种功能性更强(且不易食用)的食物。

面包屑本质上是一个导航链接。 连接面包屑以创建通过网站页面的文本路径。 它们跟踪用户在网站上相对于主页的位置,通常位于顶部,就在导航栏的下方。

面包屑导航通过让用户更容易回溯他们的导航来改善您网站的用户体验(UX)。 他们还通过帮助搜索引擎浏览您的网页和链接结构来支持 SEO 排名(稍后会详细介绍)。

了解不同的面包屑是如何工作的

出于多种原因,可以将面包屑应用于网站。 例如,对于在 WordPress 中构建的网站,可以将三种类型的面包屑合并到网站的导航中。 这些是基于层次结构的、基于属性的和基于历史的。

基于层次结构的面包屑

这些是您的经典面包屑。 基于层次结构的面包屑向网站用户显示他们在您网站的整体结构中相对于主页的位置。 这使访问者可以轻松浏览类别并找到相关产品。

基于属性的面包屑

这些面包屑最常作为电子商务网站的一部分被发现。 基于属性的面包屑列出了用户为访问他们正在查看的产品或页面而搜索的属性。

例如,假设您正在浏览一家在线时装店。 有时,您可能会被要求根据产品属性(例如合身、款式、颜色、尺寸)细化您的搜索。 您选择的属性将构成您的面包屑路径。

基于属性的面包屑

图片来源

基于历史的面包屑

这些面包屑是按时间顺序排列的。 它们是根据您在网站上的操作进行排序的。 基于历史的面包屑引导用户通过他们已经浏览过的页面返回。 这些面包屑的作用有点像浏览器上的“返回”按钮,可帮助用户返回他们已经访问过的页面。

面包屑的好处

面包屑对于网站的用户体验和搜索引擎优化非常有用。 因此,许多内容营销服务正在推广面包屑的好处,作为强大的数字营销策略的一部分。

面包屑允许用户更轻松地浏览网站,并帮助搜索引擎爬虫了解网站的内容。 这意味着提高搜索引擎排名、降低跳出率和更好的用户体验。

访问者的网站导航更容易,这意味着跳出率更低

作为网站访问者,没有什么比发现您已导航到您一点也不感兴趣的产品页面更烦人的了。此时,您可能想做两件事中的一件。

  • 弹回搜索引擎并重新开始。
  • 返回主页并尝试找到您要查找的页面。

通过将面包屑添加到您的网站,用户将不太倾向于反弹,并且会发现更容易找到他们正在寻找的内容。 面包屑允许网站访问者轻松跟踪他们的用户旅程并快速找到他们想要的页面。

网站爬虫可以更轻松地对正确的页面进行排名

面包屑通过向搜索引擎传达网站页面的内容来提升网站 SEO。 谷歌实际上在搜索片段中使用了网站的名称和面包屑路径,这意味着当谷歌显示结果列表时,这是您首先看到的内容之一。 这反过来又可以帮助搜索者看到点击后他们将被带到哪里。

例如,如果您搜索“什么是面包屑?” 在 Google 中,您的搜索结果会列出每个网站的 URL、面包屑和标题。

面包屑和搜索引擎优化

将面包屑添加到 WordPress 网站的三种方法

那么,您究竟是如何将面包屑添加到您的 WordPress 网站的呢? 好吧,您可以选择几条不同的路线。 我们将逐步引导您完成各种方法。

选择一个已经包含面包屑的 WordPress 主题

将面包屑添加到 WordPress 网站的最直接方法是安装已包含它们的主题。 如果你能找到一个与你的品牌非常吻合并且也有方便的面包屑的,那么嘿,你准备好了。

通过自定义代码实现面包屑

将面包屑添加到 WordPress 网站的另一种方法是通过自定义代码实现它们。 假设您在 WordPress 上找到了一个主题,但它不包含面包屑。 有了一些基本的编码经验,您可以通过在您选择的主题上编辑 function.php 文件来自己添加它们。

这是您需要做的:

  1. 使用 FileZilla FTP 等 FTP 站点将 WordPress 连接到您的服务器
  2. 单击 FileZilla 客户端中的 public_html 文件夹(这包括您网站的文件)。 在 FileZilla 客户端中选择 public_html 文件夹
  3. 单击 wp-content 文件夹。
  4. 单击主题目录并选择您当前的主题文件夹。
  5. 单击functions.php 文件夹,然后选择查看/编辑。
  6. 插入下面的代码以在您的网站上注册面包屑功能。 WordPress 面包屑代码
  7. 出现提示时保存更改并上传更新的文件。

使用插件添加面包屑。

将面包屑添加到 WordPress 网站的第三种也是最后一种方法是使用插件。 您需要使用专业工具来执行此操作,例如 Yoast SEO、Breadcrumb NavXT 或 WooCommerce Breadcrumbs 插件。

使用 Yoast SEO 插件

Yoast 是WordPress 最著名的 SEO 插件之一,可用于在您的网站上启用面包屑。 如果您已经在使用 Yoast 进行 SEO,那么这是您最好的选择,尽管还有其他可用选项(我们稍后会讨论)。

要使用 Yoast 添加面包屑,请执行以下步骤:

  1. 从您的 WordPress 仪表板安装 Yoast SEO 插件,即插件 > 添加新 > 在搜索栏中输入“Yoast”> 安装。
  2. 在 Yoast 插件中,导航到外观。
  3. 点击主题编辑器。
  4. 选择名为 header.php 的模板。
  5. 在下面插入代码片段。 Yoast 面包屑代码片段
  6. 单击“更新文件”保存更改。

使用 Breadcrumb NavXT 插件

使用 Yoast 的另一个替代方法是 Breadcrumb NavXT。 这个插件可以像 Yoast 一样安装在您的网站上。 安装后,只需按照以下步骤实现面包屑。

  1. 在 NavXT 插件中导航到设置。
  2. 单击面包屑导航导航。 WordPress 面包屑插件
  3. 从四个面包屑导航选项中进行选择。
  4. 配置插件并保存更改。
  5. 导航到外观。
  6. 点击主题编辑器。
  7. 选择 header.php 文件。
  8. 插入下面的代码。 面包屑代码
  9. 单击更新文件。

使用 Woocommerce 面包屑插件

最后,如果您是 Woocommerce 用户,您可以使用 Woocommerce Breadcrumbs 插件将面包屑功能添加到您的网站。

这是您需要做的:

  1. 在您的 WordPress 网站上安装 Woocommerce Breadcrumbs 插件。
  2. 导航到设置。
  3. 单击 WC 面包屑。
  4. 勾选旁边的框以启用面包屑。
  5. 单击保存更改

woocommerce 面包屑

资料来源:fixrunner.com

使用 CSS 自定义 WordPress 面包屑

您可以通过应用自定义 CSS 来设置面包屑的样式以匹配您网站的独特样式。 如果您自己编写面包屑,则需要考虑您所追求的美学。

为此,您需要添加自定义 CSS 以在现有主题样式表或 WordPress 定制器中设置面包屑样式。 在这里,您将能够对面包屑进行设计调整,包括调整字体、颜色、边距、图标和边框。

从您的网站中删除面包屑的两种方法

面包屑在帮助网站导航和SEO 增长方面具有明显的优势,但并不是每个人都喜欢包含它们。 如果您决定要删除网站的面包屑,有两种方法可以做到这一点。

切换禁用开关

删除面包屑的第一种方法是简单地切换插件中的开关以禁用面包屑或完全停用插件。

删除手动输入的代码

另一种选择是删除手动输入的代码。 只需返回站点的 header.php 文件夹并删除将面包屑添加到站点的代码行。

留下面包屑的痕迹

面包屑是任何网站的绝佳补充。 它们帮助用户浏览您的网页和搜索引擎爬虫,以更好地了解您的内容。

更重要的是,将面包屑合并到您的网站中非常简单。 一些 WordPress 模板甚至包含面包屑。

如果您还没有面包屑,您还在等什么?