全站編輯器（FSE）把頁首與頁尾的修改權還給了一般站長。過去要動這兩塊版面，幾乎都要翻找 PHP 樣板或等外掛支援；現在進後台開啟網站編輯器，直接拖拉區塊就能完成大半工作。
只是操作流程看起來簡單，實際動手會碰到幾個不明顯的問題——固定頁首的寫法、行動版隱藏的時機、同步模板與局部模板的差異，這些細節一旦處理有誤，版面就很容易在特定裝置或頁面上跑版。這篇說明的是在 FSE 環境裡客製化頁首（Header）與頁尾（Footer）的核心操作，包含區塊組合的配置邏輯、固定頁首的正確實作方式，以及行動版需要特別處理的隱藏技巧。以下操作以 WordPress 6.5 以上版本為基準，採用原生 FSE 主題，如 Twenty Twenty-Four 或 Blockbase 系列。
FSE 的頁首頁尾是獨立的模板組件
在傳統 PHP 主題架構裡，header.php 與 footer.php 是整個主題共用的靜態檔案，修改一處就全站套用。FSE 把這個概念對應到「模板組件（Template Part）」，同樣是全站共用，但編輯介面從文字編輯器換成了視覺化的區塊編輯器。
進入路徑是後台左側選單的「外觀 > 網站編輯器」，開啟後在左側面板找到「模板 > 模板組件」，就能看到主題預先定義好的 Header 與 Footer 組件。點選後進入的是獨立的編輯畫布，和文章編輯器的操作邏輯一致——插入、移動、刪除區塊都在這裡完成。
改動模板組件會立即影響所有套用該組件的頁面，不需要逐頁修改。若想針對特定頁面做不同的頁首樣式，做法是在該頁面的模板層（Template，不是模板組件）新增一個獨立的頁首區塊覆蓋預設組件，而不是去動全站共用的那份。
區塊組合的配置邏輯
頁首的常見結構是 Logo 靠左、導覽選單靠右，FSE 裡對應的做法是用「列（Row）區塊」作為容器，再把「網站標誌」與「導覽」區塊分別放入左右兩側。
網站標誌與導覽的對齊
插入列區塊後，在右側工具列把「允許每個子項目的對齊」打開，Logo 欄位選「靠左」，選單欄位選「靠右」。列區塊本身的橫向對齊設成「撐滿容器」，這樣兩個子欄位才會各自貼邊而不是擠在中間。
需要注意的是，列區塊預設的間距靠 gap 控制，不是 margin。如果發現兩個子項目之間的間距調整後沒有反應，通常是主題的全域樣式（Global Styles）有 gap 的硬覆蓋，要進「樣式 > 區塊 > 列」把 gap 值手動改掉，或在列區塊的進階設定裡加 CSS 類別，用自訂 CSS 做優先蓋寫（!important）。
搜尋欄與行動呼籲按鈕
頁首右側加搜尋欄或行動呼籲（CTA）按鈕是常見需求。做法是在導覽區塊旁邊的同一列裡，再插入「搜尋（Search）」區塊或「按鈕（Button）」區塊，對齊邏輯和前面相同。
按鈕樣式的客製化建議走「全域樣式」統一設定，而不是在頁首組件裡個別調整。原因是按鈕區塊繼承全域的按鈕樣式，若在頁首裡單獨改顏色或圓角，後續全域樣式改版時就會出現不一致的狀況，維護成本偏高。
頁尾的欄位分割
頁尾多欄結構用「欄（Columns）區塊」處理，預設提供 2 欄、3 欄等比例分割，也可以在進階設定裡手動指定各欄寬度百分比。一個常見的配置是左邊 40% 放品牌資訊與社群連結，右邊三欄各 20% 分別放三個分類的導覽連結清單，底部跨欄放版權聲明文字。
欄位區塊在行動版的預設行為是自動堆疊（Stack），不需要另外處理排版。但若主題的 CSS 有強制固定欄寬的寫法，堆疊就不會觸發，這時要進全域樣式確認是否有影響欄位的覆蓋規則。
固定頁首的正確實作
固定頁首（sticky header）是詢問度最高的功能之一，但 FSE 原生並未提供一鍵開啟的選項，需要手動操作。
透過全域樣式加 CSS
目前最直接的做法是進「外觀 > 網站編輯器 > 樣式 > 額外 CSS」，加入以下規則，讓 Header 模板組件在捲動時固定在頂部。
.wp-block-template-part.site-header,
header.wp-block-template-part {
position: sticky;
top: 0;
z-index: 100;
}
選擇器要依主題實際輸出的 HTML 結構調整。可以用瀏覽器的開發人員工具（DevTools）確認頁首的 class 名稱，然後針對性地寫選擇器。若主題的 Header 組件有設定 slug（如 header），輸出的 class 通常是 wp-block-template-part 加上 slug 對應的 class，例如 has-name-header。
通知欄的層疊問題
加了固定頁首後，最常見的副作用是錨點跳轉時，頁首會蓋住目標標題。解法是在 :target 偽類加 scroll-margin-top，值設成頁首高度加一點緩衝，大約 80px 到 120px 之間，依實際頁首高度調整。
另一個要處理的是「WooCommerce 購物通知」或「Cookie 同意通知」這類置頂橫幅。這類橫幅的 z-index 若低於頁首的 100，就會被頁首蓋住。把橫幅外掛的 z-index 設成 101 以上，或把頁首的 z-index 降到這類橫幅以下，擇一處理即可。
行動版的隱藏技巧
頁首頁尾並不一定要行動版和桌面版共用同一套配置。FSE 原生支援在同一個模板組件裡，針對不同裝置設定顯示隱藏，不需要額外外掛。
漢堡選單與桌面導覽的切換
標準做法是在頁首裡放兩組導覽區塊——一組是桌面版的水平導覽選單，另一組是行動版的「導覽（Navigation）區塊」開啟行動版設定後的漢堡收合樣式。桌面版那組在右側面板的「進階」裡把「行動版隱藏」打開；行動版那組則把「桌面版隱藏」打開。
這個設定對應的 CSS 是 display: none 搭配媒體查詢（media query），WordPress 核心樣式有定義 .hide-on-mobile 與 .hide-on-desktop 這兩個輔助 class，開關是直接寫入 class，不需要自行再加 CSS。
行動版頁首高度控制
行動版頁首的高度建議明確設定，而非仰賴內容撐開。原因是內容高度不固定時，頁面的 scroll-margin-top 基準就會不穩，錨點跳轉的偏移量每個頁面可能都不同。建議在行動版的頁首容器上，用 min-height 設定固定的最小高度，配合 padding 控制上下留白，讓高度有可預期的基準值。
頁尾在行動版的精簡
頁尾欄位在行動版堆疊之後，版面通常不需要另外調整。但若原始桌面版頁尾放了多個副導覽選單，行動版全部堆疊後捲動距離會相當長，使用者體驗較差。這種情況的處理方式是在行動版另做一個精簡版頁尾，只留版權聲明與最重要的兩三個連結，把完整版頁尾設為「行動版隱藏」，精簡版設為「桌面版隱藏」。
這個做法的代價是要維護兩份頁尾內容，連結有異動時要改兩處。若網站更新頻率高，可以考慮用「導覽（Navigation）區塊」的共用選單管理連結清單，兩份頁尾都掛同一個選單，改連結時只需改一次，頁尾就自動同步。