WordPress添加面包屑导航的方法和作用

2025年10月28日农场开发者 2 浏览

WordPress 面包屑导航是一个非常实用的功能，它可以帮助用户了解当前页面在网站结构中的位置，并能快速返回上级页面，对提升用户体验和SEO（搜索引擎优化）都非常有帮助。

下面我将为您全面介绍如何在 WordPress 中实现面包屑导航，包括不使用插件和使用流行插件两种方法。

一、什么是面包屑导航？

面包屑导航是一行显示用户当前位置的文本链接，通常位于页面标题的上方或下方。它的结构通常是这样的：首页 > 博客分类 > 文章子分类 > 当前文章标题它的作用：

用户体验：让用户知道自己在哪里，不会“迷路”。
网站导航：用户可以快速跳转到任意上级页面。
SEO 优化：搜索引擎喜欢结构清晰的网站，面包屑有助于搜索引擎理解网站结构，并且搜索结果页有时会直接显示面包屑路径。

二、方法一：使用插件（最简单，推荐新手）

这是最快捷、无需编码的方法。以下是两个非常流行的插件：

1. Yoast SEO 或 Rank Math SEO

如果您已经安装了这些强大的SEO插件，那么您很可能已经拥有了面包屑功能，只需要开启和设置即可。以 Yoast SEO 为例：

进入 WordPress 后台的 SEO > 设置。
点击高级选项卡。
找到 面包屑 并打开开关。
进行简单设置，比如选择面包屑中“首页”的标签文本（默认为“Home”）。
保存更改。
在主题中调用：打开您的主题文件（通常是 header.php或希望显示面包屑的位置），在合适的地方添加以下代码：
```
<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
}
?>
```

2. Breadcrumb NavXT

这是一个专精于面包屑导航的经典插件。

安装并激活 Breadcrumb NavXT 插件。
进入 设置 > Breadcrumb NavXT 进行详细配置（如首页标签、分类前缀等）。

在主题中调用：在您的主题文件中添加以下代码：

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display')) {
        bcn_display();
    }
    ?>
</div>

三、方法二：手动添加代码（无插件，更轻量）

如果您不想安装过多插件，或者想更好地控制代码，这种方法很合适。您需要将代码添加到当前主题的 functions.php文件和模板文件中。步骤 1：将以下代码添加到主题的 functions.php文件末尾（位于 <?php标签之后，?>标签之前，如果文件没有 ?>则加在末尾即可）

// 定义生成面包屑导航的函数
function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">首页</a>';
    if (is_category() || is_single()) {
        echo " > ";
        the_category(' • ');
            if (is_single()) {
                echo " > ";
                the_title();
            }
    } elseif (is_page()) {
        echo " > ";
        echo the_title();
    } elseif (is_search()) {
        echo " > 搜索结果： ";
        echo the_search_query();
    }
}

注意：这是一个基础示例，功能可能不完整（例如，没有处理标签页、作者页等）。后面我会制作一个更完整的面包屑导航和大家分享，大家可以持续关注我后面的文章获取。

步骤 2：在主题模板中调用面包屑在您希望显示面包屑的地方添加以下代码。通常是在 header.php、single.php（文章页）或 page.php（页面）中，位于 <main>或 <article>标签开始之后。例如，在 header.php的 <body>部分后找到：

// 在主题模板中调用
<nav class="breadcrumb">
    <?php get_breadcrumb(); ?>
</nav>

四、自定义样式（CSS）

无论使用哪种方法，生成的HTML结构通常都很简单，您可以用CSS来美化它。示例CSS样式：

.breadcrumb {
    font-size: 0.9em;
    margin-bottom: 20px;
    padding: 8px 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.breadcrumb a {
    text-decoration: none;
    color: #007cba;
}

.breadcrumb a:hover {
    text-decoration: underline;
    color: #005a87;
}

/* 分隔符 ">" 的样式 */
.breadcrumb .breadcrumb-separator {
    margin: 0 8px;
    color: #6c757d;
}

您需要根据生成的HTML结构来调整CSS选择器。

五、为SEO添加结构化数据（Schema.org）

为了让搜索引擎更好地理解您的面包屑，添加结构化数据是很好的做法。像 Yoast SEO 和 Breadcrumb NavXT 这类插件会自动添加。手动添加的方法如下：在 functions.php中的函数需要生成带有微数据的HTML，例如：

<nav class="breadcrumb" aria-label="面包屑">
    <div itemscope itemtype="https://schema.org/BreadcrumbList">
        <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="首页">
                <span itemprop="name">首页</span>
            </a>
            <meta itemprop="position" content="1" />
        </span>
        > 
        <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="h新闻页">
                <span itemprop="name">新闻</span>
            </a>
            <meta itemprop="position" content="2" />
        </span>
        > 
        ... <!-- 继续添加更多层级 -->
    </div>
</nav>

给大多数人的建议：如果您已经使用了 Yoast SEO 或 Rank Math，请直接使用它们内置的面包屑功能，这是最省事、最专业的方法。如果没有，安装一个 Breadcrumb NavXT 插件也能轻松解决问题。

WordPress