您是否正在尋找自定義麵包屑的最簡單方法？你來對地方了。在本指南中，我們將看到如何在 WordPress 中輕鬆編輯麵包屑。無論您是想替換主頁文本還是更改分隔符，我們都能滿足您的需求！
什麼是麵包屑，為什麼需要它們？
麵包屑導航鏈接通常顯示在頁面/帖子的頂部，可幫助用戶探索整個網站的鏈接軌跡。通過這種方式，他們可以確定他們當前正在查看您網站的哪個部分，然後只需單擊幾下即可返回分支頁面甚至主頁。如果您正在經營 WooCommerce 商店或大型博客，設置麵包屑對於您的導航需求至關重要。
好消息是您可以根據您網站的需求以各種方式輕鬆地合併這些麵包屑。通常，大多數用戶根據層次結構設置麵包屑，因此麵包屑根據網站的結構顯示類別和子類別。這包括顯示用戶正在瀏覽的產品或頁面的類別或他們正在查看的子內容，以便他們可以隨時單擊返回到更高的層次結構。
或者，您可以根據屬性設置麵包屑，以便根據查看者搜索的屬性顯示麵包屑。您還可以使用歷史路徑並根據用戶在您網站上瀏覽過的過去頁面顯示麵包屑。
當然，這並不是自定義麵包屑的全部。您可以將自定義麵包屑添加到不同的頁面，例如：
- 標題存檔
- 標籤存檔
- 網站下的頁面/帖子
- 從主頁導航
- 搜索結果
- 404錯誤頁面
- 和更多
正如您所看到的，麵包屑有大量的自定義設置，以確保它們的顯示方式對您的網站結構以及您希望客戶如何瀏覽您的網站有意義。
如果您使用專用的麵包屑插件，很可能它們帶有自己的專用選項，可以根據需要自定義您的麵包屑。但是，如果您使用 Yoast SEO 或 WooCommerce 的麵包屑選項，那麼您可能需要使用一些編碼來進一步自定義它們。
在下一節中，我們將向您展示如何在 WordPress 中編輯麵包屑並啟用各種導航元素。
如何在 WordPress 中編輯麵包屑
首先，我們需要澄清自定義麵包屑的過程可能會有所不同，具體取決於您使用的是 Yoast SEO、專用 WordPress 插件還是 WooCommerce 麵包屑。
在開始之前，我們還建議您查看本指南，以確保您已從頭開始正確設置麵包屑。
在本節中，您將學習在 WordPress 中編輯麵包屑的不同方法。
- 使用 Yoast SEO 自定義麵包屑
- 以編程方式編輯 WooCommerce 麵包屑
讓我們來看看每種方法。
1) 如何使用 Yoast SEO 在 WooCommerce 中編輯麵包屑
在 Yoast SEO 上啟用麵包屑後，您可以使用其專用設置對其進行配置。為此，在您的 WordPress 管理儀錶板中，轉到 Yoast SEO > 搜索外觀並前往麵包屑選項卡。
在這裡，您將能夠編輯麵包屑。讓我們從主要步驟開始：
更改分隔符
使用麵包屑之間的分隔符選項，您可以更改麵包屑分隔符。
只需輸入您要使用的分隔符。最常見的是「|」 或者 」/」。
編輯主頁文本
您可以使用主頁的錨文本選項替換主頁文本。
只需使用該欄位輸入您的新主頁文本，它將如下所示：
更改存檔、搜索頁面和 404 頁面的前綴
使用 Yoast SEO，您還可以通過單獨更改存檔、搜索頁面結果和錯誤 404 頁面的前綴來編輯麵包屑。
只需在相應的欄位上添加所需的文本並保存更改。
您可以在此處了解有關內容類型和分類法的其他分類法以及其他 Yoast SEO 選項的更多信息。
在 Yoast SEO 中將商店頁面麵包屑添加到您的 WooCommerce 商店
另一個有趣的替代方法是編輯functions.php 文件並將Shop 鏈接添加到您的麵包屑。當您的客戶瀏覽您的 WooCommerce 商店頁面時，將顯示此鏈接，因此如果您有在線商店，我們強烈建議您嘗試一下。
要打開您的functions.php 文件，請轉到側邊欄上的外觀> 主題編輯器，然後按右側邊欄上的functions.php 顯示您的主題文件。
然後，只需複製並粘貼此腳本：
add_filter(‘wpseo_breadcrumb_links’, ‘wpseo_breadcrumb_add_woo_shop_link’);
功能 wpseo_breadcrumb_add_woo_shop_link( $links ) {
global $post;
if ( is_woocommerce() ) {
$breadcrumb[] = array(
‘url’ => get_permalink( woocommerce_get_page_id( ‘shop’ ) ),
‘text’ => ‘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 文件中，您可以在外觀> 主題編輯器> 函數.php 下找到該文件。
編輯 WooCommerce 麵包屑主頁文本
讓我們從一個基本示例開始，看看如何更改 WooCommece 麵包屑的主頁文本。只需將 $defaults[‘Home’] = ‘Home Page Text’ 行中的文本從 ‘Home Page Text’ 更改為所需的文本。
add_filter(‘woocommerce_breadcrumb_defaults’, ‘wcc_change_breadcrumb_home_text’);
function wcc_change_breadcrumb_home_text( $defaults ) {
// 將麵包屑主頁文本從「Home」更改為「Apartment」
$defaults[‘home’] = ‘Home Page Text’;
返回 $defaults;
}
編輯 WooCommerce BreadCrumbs 主頁文本鏈接
同樣，您可以使用類似的代碼段從 WooCommerce 麵包屑中更改主頁鏈接。記住在返迴文本後更改 URL 鏈接。例如，對於您的代碼片段，您需要將 http://quadlayers.com/blog 替換為您需要的兩個引號「之間的新鏈接」。
add_filter(‘woocommerce_breadcrumb_home_url’, ‘woo_custom_breadrumb_home_url’);
函數 woo_custom_breadrumb_home_url() {
return ‘http://quadlayers.com/blog’;
}
編輯 WooCommerce 麵包屑分隔符、文本前後等
您還可以使用默認數組函數來更改 WooCommerce 麵包屑的多個元素，例如分隔符、文本前後等。
在代碼段中，只需將數組中「 」部分之間的文本替換為以下代碼段中所需的文本：
add_filter(‘woocommerce_breadcrumb_defaults’, ‘jk_woocommerce_breadcrumbs’);
function jk_woocommerce_breadcrumbs() {
return array(
‘delimiter’ => ‘ > ‘,
‘wrap_before’ => ‘<nav class=”woocommerce-breadcrumb” itemprop=”breadcrumb”>’,
‘wrap_after’ => ‘</nav> ‘,
‘before’ => ‘ ‘,
‘after’ => ‘After Text’,
‘home’ => _x(‘首頁文字’, ‘breadcrumb’, ‘woocommerce’),
);
}
因此，分隔符和前後文本將發生變化。
您可以在此處查看其他代碼片段以在其文檔中自定義 WooCommerce 的麵包屑。
獎勵：添加您自己的麵包屑並為其設置樣式
如果您不想依賴 WooCommerce 或 Yoast SEO，該怎麼辦？還有其他方法可以在 WordPress 中編輯麵包屑嗎？是的，有！您可以為麵包屑創建自己的自定義函數。這允許您創建可以使用自定義 CSS 設置樣式的自定義麵包屑。
對於熟悉 CSS 和 PHP 的更有經驗的用戶來說，這是一個完美的選擇。如果您更像是初學者並且不確定如何設置自己的代碼和功能，我們強烈建議您使用這些麵包屑插件之一或使用我們上面提到的方法來自定義您的麵包屑。
如果您有足夠的經驗使用自己的功能，我們建議您在開始之前創建站點的完整備份並安裝子主題。之後，您就可以開始了。
首先，轉到外觀 > 主題編輯器並將以下函數添加到您的 functions.php 文件中。
function get_breadcrumb() {
echo ‘<a href=’.home_url().’ rel=”nofollow”>首頁</a>’;
if (is_category() || is_single()) {
echo ” / “;
the_category(‘ • ‘);
if (is_single()) {
echo ” / “;
標題（）;
}
} elseif (is_page()) {
echo ” / “;
回聲 the_title();
} elseif (is_search()) {
echo ” / $nbsp 搜索結果… “;
echo ‘”<em>’;
echo the_search_query();
echo ‘</em>”‘;
}
}
編輯您的自定義麵包屑代碼以獲得更好的自定義
請記住，您可以使用代碼的特定部分來更改函數頂部的主頁文本和分隔符。
例如，您可以編輯以下行：
echo ‘<a href=’.home_url().’ rel=”nofollow”>首頁</a>’;
到
echo ‘<a href= https://quadlayers.com/blog rel=”nofollow”>首頁</a>’;
或任何您想要的 URL。
最重要的是，您還可以更改分隔符以替換代碼中右側 echo 語句上的 /。
例如，您可以將分隔符從 / 替換為 >，如下所示：
echo ” > “;
請記住，添加 只是為了在分隔符之間和之後包含一個空格。
然後，單擊更新文件以保存您的函數，然後按右側文件側欄上的 Header.php 文件切換到您的主題頭文件。現在，您需要通過將此代碼段添加到您的 Header.php 文件來將函數調用添加到您的頭文件中。
<?php custom_breadcrumbs(); ?>
就是這樣！這就是您可以使用自定義函數在 WordPress 中編輯麵包屑的方法。
樣式化您的自定義麵包屑
您還可以使用主題的附加 CSS 部分來設置麵包屑的樣式。為此，只需轉到外觀 > 自定義，然後轉到附加 CSS 部分，如下所示。
您可以在此處添加以下 CSS 片段並更改所需的值以設置樣式和自定義您的麵包屑。
#breadcrumbs{
列表樣式：無；
邊距：10px 0;
溢出：隱藏；
}
#breadcrumbs li{
display:inline-block;
垂直對齊：中間；
邊距右：15px；
}
#breadcrumbs .separator{
font-size:18px;
字體粗細：100；
顏色：#ccc;
}
當然，您可以更改所有這些值並四處尋找最適合您網站主題的值。一旦您對更改感到滿意，請記得按「發布」。
結論
總之，麵包屑導航對於幫助您的用戶瀏覽您的網站非常有用。當您擁有在線商店或包含多個部分的網站時，這一點尤其重要。
在本指南中，您學習了在 WordPress 中編輯麵包屑的不同方法。在自定義麵包屑之前，您需要使用以下方法之一進行設置：
- 使用專用的麵包屑插件
- 使用 Yoast SEO
- 使用 WooCommerce 的專用麵包屑鉤
- 通過創建自己的麵包屑功能
配置它們後，您可以自定義它們。在本指南中，我們看到了兩種方法：
- 使用 Yoast SEO 編輯麵包屑
- 以編程方式自定義 WooCommerce 麵包屑
如果您使用 Yoast SEO 並且沒有編碼技能，則第一種方法適合您。另一方面，如果您具有編碼技能並希望獲得更大的靈活性，則可以通過編程方式自定義麵包屑。
如果您需要任何幫助，請在下面的評論中告訴我們，我們會儘可能為您提供幫助。
最後，如果您想了解有關向網站添加更多導航功能的更多信息，我們建議您查看以下文章：