How to Add Breadcrumbs to Your WordPress Site

Easy navigation is essential on anyWordPress网站。人们希望通过最少的点击找到所需的东西，因此您希望让访问者在网站上找到特定内容感到毫不费力。

在这篇文章中，我们将介绍面包屑是什么，为什么它们有用以及如何在WordPress中使用它们。

WordPress中的面包屑是什么？

面包屑是导航辅助工具，可帮助访问者了解您网站上的位置。面包屑显示您网页的层次结构，访问者可以使用它们导航回上一页或发现更多相关内容。

Take this example from Best Buy. If visitors enter their site on the “PC Laptops” page, they can view other related categories at the top of the page, like “Computers & Tablets” or “Laptops.”

图像源

Why Add Breadcrumbs to Your WordPress Website?

使用面包屑，访问者只需单击即可访问您网站上的相关页面。以这种方式帮助导航可以使访问者在更长的时间内与您的内容互动，并将其暴露于您的更多内容和产品中。

Breadcrumbs also help lower bounce rates. Since visitors can access your website from any page, breadcrumbs act as a guide for visitors to explore other parts of your website.

但是，面包屑不仅可以增强访客的体验，还可以做更多的事情 - 他们还可以改善您的SEO。将面包屑放在页面上，可帮助搜索引擎爬网，以确定其内部链接结构。Google可能还会使用您的面包屑进行搜索结果，以帮助您的访问者，如下所示：

图像源

要在WordPress网站上添加面包屑，您可以使用插件或检查主题是否提供内置的面包屑。在下一节中，我们将说明如何以多种方式添加它们。

Yoast Seois a popular SEO plugin for WordPress. You can do a lot with Yoast SEO, including enabling breadcrumb navigation.

How to Add Breadcrumbs With Yoast SEO:

1。如果您还没有，请在下面安装和激活Yoast SEO插件Plugins > Add New。这将添加一个新的SEO左侧栏的选项。

2。Next, you need to add some code to your theme files that tells Yoast SEO where to display the breadcrumbs. Copy and post the code snippet below:

