儘管名稱很普通,但麵包屑還是用於改善網站的用戶體驗(UX)和 搜索引擎優化(SEO)。在插件或少量自定義代碼的幫助下,啟用它們很簡單。

在這篇文章中,我們將向您介紹 WordPress麵包屑 並解釋它們如何工作。然後,我們將向您展示如何將它們添加到您的網站,設置其樣式並刪除它們。有很多內容要介紹,所以讓我們開始吧!

什麼是WordPress麵包屑?

與WordPress(或任何網站)相關的麵包屑是顯示在帖子或頁面頂部的導航鏈接。他們向用戶展示 較高級別的類別 引導他們轉到當前正在查看的內容,還可以輕鬆導航回以前查看的頁面。

例如,考慮以下示例:

kinsta breadcrumbs example

Kinsta博客上的麵包屑

在標題的左側,右側下方,您可以看到單詞 主頁>資源中心> Kinsta博客。每個都是從當前帖子返回到其對應頁面的鏈接。這使讀者 在我們的博客上 只需單擊一下即可導航到這些關鍵內容區域中的任何一個,而不必使用 背部 按鈕, 菜單,或搜索功能。

這就是麵包屑的名稱:它們創建了一條線索,將用戶引導到“家”。它們對於博客和 網上商店,訪問者可能希望在各個帖子之間切換, 產品頁面,以及可以在其中找到相似內容的類別檔案。

WordPress麵包屑如何工作?

有三種不同類型的WordPress麵包屑。如上所述,所有功能都包含導航鏈接,但方式略有不同:

  • 基於層次結構: 如上例所示,這些麵包屑向用戶顯示了它們在您的網站結構中的位置。
  • 基於屬性: 這些麵包屑主要在電子商務網站上使用,顯示用戶搜索的屬性,這些屬性將其引導到他們當前正在查看的產品。
  • 基於歷史記錄: 當用戶在您的網站上從一個頁面移到另一個頁面時,這些麵包屑將帶回它們的出現方式。

各種麵包屑可用於不同目的。但是,所有可以 改善導航 和擴展UX。

他們也是 有利於SEO。麵包屑清楚地顯示了您網站上不同內容之間的關係。這樣,它們使搜索引擎爬網程序或“機器人”更容易了解您的網站結構。

這使這些漫遊器可以更準確地為您的網站頁面編制索引。搜索引擎可能還會顯示您的 結果列表中的麵包屑,因此用戶可以在您的網站上看到與其所需信息有關的其他內容。

如何將WordPress麵包屑添加到您的網站(4種方法)

無論您是編碼專家還是WordPress初學者,都可以通過幾個步驟快速輕鬆地將麵包屑添加到您的網站。您可以通過以下四種不同方式完成此任務。

1.在Yoast SEO中啟用麵包屑

Yoast SEO 是一個受歡迎的插件,可以幫助WordPress用戶估算其搜索引擎排名並相應地優化其內容。它還包括其他一些可增強網站可見性的功能,包括麵包屑。

如果尚未安裝,請在您的計算機上安裝並激活該插件 WordPress儀表板:

install yoast seo

安裝Yoast SEO插件

接下來,您需要添加 此代碼段 您的主題:


 ','

'); }?>

具體來說,添加位置取決於您自己。如果您想在博客文章中使用麵包屑,可以將其添加到您的博客文章中 single.php 模板文件。

或者,將其粘貼到您的末尾 header.php 文件會將麵包屑添加到您的整個網站:

edit header php

添加Yoast麵包屑激活代碼

請記住,將來的主題更新可能會覆蓋此自定義代碼。您需要與主題開發人員聯繫,以獲取有關如何避免此問題的信息,或者只是 使用兒童主題。摘錄到位後,導航到 SEO>搜索外觀>麵包屑 在您的信息中心中:

yoast breadcrumbs settings

Yoast SEO麵包屑設置

切換 麵包屑設置 切換到 已啟用。 然後,預覽您的網站:

live breadcrumbs example

帶有Yoast SEO的活麵包屑

現在,根據添加代碼段的位置,您應該在網站的相關部分看到麵包屑。

2.使用WordPress麵包屑插件啟用麵包屑

如果您已經將該插件用於SEO,則在Yoast中添加麵包屑特別方便。但是,如果您希望使用其他插件 優化內容,上述方法的用處不大。幸運的是,還有其他幾個可用的插件專門用於向WordPress添加麵包屑。

麵包屑NavXT

除了Yoast之外,用於將麵包屑添加到WordPress的最受歡迎的插件是 麵包屑NavXT:

breadcrumb navxt

麵包屑NavXT插件

