如何在 WordPress 中編輯麵包屑

已發表: 2021-08-10

您是否正在尋找自定義麵包屑的最簡單方法？ 你來對地方了。 在本指南中，我們將了解如何在 WordPress 中輕鬆編輯麵包屑。 無論您是要替換主頁文本還是更改分隔符，我們都能滿足您的需求！

什麼是麵包屑，為什麼需要它們？

麵包屑是通常顯示在頁面/帖子頂部的導航鏈接，可幫助用戶探索整個網站的鏈接路徑。 通過這種方式，他們可以確定他們當前正在查看您網站的哪個部分，並只需單擊幾下即可返回分支頁面甚至主頁。 如果您經營的是 WooCommerce 商店或大型博客，則設置麵包屑對於您的導航需求至關重要。

好消息是，您可以根據網站的需求以各種方式輕鬆合併這些麵包屑。 通常，大多數用戶會根據層次結構設置麵包屑，因此麵包屑會根據網站的結構顯示類別和子類別。 這包括顯示用戶正在瀏覽的產品或頁麵類別或他們正在查看的子內容，以便他們可以隨時單擊返回更高的層次結構。

或者，您可以根據屬性設置麵包屑，以便根據查看者正在搜索的屬性顯示麵包屑。 您還可以使用歷史路徑並根據用戶在您網站上瀏覽過的過去頁面顯示麵包屑。

當然，在自定義麵包屑時，這還不是全部。 您可以將自定義麵包屑添加到不同的頁面，例如：

  • 標題存檔
  • 標記存檔
  • 網站下的頁面/帖子
  • 從主頁導航頁面
  • 搜索結果
  • 404錯誤頁面
  • 和更多

如您所見，麵包屑有大量的自定義項，以確保它們的顯示方式對您的網站結構以及您希望客戶如何瀏覽您的網站有意義。

如果您使用專用的麵包屑插件，它們很可能會提供自己的選項來自定義您想要的麵包屑。 但是，如果您使用的是 Yoast SEO 或WooCommerce 的麵包屑選項，那麼您可能需要使用一些編碼來進一步自定義它們。

在下一節中，我們將向您展示如何在 WordPress 中編輯麵包屑並啟用各種導航元素。

如何在 WordPress 中編輯麵包屑

首先，我們需要澄清自定義麵包屑的過程可能會有所不同，具體取決於您使用的是Yoast SEO、專用WordPress 插件還是WooCommerce 麵包屑。

在開始之前，我們還建議您查看本指南，以確保您已從頭開始正確設置麵包屑。

在本節中，您將學習在 WordPress 中編輯麵包屑的不同方法。

  1. 使用 Yoast SEO 自定義麵包屑
  2. 以編程方式編輯 WooCommerce 麵包屑

讓我們來看看每種方法。

1) 如何使用 Yoast SEO 在 WooCommerce 中編輯麵包屑

在 Yoast SEO 上啟用麵包屑導航後，您可以使用其專用設置對其進行配置。 為此，在您的 WordPress 管理儀表板中，轉到Yoast SEO > 搜索外觀並前往麵包屑選項卡。

在 wordpress 中編輯麵包屑 - Yoast SEO 設置

在這裡，您將能夠編輯您的麵包屑。 讓我們從主要步驟開始：

更改分隔符

使用麵包屑之間的分隔符選項，您可以更改麵包屑分隔符。

只需輸入您要使用的分隔符。 最常見的是“ | “ 或者 ”/”。

編輯主頁文本

您可以使用主頁選項的錨文本替換主頁文本。

只需使用該字段輸入您的新主頁文本，它將如下所示：

在wordpress-demo-yoast-seo-2中編輯麵包屑

更改存檔、搜索頁面和 404 頁面的前綴

使用 Yoast SEO，您還可以通過單獨更改存檔、搜索頁面結果和錯誤 404 頁面的前綴來編輯麵包屑。

只需在相應字段上添加所需的文本並保存更改。

您可以在此處了解有關內容類型和分類法的其他分類選項以及其他 Yoast SEO 選項的更多信息。

在 Yoast SEO 中將商店頁面麵包屑添加到您的 WooCommerce 商店

另一個有趣的替代方法是編輯functions.php文件並將 Shop 鏈接添加到您的麵包屑。 當您的客戶瀏覽您的 WooCommerce 商店頁面時，此鏈接將出現，因此如果您有在線商店，我們強烈建議您嘗試一下。