<？php
if（function_exists（'yoast_breadcrumb'））{
yoast_breadcrumb( '
','
' );
}
？>

3。点击更新文件保存您的更改。

4。在左侧栏中，选择Appearance > Theme Editor。

5。In the theme editor, paste the code snippet you copied to the bottom of one or more of the following theme files:

• header.php如果您希望面包屑在整个网站上显示在标题中。
• Page.phpif you want breadcrumbs to appear on all your pages.
• single.php如果您希望面包屑出现在所有帖子上。

这是代码粘贴到Sinatra主题的header.php文件中的样子。粘贴代码显示在红色框中：

It might take a bit of testing to find which breadcrumb placement presents the best user experience.

6。在左侧栏中，选择SEO>搜索外观。

7.点击theBreadcrumbstab.

8.在下面面包屑设置, click已启用。

9.选择已启用将揭示面包屑设置。将这些配置为您的喜好。

10。在页面的底部，单击Save changes。

如何使用其他WordPress插件添加面包屑

If you’d prefer a different tool to add your breadcrumbs, pick from our additional plugin recommendations below.

All in One SEO

All in One SEO (AIOSEO) is a complete SEO plugin and toolkit for WordPress. Over 2 million professionals use this popular plugin to improve their website search rankings.

2。Complete the AIOSEO Setup Wizard. At the end of the setup, click完成设置，然后进入仪表板。

3。在左侧面板中，选择一项seo>一般设置。

4。单击Breadcrumbs标签，然后单击上旁边的按钮启用面包屑。

6。转到您在网站上编辑的帖子或页面，然后粘贴aioseo面包屑shortcode.

7.单击Updatebutton to save your changes.

8.Preview your post or page to see that the new breadcrumb navigation is added.

排名数学

排名数学是构建的WordPress插件，可帮助用户在搜索引擎中排名更高。使用此插件添加面包屑：

1。Install and activate the plugin underPlugins > Add New。这将添加一个新的排名数学左侧栏的选项。

2。完成六步设置向导。在设置结束时，单击Return to dashboard。

3。在左侧面板中，选择等级数学>一般设置。

4。在下面Breadcrumbs选项卡，单击上next to启用面包屑功能。

图像源

5。将面包屑设置配置为您的偏好。

6。完成后，单击保存更改。

BreadCrumb Navxt

For those looking for breadcrumb functionality without the extra SEO features, Breadcrumb NavXT is the go-to plugin. It offers extensive control to enable and customize your breadcrumbs.

1。Install and activate the plugin underPlugins > Add New。

2。在左侧面板中，选择Settings > Breadcrumb NavXT。

3。默认设置将启用。在下面一般的标签，您可以修改面包屑在整个网站上的工作方式。下方的选项帖子类型标签允许您为帖子和页面指定面包屑格式。

4。完成后，单击保存更改。

Breadcrumb

Breadcrumb is another lightweight plugin for breadcrumb navigation anywhere on your website using shortcodes. To use this plugin:

1。Install and activate the plugin underPlugins > Add New。这将添加一个新的Breadcrumb左侧栏的选项。

2。选择Breadcrumb在左侧栏。

3。在下面Breadcrumb Settings, you can configure breadcrumbs to your liking.

4。完成后，单击保存更改。

5。导航到WordPress编辑器中的新页面或现有页面或发布，并添加以下快捷代码：

[面包屑]

您的面包屑将看起来像这样：

Image资源

抓面包屑

Catch BreadCrumb是无缝面包屑导航的简单工具。与其他插件不同，您可以选择在主页上隐藏面包屑。

1。Install and activate the plugin underPlugins > Add New。这将添加一个新的抓面包屑左侧栏的选项。

2。选择抓面包屑在左侧面板中。

3。在下面仪表板tab, configure settings to your preferences.

4。完成后，单击保存更改。

5。Add the following shortcode to your WordPress Visual editor:

[Catch-Breadcrumb]

6。Check your site pages for the new breadcrumb feature.

7.Check your site pages for the new breadcrumb feature.

屈曲面包屑

Flexy BreadCrumb以其简单的实施而受欢迎，还使用短码将面包屑添加到您的网站上。

1。Install and activate the plugin underPlugins > Add New。这将添加一个新的屈曲面包屑左侧栏的选项。

2。选择屈曲面包屑在左侧栏。

3。在下面通用设置，将设置配置为您的喜好。

4。完成后，单击保存更改。

5。Add the following shortcode to your WordPress Visual editor:

[flexy_breadcrumb]

SEOPress

Seopress是一个全面的SEO插件，可增强您的有机搜索流量。该插件被排名最高的工具，在其Pro版本中提供了面包屑作为功能。

1。Install and activate the plugin underPlugins > Add New。这将添加一个新的SEO左侧栏的选项。

2。在左侧栏中，选择SEO> Breadcrumbs。

3。在下面Configure your breadcrumbs，切换功能。

4。将面包屑设置配置为您的喜好

5。完成后，单击保存更改。

6。在左侧栏中，选择外观>主题编辑器。

7.Open your theme’sheader.php文件并将下面的代码添加到文件底部：

if(function_exists(“seopress_display_breadcrumbs”)) {
seopress_display_breadcrumbs（）;}

8.点击更新文件保存您的更改。

如何用主题向WordPress添加面包屑

大多数最新的WordPress主题都启用了BreadCrumb导航，因此您无需添加任何额外的内容即可将面包屑放在网站上。这是一些内置功能的主题：

• 页面构建器框架：这个主题使您可以自定义面包屑。
• 知识库：此主题可通过客户支持知识库中的面包屑进行导航。
• 阿斯特拉：此主题使您可以在页面上的任何地方放置面包屑。
• 店主：此主题使您可以在在线商店中启用面包屑。
• Woothemes：这是具有面包屑功能的WooCommerce主题的集合。

按照以下步骤关闭WordPress中的面包屑：

1。从您的管理仪表板中，选择Appearance > Theme Editor。

2。打开您添加面包屑的文件。

3。Usectrl + f（或者命令f在Macs上）打开浏览器的搜索功能。搜索“面包屑”以找到PHP代码。

4。Add two forward slashes (//) in front of this line of code. This temporarily disables the code.

5。点击更新文件保存您的更改。

Breadcrumbs are one of the simplest ways to help visitors get around your WordPress website, as well as increase organic search traffic. Your site’s layout shouldn’t be a mystery to users — with a breadcrumb trail, they’ll always know where they came from.

For more strategies for implementing this helpful feature, check out our post on面包屑技巧和示例。