【WordPress】使用 Yoast SEO 在網站中加入 麵包屑 功能

這篇文章是使用 WordPress 外掛 Yoast SEO 在 WordPress 網站中的文章或頁面加入 麵包屑 功能的筆記。

有天在逛網站時,看到大多數部落格都有麵包屑(breadcrumbs)的功能,才突然想到我自己的網站好像漏掉了這部分。於是我上網查了一下有什麼方法可以在 WordPress 的文章以及頁面的開頭加入麵包屑的方法。

然後我發現,我原先就有安裝的一個 WordPress 外掛 Yoast SEO 就有提供麵包屑的功能。

但怎麼會我之前都沒有設定到呢?

原來我太心急,漏掉了最後一個最重要的步驟:P

1. 下載/安裝 Yoast SEO 外掛

在 WordPress 後台的「外掛」→「安裝外掛」搜尋「 Yoast SEO」後安裝並啟用。

安裝 Yoast SEO
安裝 Yoast SEO

2. 設定 Yoast SEO 麵包屑功能

啟用外掛後,在左側的選單就會出現 Yoast SEO 的設定連結。

先點選「SEO」→「Search Appearance」,然後在頁面上方的頁籤按鈕中,點選「麵包屑」的頁籤就可以進行相關設定。

設定 Yoast SEO 麵包屑
設定 Yoast SEO 麵包屑

這邊可以設定麵包屑的前綴字以及分隔符號等,比較需要注意的是第二的區塊「Taxonomy to show in breadcrumbs for content types」,如果想要顯示文章或專案在分類下的完整路徑的話,這邊要記得設定。否則你看到的麵包屑永遠都會是「首頁>當前頁面」,我覺得這樣好像做麵包屑的意義不大XD

設定好之後記得按下儲存~

3. 將麵包屑插入至你的佈景主題

這個步驟就是我之前一直忽略的步驟XD

原來我沒有把設定好的麵包屑放到佈景主題中,難怪一直沒看到他出現。

※ 建議先建立子佈景主題後再修改子佈景主題,而不是直接修改喔!

進到 「外觀」→「佈景主題編輯器」。如果要放在文章就要修改 single.php;如果要放在頁面就修改 page.php。

  • 文章 → single.php
  • 頁面 → page.php

將以下程式碼複製貼上在要出現的地方。

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

不同佈景主題可能程式碼會有些不一樣,我是緊接著 main 的 div 貼上。

修改佈景主題
修改佈景主題

貼上後一樣要記得按下更新檔案。

4. 回到網頁確認

設定完畢後再回到網頁,就可以看到最上方有麵包屑導覽囉:D

Yoast SEO 麵包屑

一直過著無趣的生活,正嘗試用愛的力量豐富一切。夢想出一張嘴就能改變世界。

-

如果需要我幫忙,歡迎告訴我:)

在〈【WordPress】使用 Yoast SEO 在網站中加入 麵包屑 功能〉中有 1 則留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *