如何设置显示WordPress面包屑导航菜单

面包屑导航用于告诉网站访客在网站上相对于主页的位置。然后,此面包屑路径也会显示在搜索结果中,有利于网站SEO优化。

在本教程中,我们将展示如何在WordPress设置显示面包屑导航菜单。

breadcrumbsnavlinkswp-og-1

What is Breadcrumb Navigation and Why Do You Need it?

Breadcrumb navigation is a term used to describe a hierarchical navigation menu presented as a trail of links. It’s often used as a secondary navigation that allows users to go up in the website’s hierarchy of pages.

什么是及为什么需要面包屑导航?

面包屑导航是一个术语,用于描述显示为链接轨迹的分层导航菜单。它通常用作辅助导航,允许用户在网站的页面层次结构中向上移动。

breadcrumb.png-1

面包屑导航链接不同于WordPress 中的默认导航菜单系统。

面包屑导航的目的是帮助用户浏览您的网站。它还可以帮助搜索引擎了解网页上链接的结构和层次结构。

如果您的面包屑设置正确,那么像Google这样的搜索引擎会在搜索结果中将它们与页面标题一起显示。这使您的网站在搜索结果中的可见度更高,并提高了点击率。

serp-breadcrumb-1

本教程中的方法将帮助您使用架构标记正确设置面包屑。Schema是一种智能标记代码,可帮助Google识别您的面包屑,以便它们显示在搜索结果中。

话虽如此,让我们来看看如何在WordPress中添加面包屑导航链接。我们将向您展示两种方法,您可以选择最适合您的一种。

方法 1. 使用All in One SEO插件添加WordPress面包屑导航

这种方法更简单,推荐给所有WordPress用户。

对于这种方法,我们将使用All in One SEO,这是市场上最流行的 WordPress SEO 插件之一(我们的SEO插件-Smart SEO Tool更加符合中国站长的使用习惯)。它可以帮助您轻松提高WordPress SEO,而无需任何技术技能。它还带有易于使用的面包屑功能。

注意:还有一个免费版本All in One SEO,功能有限,包括面包屑。

启用插件后,开始插件的设置向导,你只需要按照页面上的说明设置插件。

aioseowizard

在设置方面需要帮助?请参阅有关如何安装和设置All in One SEO教程。

接下来,您需要访问All in One SEO » General Settings页面并切换到Breadcrumbs选项卡。

enable-breadcrumbs

现在面包屑结构化数据标记由All in One SEO自动添加到您网站的代码中,以便搜索引擎可以找到它。

但是,如果您也想在您的网站上显示面包屑导航链接,则需要打开“Enable Breadcrumbs”选项。切换开关可以让您看到可以在您的网站上使用的不同面包屑显示设置。

breadcrumbs-display-options

您可以使用四种方式在WordPress网站上显示面包屑导航菜单。

1. 使用简码添加面包屑导航

短代码方法很简单,支持在WordPress文章和页面或网上商城的产品页面中显示面包屑导航菜单。

只需编辑文章、页面或产品,并在要显示面包屑导航菜单的位置添加以下短代码。

[aioseo_breadcrumbs]

如果您使用的是默认块编辑器,则短代码将自动转换为短代码块。

aioseo-breadcrumb-shortcode

您现在可以保存文章或页面并预览它以查看正在运行的面包屑导航菜单。下面是一个测试站点的面包屑导航菜单示例:

aioseo-breadcrumbs-preview1

2. 使用古腾堡区块添加面包屑导航

如果您不想使用简码选项,或者不记得简码,那么您可以使用“AIOSEO – Breadcrumbs”区块显示面包屑导航。

只需编辑要显示面包屑导航的文章或页面,然后添加 AIOSEO – Breadcrumbs 区块。

aioseo-breadcrumbs-block

然后插件将加载面包屑导航菜单的实时预览并将其显示在内容区域中。

preview-breadcrumbs-block

不要忘记更新或发布您的更改。

3. 使用小工具添加面包屑导航

以上两种方法要求您在要显示面包屑导航菜单的每个文章或页面中添加短代码或区块。

如果您想为每个文章或页面自动显示面包屑菜单怎么办?

AIOSEO Breadcrumbs小工具可帮助您做到这一点。只需转到外观»小工具页面并将“AIOSEO – Breadcrumbs”小工具添加到侧边栏。

aioseo-widget

 

您可以为小工具设置标题,也可以根据需要将其留空。不要忘记单击“保存”按钮来存储您的设置。

访问您的网站,将在所有文章和页面上看到面包屑导航菜单。

breadcrumbsinsidebar

4. 使用代码添加面包屑导航

此方法支持在所需位置准确显示面包屑导航菜单。但是,它要求您将代码添加到WordPress主题文件中。

首先,您需要决定要在何处显示面包屑菜单。显示面包屑菜单的最常见位置是在单个文章、页面或产品标题下方。