要打開您的functions.php文件，請轉到側邊欄上的外觀>主題編輯器，然後按右側邊欄上的functions.php ，顯示您的主題文件。

在 wordpress 中編輯麵包屑 - 函數文件

然後，只需複制並粘貼此腳本：

 add_filter('wpseo_breadcrumb_links', 'wpseo_breadcrumb_add_woo_shop_link');

功能 wpseo_breadcrumb_add_woo_shop_link（$鏈接）{
全球 $post;

如果 ( is_woocommerce() ) {
$麵包屑[] =數組（
'url' => get_permalink(woocommerce_get_page_id('shop')),
'文本' => '商店',
);

array_splice($links, 1, -2, $breadcrumb);
}

返回$鏈接；
}

然後，按更新，就是這樣。 如您所見，我們已將產品鏈接添加到麵包屑。

此外，如果您可以使用過濾器和函數，則可以使用wpseo_breadcrumb_single_link過濾器來自定義麵包屑路徑。 您可以在此處了解更多信息。

2) 如何以編程方式編輯 WooCommerce 麵包屑

如果您經營的是WooCommerce 商店，您還可以啟用和編輯專為WooCommerce 網站設計的麵包屑。 這些麵包屑只會在您的 WooCommerce 頁面上啟用，因此它是任何電子商務商店的完美選擇。

讓我們從基礎開始並在 WooCommerce 中啟用麵包屑。 為此，我們將使用基本的 WooCommerce 麵包屑代碼片段。

只需將以下PHP 代碼粘貼到您的主題文件中（我們個人建議將其添加到您的頭文件中） 。 在您的儀表板中，轉到 外觀 > 主題編輯器並選擇右側邊欄上的Header.php以在主題編輯器中打開文件。

然後，只需粘貼以下代碼段：

 <?php if (class_exists('WooCommerce') && is_woocommerce()) : ?>

<?php woocommerce_breadcrumb(); ?>

<?php endif; ?>

這將在您的商店頁面上啟用您的 WooCommerce 麵包屑。 但是，您也可以選擇使用一些漂亮的功能來自定義其元素。

請記住將這些代碼片段添加到您可以在外觀 > 主題編輯器 > functions.php下找到的functions.php文件中。

編輯 WooCommerce 麵包屑主頁文本

讓我們從一個基本示例開始，看看如何更改 WooCommerce 麵包屑的主頁文本。 只需將$defaults['Home'] = 'Home Page Text'行中的文本從 'Home Page Text' 更改為所需的文本。

 add_filter('woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text');
函數 wcc_change_breadcrumb_home_text( $defaults ) {
// 將麵包屑主頁文本從“Home”更改為“Apartment”
$defaults['home'] = '主頁文本';
返回$默認值；
}

編輯 WooCommerce BreadCrumbs 主頁文本鏈接

同樣，您可以使用類似的代碼片段從 WooCommerce 麵包屑中更改主頁鏈接。 記得在返回文本之後更改 URL 鏈接。 例如，對於您的代碼片段，您需要將http://quadlayers.com/blog替換為兩個引號之間所需的新鏈接“。

 add_filter('woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url');
功能 woo_custom_breadrumb_home_url() {
返回“http://quadlayers.com/blog”；
}

在 wordpress 中編輯麵包屑 - woocommerce 主頁鏈接

編輯 WooCommerce 麵包屑分隔符、文本前後等

您還可以使用默認數組函數來更改 WooCommerce 麵包屑的多個元素，例如分隔符、文本前後等等。

在代碼段中，只需將數組中“”部分之間的文本替換為以下代碼段中所需的文本：

 add_filter('woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs');
功能 jk_woocommerce_breadcrumbs() {
返回數組（
'分隔符' => ' > ',
'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
'wrap_after' => '</nav>',
'之前' => ' ',
'之後' => '文本之後',
'home' => _x('Home text', 'breadcrumb', 'woocommerce' ),
);
}

在 wordpress 中編輯麵包屑 - woocommerce 麵包屑數組

結果，分隔符和前後文本將發生變化。

您可以在此處查看其他代碼片段以在其文檔中自定義 WooCommerce 的麵包屑。

獎勵：添加您自己的麵包屑並設置樣式

如果您不想依賴 WooCommerce 或 Yoast SEO 怎麼辦？ 還有其他方法可以在 WordPress 中編輯麵包屑嗎？ 是的，有！ 您可以為您的麵包屑創建自己的自定義函數。 這允許您創建自定義麵包屑，您可以使用自定義 CSS 設置樣式。

