麵包屑導航用於告訴網站訪客在網站上相對於主頁的位置。然後,此麵包屑路徑也會顯示在搜尋結果中,有利於網站SEO優化。
在本教程中,我們將展示如何在WordPress設定顯示麵包屑導航選單。
What is Breadcrumb Navigation and Why Do You Need it?
Breadcrumb navigation is a term used to describe a hierarchical navigation menu presented as a trail of links. It’s often used as a secondary navigation that allows users to go up in the website’s hierarchy of pages.
什麼是及為什麼需要麵包屑導航?
麵包屑導航是一個術語,用於描述顯示為連結軌跡的分層導航選單。它通常用作輔助導航,允許使用者在網站的頁面層次結構中向上移動。
麵包屑導航連結不同於WordPress 中的預設導航選單系統。
麵包屑導航的目的是幫助使用者瀏覽您的網站。它還可以幫助搜尋引擎瞭解網頁上鍊接的結構和層次結構。
如果您的麵包屑設定正確,那麼像Google這樣的搜尋引擎會在搜尋結果中將它們與頁面標題一起顯示。這使您的網站在搜尋結果中的可見度更高,並提高了點選率。
本教程中的方法將幫助您使用架構標記正確設定麵包屑。Schema是一種智慧標記程式碼,可幫助Google識別您的麵包屑,以便它們顯示在搜尋結果中。
話雖如此,讓我們來看看如何在WordPress中新增麵包屑導航連結。我們將向您展示兩種方法,您可以選擇最適合您的一種。
方法 1. 使用All in One SEO外掛新增WordPress麵包屑導航
這種方法更簡單,推薦給所有WordPress使用者。
對於這種方法,我們將使用All in One SEO,這是市場上最流行的 WordPress SEO 外掛之一(我們的SEO外掛-Smart SEO Tool更加符合中國站長的使用習慣)。它可以幫助您輕鬆提高WordPress SEO,而無需任何技術技能。它還帶有易於使用的麵包屑功能。
注意:還有一個免費版本All in One SEO,功能有限,包括麵包屑。
啟用外掛後,開始外掛的設定嚮導,你只需要按照頁面上的說明設定外掛。
在設定方面需要幫助?請參閱有關如何安裝和設定All in One SEO教程。
接下來,您需要訪問All in One SEO » General Settings頁面並切換到Breadcrumbs選項卡。
現在麵包屑結構化資料標記由All in One SEO自動新增到您網站的程式碼中,以便搜尋引擎可以找到它。
但是,如果您也想在您的網站上顯示麵包屑導航連結,則需要開啟“Enable Breadcrumbs”選項。切換開關可以讓您看到可以在您的網站上使用的不同麵包屑顯示設定。
您可以使用四種方式在WordPress網站上顯示麵包屑導航選單。
1. 使用簡碼新增麵包屑導航
短程式碼方法很簡單,支援在WordPress文章和頁面或網上商城的產品頁面中顯示麵包屑導航選單。
只需編輯文章、頁面或產品,並在要顯示麵包屑導航選單的位置新增以下短程式碼。
[aioseo_breadcrumbs]
如果您使用的是預設塊編輯器,則短程式碼將自動轉換為短程式碼塊。
您現在可以儲存文章或頁面並預覽它以檢視正在執行的麵包屑導航選單。下面是一個測試站點的麵包屑導航選單示例:
2. 使用古騰堡區塊新增麵包屑導航
如果您不想使用簡碼選項,或者不記得簡碼,那麼您可以使用“AIOSEO – Breadcrumbs”區塊顯示麵包屑導航。
只需編輯要顯示麵包屑導航的文章或頁面,然後新增 AIOSEO – Breadcrumbs 區塊。
然後外掛將載入麵包屑導航選單的實時預覽並將其顯示在內容區域中。
不要忘記更新或釋出您的更改。
3. 使用小工具新增麵包屑導航
以上兩種方法要求您在要顯示麵包屑導航選單的每個文章或頁面中新增短程式碼或區塊。
如果您想為每個文章或頁面自動顯示麵包屑選單怎麼辦?
AIOSEO Breadcrumbs小工具可幫助您做到這一點。只需轉到外觀»小工具頁面並將“AIOSEO – Breadcrumbs”小工具新增到側邊欄。
您可以為小工具設定標題,也可以根據需要將其留空。不要忘記單擊“儲存”按鈕來儲存您的設定。
訪問您的網站,將在所有文章和頁面上看到麵包屑導航選單。
4. 使用程式碼新增麵包屑導航
此方法支援在所需位置準確顯示麵包屑導航選單。但是,它要求您將程式碼新增到WordPress主題檔案中。
首先,您需要決定要在何處顯示麵包屑選單。顯示麵包屑選單的最常見位置是在單個文章、頁面或產品標題下方。
WordPress主題使用模板檔案來顯示您網站的不同部分。例如,許多主題會使用一個名為 content-single.php 的檔案,該檔案位於主題的 template-parts 資料夾中。
然後,您需要使用FTP客戶端編輯主題檔案。然後將以下程式碼放在要顯示麵包屑導航選單的位置。
<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>
不要忘記儲存更改並將檔案上傳覆蓋原來的檔案(切記做好備份工作)。
再次訪問網站以檢視正在執行的麵包屑導航選單。
更改麵包屑導航選單在AIOSEO中的顯示方式
現在預設情況下,All in One SEO使用模板來顯示網站麵包屑導航選單。它包含指向您的主頁、類別或父頁面的連結,以及以 » 分隔的文章或頁面標題。
您可以通過訪問All in One SEO»General Settings頁面並向下滾動到Breadcrumb Settings部分來更改它。
從這裡,您可以更改分隔符、顯示或隱藏主頁連結、新增字首等。
完成後,不要忘記單擊“Save Changes”按鈕來儲存您的設定。
方法 2. 使用Breadcrumb NavXT外掛新增麵包屑導航選單
此方法可與任何其他WordPress SEO外掛一起使用。如果您有相容的主題,它很容易使用,但如果沒有,則需要編輯主題檔案以顯示麵包屑導航連結。
首先您需要安裝並啟用Breadcrumb NavXT外掛。
啟用外掛後,您需要訪問Settings » Breadcrumb NavXT頁面來配置外掛設定。
預設設定應該適用於大多數網站。但是,您可以根據需要自定義設定。
設定頁面分為不同的部分。在常規設定選項卡上,您可以更改麵包屑的樣式和設定。
您還會注意到這些連結模板在連結標籤中使用了Schema.org標記。
外掛設定下的文章型別選項卡支援您為文章、頁面和任何自定義帖子型別設定麵包屑連結。
您可以選擇顯示文章層次結構的方式。預設情況下,外掛將使用Site Title > Category > Post Title。您可以用標籤、日期或帖子父項替換類別,並更改分隔符。
該分類法和作者標籤為您的麵包屑導航連結的類似的模板。
不要忘記單擊儲存更改按鈕來儲存您的更改。
在網站上顯示Breadcrumb NavXT
Breadcrumb NavXT提供多種方式在您的網站上顯示麵包屑導航選單。
1. 顯示帶有主題支援的麵包屑導航
一些最受歡迎的WordPress主題帶有一個內建選項,通過選擇Breadcrumb NavXT或WordPress SEO外掛作為源來顯示麵包屑導航。
例如,如果您使用的是Astra,那麼您可以轉到外觀»自定義頁面並單擊麵包屑選單。
從那裡,在Position下拉選單選擇麵包屑顯示的位置。
在Breadcrumb Source中,您需要選擇“Breadcrumb NavXT”。
如果您正在檢視單個文章或頁面,那麼您將看到麵包屑導航選單的實時預覽。
不要忘記單擊“釋出”按鈕以儲存您的更改。
2. 使用小工具新增麵包屑導航
該外掛還提供了一個小工具,您可以使用它在側邊欄或任何小工具就緒區域中顯示麵包屑導航。
首先,轉到外觀 » 小工具頁面並將 Breadcrumb NavXT小工具新增到側邊欄。
預設小工具設定適用於大多數網站,但您可以根據需要更改它們。例如,您可能想要隱藏首頁上的導航。
不要忘記單擊“Save”按鈕來儲存您的小部件設定。
重新整理訪問您的網站以檢視正在執行的小工具。
3. Adding Breadcrumb Navigation using Code
The plugin also offers a code method to display breadcrumb navigation links for advanced users.
First you need to connect to your WordPress site using an FTP client. After that, navigate to your current WordPress theme folder located inside /wp-content/themes/ directory.
WordPress themes use template files to display different sections of your website. For instance, many themes would use a file called content-single.php located inside the template-parts folder of your theme.
See our cheat sheet to find which files to edit in a WordPress theme.
Open the template file to edit it and then place the following code where you want to display the breadcrumbs trail:
3. 使用程式碼新增麵包屑導航
該外掛也提供程式碼方法來為高階使用者顯示麵包屑導航選單。
首先,您需要使用FTP客戶端連線到WordPress網站伺服器。之後,導航到位於 /wp-content/themes/ 目錄中的當前WordPress主題資料夾。
WordPress主題使用模板檔案來顯示您網站的不同部分。例如,許多主題會使用一個名為 content-single.php 的檔案,該檔案位於主題的 template-parts 資料夾中。
開啟模板檔案進行編輯,然後將以下程式碼放在要顯示麵包屑路徑的位置:
<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>
不要忘記儲存更改並將檔案覆蓋伺服器上的原始檔。
再次訪問網站以檢視正在執行的麵包屑導航連結是否正常顯示。
我們希望本教程能幫助站長了解如何在WordPress中顯示麵包屑導航選單。enjoy!
評論留言