Slim SEO 麵包屑導覽（Breadcrumbs）設定教學

適合誰使用

使用 Slim SEO 外掛、需要在網站中加入或客製化麵包屑導覽的 WordPress 網站管理者與開發者

開始前準備

• 需要能編輯佈景主題檔案，才能將 shortcode 輸出到頁面中
• 若要用程式碼調整麵包屑屬性或連結，需具備撰寫 PHP filter 的能力

教學內容

什麼是麵包屑？為何對 SEO 重要？

麵包屑是一種次要導覽，通常以單行文字顯示於頁面頂部，用來呈現頁面的階層位置，方便使用者返回上一層頁面

麵包屑中的每個項目都是連結，代表從首頁到目前頁面的每一個「步驟」

麵包屑能幫助搜尋引擎理解網站的階層結構，讓爬蟲更容易掃描並索引各層級頁面，並避免頁面成為沒有連結指向的孤兒頁面

新增麵包屑到網站

Slim SEO 提供 [slim_seo_breadcrumbs] shortcode，可用來在佈景主題的任何位置輸出麵包屑

Slim SEO 的麵包屑會加入 aria-* 屬性，以提升無障礙體驗

1. 在佈景主題檔案中加入程式碼 echo do_shortcode( '[slim_seo_breadcrumbs]' ); 即可輸出麵包屑

Shortcode 可用屬性

separator 屬性可設定麵包屑項目之間的分隔符號，預設為「»」

display_current 屬性可控制是否顯示目前頁面，預設為顯示（true）

taxonomy、label_home、label_search、label_404 等屬性可分別設定分類法、首頁標籤、搜尋結果標籤與 404 頁面標籤的文字

樣式設計：CSS 類別

整個麵包屑外層容器使用 breadcrumbs 這個 CSS class

每一個麵包屑項目都有 breadcrumb class，第一項與最後一項則分別另外加上 breadcrumb--first 與 breadcrumb--last

分隔符號使用 breadcrumbs__separator 這個 class，方便進行樣式設計

麵包屑的結構化資料（Schema）

Slim SEO 會自動以 JSON-LD 格式產生麵包屑的結構化資料，但不會將此 schema 輸出在麵包屑的 HTML 中，以避免衝突並方便自訂樣式

無論是否使用麵包屑 shortcode，這組 JSON-LD schema 都會輸出；若有使用 shortcode，schema 會沿用 shortcode 中設定的屬性

透過程式碼調整麵包屑屬性與連結

若有使用麵包屑 shortcode，可直接在 shortcode 中帶入屬性值來調整設定

若未使用 shortcode 顯示麵包屑，網站上不會有可視化的設定介面，此時需改用 slim_seo_breadcrumbs_args 這個 filter 來調整屬性

若要新增或移除麵包屑中的連結，可使用 slim_seo_breadcrumbs_links filter，此 filter 接受一組包含 text 與 url 的連結陣列

介面名稱對照

• [slim_seo_breadcrumbs]：用於輸出麵包屑導覽的 shortcode，可放置於佈景主題檔案中任何位置
• separator：控制麵包屑項目間分隔符號的 shortcode 屬性，預設為「»」
• display_current：控制是否顯示目前頁面於麵包屑中的屬性，預設為顯示
• breadcrumb--first / breadcrumb--last：分別標示麵包屑中第一項與最後一項的 CSS class，常用於為「首頁」加上圖示等樣式
• slim_seo_breadcrumbs_args：用於以程式碼方式調整麵包屑屬性（如 taxonomy）的 WordPress filter
• slim_seo_breadcrumbs_links：用於以程式碼方式新增或移除麵包屑連結的 WordPress filter，接受包含 text 與 url 的陣列

/ai 我正在閱讀「Slim SEO 麵包屑導覽（Breadcrumbs）設定教學」，目前卡在：

我已嘗試：

我看到的畫面／錯誤訊息：

請用一步一步的方式告訴我下一步。