如何將麵包屑添加到 WordPress 以幫助用戶更好地瀏覽您的網站

如果您運行一個內容豐富的網站，或者如果您想知道如何，那麼本文將幫助您了解如何將麵包屑添加到 WordPress。

在德國童話故事中，“漢塞爾和格萊特”的弟弟和妹妹——無意中聽到他們邪惡的繼母打算把他們扔到樹林裡自生自滅——拿了一片麵包，留下了麵包屑的痕跡，他們會一旦他們的父母拋棄了他們，就跟著回家。

在現代出版； 在網絡、軟件或文檔上，麵包屑同樣用於幫助讀者找到回家的路。 或者至少能夠根據他們所處的位置追溯他們的步驟。

麵包屑是網站上顯示訪問者位置的輔助導航元素。

您正在閱讀這篇文章，因為您知道它是什麼，但如果您想知道它是什麼樣子，您可以前往 eBay 看看他們的。

查看適用於 Galaxy S9+ iPhone X XS Max 的 Qi 無線快速充電器充電板支架底座的買家，很容易知道他們在哪里以及如何獲得列出其產品的不同類別。

在這種情況下，有一個返回主頁的鏈接，然後是一個指向產品主類別的鏈接——手機和配件，然後是一個子類別——手機配件和另一個子類別——充電器和搖籃。

為什麼要向 WordPress 網站添加麵包屑？

通過查看上面的 eBay 結構，您可以看到麵包屑對於分層或分層網站上的用戶體驗是如何出色的。 訪問者在瀏覽網站時知道他們在任何給定點的位置。 如果他們需要轉到列出他們正在查看的產品或文章的父類別，他們只需單擊麵包屑中的鏈接。

這給我們帶來了向 WordPress 網站添加麵包屑的另一個好處，用戶不需要點擊瀏覽器的後退按鈕，只需點擊麵包屑即可。

麵包屑允許在網站上發現內容。 考慮從搜索引擎或另一個網站上的鏈接發送到文章的訪問者。 當用戶閱讀完文章後，麵包屑導航會為用戶提供更多選項以轉到更高的類別以查看相似的內容。 您可以猜到，這會導致用戶在網站上花費更多時間，從而降低跳出率。

麵包屑不僅可以幫助用戶瀏覽網站，還可以幫助搜索引擎瀏覽網站。

任何改善用戶體驗、降低跳出率、讓搜索引擎機器人輕鬆抓取和索引網站的任何東西，都有助於網站獲得搜索引擎的好評。

事實上，添加麵包屑有助於網站進行搜索引擎優化。

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

大多數現代 WordPress 主題和幾乎所有電子商務主題都設計有麵包屑功能。

要使用這樣的主題將麵包屑添加到您的網站，只需啟用該選項，通常可以在主題選項中找到。 如有疑問，請諮詢您的主題文檔或主題開發人員。

如果您的主題本身不支持麵包屑，那麼您可以使用麵包屑插件輕鬆添加它們。 您還可以使用大多數 SEO WordPress 插件（例如 Yoast）將麵包屑添加到您的網站。

對於本文，我們將使用免費的 WordPress 插件 - Breadcrumb NavXT 將麵包屑添加到 WordPress

第 1 步：安裝 Breadcrumb NavXT WordPress 插件。

麵包屑導航 NavXT 根據用戶的位置生成麵包屑。 然後可以根據自己的喜好定制小徑。

繼續安裝 Breadcrumb NavXT。

如果您不知道如何在 WordPress 中安裝插件，這很容易。 登錄到您的儀表板，然後在插件下的左側菜單中向下滾動，單擊添加新的。

在搜索框中輸入您要安裝的插件 - Breadcrumb NavXT -。

一兩秒鐘後，結果將返回。 現在，單擊立即安裝，然後再等待一兩秒鐘，然後單擊激活。

第 2 步：在 WordPress 網站上顯示麵包屑 NavXT 麵包屑。

您可以通過兩種方式顯示麵包屑。

1.使用Breadcrumb NavXT提供的widget

進入主菜單； 外觀 > 小部件。

找到 Breadcrumb NavXT，然後將其拖到您想要麵包屑的側邊欄。

現在，轉到出現側邊欄的任何帖子或頁面，您應該會看到麵包屑。

如果你想要你的麵包屑在除邊欄之外的任何地方，比如 eBay 的例子，那麼你需要動手修改你的主題。

2.修改你的主題

您可能需要修改的文件是； home.php、single.php、page.php。 您還可以修改分類法和任何其他文件，只要您需要那裡的麵包屑。

但是，在您做任何事情之前，請備份您的網站。 如果事情適得其反，我們自己的 WPVivid 備份插件將為您節省時間和頭痛。

接下來，我建議對子主題進行任何更改。 我們有一篇文章將向您展示如何為您的 WordPress 網站創建子主題。

如果您已完成上述操作，請繼續將以下代碼添加到您希望麵包屑顯示的頁面中。

 <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">

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

</div>

如果您要在文章中顯示它，您可以修改 single.php 文件。 將代碼粘貼到文章標籤中。

保存您的更改，然後轉到您的文章。

您的麵包屑應該在您放置代碼的區域。

你可以在我的例子中看到我在文章頂部有麵包屑。

如果您的麵包屑顯示不正確，則需要使用一些 CSS 對其進行樣式設置。

Breadcrumb NavXT 使用 .breadcrumbs css 類（這也可能取決於您的主題）。 您可以修改站點的 CSS 代碼，或使用 WordPress 定制器來設置麵包屑的樣式。

 。麵包屑 {

顏色：#000；

邊距底部：20px；

}

第 3 步：自定義麵包屑導航 NavXT 麵包屑。

如果您需要對麵包屑進行修改，則可以在 WordPress 儀表板中進行。

轉到麵包屑導航 NavXT 設置頁面。 您可以在通用 WordPress –設置> Breadcrumb NavXT –菜單下找到它。

就是這樣，希望您已成功將麵包屑添加到您的 WordPress 網站。

不要在您網站的叢林中失去您的訪問者。 將麵包屑添加到您的網站。

接下來，您可能還想了解如何將 Google 自定義搜索添加到 WordPress 以改善您的現場導航。