麵包屑（breadcrumb）功能上線後，多數人卡關的不是「要不要顯示」，而是「顯示出來的樣子跟版面格格不入」。分隔符號是老氣的雙箭頭、字太大壓過內文標題、在手機上擠成一團，或是位置卡在標題上方很突兀。這些都屬於麵包屑樣式客製的範圍，而且絕大多數可以在佈景主題這一層用 CSS 與少量範本調整解決，不必動到外掛核心，也不必換主題。
問題是，網路上多數教學一講到客製就導向「裝某個外掛、買 PRO 版」，把外觀問題包裝成功能問題。實際情況更單純：你要先搞清楚麵包屑的 HTML 是誰輸出的，再決定 CSS 要對哪個選擇器下手、寫在哪裡才不會被更新蓋掉。這篇會帶你從「找到正確的選擇器」開始，一路調到字級、顏色、分隔符號、間距、手機版換行與顯示位置，並順帶處理 WooCommerce 商店頁與可及性這兩個常被略過的環節。
麵包屑的 HTML 由誰輸出，決定你該改哪裡
要客製麵包屑外觀，第一件事是確認這串 HTML 究竟由誰產生，因為輸出來源直接決定你要套用的 CSS 選擇器與包裹標籤。同一句「我想改麵包屑顏色」，在不同來源下的下手點完全不同。
WordPress 網站上的麵包屑，來源大致分三類。第一類是佈景主題內建，主題在 header.php、single.php 或區塊主題的範本裡呼叫自己的麵包屑函式，輸出的容器 class 由主題決定，常見像 .breadcrumbs、.site-breadcrumb 或主題前綴開頭的 class。第二類是SEO 外掛產生，例如 Yoast、Rank Math、SEOPress，各自有固定的包裹 class，分別是 .rank-math-breadcrumb、.seopress-breadcrumbs 這類，Yoast 則多半需要你自己在範本裡呼叫 yoast_breadcrumb() 並指定外層元素。第三類是頁面建構器或區塊，例如 Elementor 的麵包屑小工具、區塊編輯器裡插入的麵包屑區塊，輸出的 class 跟著建構器走。
判斷來源最快的方法不是猜，而是直接看渲染出來的 HTML。在前台頁面對著麵包屑按右鍵選「檢查」，看包住整串連結的最外層 <nav>、<div> 或 <p> 帶了什麼 class——那個 class 就是你後面所有 CSS 的進入點。如果同一頁出現了兩串麵包屑，代表主題內建與外掛各輸出了一份，這時要先停掉其中一邊，否則改了 CSS 也只會改到其中一份，另一份依舊維持原樣。
值得留意的一個來源衝突：當主題已經有自己的麵包屑，而你又啟用了 Rank Math 的麵包屑，可能兩者同時出現。Rank Math 提供 add_theme_support( 'rank-math-breadcrumbs' ) 讓主題作者註冊相容性，宣告由主題端統一輸出、避免重複。如果你是在自己的子主題裡處理，確認只保留一個輸出來源，是後續所有樣式調整的前提。
改外觀前，先用開發者工具找出麵包屑的 CSS 選擇器
確認來源之後，下一步是用瀏覽器開發者工具把確切的選擇器抓出來，這一步省略不得。沒有正確的選擇器，你寫的 CSS 不是沒生效，就是誤改到其他元素。
操作流程很固定。在前台麵包屑上按右鍵選「檢查」，瀏覽器會把對應的 HTML 標示出來。你要記下三層資訊：最外層容器的 class（例如 .rank-math-breadcrumb）、裡面每個連結的標籤（通常是 <a>，當前頁面那一節常是純文字或帶 .current、aria-current 的元素）、以及分隔符號的呈現方式。分隔符號這點特別關鍵，因為它有兩種寫法：一種是直接寫死在 HTML 裡的文字（例如 › 字元夾在連結之間），另一種是用 CSS 的 ::after 偽元素加上去的。前者要改設定或濾鏡，後者直接用 CSS 就能換掉。
把選擇器抄下來後，先在開發者工具的樣式面板裡即時試改，確認改對地方再正式寫進檔案。例如想確認顏色選擇器對不對，就在面板裡對 .rank-math-breadcrumb a 臨時加一條 color: red，看連結是不是真的變紅。臨時改不會存檔，重整就還原，是零風險的試錯方式。確認無誤，再把這段 CSS 搬到正式的存放位置。
這個習慣能避免一個常見的時間黑洞：寫了一大段 CSS 卻發現選擇器層級不夠、被主題既有樣式蓋過。先在開發者工具裡確認選擇器確實命中、權重夠高，再落地，比反覆存檔重整有效率得多。
麵包屑樣式客製要寫在哪，才不會被主題更新蓋掉
CSS 該寫在哪，答案取決於你用的是哪種主題架構，但核心原則只有一條：別寫進主題本體的檔案，否則主題一更新就被覆蓋。麵包屑樣式客製最常見的功虧一簣，就是直接改了 wp-content/themes/主題名/style.css，下次更新整個還原。
依風險由低到高，存放位置有幾個選擇。最穩妥的是子主題，建立一個子主題、把麵包屑相關 CSS 寫進子主題的 style.css，母主題更新時子主題不受影響，這是長期維護首選。其次是外觀的「自訂」CSS 區，也就是「外觀」進入「自訂」後的「額外 CSS」欄位，這裡的內容存在資料庫、不隨主題更新消失，適合少量樣式微調，缺點是換主題後不會跟著走。如果你用的是區塊主題（FSE），則可在網站編輯器裡處理，或同樣透過自訂 CSS 區補強。
至於需要動到 PHP 的調整，例如換掉分隔符號、改包裹標籤、調整麵包屑項目，原則一樣：不要寫進主題本體。Rank Math 官方就建議在主題資料夾裡另建一個 rank-math.php 專門放麵包屑相關的濾鏡，再從 functions.php 用條件判斷載入：
if ( class_exists( 'RankMath' ) ) {
require_once get_stylesheet_directory() . '/rank-math.php';
}
這樣做有三個好處：程式碼只在外掛啟用時執行、避免停用外掛後報錯；換主題時整個檔案複製就能搬走；也讓你的 PHP 客製跟主題其他邏輯分開、好維護。其他外掛雖然濾鏡名稱不同，但「另開檔案、條件載入」的思路通用。如果你不依賴特定外掛、用的是子主題，這類 PHP 客製寫進子主題的 functions.php 同樣安全。
用 CSS 調整麵包屑的字級、顏色、分隔符號與間距
抓到選擇器、確定存放位置之後，外觀調整本身其實不難。麵包屑的視覺客製大致就字級、顏色、分隔符號、間距與排列這幾項，全部能用 CSS 完成。
先處理整體排版。麵包屑本質是一串水平排列的連結，用 Flexbox 來排比用 inline 元素硬擠乾淨得多，分隔符號的對齊、項目間距都好控制：
.rank-math-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
}
.rank-math-breadcrumb a {
color: #666;
text-decoration: none;
}
.rank-math-breadcrumb a:hover {
color: #000;
text-decoration: underline;
}
把選擇器換成你在開發者工具裡抓到的那一組即可。font-size 用相對單位 rem 而不是寫死 px，麵包屑才會跟著網站基準字級一起縮放；麵包屑通常設得比內文略小，落在 0.85 到 0.9 倍內文字級之間，視覺上才不會跟內文標題打架。
分隔符號的改法看它怎麼來。如果分隔符是 CSS 偽元素加上去的，直接覆寫 content 就能換符號，也能順手改顏色與左右間距：
.rank-math-breadcrumb li:not(:last-child)::after {
content: '/';
margin: 0 0.5rem;
color: #bbb;
}
如果分隔符號是外掛寫死在 HTML 裡的文字，CSS 覆寫不到，就得回到外掛設定改，或用濾鏡換掉。以 Rank Math 為例，分隔字元可在後台「一般設定」的麵包屑分頁調整，也能用 rank_math/frontend/breadcrumb/settings 濾鏡改；SEOPress 則有對應的分隔符濾鏡。實務上能在後台設定裡改就先在後台改，不必動程式碼。
想用 CSS 變數讓往後改色更省事，可以把常用值集中宣告，之後只改一處就全站套用：
:root {
--breadcrumb-color: #666;
--breadcrumb-hover: #000;
--breadcrumb-sep: #bbb;
}
這對日後維護或交接特別實用，不必在一長串規則裡逐條找顏色。
麵包屑在手機版的換行與溢出該怎麼處理
手機版是麵包屑最容易破版的地方，主因是路徑層級一深、文章標題一長，整串就會超出螢幕寬度，要嘛被切掉、要嘛逼出橫向捲軸。處理方向有兩條：讓它優雅換行，或讓過長的項目截斷。
優先做的是允許換行。前面排版範例裡的 flex-wrap: wrap 就是關鍵，少了它，Flexbox 會把所有項目硬擠在同一行而不換行。加上之後，窄螢幕放不下時麵包屑會自動折到第二行，不會溢出。多數情況這樣就夠了。
如果連結文字本身過長，例如某篇文章標題很長、撐爆單一項目，可以針對當前頁面那一節做截斷處理：
.rank-math-breadcrumb .last,
.rank-math-breadcrumb [aria-current="page"] {
max-width: 12em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
這會讓過長的標題顯示前段並接上刪節號，避免單一項目把整列撐開。選擇器裡的 .last 或 aria-current 要對照你實際抓到的當前頁面標記來用。
也有人選擇從源頭縮短標題長度。部分外掛支援用濾鏡限制麵包屑裡標題的字元數，例如 Rank Math 可透過 rank_math/frontend/breadcrumb/items 濾鏡把超過設定字元數的標題截斷並接上刪節號。用 CSS 截斷與用濾鏡截斷的差別在於：CSS 是視覺層的隱藏、原始文字仍在 HTML 裡；濾鏡是真的改掉輸出內容，連結構化資料也跟著變。一般版面需求用 CSS 即可，要連同 schema 一起縮短才用濾鏡。
手機版另一個小細節是字級與點擊區。麵包屑連結在手機上若字太小、間距太擠，會難以點選。把 gap 維持在 0.4 到 0.5rem、連結保留足夠的點擊範圍，比一味縮小好。
調整麵包屑在頁面上的顯示位置
麵包屑想換位置，先分清楚你要的是「視覺上挪一點」還是「真的換到頁面另一個區塊」，兩者方法完全不同。前者用 CSS 微調就好，後者得動範本或改用區塊與短碼放置。
只是要調整與周圍的距離、或讓它靠左靠右，用 CSS 處理最單純：
.rank-math-breadcrumb {
margin: 1rem 0 1.5rem;
text-align: left;
}
調 margin 控制上下與內文標題的間距，是最常見的需求——預設麵包屑常常緊貼標題顯得擁擠，補一點下方間距就清爽許多。
如果要把麵包屑從「標題上方」搬到「頁首底下」「側邊欄」或「內容區某處」這種跨區塊的移動，CSS 的 margin 救不了，得從輸出位置下手。做法分兩種架構。傳統的 PHP 主題，麵包屑由範本檔裡的函式呼叫產生，你在子主題裡複製對應範本（例如 single.php、header.php），把麵包屑函式呼叫那行搬到想要的位置即可。多數外掛都提供可直接呼叫的範本標籤，例如 Rank Math 的 rank_math_the_breadcrumbs()、Yoast 的 yoast_breadcrumb()，搭配條件判斷還能控制哪些頁面顯示：
if ( function_exists( 'rank_math_the_breadcrumbs' ) && ! is_front_page() ) {
rank_math_the_breadcrumbs();
}
這段讓麵包屑在除首頁以外的頁面顯示，放在你想要的範本位置即可。
區塊主題（FSE）就不改 PHP 了，改在網站編輯器裡操作。多數 SEO 外掛都提供麵包屑區塊，你可以在 header 或 single 範本裡把麵包屑區塊拖到想要的位置；沒有區塊的情況，也能用短碼塞進內容或小工具區。頁面建構器同理，Elementor、Divi 這類工具各有麵包屑元件或短碼模組，拖放即可定位，不必碰範本檔。
要提醒的是，搬動輸出位置會牽動結構化資料的合理性。麵包屑的 schema 應對應使用者真正看到的導覽路徑，把它挪到跟內容無關的角落雖然技術上可行，但會削弱它對導覽與搜尋呈現的幫助，位置還是以貼近主要內容、讓使用者一眼看到為原則。
WooCommerce 商店頁的麵包屑樣式與位置怎麼改
WooCommerce 有自己的一套麵包屑，獨立於 SEO 外掛之外，所以商店頁、商品頁、分類頁的麵包屑要單獨處理。它的輸出包在 .woocommerce-breadcrumb 這個 class 裡，樣式調整就針對它下手。
外觀客製跟前面一樣是 CSS 的事：
.woocommerce-breadcrumb {
font-size: 0.85rem;
color: #777;
margin-bottom: 1.5rem;
}
.woocommerce-breadcrumb a {
color: #555;
}
WooCommerce 麵包屑的分隔符號、首頁文字等，可透過 woocommerce_breadcrumb_defaults 濾鏡在 PHP 端調整，例如換掉預設分隔符或改首頁標籤；這段濾鏡同樣建議寫進子主題的 functions.php，不要動 WooCommerce 外掛本體。
位置方面，WooCommerce 麵包屑由 woocommerce_breadcrumb 這個函式輸出，預設掛在商店頁的特定鉤點上。要移動它，標準做法是先用 remove_action 把它從原位移除，再用 add_action 掛到你要的鉤點，這屬於進階的範本調整，動手前建議先在測試環境確認位置正確。若只是想在某些頁面隱藏 WooCommerce 麵包屑，用 CSS 配合頁面的 body class 隱藏，是比改鉤點更輕量的做法。
一個常見地雷：網站若同時啟用了 WooCommerce 麵包屑與 SEO 外掛麵包屑，商品頁可能出現兩串。這時要決定留哪一套——通常留結構化資料較完整的那套，另一套用設定或 CSS 關掉，避免重複與 schema 衝突。
麵包屑的可及性與語意標記別漏掉
麵包屑除了好看，還要讓螢幕報讀軟體與搜尋引擎讀得懂，這部分常在改樣式時被忽略，但補起來成本很低。語意對了，麵包屑對導覽與搜尋呈現的價值才完整。
語意上，麵包屑的外層容器最好是 <nav> 並帶上 aria-label，例如 aria-label="breadcrumb" 或中文情境的描述，讓輔助技術知道這是一組導覽。當前所在的頁面那一節，慣例是不做成連結（點自己沒意義），並標上 aria-current="page"。部分外掛預設就把麵包屑包在 <p> 標籤裡，這在語意與排版上都不理想——<p> 是段落，不是導覽。Rank Math 可用 rank_math/frontend/breadcrumb/args 濾鏡把包裹標籤從 <p> 換成 <nav> 或 <div>：
add_filter( 'rank_math/frontend/breadcrumb/args', function ( $args ) {
$args['wrap_before'] = '<nav class="rank-math-breadcrumb" aria-label="breadcrumb">';
$args['wrap_after'] = '</nav>';
return $args;
} );
換成 <nav> 之後，既改善語意、又順手避開 <p> 帶來的多餘段落間距與樣式衝突，一舉兩得。
至於結構化資料，主流 SEO 外掛輸出麵包屑時多半已自動附上 BreadcrumbList 的 JSON-LD，你通常不必手動寫。重點是別讓視覺上的麵包屑與 schema 對不上：當你用濾鏡改了麵包屑項目（例如新增、移除、截斷），記得確認結構化資料是否跟著變。以 Rank Math 為例，改動 breadcrumb/items 的濾鏡會同時影響可見路徑與 schema，而只想改 schema 不動畫面時，有另一組專門的濾鏡可用。改完後到 Google 的複合式搜尋結果測試工具或 Search Console 驗證一次，確認沒有錯誤。
無障礙與語意這一塊不需要華麗的程式碼，多半是把包裹標籤換對、把當前項目標記補上而已，卻能讓麵包屑同時服務到一般使用者、使用輔助技術的訪客，以及搜尋引擎。
從找選擇器到落地維護，麵包屑客製怎麼一次做對
麵包屑外觀客製，技術門檻其實不高，難的是順序對不對。先確認 HTML 由誰輸出、再用開發者工具抓出確切選擇器、把 CSS 寫進子主題或自訂 CSS 區以防更新覆蓋，最後才動手調字級、顏色、分隔符號、間距與位置——這條路徑走對，多數需求一兩段 CSS 就解決，根本用不到升級任何 PRO 外掛。
需要動到 PHP 的場景，例如換包裹標籤、調整項目、搬移輸出位置，原則同樣是「另開檔案、條件載入、不碰本體」，並在改完後回頭驗證結構化資料與可及性標記沒被改壞。把這套流程固定下來，下一個網站、下一個主題要重做時，你只要複製那幾段 CSS 與 PHP，再把選擇器對齊新主題即可，不必每次從頭摸索。先打開麵包屑、按右鍵檢查，看清楚它的 class，你的客製就已經開始了。