WordPress麵包屑:如何在您的WordPress網站上啟用它們

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

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

什麼是WordPress麵包屑?

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

只需移至Kinsta,即可將WordPress網站的速度提高200%。
        
          今天免費遷移

例如,考慮以下示例:

kinsta麵包屑示例

Kinsta博客上的麵包屑

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

麵包屑就是這樣命名的:它們創建了一條線索,將用戶引導到「家」。它們對於博客和在線商店等網站特別有用,在這些網站上,訪問者可能希望在各個帖子,產品頁面和類別歸檔之間移動,以找到相似的內容。

WordPress麵包屑如何工作?

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

  • 基於層次結構:這些麵包屑向用戶顯示他們在您網站的結構中的位置,如上例所示。

  • 基於屬性:這些痕迹主要在電子商務網站上使用,顯示用戶搜索的屬性,這些屬性將其引導至他們當前正在查看的產品。

  • 基於歷史記錄:隨著用戶在您的網站中從一個頁面移到另一個頁面,這些麵包屑將帶回他們來到的方式。

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

它們也有利於SEO。麵包屑清楚地顯示了您網站上不同內容之間的關係。這樣一來,搜索引擎抓取工具或「機器人」可以更輕鬆地了解您網站的結構。

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

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

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

1.在Yoast SEO中啟用麵包屑

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

如果尚未安裝插件,請在WordPress儀錶板中安裝並激活該插件:

安裝yoast seo

安裝Yoast SEO插件

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