該插件提供了一個麵包屑小部件,您可以將其添加到主題提供的任何小部件區域,例如邊欄或頁腳。它是高度可定制的,使您可以選擇在跟踪中顯示哪些頁面和類別。麵包屑NavXT還包括用於改善SEO的架構標記。

要使用此插件添加麵包屑,請導航至 外觀>小部件。您會看到一個新的 麵包屑NavXT 小部件,您需要將其拖動到您希望其出現的小部件區域:

breadcrumb navxt widget

將Breadcrumb NavXT小部件添加到頁腳區域

單擊下拉箭頭以打開小部件設置,然後填寫必填字段:

breadcrumb navxt fields

麵包屑NavXT小部件選項

確保根據需要選中復選框,以將鏈接添加到麵包屑,確定其順序,將其隱藏在首頁上並忽略緩存。完成後,請點擊 保存 按鈕,然後檢查網站的前端:

breadcrumb navxt live

使用Breadcrumb NavXT小部件創建的麵包屑

麵包屑現在應該在為它們選擇的任何窗口小部件區域中都可見。

麵包屑

作為備選, 麵包屑 是為WordPress添加麵包屑的最受好評的插件:

flexy breadcrumb

Flexy Breadcrumb插件

安裝並激活此插件後,您可以使用[flexy_breadcrumb]短代碼將麵包屑添加到您的站點。這使您可以更靈活地顯示路徑。您還可以更好地控製樣式組件,例如 字體大小,顏色和圖標.

安裝Flexy Breadcrumbs之後,您會在儀表板側欄中看到一個新項目:

flexy breadcrumb dashboard

WordPress儀表板側欄中的Flexy Breadcrumb鏈接

然後,您將需要配置一些設置。在裡面 一般 標籤,您可以更改主頁的文本和圖標,設置字符數限制並確定層次結構:

flexy breadcrumb general

Flexy Breadcrumb常規設置

在裡面 版式 標籤,您還可以調整麵包屑的字體顏色和大小:

flexy breadcrumb typography

靈活的麵包屑版式設置

自定義足蹟之後,您需要在想要麵包屑出現的任何位置添加[flexy_breadcrumb]短代碼。雖然您可以在網站上發布的每個帖子中都可以這樣做,但是將簡碼添加到 WordPress小部件:

flexy breadcrumb live

前端有一條彎曲的麵包屑小徑

如果您檢查站點的前端,則無論在何處添加短代碼,都應該能夠看到顯示的麵包屑。

WooCommerce麵包屑

對於在線零售商, WooCommerce麵包屑 是將導航鏈接添加到產品頁面的簡便方法:

woocommerce breadcrumbs

WooCommerce麵包屑插件

如果您使用流行的WooCommerce插件運行在線商店,那麼這可能是您的最佳選擇。它使您可以激活產品頁面的麵包屑,以改善網站上的客戶導航。

安裝和激活後,您可以導航到 設置> WC麵包屑 自定義麵包屑路徑:

woocommerce breadcrumbs settings

WooCommerce麵包屑設置頁面

要考慮的最重要的設置是 啟用麵包屑 複選框。您必須確保已選中它才能顯示麵包屑。然後,檢查您的產品頁面之一:

woocommerce breadcrumbs live

啟用了麵包屑的WooCommerce產品頁面

您的麵包屑跟踪應該在頁面頂部可見。

麵包屑

最後, 麵包屑 是一個輕量級的插件,使您可以使用簡碼在站點的任何位置添加麵包屑:

breadcrumb

麵包屑插件

該插件具有本文中列出的所有設置中最廣泛的設置。您可以通過單擊訪問它們 麵包屑 在WordPress資訊主頁中:

breadcrumb dashboard link

WordPress儀表板側欄中的麵包屑鏈接

第一個標籤被標記為 選件,並包括一些常規設置,例如自定義文本,分隔符和字符限制:

breadcrumb general settings

麵包屑插件設置頁面

還有一個專門用於樣式選項的選項卡。您可以選擇幾個箭頭按鈕,以及字體大小和顏色:

breadcrumb styling settings

Breadcrumb插件樣式選項

如果您具有一些編碼技能,並且想要更好地控製樣式,則還可以使用 自定義CSS 標籤:

breadcrumb custom css

Breadcrumb插件“自定義CSS”字段

最後,重要的是要訪問 短代碼 標籤,以便將麵包屑添加到您的網站:

breadcrumb shortcode options

Breadcrumb插件的簡碼和代碼段選項

您可以在網站上的任何地方使用簡碼,就像我們介紹的其他插件一樣。但是,Breadcrumb還提供了一個代碼段,您可以將其添加到一個模板文件中,以將跡線合併到頁眉,頁腳或其他位置。

3.使用包含麵包屑的主題

