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

已发表: 2023-02-12

导航是任何网站的重要组成部分，提供导航的方式不止一种。 您网站上的主菜单是将用户带到他们想要的内容的主要导航工具。 但是，它不会告诉您的客户他们目前在您网站上的位置。

面包屑菜单是一种辅助导航系统，可以告诉您的客户他们与您的主页相关的位置。 这有助于他们轻松浏览您网站的页面，避免迷路。

在本文中，我们将研究什么是面包屑以及它们如何使您的网站受益。 然后，我们将向您展示如何将面包屑添加到您的 WordPress 网站。 让我们开始吧！

目录
1.什么是 WordPress 中的面包屑？
2.添加面包屑的好处
3.如何在 WordPress 中添加面包屑
3.1. 方法一：使用插件
3.1.1. 第 1 步：下载 Yoast SEO 插件
3.1.2. 第 2 步：向您的 header.php 文件添加一个函数
3.1.3. 第 3 步：激活面包屑导航支持
3.2. 方法 2：编写您自己的面包屑导航
3.2.1. 第 1 步：创建骨架函数
3.2.2. 第 2 步：添加基本规则
3.2.3. 第 3 步：添加“if else”语句
3.2.4. 第 4 步：向主题标题添加功能
4.使用 WP Engine 自定义您的网站

什么是 WordPress 中的面包屑？

面包屑是用于描述分层导航菜单的术语。 这种菜单包含一系列链接，与 Hansel 和 Gretel 留下的面包屑痕迹没什么不同：

由于许多用户不会通过主页进入您的 WordPress 网站，面包屑导航可帮助他们了解他们的登陆位置。 搜索引擎还使用面包屑来更好地了解网页的层次结构。

添加面包屑的好处

将 WordPress 面包屑菜单添加到您的网站有几个好处。 例如，Google 喜欢面包屑，因此此功能可以改善您的搜索引擎优化 (SEO) 并为您的网站带来更多访问者。

面包屑菜单还可以降低跳出率，因为它们可以改善您网站的用户体验 (UX)。 当用户可以轻松浏览您的网站时，他们就更有可能花时间在上面。

如何在 WordPress 中添加面包屑

您可以通过两种方式将面包屑添加到您的 WordPress 网站。 最简单的方法是使用 WordPress 插件，但您也可以将面包屑编码到您网站的header.php文件中。 在您使用任何一种方法之前，您应该为您的网站创建一个备份，以防万一出现问题。

方法一：使用插件

将面包屑添加到 WordPress 的最简单方法是使用面包屑插件。 您可以使用许多插件，包括 Breadcrumb NavXT 和 Yoast SEO：

Yoast SEO 通常是最佳选择，因为它很可能是您的网站已经使用的插件。

第 1 步：下载 Yoast SEO 插件

由于 Yoast 是一个 SEO 插件，它提供了广泛的功能。 这包括面包屑导航的创建和样式。

要使用此插件，您需要从 WordPress 插件目录下载它。 您只需前往您网站的插件页面，搜索“Yoast SEO”，然后像其他任何插件一样安装和激活插件。

第 2 步：向您的header.php文件添加一个函数

激活插件后，您必须在站点的header.php文件中添加一个函数。 要访问此文件，请导航至外观>主题编辑器并选择文件以将其打开。

然后，在您希望面包屑设置菜单出现的任何位置添加以下代码：

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

通常，您需要将此代码放在header.php文件的末尾。 但是，您可以尝试菜单的位置，检查站点的前端以查看结果的外观。

如果您想让面包屑功能出现在页面的其他地方，您甚至可以将上述功能添加到主题的single.php或page.php文件中。 只要确保只将它添加到一个地方即可。

第 3 步：激活面包屑导航支持

最后，您需要激活面包屑支持。 在 Yoast SEO 中，这意味着导航到SEO >搜索外观>面包屑：

只需将开关切换到“已启用”，就可以开始了！ 您的 WordPress 面包屑菜单将设置完毕并可以使用。

方法 2：编写您自己的面包屑导航

添加网站面包屑也可以通过编码手动完成。 如果您不想使用面包屑插件，可以添加没有面包屑的插件。 在尝试此操作之前，您可能需要阅读微数据，以便充分利用 WordPress 面包屑的 SEO 潜力。

第 1 步：创建骨架函数

要手动将面包屑添加到 WordPress，您需要创建一个 PHP 函数。 创建此功能的第一步是构建骨架。 您的骨架函数将需要一个唯一的名称，以避免与其他函数发生冲突。

function my_breadcrumbs() {
/* Breadcrumbs code will go here */
}

上面的函数是骨架，其余的面包屑代码将放在大括号内。

第 2 步：添加基本规则

创建骨架后，您需要向函数添加规则。 规则应放在面包屑部分：

/* Change according to your needs */
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '»';
$home_url = 'Home';
$before_wrap = '<span clas="current">';
$after_wrap = '</span>';

/* Don't change values below */
global $post;
$home_url = get_bloginfo( 'url' );

上面的规则一般都是用变量，所以以后可以改。 前两个变量使用布尔值，其中“0”为假，“1”为真。

第 3 步：添加“ if else ”语句

在变量下方，您需要添加“if else”语句。 该语句将检查用户是否在您网站的主页上。 根据此信息，该语句将确定是否显示面包屑：

/* Check for homepage first! */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;

/* Proceed with showing the breadcrumbs */
$breadcrumbs = '<ol itemscope itemtype="http://schema.org/BreadcrumbList">';

$breadcrumbs .= '<li itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a target="_blank" href="' . $home_url . '">' . $home_url . '</a></li>';

/* Build breadcrumbs here */

$breadcrumbs .= '</ol>';
echo $breadcrumbs;

如果此语句未添加到函数中，则面包屑设置可能会或可能不会在您希望的时候出现。

第 4 步：向主题标题添加功能

面包屑功能完成后，您可以将其添加到网站的header.php文件中。 导航到外观>主题编辑器打开文件，并将功能添加到最后。

然后保存您的更改，并在前端查看您的新网站面包屑菜单。 您可以继续调整功能及其位置，直到菜单看起来恰到好处（或在必要时禁用面包屑）。

使用 WP Engine 自定义您的网站

面包屑导航菜单可帮助您网站的访问者找到他们的方式。 它们还使搜索引擎更容易理解您网站的层次结构。 像 Yoast SEO 这样的插件是向您的网站添加面包屑的最简单方法，但您也可以手动对其进行编码。

使用正确的虚拟主机可以帮助保证您网站的性能，让您有时间专注于开发和用户体验。 WP Engine 可以为您提供最好的托管 WordPress 托管计划，以及创造令人难以置信的网站体验的最佳资源！