黏性頁首（sticky header）是指網站頁首在訪客向下捲動時，固定停留在螢幕頂端不會消失，讓選單、logo、購物車圖示與行動呼籲按鈕隨時可點。這個設計已經是現代網站的標準配備，但 WordPress 預設並沒有「一鍵開啟」的開關，頁首通常會隨著內容往上捲走。
想自己加上黏性頁首，網路上的教學常常只丟一段 position:fixed 的 CSS，沒講清楚它跟 position:sticky 的差別，也很少提到登入後被管理列擋住、錨點連結跳轉被頁首蓋住這些實際會踩到的雷。這篇把 WordPress 黏性頁首設定拆成三種主流做法，從不用寫程式的區塊編輯器、外掛，到完全自訂的 CSS，並附上一張對照表幫你依自己的主題與技術程度挑一條路，最後補上幾個容易卡關的排除技巧。
黏性頁首到底解決了什麼問題
黏性頁首的核心價值是「縮短訪客回到導覽列的距離」。在內容長的頁面，沒有黏性頁首時，使用者要看其他頁面就得一路捲回最上方；頁首固定後，這個動作從捲動數秒變成點一下，對長文、商品列表、單頁式網站特別有感。
對經營商店或服務的網站，固定頁首還能讓「結帳」「預約」「聯絡我們」這類按鈕全程留在畫面上，降低使用者中途流失的機會。Twentig 引用 Contentsquare 的一則零售網站案例指出，固定導覽讓轉換率提升約 10%，雖然實際幅度會因網站而異，但方向是一致的：把入口留在手邊，使用者就更願意多看幾頁。
不過黏性頁首不是無腦開了就好。它會永久佔掉畫面頂端一條空間，在手機這種垂直空間本就吃緊的裝置上更明顯；設計太厚重還會分散對主內容的注意力。所以後面三種做法，重點都不只是「讓它黏住」，而是黏得輕薄、不擋內容、在手機上也合理。
三種做法該怎麼選
WordPress 黏性頁首設定主要有三條路：用區塊主題的內建定位、裝外掛、或自己寫 CSS。它們的差別在於需不需要寫程式、跟主題的相容性，以及能客製到什麼程度。先看這張對照表抓方向，再往下看各自的操作。
| 比較項目 | 區塊主題（FSE） | 外掛 | 自訂 CSS |
|---|---|---|---|
| 需要寫程式 | 否 | 否 | 是（基礎 CSS） |
| 適用主題 | 僅區塊主題 | 幾乎所有主題 | 所有主題 |
| 客製彈性 | 中（受主題控制項限制） | 中（依外掛功能） | 高（完全自訂） |
| 額外負擔 | 無 | 多一個外掛要維護 | 無，但要自己抓選擇器 |
| 適合對象 | 用區塊主題、想純後台操作 | 用經典主題、怕碰程式 | 願意動一點程式、要完全控制 |
簡單歸納：如果你的網站已經是區塊主題（例如 Twenty Twenty-Five），優先試 FSE 的內建做法；如果是經典主題又不想碰程式，裝外掛最快；如果你願意貼一段 CSS、想要最乾淨且不增加外掛，自訂 CSS 最值得。三種做法可以並存比較，挑出最適合自己的那一條再保留。
方法一：用區塊主題的網站編輯器設定
如果你用的是區塊主題，最不增加負擔的做法是直接用網站編輯器（Site Editor）的內建定位功能，完全不必裝外掛或寫程式。基本流程是把頁首包進群組區塊，再把該群組的位置設成「Sticky（固定）」。
操作步驟如下：
- 第一、進入後台「外觀 → 編輯器」，從範本或範本組件中找到頁首（Header）。
- 第二、在編輯器中選取整個頁首區域，於工具列點「群組」把頁首元素包進一個群組區塊。
- 第三、打開右側區塊設定的「位置（Position）」面板，下拉選「固定（Sticky）」。
- 第四、切到「樣式」分頁，替這個群組區塊設一個實心背景色，避免捲動時頁首文字跟下方內容疊在一起變得難以辨識。
- 第五、儲存後到前台實際捲動測試。
這裡有一個多數人會踩到的坑要先講清楚。在標準區塊主題裡，把「固定」設在頁首內層的群組區塊，往往只對那個群組生效，並不會讓整個頁首範本組件在全站每個頁面都固定。原因是 WordPress 把這個設定套用在內層區塊，而不是外層的頁首範本組件本身。結果就是你得在每一個範本（首頁、單篇文章、彙整頁、搜尋結果、404 等）逐一重複包群組、設固定的動作，漏掉一個範本，那個頁面的頁首就不會黏。
有些區塊主題（例如 Twentig One 這類）會自動偵測你在頁首啟用了固定定位，並把行為延伸到整個範本組件，省去逐範本設定的麻煩。如果你的主題沒有這個便利功能，與其在每個範本重複操作，不如直接跳到方法三，用一段全站通用的 CSS 一次解決，反而更乾淨。
方法二：用外掛把任何頁首變黏性
外掛是相容性最廣的做法，無論你用的是經典主題還是區塊主題、頁首是什麼結構，幾乎都能套用，而且全程不用寫程式。代表性的外掛是「Sticky Menu & Sticky Header (or Anything!) on Scroll」與「My Sticky Menu」，共同特色是讓你指定頁面上任一元素變成捲動時固定，不限於頁首。
安裝與設定的流程是這樣：
- 第一、在後台「外掛 → 安裝外掛」搜尋外掛名稱，安裝並啟用。
- 第二、到外掛的設定頁，在「Sticky Element（要固定的元素）」欄位填入你頁首的 CSS ID 或 class。
- 第三、不知道頁首的 ID 或 class，就在前台網站對著頁首區域按右鍵選「檢查（Inspect）」，從開發者工具裡找出對應的選擇器，常見的有
#site-header、.site-header、#masthead這幾種。 - 第四、依需求調整觸發時機，例如設定捲動多少距離後才開始固定、或在過大或過小的螢幕停用，避免在手機上佔掉太多空間。
- 第五、儲存後到前台測試固定效果是否順暢。
外掛的優點是門檻最低、相容性最好；要留意的是部分外掛把背景色、透明度、進場動畫等樣式控制放在付費版，免費版多半只能設定基本的觸發距離與斷點。另外，多裝一個外掛就多一份要維護、要顧及更新相容性的負擔，如果你只是要做頁首固定這一件事，先評估它是否值得長期常駐。
方法三：用 CSS 自訂，搞懂 sticky 與 fixed 的差別
願意貼一段 CSS 的話，自訂 CSS 能給你最乾淨、最完整的控制，也不必多裝外掛。動手前要先搞懂兩個常被混用的定位屬性，因為選錯會直接影響版面行為。
position:fixed 會把頁首完全抽離正常的文件流，永遠釘在視窗頂端。代價是它原本佔的高度會被下方內容「吃掉」，導致頁面最上方一截內容被頁首蓋住，所以用 fixed 通常還得替 body 補一個跟頁首等高的 margin-top 來補位。
position:sticky 則讓頁首先待在文件流中正常的位置，捲動到設定的門檻才開始固定，元素仍保留在文件流裡，不會把下方內容頂掉，通常不需要額外補 margin。對多數網站來說，sticky 是更省事、副作用更少的選擇。
如果你用的是區塊主題，要讓整個頁首範本組件全站固定，可以到「外觀 → 編輯器」打開自訂 CSS（在指令面板輸入 CSS 即可找到），貼上這段：
header.wp-block-template-part {
position: sticky;
top: var(--wp-admin--admin-bar--height, 0);
z-index: 99;
}
這段比逐範本包群組乾淨得多，而且 top 用了 --wp-admin--admin-bar--height 變數，登入後台時頁首會自動讓開上方的管理列、不會被擋住，登出狀態則退回 0。
如果是經典主題，到「外觀 → 自訂 → 額外 CSS」貼上類似這段，並把選擇器換成你自己頁首的 class 或 ID：
.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
body {
margin-top: 80px; /* 改成你頁首的實際高度 */
}
其中 margin-top 要對齊頁首的實際像素高度，頁首多高就補多少，否則最上方內容會被蓋住或留下一道空白。z-index 給高一點（這裡用 9999），確保頁首疊在輪播、彈窗等元素之上。
開了黏性頁首之後容易卡關的地方
把頁首固定起來只是第一步，真正讓人卡住的往往是固定之後跑出來的副作用。下面幾個是最常見、也最好預防的狀況。
內容被頁首蓋住：這幾乎都是用了 position:fixed 又忘了補位。對應做法是替 body 加上等於頁首高度的 margin-top，或乾脆改用 position:sticky 讓頁首留在文件流裡，從根本避開這個問題。
錨點連結跳轉被頁首擋住：頁面內用「#某段落」的錨點連結跳轉時，目標標題常會剛好藏在固定頁首底下。解法是替有錨點的目標元素加上 scroll-margin-top，數值設成頁首高度，跳轉時就會自動往下空出頁首的高度。
手機上佔太多空間：手機垂直空間珍貴，固定頁首太厚會壓縮閱讀區。可以用媒體查詢在小螢幕關掉固定，例如在 max-width:600px 時把頁首改回 position:static，並一併把為補位加的 margin-top 歸零。手機版頁首也建議用漢堡選單、縮小 logo、減少留白，維持輕薄。
頁首被其他元素蓋住或自己蓋住別人：這是 z-index 衝突。頁首沒蓋在最上層，就把它的 z-index 調高；反過來若頁首蓋住了該在上層的彈窗或 cookie 提示，則要調整彼此的層級關係。
捲動時頁首變透明、看不清文字：固定頁首在捲過其他內容時若沒有實心背景，文字會跟下方內容疊在一起。務必給頁首設一個實心背景色，再視需要加一道淺陰影或下邊框，讓頁首跟內容有明確分界。
商店網站用黏性頁首要多顧一件事
如果你的網站是 WooCommerce 商店，黏性頁首除了選單與 logo，通常還會想固定購物車圖示、會員入口這類元素，讓使用者在瀏覽商品時隨時看得到購物車數量、隨手就能進結帳。這類元素若本來就在頁首結構裡，前面三種做法都會一併把它固定住，不必另外處理。
要注意的是商店頁面通常掛比較多的彈窗或浮動元件，例如加入購物車的提示、優惠通知條、即時客服按鈕，這些跟固定頁首的 z-index 很容易打架。建議把頁首、購物車浮動圖示、各種彈窗的層級先規劃清楚，由高到低排好，避免互相遮蓋。
商品頁、購物車頁、結帳頁的版面差異也大，固定頁首在結帳這種需要專注的頁面有時反而是干擾。可以考慮在結帳流程關掉固定，或把頁首改得更精簡，把畫面留給填寫表單。至於金流串接與付款設定屬於另一個主題，這裡只提醒固定頁首與這些頁面的版面要分開測試，確認沒有互相影響。
挑一條最適合你的路，先求穩再求美
WordPress 黏性頁首設定沒有唯一正解，只有最適合你目前主題與技術程度的那一條：用區塊主題就先試網站編輯器的內建定位，用經典主題又不想碰程式就裝外掛，願意貼一段 CSS、想要最乾淨的控制就自己寫，記得優先用 position:sticky 並把背景色、z-index、登入管理列的偏移都顧到。
無論選哪一種，動手後都別只在電腦上看一眼就收工。實際在手機、平板、登入與登出狀態各捲一遍，確認沒有內容被蓋住、錨點跳轉正常、頁首文字在任何背景上都看得清楚，再把它正式留在網站上。把入口穩穩留在訪客手邊，這個小改動就會默默替你的瀏覽體驗加分。