什么是 WordPress 面包屑以及如何将它们添加到您的网站?

已发表: 2022-08-28

不要被这个不寻常的名字吓到,因为面包屑实际上是一个非常有用的工具,它可以显着改善您网站的用户体验和 SEO。 借助自定义代码或插件,启用它们非常简单。

在今天的文章中,我们将详细介绍 WordPress 面包屑以及它们的工作原理。

什么是 WordPress 面包屑?

面包屑是出现在页面或帖子顶部的导航链接。 他们将向访问者展示引导他们到所需内容的更高级别的类别,并将他们导航到以前的页面。

面包屑创建一个引导用户回家的路径,因此得名。 对于在线商店或博客尤其有用,用户可以在帖子、产品页面和类别之间移动。

面包屑如何工作?

WordPress面包屑主要分为三种类型:

  • 基于层次结构:它们向用户显示他们在站点结构中的确切位置。
  • 基于属性:主要用于电子商务网站,它们显示用户搜索过的属性,这些属性将他们引导到他们正在查看的产品。
  • 基于历史:当用户浏览不同的页面时,他们将被引导回到他们来的方式。

每种类型的面包屑可用于不同的目的。 然而,所有这些都可以改进导航和扩展用户体验。

它们在搜索引擎优化方面也非常有益,并将显示您网站不同内容之间的关系,这使搜索引擎机器人更容易理解您网站的结构。

这有助于更准确地索引您的网站。 搜索引擎还可以在结果列表中显示您网站的面包屑,从而为用户提供有关他们正在寻找的主题或产品的附加信息。


如何将 WordPress 面包屑添加到您的网站?

只需几个简单的步骤,您就可以将面包屑添加到您的网站,无论您是专业人士还是 WordPress 初学者。

Yoast 搜索引擎优化

这是一个流行的插件,可以帮助用户优化他们的内容并估计他们的搜索引擎排名。 它包括一些附加功能,例如使用面包屑提高您的网站可见性。

安装可以通过您的仪表板完成:

在下一步中,您需要添加以下代码:

 <?phpif (function_exists('yoast_breadcrumb')) {yoast_breadcrumb('<p>','</p>');}?>

如果您希望将面包屑添加到您的博客文章中,可以在您的 single.php 模板文件中完成。

您也可以将其粘贴到 header.php 文件的末尾,这会将面包屑添加到您的整个网站。

请记住,任何未来的主题更新都可能会覆盖代码。 在这种情况下,最好联系您的主题开发人员以获取有关如何避免这种情况的更多信息。 放置代码后,转到 SEO - 搜索外观 - 面包屑:

将设置设置为启用、保存和发布。

WordPress 面包屑插件

如果您已经将 Yoast 用于 SEO 目的,则可以真正召集使用它添加面包屑。 但是,如果您更喜欢可以优化您的内容的不同插件,这里有一些有用的建议:

面包屑导航

这是向您的网站添加面包屑的最受欢迎的选择。 它为您提供了一个面包屑小部件,可以添加到任何小部件区域,例如页脚或工具栏。 它非常可定制,并且使您能够选择要在跟踪中显示的类别和页面。 它还包括用于 SEO 改进的模式标记。

灵活的面包屑

Flexy Breadcrumb 是目前用于添加 WordPress 面包屑的评价最高的插件。 下载并激活后,您可以借助简码将面包屑添加到您的网站。 这使您在希望轨迹出现的位置方面具有更大的灵活性。 您还可以更改颜色、字体大小和图标。

WooCommerce 面包屑

对于所有在线零售商来说,这是用户浏览您网站的产品页面的简单选择。 如果您使用的是 WooCommerce 插件,这可能是您的最佳选择。 您可以激活产品页面的面包屑,从而改善客户体验。

面包屑

Breadcrumb 是一个非常轻量级的插件,可让您使用简码添加面包屑。 它为您提供了一个代码片段,可以将其添加到您的模板文件之一并合并到您的页脚、页眉或其他地方。

使用带有面包屑的主题

主题的主要思想是控制您网站的外观,但除此之外,它们还会影响其功能。 可以做到这一点的方法之一是在页面中添加面包屑。

不利的一面是,此过程涉及更改您网站的外观。 如果您已经拥有很高的品牌知名度和成熟的影响力,那么它可能不是您的最佳选择,最好使用插件。

另一方面,如果您刚刚开始一个 WordPress 网站或正在重新设计您的旧网站,那么使用包含面包屑的主题可能是一个节省时间的决定。 您有几个免费选项可供选择:

海洋可湿性粉剂

这是最受欢迎的多用途主题之一。 它包含一个短代码,可轻松将面包屑应用到您的网站。

阿斯特拉

同样,这个主题也使得向您的网站添加面包屑非常容易。


手动添加面包屑

确实,主题和插件是使 WordPress 成为用户如此受欢迎的选择的原因。 但是,在某些情况下,它们可能会有些限制。 代码为您提供了创意元素,并让您可以自由地编写自己的面包屑。

要将它们手动添加到您的站点,您需要执行两个步骤。

  • 将函数添加到您的 functions.php 文件以启用它们。
  • 调用您希望面包屑出现的模板文件。

请记住,这只会在您的网站上显示面包屑,但不会为它们设置样式以使其适合设计。 为此,您还需要深入研究一些 CSS。

样式化你的 WordPress 面包屑

如果您是编写面包屑的人,那么样式化它们是绝对必要的。 如果您使用的是插件或主题,它会非常有用。 它们的默认样式可能不适合您的网站,在这种情况下,您需要对它们进行一些调整。

您还可以添加自定义 CSS,以便在主题样式表或附加 CSS 区域中设置面包屑的样式。

更改面包屑的大小、字体和颜色是为您的网站定制面包屑的众多方法之一。 您还可以使用内边距、边距、图标和边框等元素。

可以在这里看到用于样式面包屑的 CSS 示例:

 .breadcrumb { 填充:8px 15px; 边距底部:20px 列表样式:无; 背景颜色:#f5f5f5; 边框半径:4px;}.breadcrumb a {颜色:#428bca; 文字装饰:无;​​​}

谈到 CSS,可能性是无穷无尽的。 在达到预期效果之前,可能需要一些时间和试验。


结论

强大的 SEO 和 UX 是成功网站的关键要素。 为您的 WordPress 网站启用面包屑将改善访问者的体验以及他们浏览您的内容的方式,同时改善您的页面索引。

与我们分享您使用面包屑的经验以及它们改善您在线形象的方式。