雖然通常在控製網站外觀的上下文中考慮它們,但是WordPress主題也會影響您網站的功能。他們做到這一點的一種方法是在頁面上添加麵包屑。

使用WordPress主題將麵包屑添加到現有WordPress網站的缺點是,它還涉及更改網站的外觀。如果您已經建立了品牌和站點標識,那麼這實際上不是一個實用的解決方案,並且使用插件可能會更好。

但是,如果 您正在啟動一個新的WordPress網站 或正在重新設計網站, 選擇一個主題 包含麵包屑的一種省力方法是將它們添加到您的網站。另外,在 WordPress主題目錄.

海洋WP

海洋WP 是最受歡迎的多功能WordPress主題之一:

oceanwp theme

OceanWP主題

它包含一個短代碼,可用於輕鬆將麵包屑應用於頁面。也有幾個 演示可用 與包含麵包屑的OceanWP一起使用。要使用簡碼,只需將[oceanwp_breadcrumb]添加到帖子,頁面或文本小部件中:

add oceanwp shortcode

將OceanWP麵包屑簡碼添加到文本小部件

您可以使用以下參數來自定義麵包屑:

  • 類:包含自定義CSS類。
  • 顏色:更改文本的顏色。
  • 懸停顏色:當用戶將鼠標懸停在麵包屑上時,更改文本的顏色。

只需將這些參數中的任何一個或全部添加到短代碼括號中即可:

遇到停機和WordPress問題嗎? Kinsta是一款託管解決方案,設計時考慮了性能和安全性! 查看我們的計劃

oceanwp breadcrumb parameters

使用簡碼參數自定義OceanWP麵包屑

現在,您應該在相關頁面上看到麵包屑。

阿斯特拉

同樣 阿斯特拉 還可以輕鬆地將麵包屑添加到您的網站:

astra theme

阿斯特拉主題

使用Astra啟用麵包屑的最直接方法是通過定製程序。安裝並激活主題後,導航至 外觀>定制:

astra access customizer

從WordPress儀表板訪問定製程序

然後,選擇 麵包屑 標籤:

astra customizer breadcrumbs

定製程序中的Astra麵包屑選項卡

在這裡,您會看到一個下拉菜單,可讓您選擇要在頁面上顯示麵包屑的位置:

astra breadcrumb position

選擇Astra主題的麵包屑位置

做出選擇後,也會出現一些樣式選項:

astra breadcrumb styling

Customizer中的Astra麵包屑樣式選項

確保單擊定制器 發布 按鈕以保存您的更改。

4.手動添加麵包屑

插件和主題是使WordPress成為用戶友好且可訪問的平台的一部分。但是,對於一些更高級的用戶和開發人員,他們可能會感到局限。代碼可以是一種非常有創意的媒介,並且具有自由編寫自己的麵包屑的能力可能會吸引您。

要手動顯示麵包屑,您需要做兩件事。首先,您必須向自己的功能添加 functions.php 文件以啟用它們。這是 一個例子 您可能使用的代碼:


功能get_breadcrumb(){迴聲'家庭';如果(is_category()|| is_single()){回顯“»”; the_category('•'); if(is_single()){回顯“»”;標題(); }}} elseif(is_page()){迴聲“»”;迴聲the_title(); } elseif(is_search()){echo“»”;搜索結果為…echo'“ ';迴聲the_search_query();回顯“”; }}

添加函數後,您需要在希望出現麵包屑的模板文件中調用它。在中調用函數 single.php 將使麵包屑出現在您的帖子中,並在其中調用 header.php 在標題出現的任何地方顯示它們,依此類推。

您將使用的代碼應如下所示:



修改這些文件將在您的站點上顯示麵包屑,但不允許您設置其樣式以使其與設計相匹配。為此,您還需要動手使用一些CSS。

如何設置WordPress麵包屑的樣式

如果要自己編寫麵包屑,則必須為其設置樣式。但是,如果您使用插件或主題來添加它們,也可能會有所幫助。這些工具提供的默認樣式可能不適合您的網站,在這種情況下,您可能需要對其進行調整以保持一致性。

您可以 添加自定義CSS 在主題的樣式表(style.css)或“定制器”的“其他CSS”區域中設置麵包屑的樣式:

customizer additional css

通過自定義程序結合其他CSS來對麵包屑進行樣式設置

您可以通過多種方法來調整麵包屑,使其與您的網站設計相匹配,例如通過調整其字體,大小和顏色。您可能還會考慮諸如邊距,填充,邊框和圖標之類的元素。

這是一些CSS的示例,可用於設置麵包屑的樣式:


