如何將麵包屑添加到您的 WordPress 網站

術語“麵包屑”指的是一種高效的網站導航工具（就像 Hansel 和 Gretel 教給我們的）旨在幫助跟踪一個人的步驟回到網站的“主頁”（或主頁）。 它們通過提供一直返回主頁的鏈接（或標籤）的內聯跟踪，允許用戶查看當前頁面如何適應整個站點結構。

帶有麵包屑的家得寶產品頁面

麵包屑對您的 WordPress 網站實際上比您想像的更重要。 它們不僅可以增強用戶體驗，還可以讓您的網站在搜索排名中有所提升。 谷歌喜歡網站中的這種結構元素，當訪問者有機地偶然發現您的一個頁面（降低跳出率）時，他們將獲得至關重要的導航幫助。

您會認為向您的網站添加這樣一個集成的原生系統會很困難，但實際上使用插件非常簡單。 事實上，如果您使用的是 Yoast SEO 插件，那麼您就有了一個良好的開端，因為 Yoast 中已經內置了麵包屑功能！ 而且，通過 Yoast 添加麵包屑絕對是目前首選的方法之一。 除了 Yoast SEO，插件 Breadcrumb NavXT 是另一個很好的選擇，它是高度可定制的，也適用於我們自己的 Divi 主題。

訂閱我們的 YouTube 頻道

如何使用 Yoast 將麵包屑添加到您的 WordPress 網站

要使用 Yoast SEO 將麵包屑添加到您的 WordPress 網站，您需要解決三個簡單的步驟：

• 安裝並激活 Yoast SEO 插件
• 將 Breadcrumbs 代碼片段添加到您的 WordPress 主題
• 在插件設置中啟用/配置麵包屑 Yoast Breadcrumbs

安裝並激活 Yoast SEO 插件

要安裝 Yoast SEO 插件，請轉到您的 WordPress 儀表板並導航至插件 > 添加新。 然後在 WordPress 存儲庫中搜索“yoast”。 當您看到 Yoast SEO 插件時，單擊以安裝並激活該插件。

將麵包屑代碼片段添加到您的 WordPress 子主題

接下來，我們需要向您的 WordPress 主題文件添加一小段代碼。 因此，如果您還沒有，創建一個子主題是個好主意。 對於此示例，我將向您展示如何將麵包屑代碼片段添加到默認的 29 歲 WordPress 主題。 您可以將代碼添加到任何主題文件/模板，但在大多數情況下，您需要將其添加到您的 single.php 文件（以顯示在所有帖子中）、page.php 文件（以顯示在所有頁面上） )，或到您的 header.php 文件（以顯示整個站點）。

對於這個例子，我將把麵包屑代碼添加到我的子主題的 header.php 文件中。 從父主題複製 header.php 文件後，打開以在您選擇的代碼編輯器中編輯該文件。

然後在 header.php 文件的最底部，添加 Yoast 提供的以下 php 片段以激活 Breadcrumbs 功能：

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

這將直接在所有頁面的標題下顯示麵包屑，這是麵包屑的常見位置。

在插件設置中啟用和配置 Yoast Breadcrumbs

將代碼片段添加到您的 WordPress 子主題後，您要做的就是在 Yoast SEO 插件設置中激活麵包屑。 為此，請轉到您的 WordPress 儀表板並導航到 SEO > 搜索外觀，然後單擊麵包屑選項卡。 在麵包屑設置下，確保通過將選項切換為“啟用”來啟用麵包屑。 然後您可以根據需要配置麵包屑設置。 您可能還想選擇一個分類法以在您的帖子的麵包屑中顯示。 對於此示例，我將設置我的帖子以在麵包屑導航中顯示類別。

現在，讓我們繼續查看我在“TwentyNineteen”主題中創建的其中一篇帖子上的麵包屑外觀。

這是啟用麵包屑之前帖子的樣子。

這是啟用麵包屑後帖子的樣子。 這個特定的帖子示例有一個類別（“WordPress”）和一個父類別（“網頁設計”），以向您展示我在麵包屑設置中選擇的麵包屑的類別分類法。

您可能需要使用一些外部 CSS 調整麵包屑的樣式。 為此，您可以使用包含在 php 代碼中的 CSS ID“麵包屑”。 打開子主題的 style.css 文件（或者您可以將其添加到“附加 CSS”下的“主題定制器”中）並添加以下內容：

#breadcrumbs {

/*Add breadcrumb styling here*/

}

對於TwentyNineteen 主題，我可能希望通過添加以下自定義CSS 來匹配標題文本的邊距：

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

如果您想更好地控制麵包屑的特定位置，您也可以將以下短代碼用於單個帖子或頁面。

[wpseo_breadcrumb]

使用 Breadcrumb NavXT 將麵包屑添加到您的 WordPress 網站

如果您出於某種原因不想安裝 Yoast SEO，或者您正在尋找另一個簡單的選項，那麼 Breadcrumb NavXT 插件是一個很好的選擇。

要安裝插件，請轉到您的 WordPress 儀表板並導航到插件 > 添加新。 然後在 WordPress 存儲庫中搜索“breadcrumb navxt”。 看到插件後，單擊以安裝並激活它。

要調用麵包屑以使其顯示在您的網站上，您可以使用小部件頁面中提供的內置 Breadcrumb NavXT 小部件。 這將允許您將小部件拖動到主題提供的各種小部件區域。 為此，請轉到您的 WordPress 儀表板並導航到外觀 > 小部件。 然後將小部件拖到小部件區域或您的選擇並更新小部件設置。

對於此示例，我使用 Divi 主題在側邊欄頂部顯示麵包屑。 這是帖子上的樣子。

與 Yoast Breadcrumb 示例類似，您還可以通過將必要的代碼添加到您的子主題來調用您站點的麵包屑路徑。 這是他們提供的符合 schema.org 麵包屑列表的代碼：

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

因為我在這個例子中使用了 Divi 主題，所以我將把代碼添加到我的 Divi Child 主題的 Single.php 文件中，就在文章標籤的正上方。 這將在我所有帖子的頂部顯示麵包屑。

這是添加代碼後帖子的樣子。

使用插件設置配置麵包屑

Breadcrumb NavXT 插件有一些強大的選項來配置你的麵包屑。 您可以針對不同的分類法等自定義麵包屑的整個模板。 您可以通過導航到“設置”>“麵包屑導航”從 WordPress 儀表板訪問這些設置。

麵包屑的樣式

如果要設置麵包屑的樣式，可以定位代碼中包含的名為“麵包屑”的類。

只需將以下 CSS 添加到您的子主題的 style.css 文件或主題定制器附加 CSS 中：

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

如果您想使用帶有 Divi 主題的麵包屑小部件，您還可以使用 Divi 的側邊欄模塊在 Divi Builder 中為麵包屑添加樣式。

最後的想法

麵包屑是網站可用性和搜索引擎優化的重要組成部分。 因此，如果您正在考慮向 WordPress 網站添加麵包屑，我建議您從本文中提到的插件（Yoast SEO 和 Breadcrumb NavXT）提供的方法開始。 如果您已經在利用他們的 SEO 插件，那麼使用 Yoast 麵包屑是最有意義的，因為它已經可供您使用。 但是，Breadcrumb NavXT 也是一個高度可定制的選項。 當然，您可能需要訪問您的主題文件，但總而言之，這個過程很簡單。 如果有的話，我希望這有助於減輕在您自己的 WordPress 網站上獲取麵包屑的痛苦。

我期待在評論中收到您的來信。

乾杯!