WordPress主题使用模板文件来显示您网站的不同部分。例如,许多主题会使用一个名为 content-single.php 的文件,该文件位于主题的 template-parts 文件夹中。

然后,您需要使用FTP客户端编辑主题文件。然后将以下代码放在要显示面包屑导航菜单的位置。

<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>

不要忘记保存更改并将文件上传覆盖原来的文件(切记做好备份工作)。

再次访问网站以查看正在运行的面包屑导航菜单。

breadcrumbslinkpreview2

更改面包屑导航菜单在AIOSEO中的显示方式

现在默认情况下,All in One SEO使用模板来显示网站面包屑导航菜单。它包含指向您的主页、类别或父页面的链接,以及以 » 分隔的文章或页面标题。

您可以通过访问All in One SEO»General Settings页面并向下滚动到Breadcrumb Settings部分来更改它。

breadcrumbsettings

从这里,您可以更改分隔符、显示或隐藏主页链接、添加前缀等。

完成后,不要忘记单击“Save Changes”按钮来存储您的设置。

方法 2. 使用Breadcrumb NavXT插件添加面包屑导航菜单

此方法可与任何其他WordPress SEO插件一起使用。如果您有兼容的主题,它很容易使用,但如果没有,则需要编辑主题文件以显示面包屑导航链接。

首先您需要安装并启用Breadcrumb NavXT插件。

启用插件后,您需要访问Settings » Breadcrumb NavXT页面来配置插件设置。

breadcrumbs-navxt

默认设置应该适用于大多数网站。但是,您可以根据需要自定义设置。

设置页面分为不同的部分。在常规设置选项卡上,您可以更改面包屑的样式和设置。

您还会注意到这些链接模板在链接标签中使用了Schema.org标记。

插件设置下的文章类型选项卡支持您为文章、页面和任何自定义帖子类型设置面包屑链接。

您可以选择显示文章层次结构的方式。默认情况下,插件将使用Site Title > Category > Post Title。您可以用标签、日期或帖子父项替换类别,并更改分隔符。

该分类法和作者标签为您的面包屑导航链接的类似的模板。

不要忘记单击保存更改按钮来存储您的更改。

在网站上显示Breadcrumb NavXT

Breadcrumb NavXT提供多种方式在您的网站上显示面包屑导航菜单。

1. 显示带有主题支持的面包屑导航

一些最受欢迎的WordPress主题带有一个内置选项,通过选择Breadcrumb NavXT或WordPress SEO插件作为源来显示面包屑导航。

例如,如果您使用的是Astra,那么您可以转到外观»自定义页面并单击面包屑菜单。

从那里,在Position下拉菜单选择面包屑显示的位置。

Breadcrumb Source中,您需要选择“Breadcrumb NavXT”。

customzierbreadcrumbnavxt

如果您正在查看单个文章或页面,那么您将看到面包屑导航菜单的实时预览。

不要忘记单击“发布”按钮以保存您的更改。

2. 使用小工具添加面包屑导航

该插件还提供了一个小工具,您可以使用它在侧边栏或任何小工具就绪区域中显示面包屑导航。

首先,转到外观 » 小工具页面并将 Breadcrumb NavXT小工具添加到侧边栏。

breadcrumbnavxtwidget

默认小工具设置适用于大多数网站,但您可以根据需要更改它们。例如,您可能想要隐藏首页上的导航。

不要忘记单击“Save”按钮来存储您的小部件设置。

刷新访问您的网站以查看正在运行的小工具。

breadcrumblinksinsidebar

3. Adding Breadcrumb Navigation using Code

The plugin also offers a code method to display breadcrumb navigation links for advanced users.

First you need to connect to your WordPress site using an FTP client. After that, navigate to your current WordPress theme folder located inside /wp-content/themes/ directory.

WordPress themes use template files to display different sections of your website. For instance, many themes would use a file called content-single.php located inside the template-parts folder of your theme.

See our cheat sheet to find which files to edit in a WordPress theme.

Open the template file to edit it and then place the following code where you want to display the breadcrumbs trail:

3. 使用代码添加面包屑导航

该插件也提供代码方法来为高级用户显示面包屑导航菜单。

首先,您需要使用FTP客户端连接到WordPress网站服务器。之后,导航到位于 /wp-content/themes/ 目录中的当前WordPress主题文件夹。

WordPress主题使用模板文件来显示您网站的不同部分。例如,许多主题会使用一个名为 content-single.php 的文件,该文件位于主题的 template-parts 文件夹中。

打开模板文件进行编辑,然后将以下代码放在要显示面包屑路径的位置:

<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>

不要忘记保存更改并将文件覆盖服务器上的源文件。

再次访问网站以查看正在运行的面包屑导航链接是否正常显示。

breadcrumbpreview3

我们希望本教程能帮助站长了解如何在WordPress中显示面包屑导航菜单。enjoy!

评论留言