對於熟悉 CSS 和 PHP 的經驗豐富的用戶來說，這是一個完美的選擇。 如果您是初學者並且不確定是否要設置自己的代碼和功能，我們強烈建議您使用這些麵包屑插件之一或使用我們上面提到的方法來自定義您的麵包屑。

如果您有足夠的經驗使用自己的功能，我們建議您在開始之前創建站點的完整備份並安裝子主題。 之後，您就可以開始了。

首先，轉到外觀 > 主題編輯器並將以下函數添加到您的functions.php文件中。

 函數get_breadcrumb（）{
echo '<a href='.home_url().' rel="nofollow">首頁</a>';
如果 (is_category() || is_single()) {
迴聲“&nbsp;/ &nbsp;”;
the_category(' &bull; ');
如果（is_single（））{
迴聲 " &nbsp;/ &nbsp; ";
標題（）;
}
} elseif (is_page()) {
迴聲“&nbsp;/”;
回顯 the_title();
} elseif (is_search()) {
echo "&nbsp;/$nbsp 搜索結果...";
迴聲'“<em>';
回顯 the_search_query();
迴聲'</em>"';
}
}

編輯自定義麵包屑的代碼以獲得更好的自定義

請記住，您可以使用代碼的特定部分來更改主頁文本和函數頂部的分隔符。

例如，您可以編輯以下行：

 echo '<a href='.home_url().' rel="nofollow">首頁</a>';

到

echo '<a href= https://quadlayers.com/blog rel="nofollow">首頁</a>';

或您想要的任何 URL。

最重要的是，您還可以更改分隔符，替換代碼中右側 echo 語句上的 /。

例如，您可以將分隔符從 / 替換為 >，如下所示：

 迴聲“&nbsp; > &nbsp;”;

請記住，僅添加&nbsp以包含分隔符之間和之後的空格。

然後，單擊更新文件以保存您的函數，然後按右側文件側欄上的Header.php 文件切換到您的主題頭文件。 現在，您需要通過將此代碼段添加到Header.php文件來將函數調用添加到頭文件。

 <?php custom_breadcrumbs(); ?>

而已！ 這就是您可以使用自定義函數在 WordPress 中編輯麵包屑的方式。

樣式化您的自定義麵包屑

您還可以使用主題的附加 CSS 部分設置麵包屑的樣式。 為此，只需轉到外觀 > 自定義並轉到附加 CSS部分，如下所示。

在 wordpress 中編輯麵包屑 - 附加 CSS

在這裡，您可以添加以下 CSS 片段並更改所需的值以設置樣式並自定義您的麵包屑。

 ＃麵包屑{
列表樣式：無；
邊距：10px 0；
溢出：隱藏；
}

#麵包屑李{
顯示：內聯塊；
垂直對齊：中間；
邊距右：15px；
}

#breadcrumbs .separator{
字體大小：18px；
字體粗細：100；
顏色：#ccc;
}

在 wordpress 中編輯麵包屑 - 添加 CSS

當然，您可以更改所有這些值並四處尋找最適合您網站主題的值。 一旦您對更改感到滿意，請記住按Publish 。

結論

總之，麵包屑對於幫助您的用戶瀏覽您的網站非常有用。 當您擁有在線商店或包含許多部分的網站時，這一點尤其重要。

在本指南中，您學習了在 WordPress 中編輯麵包屑的不同方法。 在自定義麵包屑之前，您需要使用以下方法之一進行設置：

  • 帶有專用的麵包屑插件
  • 使用 Yoast 搜索引擎優化
  • 使用 WooCommerce 的專用麵包屑掛鉤
  • 通過創建自己的麵包屑功能

配置它們後，您可以自定義它們。 在本指南中，我們看到了兩種方法：

  • 使用 Yoast SEO 編輯麵包屑
  • 以編程方式自定義 WooCommerce 麵包屑

如果您使用 Yoast SEO 並且沒有編碼技能，那麼第一種方法適合您。 另一方面，如果您有編碼技能並且想要更大的靈活性，您可以以編程方式自定義麵包屑。

如果您需要任何幫助，請在下面的評論中告訴我們，我們將盡我們所能為您提供幫助。

最後，如果您想了解更多關於為您的網站添加更多導航功能的信息，我們建議您查看以下一些文章：

  • 如何在 WordPress 中自定義 404 頁面
  • 在 WooCommerce 中隱藏和刪除相關產品
  • 如何自定義 WooCommerce 類別頁面