您想在 WordPress 网站上显示面包屑导航链接吗?
面包屑导航告诉用户他们在网站上相对于主页的位置。然后,该面包屑路径也会显示在搜索结果中,这使您的网站脱颖而出。
在本文中,我们将向您展示如何在 WordPress 中显示面包屑导航链接。
![在 WordPress 中轻松显示面包屑导航链接 如何在 WordPress 中显示面包屑导航](https://www.wpbeginner.com/wp-content/uploads/2021/07/how-to-display-breadcrumbs-navigation-in-wordpress.png)
什么是面包屑导航以及为什么需要它?
面包屑导航是一个术语,用于描述以链接轨迹形式呈现的分层导航菜单。它通常用作辅助导航,允许用户在网站的页面层次结构中向上移动。
![WPBeginner 网站上显示的面包屑 WPBeginner 中的导航链接预览](https://www.wpbeginner.com/wp-content/uploads/2021/07/navigational-links-preview-in-wpbeginner-1.png)
面包屑导航链接与 WordPress 中的默认导航菜单系统不同。
面包屑导航的目的是帮助用户浏览您的网站。它还可以帮助搜索引擎了解网页上链接的结构和层次结构。
如果您的面包屑设置正确,那么 Google 等搜索引擎会将它们与页面标题一起显示在搜索结果中。这使您的网站在搜索结果中更加可见,并提高您的点击率。
![搜索结果中的面包屑导航 搜索结果中的面包屑导航链接](https://www.wpbeginner.com/wp-content/uploads/2021/07/breadcrumb-navigation-links-in-search-results.png)
本指南中的方法将帮助您使用架构标记正确设置面包屑。架构是一种智能标记代码,可帮助 Google 识别您的面包屑,以便它们显示在搜索结果中。
说了这么多,我们来看看如何在WordPress中添加面包屑导航链接。我们将向您展示两种方法,您可以选择最适合您的一种:
视频教程
https://www.youtube.com/embed/tFwiqbMInR8?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent订阅 WPBeginner
https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com
如果您更喜欢书面说明,请继续阅读。
方法 1:使用 All in One SEO 在 WordPress 中添加面包屑导航(推荐)
此方法更简单,建议所有 WordPress 用户使用。
对于这种方法,我们将使用WordPress 的 All in One SEO,这是市场上最好的 WordPress SEO 插件。它可以帮助您轻松提高 WordPress SEO,无需任何技术技能。它还具有易于使用的面包屑功能。
注意:还有一个免费版本的 All in One SEO,但功能有限,其中包括面包屑。
激活后,您将进入插件的设置向导。您可以按照屏幕上的说明来设置插件。
![多合一 SEO 向导 多合一 SEO 设置](https://www.wpbeginner.com/wp-content/uploads/2012/04/aioseo-setup-wiz.png)
需要设置帮助吗?请参阅我们有关如何安装和设置 All in One SEO 的分步教程。
接下来,您需要访问“多合一 SEO”»“常规设置”页面并切换到“面包屑”选项卡。
![在多合一 SEO 中启用面包屑显示 在 AIOSEO 中启用面包屑](https://www.wpbeginner.com/wp-content/uploads/2021/07/enable-breadcrumbs-in-aioseo.png)
面包屑架构标记由多合一 SEO 自动添加到您网站的代码中,以便搜索引擎可以找到它。
但是,如果您也想在网站上显示面包屑导航链接,则需要打开“启用面包屑”选项。
切换开关允许您查看可在WordPress 网站上使用的不同面包屑显示设置。
![面包屑显示选项 在网站选项上显示面包屑](https://www.wpbeginner.com/wp-content/uploads/2021/07/show-breadcrumbs-on-website-options.png)
您可以使用四种方法在 WordPress 网站上显示面包屑导航路径。
1.使用简码添加面包屑导航
短代码方法很简单,允许您在 WordPress 帖子和页面或在线商店的产品页面中显示面包屑导航链接。
只需编辑帖子、页面或产品,然后在要显示面包屑导航路径的位置添加以下短代码:
1 | [aioseo_breadcrumbs] |
如果您使用默认的块编辑器,则短代码将自动转换为短代码块。
![AIOSEO 面包屑导航简码 添加面包屑的简码](https://www.wpbeginner.com/wp-content/uploads/2021/07/add-shortcode-for-breadcrumbs-1.png)
您现在可以保存您的帖子或页面并预览它以查看面包屑导航菜单的运行情况。
这是它在我们的测试站点上的样子。
![AIOSEO 面包屑导航菜单 短代码面包屑导航链接的预览](https://www.wpbeginner.com/wp-content/uploads/2021/07/preview-of-shortcode-breadcrumbs-navigational-links.png)
2. 使用古腾堡块添加面包屑导航
现在,如果您不想使用短代码选项或不记得短代码,则可以使用 AIOSEO – 面包屑块来显示面包屑导航。
只需编辑要显示面包屑导航的帖子或页面并添加 AIOSEO – 面包屑块即可。
![添加 AIOSEO 面包屑块 AIOSEO 面包屑块](https://www.wpbeginner.com/wp-content/uploads/2021/07/aioseo-breadcrumbs-block.png)
然后,该插件将加载面包屑导航链接的实时预览并将其显示在内容区域中。
不要忘记更新或发布您的更改。
![预览面包屑块 AIOSEO面包屑块预览](https://www.wpbeginner.com/wp-content/uploads/2021/07/aioseo-breadcrumbs-block-preview.png)
3. 使用小部件添加面包屑导航
上述两种方法要求您在要显示面包屑导航链接的每个帖子或页面中添加短代码或块。
如果您想自动显示每个帖子或页面的面包屑该怎么办?
AIOSEO 面包屑小部件可以让您轻松做到这一点。
只需转到外观»小部件页面并添加 AIOSEO – 面包屑小部件块。您可以将其添加到网站的侧边栏、页脚或任何小部件区域。
![AIOSEO 面包屑小部件 将 AIOSEO 面包屑添加到小部件](https://www.wpbeginner.com/wp-content/uploads/2021/07/add-aioseo-breadcrumbs-to-widget.png)
您可以为小部件提供标题,也可以根据需要将其留空。
不要忘记单击“更新”按钮来存储您的设置。
![输入面包屑小部件标题 输入面包屑小部件标题](https://www.wpbeginner.com/wp-content/uploads/2021/07/enter-breadcrumbs-widget-title-1.png)
您现在可以访问您的网站并查看所有帖子和页面上的面包屑导航菜单。
4. 使用代码添加面包屑导航
此方法允许您将面包屑导航链接准确地显示在您想要的位置。但是,它要求您将代码添加到 WordPress 主题文件中。
如果您以前没有这样做过,那么请不要忘记查看我们关于如何在 WordPress 中添加代码片段的文章。
首先,您需要决定在哪里显示面包屑链接。显示面包屑链接的最常见位置是单个帖子、页面或产品标题的下方。
WordPress 主题使用模板文件来显示网站的不同部分。content-single.php
例如,许多主题使用位于template-parts
主题文件夹内的名为 的文件。
请参阅我们的备忘单以查找要在 WordPress 主题中编辑的文件。
之后,您需要使用 FTP 客户端编辑主题文件。有关说明,请参阅我们有关如何使用 FTP 将文件上传到 WordPress 的指南。然后,将以下代码放置在要显示面包屑导航链接的位置:
1 | <?php if ( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?> |
由
不要忘记保存更改并将文件上传回您的网站。
您现在可以访问您的网站以查看正在运行的面包屑链接。
![面包屑导航链接预览 面包屑导航链接预览](https://www.wpbeginner.com/wp-content/uploads/2021/07/preview-of-shortcode-breadcrumbs-navigational-links.png)
更改面包屑链接在 AIOSEO 中的显示方式
默认情况下,多合一 SEO 使用模板来显示面包屑导航链接。它包含指向您的主页、类别、父页面以及帖子或页面标题的链接,以“»”符号分隔。
您可以通过访问“多合一 SEO”»“常规设置”页面并转到“面包屑”选项卡来更改此设置。接下来,只需向下滚动到“面包屑导航设置”部分。
![面包屑导航设置 AIOSEO 面包屑设置](https://www.wpbeginner.com/wp-content/uploads/2021/07/aioseo-breadcrumbs-settings.png)
从这里,您可以更改分隔符、显示或隐藏主页链接、添加前缀等等。
完成后,不要忘记存储您的设置。
方法 2:使用 Breadcrumb NavXT 添加面包屑导航
此方法可以与任何其他WordPress SEO 插件一起使用。如果您有兼容的主题,那么它很容易使用,但如果没有,则需要编辑主题文件才能显示面包屑导航链接。
您需要做的第一件事是安装并激活Breadcrumb NavXT插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。
激活后,您需要访问“设置”»“Breadcrumb NavXT”页面来配置插件设置。
![Breadcrumb NavXT 插件的设置页面 面包屑 NavXT 设置](https://www.wpbeginner.com/wp-content/uploads/2021/07/breadcrumbs-navxt-settings.png)
默认设置应该适用于大多数网站。但是,您可以根据需要自定义设置。
设置页面分为不同的部分。在常规设置选项卡上,您可以更改面包屑的样式和设置。
您还会注意到,这些链接模板在链接标记中使用Schema.org标记。
插件设置下的帖子类型选项卡允许您为帖子、页面和任何自定义帖子类型设置面包屑链接。
![帖子类型面包屑设置 帖子类型面包屑设置](https://www.wpbeginner.com/wp-content/uploads/2021/07/post-types-breadcrumbs-settings.png)
您可以选择如何显示帖子层次结构。默认情况下,该插件将使用“网站标题 > 类别 > 帖子标题”层次结构。
您可以用标签、日期或帖子父项替换类别,并更改分隔符。
![选择职位层次结构 选择职位层次结构](https://www.wpbeginner.com/wp-content/uploads/2021/07/choose-post-hierarchy.png)
分类法和杂项选项卡具有类似的面包屑导航链接模板。
完成后不要忘记保存更改。
Breadcrumb NavXT 提供多种方式在您的网站上显示面包屑导航链接。
1. 显示带有主题支持的面包屑导航
一些 最流行的 WordPress 主题 带有一个内置选项,可以通过选择 Breadcrumb NavXT 或 WordPress SEO 插件作为源来显示面包屑导航。
例如,如果您使用 Astra,那么您可以转到 外观»自定义 页面并单击“面包屑”菜单。
从那里,您将选择希望面包屑在“标题位置”下拉列表中显示的位置。
在“面包屑来源”中,您需要选择“面包屑 NavXT”。
![使用主题定制器添加面包屑 使用主题定制器添加面包屑](https://www.wpbeginner.com/wp-content/uploads/2021/07/adding-breadcrumbs-with-theme-customizer-1.png)
如果您正在查看单个帖子或页面,那么您将看到面包屑导航链接的实时预览。
不要忘记单击“发布”按钮来保存您的更改。
2. 使用面包屑路径块显示导航链接
您还可以使用“面包屑路径”块来显示面包屑导航链接。
只需前往您的WordPress 内容编辑器,然后在您想要显示导航链接的位置添加面包屑路径块即可。
![添加面包屑路径块 添加面包屑路径块](https://www.wpbeginner.com/wp-content/uploads/2021/07/add-breadcrumb-trail-block.png)
接下来,您可以更新或发布您的内容。
之后,访问您的网站以查看正在运行的导航链接。
![面包屑路径预览 面包屑路径预览](https://www.wpbeginner.com/wp-content/uploads/2021/07/breadcrumb-trail-preview.png)
3. 使用小部件添加面包屑导航
该插件还提供了一个小部件,您可以使用它在侧边栏或任何小部件就绪区域中显示面包屑导航。
首先,转到外观»小部件页面,并将“面包屑路径”小部件块添加到网站的小部件区域,例如侧边栏或页脚。
![面包屑 NavXT 小部件设置 添加面包屑路径小部件](https://www.wpbeginner.com/wp-content/uploads/2021/07/add-breadcrumb-trail-widget.png)
默认小部件设置适用于大多数网站,但您可以根据需要更改它们。例如,您可能想隐藏首页上的踪迹。
不要忘记单击“更新”按钮来存储您的小部件设置。
4. 使用代码添加面包屑导航
该插件还提供了一种代码方法来为高级用户显示面包屑导航链接。
首先,您需要使用FTP 客户端连接到您的 WordPress 站点。之后,导航到位于该/wp-content/themes/
目录中的当前 WordPress 主题文件夹。
WordPress 主题使用模板文件来显示网站的不同部分。例如,许多主题使用位于主题content-single.php
内部的名为的文件。template-parts folder
请参阅我们的备忘单以查找要在 WordPress 主题中编辑的文件。
打开模板文件进行编辑,然后将以下代码放置在要显示面包屑路径的位置:
1 | <?php if ( function_exists( 'bcn_display' ) ) bcn_display(); ?> |
由
不要忘记保存更改并将文件上传回您的网站。
您现在可以访问您的网站以查看正在运行的面包屑链接路径。
![面包屑导航预览 面包屑路径预览](https://www.wpbeginner.com/wp-content/uploads/2021/07/breadcrumb-trail-preview.png)
我们希望本文能帮助您了解如何在 WordPress 中显示面包屑导航链接。您可能还想查看有关如何为您的 WordPress 网站获得更多流量的指南或我们的最佳域名注册商展示。