<?php
如果(function_exists('yoast_breadcrumb')){
  yoast_breadcrumb('

');
}
?>

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

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

編輯標題php

添加Yoast麵包屑激活代碼

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

酵母麵包屑設置

Yoast SEO麵包屑設置

將「麵包屑」設置開關切換為啟用。然後,預覽您的網站:

實時麵包屑示例

包含Yoast SEO的活麵包屑

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

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

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

麵包屑NavXT

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

麵包屑導航

麵包屑NavXT插件

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

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

麵包屑navxt小部件

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

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

麵包屑導航欄位

麵包屑NavXT小部件選項

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

麵包屑導航

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

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

麵包屑

另外,Flexy Breadcrumb是為WordPress添加麵包屑的最受好評的插件:

彎曲麵包屑

Flexy Breadcrumb插件

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

安裝Flexy Breadcrumbs之後,您會在信息中心的側邊欄中看到一個新項目:

靈活的麵包屑儀錶板

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

然後,您將需要配置一些設置。在常規選項卡中,您可以更改主頁的文本和圖標,設置字元限制並確定層次結構:

柔韌的麵包屑一般

Flexy Breadcrumb常規設置

在「版式」選項卡中,您還可以調整麵包屑的字體顏色和大小:

彎曲的麵包屑排版

靈活的麵包屑版式設置

自定義足跡之後,您需要在想要出現麵包屑的任何地方添加(flexy_breadcrumb)短代碼。雖然您可以在網站上發布的每個帖子中都可以執行此操作,但是將短代碼添加到WordPress小部件中會更有效:

靈活的麵包屑直播

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

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

WooCommerce麵包屑

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

woocommerce麵包屑

WooCommerce麵包屑插件

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

安裝和激活後,您可以導航至設置> WC麵包屑以自定義麵包屑軌跡:

woocommerce麵包屑設置

WooCommerce麵包屑設置頁面

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

woocommerce麵包屑直播

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

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

麵包屑

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

Breadcrumb「 width =」 1500「 height =」 475「 src =」 https://kinsta.com/wp-content/uploads/2019/10/breadcrumb-1.png「>


<p class=麵包屑插件

該插件具有本文中列出的所有設置中最廣泛的設置。您可以通過在WordPress儀錶板側欄中單擊Breadcrumb來訪問它們:

麵包屑儀錶板鏈接

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

第一個標籤標記為「選項」,其中包括一些常規設置,例如自定義文本,分隔符和字元限制:

麵包屑常規設置

麵包屑插件設置頁面

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

麵包屑樣式設置

Breadcrumb插件樣式選項

如果您具有一些編碼技能,並且想要對樣式進行更多控制,則還可以使用「自定義CSS」選項卡:

麵包屑自定義CSS

麵包屑插件自定義CSS欄位

最後,訪問Shortcode標籤很重要,以便將麵包屑添加到您的網站中:

麵包屑簡碼選項

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

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

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

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

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

但是,如果您要啟動一個新的WordPress網站或正在執行網站重新設計,則選擇包含麵包屑的主題是將它們添加到您的網站的省力方法。另外,WordPress主題目錄中有幾個可用的免費選項。

海洋WP

OceanWP是最受歡迎的多功能WordPress主題之一:

oceanwp主題

OceanWP主題

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

添加oceanwp簡碼

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

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

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

只需在短代碼括弧內添加任何或所有這些參數:

oceanwp麵包屑參數

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

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

阿斯特拉

同樣,Astra還使添加麵包屑到您的站點變得容易:

阿斯特拉主題

阿斯特拉主題

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

阿斯特拉訪問定製器

從WordPress儀錶板訪問定製程序

然後,選擇“麵包屑''選項卡:

Astra Customr麵包屑

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

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

阿斯特拉麵包屑位置

選擇Astra主題的麵包屑位置

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

阿斯特拉麵包屑樣式

Customizer中的Astra麵包屑樣式選項

確保單擊定製程序發布按鈕以保存更改。

4.手動添加麵包屑

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

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

函數get_breadcrumb(){
回聲「』;
如果(is_category()|| is_single()){
回聲「»」;
the_category(「•」);
如果(is_single()){
回聲「»」;
標題();
}
} elseif(is_page()){
回聲「»」;
回聲the_title();
} elseif(is_search()){
回聲「»」;搜索結果為…
回聲「」』;
回聲the_search_query();
回聲「
」』;
}
}

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

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

修改這些文件將在您的網站上顯示麵包屑,但是您無法對其進行樣式設置以使其與設計相匹配。為此,您還需要掌握一些CSS。

如何設置WordPress麵包屑的樣式

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

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

定製器附加CSS

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

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

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

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

CSS有很多可能性。因此,可能需要進行一些嘗試才能使麵包屑看起來像您想要的樣子。

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

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

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

禁用添加有插件的麵包屑通常與停用插件一樣簡單。如果是Yoast SEO,則可以導航到“搜索外觀''設置中的“麵包屑''選項卡,然後將相關開關切換為“禁用''。

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

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

查找麵包屑代碼

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

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

如果其他所有操作均失敗,請與主題的開發人員聯繫以尋求支持。請注意,更新WordPress主題可能會覆蓋您對其文件所做的任何更改。因此,最佳做法建議出於這個原因而建議使用子主題,以便無限期保留您的自定義設置。

麵包屑是微小的元素,會對您的UX和SEO產生巨大影響。通過本指南了解如何將它們添加到您的#WordPress網站! ??

點擊鳴叫

摘要

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

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

  1. 在Yoast SEO中打開麵包屑。
  2. 安裝和配置WordPress麵包屑插件。
  3. 使用包含麵包屑的主題。

  4. 使用代碼手動添加麵包屑。

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

0分享

.essb_links .essb_links_list li a {
  margin-top:0px;
}
@media only屏幕和(最小寬度:64em){
  .container–narrow.pb–60,
  .knowledgebase .user-content {
    職位:相對
  }
  .widget-share {
    位置:絕對;
    左:-200px;
    頂部:0px;
    高度:100%;
    寬度:200像素;
    框大小:border-box;
  }
  .widget-share-aligner {
    寬度:200像素;
    padding-right:62px;
    框大小:border-box;
  }
html(lang =「 nl」).widget-share-aligner {
    寬度:210像素;
  }
  .widget-share-inner {
    padding-bottom:62px;
  }
  .knowledgebase .user-content .widget-share-inner {
    padding-top:0;
  }
  .widget-share .amount {
    顯示:flex;
    align-items:居中;
    證明內容:flex-end;
    寬度:100%;
    右邊距:11px;
    font-size:14px;
    font-weight:500;
    底邊距:10px;
  }
  .widget-share .amount svg {
    右邊距:8px;
    margin-left:10px;
  }
  .essb_links .essb_links_list {
    flex-direction:列;
    align-items:flex-end;
  }
  .essb_links .essb_links_list li {
    顯示:塊;
    margin-bottom:5px!important;
  }
  .widget-share__total {
    margin-bottom:0px!重要;
  }
  .widget-share__total .heading–small {
    顏色:#999999;
    font-size:14px;
    字體粗細:300;
  }
  .essb-total-value {
    margin-right:4px;
  }

}
.essb_links {
  保證金:0px;
  填充:0px;
}
.essb_counter_right {
  顯示:無!重要;
}
.essb_links.essb_template_circles-retina .essb_link_hackernews一個,
.essb_links.essb_template_circles-retina .essb_link_reddit a,
.essb_links.essb_template_circles-retina .essb_link_mail a,
.essb_links.essb_template_circles-retina .essb_link_mwp一個,
.essb_links.essb_template_circles-retina .essb_link_buffer a,
.essb_links.essb_template_circles-retina .essb_link_linkedin a,
.essb_links.essb_template_circles-retina .essb_link_facebook a,
.essb_links.essb_template_circles-retina .essb_link_twitter a
 {
  顏色:#43414e!important;
  背景:#f3f3f6!important;
}

.essb_links.essb_template_circles-retina li a:focus,.essb_links.essb_template_circles-retina li a:hover {
  border-color:#fff!important;
  背景:#43414e!重要;
}

.essb_links.essb_template_circles-retina a {
  border-color:#f3f3f6!important;
  背景:#f3f3f6;
}
.essb_links .essb_icon:之前{
  font-size:15px!important;
  頂部:8px;
  左:9px;
}
.essb_links .essb_icon {
  寬度:32px;
  高度:32px;
}
.essb_links.essb_counter_modern_right .essb_counter_right {
  背景:#f3f3f6!important;
}
@media only屏幕和(最大寬度:63.999em){
  .widget-share-aligner {
    位置:相對!重要;
    top:0!重要;
  }
  .essb_links .essb_links_list li {
    margin-right:8px!important;
  }
}

相關文章