.breadcrumb {填充:8px 15px;底邊距:20px;列表樣式:無;背景顏色:#f5f5f5; border-radius:4px; } .breadcrumb a {color:#428bca;文字修飾:無; }

CSS的許多可能性。因此,可能需要進行一些嘗試才能使麵包屑看起來完全符合您的需求。

如何從您的網站中刪除WordPress麵包屑

儘管在您的網站上添加麵包屑有很多好處,但這並不意味著它們適合所有人。某些人可能會感到困惑,或者覺得他們使網站的頁面過於混亂。

如果要從WordPress網站中刪除麵包屑,則可以根據最初添加它們的方式使用任何有意義的方法來刪除。例如,如果您對麵包屑進行了自定義編碼,則只需刪除從主題文件中添加的代碼即可。

禁用添加有插件的麵包屑通常與停用插件一樣簡單。對於Yoast SEO,您可以導航到 麵包屑 標籤中 搜索外觀 設置,然後將相關開關切換到 禁用.

對於通過設置或啟用麵包屑的主題也可以這樣說。 WordPress簡碼。但是,有些主題默認情況下會添加麵包屑。刪除這些代碼可能會有些棘手,特別是如果您對代碼不熟悉的話。

如果是這種情況,則需要導航到您網站的 header.php 文件。在那裡,運行“麵包屑”搜索命令。這應該突出顯示調用將麵包屑添加到您的站點的函數的代碼(如果在此處存在):

find breadcrumb code

在主題標題模板文件中查找麵包屑代碼

刪除此行代碼以從您的站點中刪除麵包屑。如果找不到正確的代碼,則可以在您的計算機中再次嘗試此過程 single.phppage.php 文件,以查看是否在這些模板之一中調用了該函數。

如果其他所有方法均失敗,請與您的 主題的開發者 為了支持。注意 更新您的WordPress主題 可能會覆蓋您對其文件所做的任何更改。因此,最佳做法建議使用 兒童主題 因此,為了無限期保留您的自定義設置。

/ *點擊鳴叫* /
正文a.novashare-ctt {
顯示:塊;
背景:#00abf0;
邊距:30px自動;
填充:20px 20px 20px 15px;
顏色:#ffffff;
文字修飾:無!重要;
box-shadow:無!重要;
-webkit-box-shadow:無!重要;
-moz-box-shadow:無!重要;
邊框:無;
左邊框:5px實心#00abf0;
}
正文a.novashare-ctt:hover {
顏色:#ffffff;
左邊框:5px實心#008cc4;
}
正文a.novashare-ctt:visited {
顏色:#ffffff;
}
正文a.novashare-ctt * {
指針事件:無;
}
正文a.novashare-ctt .novashare-ctt-tweet {
顯示:塊;
font-size:18px;
行高:27px;
底邊距:10px;
}
正文a.novashare-ctt .novashare-ctt-cta-container {
顯示:塊;
溢出:隱藏;
}
正文a.novashare-ctt .novashare-ctt-cta {
浮動:正確;
}
正文a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta {
向左飄浮;
}
正文a.novashare-ctt .novashare-ctt-cta-text {
font-size:16px;
行高:16px;
垂直對齊:中間;
}
正文a.novashare-ctt .novashare-ctt-cta-icon {
左邊距:10px;
顯示:inline-block;
垂直對齊:中間;
}
正文a.novashare-ctt .novashare-ctt-cta-icon svg {
垂直對齊:中間;
高度:18px;
}
/ *簡單+簡單備用主題* /
正文a.novashare-ctt.novashare-ctt-simple {
背景:無;
填充:10px 0px 10px 20px;
顏色:初始;
}
正文a.novashare-ctt.novashare-ctt-simple-alt {
背景:#f9f9f9;
填充:20px;
顏色:初始;
}
正文a.novashare-ctt.novashare-ctt-simple:hover,正文a.novashare-ctt.novashare-ctt-simple-alt:hover {
左邊框:5px實心#008cc4;
}
正文a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,正文a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta {
顏色:#00abf0;
}
正文a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta,正文a.novashare-ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta {
顏色:#008cc4;
}

概要

強大的UX和SEO都是成功建立網站的關鍵。啟用WordPress麵包屑可以使訪問者更輕鬆地瀏覽您的整個網站,同時還可以幫助搜索引擎了解其結構並準確地為您的頁面編制索引。

在本文中,我們介紹了將麵包屑添加到WordPress網站的四種方法:

  1. 打開麵包屑 Yoast SEO.
  2. 安裝和配置WordPress麵包屑插件。
  3. 使用主題 包括麵包屑。
  4. 使用代碼手動添加麵包屑。

您對WordPress麵包屑或如何使用它們有任何疑問嗎?讓我們在下面的評論部分中知道!