在 WordPress 區塊主題裡改顏色、換字體、調間距時，最怕的就是「這頁看起來對了，換一頁又跑掉」。你以為按鈕都是圓角深藍色，結果商品頁的「加入購物車」卻是方角淺灰，整個網站像拼湊出來的。FSE 樣式書（Style Book）就是用來解決這種視覺破碎的工具。它把網站上所有區塊集中在一個預覽畫面裡，讓你在儲存之前就先看到「字體、配色、間距改下去，全站每一種元件會變成什麼樣子」。
這篇會把 FSE 樣式書講清楚：它跟全站樣式（Global Styles）到底差在哪、介面怎麼分區、怎麼照著一套順序把全站視覺統一起來，以及它有哪些限制與容易踩到的狀況。看完你就知道，要讓整個 WordPress 網站「長得像同一個品牌」，樣式書該怎麼用。
樣式書是什麼，跟全站樣式有什麼不同
樣式書是全站樣式的「預覽畫面」，不是另一套設定。很多人把兩者搞混，以為樣式書是用來改設定的地方，其實你真正動手調整顏色、字體、間距的位置是全站樣式面板，樣式書只負責即時把結果攤開給你看。
把它想成設計界常說的「style guide」。傳統做網站時，設計師會先做一份視覺規範文件，把標題、內文、按鈕、引言、表格全部畫在一張圖上，確認彼此搭配協調。FSE 樣式書就是 WordPress 內建的這份規範文件，差別在於它是活的——你在左邊改設定，右邊整份規範立刻跟著變。
兩者的分工可以這樣記：
- 全站樣式（Global Styles）：實際的控制台。你在這裡設定整站的色票、字型、版面寬度、區塊預設外觀，改了會套用到整個網站。
- 樣式書（Style Book）：純預覽。它把網站上每一種區塊集中展示，讓你不必真的去插入一個圖庫區塊、一個按鈕、一張表格，就能看到它們套用目前樣式後長什麼樣。
這個分工解決了一個很實際的痛點。假設你還沒寫任何含圖庫的文章，但想先確認圖庫區塊的圓角和間距對不對，過去你得先發一篇假文章塞圖庫進去測試。有了樣式書，就算站上完全沒有那種內容，你照樣能預覽它套用樣式後的模樣。
樣式書怎麼打開，介面分成哪幾區
打開樣式書的路徑是「外觀 → 編輯器 → 樣式」，接著點「樣式」文字右邊那個眼睛圖示。眼睛圖示就是樣式書的開關，再點一次就回到原本的網站編輯器畫面。
如果你正在編輯某個頁面、範本或範本部件，也能直接從上方工具列叫出樣式書：先點工具列的「樣式」圖示（一個半黑半白的圓圈），再點眼睛圖示即可。這條路徑的好處是你可以一邊看樣式書、一邊對照實際範本，兩種視角切換很順。
要注意的是，這套介面只在區塊主題下才完整出現。如果你用的是 Twenty Twenty-Four、Twenty Twenty-Five 這類官方區塊主題，或其他支援網站編輯器的主題，樣式書才會在「外觀」選單底下；傳統的古典主題沒有網站編輯器，自然也沒有樣式書。
打開後，樣式書把所有區塊依類別分成幾個分頁，方便你逐區檢查：
- 文字（Text）：標題 H1 到 H6、段落、清單、引言這類文字元件，是改字體與配色時最常盯的一區。
- 媒體（Media）：圖片、圖庫、封面等媒體區塊，看圓角、邊框、間距套下去的效果。
- 設計（Design）：按鈕、欄、群組這類版面與互動元件。
- 小工具（Widgets）：行事曆、最新文章、社群圖示等動態元件。
- 主題（Theme）：網站標誌、網站標題、查詢迴圈、精選圖片這些跟主題結構綁在一起的區塊。
如果你的網站裝了 WooCommerce 並用區塊主題，商品相關的區塊也會被收進這些分頁裡一起預覽。換句話說，調整一次配色就能同時確認文章內文與商品列表的視覺是否一致，不必兩邊各看一次。
用樣式書統一全站的實際操作順序
統一全站視覺的關鍵不是逐頁修改，而是先把「設計系統」定好，再讓樣式書幫你驗收。順序對了，後面新增的每一頁都會自動繼承這套規則；順序亂了，就會回到一頁一頁救火的老路。建議照下面的節奏走。
第一、先定色票。進到「樣式 → 顏色 → 色盤」，把品牌主色、輔助色、強調色、淺色背景、深色文字這幾組顏色先建立起來。不要一開始就隨手選色，先把整套色盤排好，後面所有元件都從這套色盤裡挑，全站配色才會收斂。設計時一個常見原則是控制在五個主要顏色以內，超過就容易顯得雜亂。
第二、設定字體。到「樣式 → 排版」，先定好內文字型與標題字型，再分別調整 H1 到 H6 的大小與字重。字型家族建議控制在兩到三種以內，並用一致的級距（例如內文、小標、大標之間維持固定的放大比例），讓文字層級清楚。這時樣式書的「文字」分頁就是你的檢查台——每改一個級距，立刻看標題與內文的對比是否拉得開。
第三、調版面與間距。在「樣式 → 版面」設定內容寬度與區塊間距。內容寬度抓在 1100 到 1200 像素是目前常見的做法。間距則建議用一套固定級距（例如 8、16、24、32 像素），不要每個區塊隨手填不同數字，間距亂跳會破壞整體的視覺節奏。
第四、設定區塊與元件預設值。這步在下一節細講，重點是把按鈕、連結、標題的預設外觀一次定好。
第五、回到樣式書逐分頁驗收。把「文字、媒體、設計、小工具、主題」每一分頁都掃過一遍，確認沒有哪個區塊跟整體調性脫節。確認無誤後再點面板底部的「檢視變更」儲存，這時整站才會一次套用。
這套順序的核心邏輯是：你只在全站樣式裡定義一次規則，WordPress 會把規則層層往下套到每個區塊。改主色時不必去每頁手動換顏色，回到色盤改一個值，全站的按鈕、連結、標題色就同步更新。
樣式書怎麼讓區塊與按鈕全站一致
按鈕與連結是全站最容易長得不一致的元件，樣式書搭配區塊預設值剛好能把它們鎖住。過去要讓所有按鈕都圓角、同一個底色、滑過去變色，往往得寫一段 CSS 硬蓋；現在在「樣式 → 區塊」裡選按鈕，把圓角、內距、底色、滑過色設定好，全站的按鈕就會自動遵守這條規則，不必碰程式碼。
具體來說，進到「樣式 → 區塊」後，你會看到按鈕、標題、段落、圖片、導覽、欄、群組等可單獨設定的區塊。以按鈕為例，你可以一次定義：
- 圓角：設定固定的圓角半徑，全站按鈕統一外形。
- 內距：讓按鈕的點擊範圍與留白一致。
- 底色與文字色：從色盤裡挑，不要另外手填色碼。
- 滑過狀態：設定滑鼠移上去時的變色，互動回饋全站一致。
設定完之後到樣式書的「設計」分頁，按鈕就會即時呈現新樣子。確認沒問題，這條規則就成為全站按鈕的預設——之後不管是文章裡插的行動呼籲按鈕，還是 WooCommerce 的結帳按鈕，外觀都會跟著走。
連結與標題也是同樣的道理。在「樣式 → 元素」裡可以統一控制連結、按鈕、標題、圖說的外觀，例如讓所有連結滑過時加底線、把各級標題的上下間距調成一致。這類設定一旦定好，整個網站的互動與排版就會自動對齊，這正是樣式書最能省時間的地方：你用「定義規則」取代「逐個修改」，新內容自動繼承，維護成本大幅下降。
樣式書搭配 theme.json 與樣式變化的進階用法
對開發者來說，樣式書背後對應的是 theme.json 這個檔案，理解這層關係能讓你的設計系統更穩。你在全站樣式面板裡按下去的每個設定，本質上都是在改寫 theme.json 裡的設計權杖（design tokens）——色盤、字級、間距級距、區塊預設值都集中存在這個檔案裡。樣式書則是這套權杖套用到各區塊後的視覺成果。
theme.json 是 WordPress 5.8 引入的設定檔，它把整個主題的設計系統收進一個結構化的 JSON 檔。它的價值在於：
- 集中管理設計權杖：色盤、字型級距、間距單位、區塊預設值全寫在一處，要改設計系統只動這一個檔。
- 減少 CSS 體積：很多原本要靠 CSS 達成的樣式，改用 theme.json 宣告，前端輸出更乾淨、載入更輕。
- 可以收掉編輯器控制項：把某些設定關掉，編輯者就只能從你預設的色盤與字級裡挑，沒辦法自己亂塞顏色。這是用「限制選項」來強制全站維持品牌一致的常見手法，交給客戶維護時特別有用。
另外一個常被忽略的搭配是「樣式變化（Style Variations）」。許多區塊主題會內建好幾組預設的樣式變化，等於主題作者先幫你配好的整套配色與字體組合。你可以在樣式書裡直接切換這些變化、即時比較，挑一組最接近品牌調性的當基底，再從上面微調色盤與字體。對不想從零配色的人來說，這是最快建立一致視覺的起點。
設定流程上的建議是：先選一組樣式變化打底，再進全站樣式微調色盤與字型，最後若有開發需求，把成果落到 theme.json 做成可重複使用的主題基礎。一般編輯者停在前兩步就夠了，theme.json 是給需要打造可擴充、可交付專案的開發者用的。
樣式書常見的限制與容易踩到的狀況
樣式書很好用，但有幾個限制先知道，能少走冤枉路。最根本的一條是：它只在區塊主題下運作。如果你的網站還在用古典主題，沒有網站編輯器，自然就沒有樣式書，這時得先評估是否要換成支援全站編輯的區塊主題。
第二個常見狀況是中文環境的小毛病。實務上有使用者回報，全站編輯在儲存範本名稱時，用中文命名可能無法正常儲存，改用英文才行；這跟多語系支援仍在持續完善有關，命名範本與範本部件時建議先用英文，避免存不進去。
第三是效能上的延遲。網站編輯器整體功能較全面，相當吃網頁效能。有些使用者在挑全域顏色時會遇到明顯延遲，甚至點不動色票，這時改用直接輸入色碼的方式通常就能順利更換。把網站架在規格較好的主機上，操作起來會流暢許多。
還有幾個觀念上容易踩到的地方：
- 樣式書只預覽「已註冊的區塊」：它展示的是目前環境裡可用的區塊。某些外掛提供的特殊區塊不一定會出現在預覽裡，實際效果還是要回到真實頁面確認。
- 不要一邊用全站樣式、一邊又疊一堆自訂 CSS：兩套系統互相覆蓋會讓樣式來源變得難以追蹤。優先用全站樣式定規則，CSS 留給少數真的調不出來的細節。
- 改大設定前先備份：色盤、字型這類全站設定一改就是全站生效，動手前先確認可以還原（網站編輯器本身有「重設為預設」可用），避免一次改壞整站視覺。
- 記得測試行動裝置：在桌機樣式書裡看起來協調的字級與間距，到手機上可能太大或太擠，存檔前最好也檢查窄畫面的呈現。
把這些限制放在心上，樣式書的角色就很清楚：它是幫你「先看後存」的驗收台，真正讓全站視覺統一的是背後那套定義一次、處處套用的設計系統。
把樣式書納入你的固定建站流程
統一全站視覺的訣竅，從來不是逐頁去改，而是先把色盤、字體、間距、區塊預設這套設計系統定好，再用樣式書當驗收台確認每一種元件都對齊。順序對了，之後新增的每一篇文章、每一個商品頁都會自動繼承這套規則，你只需要在全站樣式改一個值，整站就同步更新。
下一步很簡單：打開「外觀 → 編輯器 → 樣式」，點開眼睛圖示叫出樣式書，先照前面的順序把色盤與字體定下來，再逐分頁掃過所有區塊。花一次時間把這套系統建好，往後維護網站視覺的時間會省下一大截，整個 WordPress 網站也才會真正看起來像同一個品牌。