衣櫃裡如果有幾套已經配好的完整穿搭，上衣、褲子、鞋子的顏色與材質互相搭配好，出門前不用再一件一件挑，直接整套換上就好。WordPress 的佈景主題裡也藏著同樣的機制，只是換的不是衣服，而是整個網站的顏色與字體。
很多人第一次打開後台想調配色，結果東點一下按鈕顏色、西調一下標題字級，改到後來，網站的深淺色湊不成同一套，字型也跟主視覺對不上，反而比動手前更亂。樣式變體（style variations）就是為了解決這件事而存在的功能：佈景主題作者事先把一整套配色、字體、間距等設定搭配好，存成一個選項，只要在後台點一下就能整套替換，不必自己一個一個項目慢慢配。這是 WordPress 核心「全站編輯」（Full Site Editing，FSE）本身內建的能力，不需要另外安裝外掛。
讀完這篇，你會知道樣式變體跟「只調一個顏色」的全域樣式有什麼差異、後台哪裡可以切換、切換時容易踩的幾個坑，以及內建組合都不合意時還有哪些路可以走。
樣式變體是什麼？佈景主題內建的配色字體組合包
以 WordPress 官方預設佈景主題 Twenty Twenty-Five 為例，它一次內建了 9 組樣式變體：Default、Evening、Noon、Dusk、Afternoon、Twilight、Morning、Sunrise、Midnight。每一組都同時定義好一套配色與一套字體搭配，像 Default 是黑白基調、Evening 換成深色系、Noon 走米白配黑、Sunrise 帶一點暗紅與粉色調。只要在後台點選其中一組，網站的主色調、強調色、標題與內文字體就會一次全部替換，不必逐項手動調整。這正是樣式變體的核心價值：一次動全部，不是一次動一項。
從技術本質來看，樣式變體其實就是佈景主題作者事先寫好的另一份 theme.json。正常情況下，theme.json 放在佈景主題的根目錄，定義整個網站的全域設定與樣式，被視為「預設變體」；佈景主題作者如果還想提供其他配色與字體組合，就會另外存成獨立命名的 JSON 檔，放進佈景主題的/styles 資料夾裡。任何能寫進 theme.json 的東西，包括顏色、字體、間距、區塊樣式，都能寫進這些額外的樣式變體檔案，讀者選哪一組，後台就套用哪一份設定。
要注意的是，樣式變體不是每個佈景主題都有，數量完全由佈景主題作者決定。有的佈景主題像 Twenty Twenty-Five 一次附上 9 組，也有佈景主題完全沒有內建任何樣式變體，這種情況下後台當然也就看不到可以切換的選項。
這裡常有人搞混一個問題，那就是換一個樣式變體，算不算換掉整個佈景主題。答案是不算。樣式變體只替換 theme.json 裡記載的內容，也就是顏色、字體、間距這些外觀設定；佈景主題本身的版型結構、模板、區塊排列方式完全不受影響。換句話說，樣式變體換的是「這個網站穿什麼顏色的衣服」，不是「換一個人」。
整組替換的樣式變體與只動一處的全域樣式
後台裡有兩個地方都可以調整外觀，很容易被當成同一件事，一個是「樣式面板」（外觀>編輯器>樣式）底下的「瀏覽樣式」，另一個是同一個樣式面板裡的 Colors、Typography、Layout、Blocks 幾個分頁。前者是整組切換，後者是在目前這一組的基礎上，單獨微調某一個項目，例如只改按鈕顏色、只調某個標題的字級。這兩者根本不是同一層級的操作，混著用就是後台亂改的主因。
WordPress 官方文件說明，「樣式」（Styles）這個面板讓使用者從全域層級設定網站的整體外觀與版面，裡面看得到佈景主題本身提供的樣式與預設值、以及 WordPress 本身內建的樣式，使用者可以用自己的選擇去覆蓋這些設定。也就是說，不管目前套用的是佈景主題原本的 theme.json，還是某一組已經選定的樣式變體，Colors、Typography 這幾個分頁裡做的每一個微調，都是疊加在「目前這組樣式」之上的覆蓋動作，而不是另外開一份新的設定。
讀者最容易誤會的一點是，在全域樣式裡調好的顏色，換一個樣式變體之後就會直接消失。因為切換到新的樣式變體時，WordPress 官方文件說明，使用者選定某個樣式變體後，該變體的 JSON 資料會整份寫進網站資料庫，視為「使用者自訂設定」，並且會覆蓋掉原本的設定。這是整份資料的覆蓋，不是逐項比對後才決定要不要保留，所以先前個別調整的全域樣式設定不會被單獨留下來。也因為這樣，順序才會影響結果，如果先在全域樣式裡調好顏色，之後才切換一個新的樣式變體，前面調的顏色就會被那組變體整組蓋掉；反過來，先選定一組樣式變體打底，再用全域樣式做局部微調，才是不會白費工夫的順序。
切換樣式變體前，佈景主題得是區塊主題
樣式變體不是每個 WordPress 網站都看得到，它是區塊佈景主題（block theme，也叫 FSE 佈景主題）才有的功能。如果目前用的是傳統以 PHP 樣板為主、搭配「自訂」（Customizer）介面操作的經典佈景主題，或者主要靠 Elementor 這類頁面編輯器排版的佈景主題，後台就不會出現樣式面板這個選項。
判斷方式很直接，打開外觀選單，看到的是「編輯器」（Editor）還是「自訂」（Customize）。看到「編輯器」，代表目前用的是區塊佈景主題，樣式面板就在裡面；看到的是「自訂」，代表是經典佈景主題，得先換成區塊佈景主題才會有這個功能。
版本門檻也要留意。樣式面板這個功能本身需要 WordPress 5.9 以上才有；樣式變體之間互相切換的介面，是從 WordPress 6.0 才開始出現的新功能；至於只換配色或只換字體、不整組替換的局部變體，則是 WordPress 6.6 以後才新增的能力。WordPress 官方文件對 Site Editor（樣式面板所在的位置）也明確指出，這個編輯器只有在網站啟用區塊佈景主題時才會出現。截至目前，WordPress 核心已經更新到 7.1 版，只要網站沒有停留在非常舊的版本，這些版本門檻通常都已經跨過，真正打不開這個功能的原因反而多半是佈景主題本身不是區塊佈景主題，而不是 WordPress 版本太舊。
從外觀選單進入樣式面板，切換一組完整樣式變體
確認佈景主題支援之後，實際切換一組完整樣式變體只需要三個動作：找到入口瀏覽選項、用樣式書預覽效果、按下儲存讓它真正生效。這三個動作缺一不可，尤其最後一步最容易被忽略——沒按下儲存，前面挑好的樣式終究只停留在編輯器裡的預覽畫面，前台看到的仍是原本的樣子。
樣式面板裡一次瀏覽所有內建樣式組合
入口在外觀選單裡的「編輯器」。點進去之後，畫面右上角會有一個半陰影的圓形圖示，點下去就會開啟樣式面板。樣式面板頂端會先顯示目前使用中樣式變體的縮圖，點縮圖下方的「瀏覽樣式」（Browse styles），就能看到這個佈景主題內建的全部樣式變體選項一次列出來。
點任何一個縮圖，編輯器畫面就會立刻換成套用那組樣式之後的樣子，可以馬上看到配色與字體變成什麼樣。不滿意的話，點左上角的返回箭頭就能回到樣式面板，重新挑另一組再看一次，這個過程可以重複很多次，完全不會影響到目前正式上線的網站。
樣式書先預覽整站區塊，再決定要不要存檔
樣式書（Style Book）是 WordPress 6.2 推出的輔助功能，很容易被忽略，但用起來很方便。它會把目前選定的那組樣式套用之後，網站裡各種區塊，像標題、按鈕、引言、清單、表格，長什麼樣子一次全部列出來給你看，不用真的存檔，也不用跳到前台反覆重新整理頁面確認。
進入方式是在樣式面板裡點選預覽圖示（一個眼睛的符號）。用途很單純，一次看到多種區塊套用當前樣式後的呈現效果，適合在正式按下儲存前，先抓出「這個配色搭配某個區塊看起來很奇怪」之類的問題，看完再決定要不要繼續往下存檔。
按下儲存才真正套用，瀏覽階段只是預覽
這一步是整個流程裡最容易誤會的地方。在樣式面板裡點選某個變體，編輯器畫面會立刻換成那個樣子，但這只是編輯器內部的即時預覽，前台的正式網站這時候看起來還是原本的樣子。一定要按下畫面右上角的「儲存」按鈕，這次切換才會真正寫進網站，讓正式上線的頁面也變成新樣式。
CSS-Tricks 一篇解析 WordPress 區塊佈景主題樣式切換流程的文章，也點出同樣的操作順序，選定想要的樣式之後，還要按下右上角的儲存鍵，這個變化才會顯示在瀏覽器看到的前台畫面上。如果選好了樣式就直接切換到別的頁面，或者重新整理瀏覽器，剛剛選的變體並不會生效，網站前台仍然維持原本的樣子。
只換配色或只換字體，兩種可以各自挑選再混搭
除了整組替換的完整樣式變體，WordPress 6.6 起還新增了「局部樣式變體」，跟前面講的完整樣式變體不同，這種變體只包含配色設定，或者只包含字體排版設定，出現的位置也不一樣。只換配色的變體會出現在樣式面板的 Colors 分頁裡，跟原本的色票排在一起；只換字體的變體則出現在 Typography 分頁的 Presets 裡。
WordPress 官方開發者部落格說明，色彩與字體排版變體是既有全域樣式變體系統底下的子集合，範圍限縮在顏色與字體排版這兩件事上。註冊之後，這些變體除了出現在 Site Editor 側邊欄，也會出現在樣式面板的 Color 分頁下的 Palette 選項、以及 Typography 分頁下的 Presets 面板裡。判斷一個變體檔案該歸類成哪一種也不需要佈景主題作者額外設定——WordPress 會依照這份變體檔案裡只含有顏色設定、還是只含有字體排版設定，自動判斷該把它放進哪個分頁。
這兩種局部變體最實用的地方在於可以互相混搭，也可以疊加在原本已經選定的完整樣式變體之上。舉例來說，可以先選定一組完整樣式變體打底，再單獨換上另一組配色，字體維持不變；也可以反過來，字體換掉、配色不動。延續前面 Twenty Twenty-Five 的例子，官方文件也提到，9 組樣式變體背後的配色與字體，其實各自都能被單獨抽出來自由搭配，不一定要整組套用。只想換顏色、字體完全不想動，靠這組局部變體機制就做得到。
切換樣式變體時容易忽略的三個地方
實際操作起來，有三個狀況最容易讓人措手不及，每一個都值得先知道，免得白忙一場。
第一、還沒存檔的全域樣式微調，會被切換樣式變體的動作直接蓋掉，而且抓不回來。原理跟前面提過的機制一樣，選定一個新的樣式變體時，WordPress 會把那份變體的 JSON 資料整份寫進資料庫，取代原本的設定，這是整份覆蓋，不是逐項保留。如果手上已經調好一些顏色或字體、還沒按下儲存，這時候點去瀏覽另一組樣式做預覽，剛剛的調整就會不見。想保留現有的微調，正確做法是先按儲存把它存檔，或者先把調整的數值記下來，再去嘗試別的樣式變體。
第二、樣式變體一旦選定並存檔，就會被寫進網站資料庫，視為使用者自訂設定，這件事會影響到佈景主題之後的更新。WordPress 官方文件特別說明，等到佈景主題作者未來更新那個樣式變體檔案，比如修正了某個配色的數值，已經套用過並存檔的網站不會自動跟著拿到這次更新。要拿到更新後的版本，得回到樣式面板，重新選取一次同一個變體才行，光是佈景主題本身更新並不會讓已經存檔的設定跟著變動。
第三、換成完全不同的佈景主題，原本存在資料庫裡的樣式變體設定不會被沿用。這是因為樣式變體的資料是綁在啟用中那個佈景主題的 theme.json 架構之下，換了一個不同架構的佈景主題，原本的設定就對不上了，等於要在新佈景主題底下重新選一次樣式變體。這跟 WordPress 處理自訂 CSS 的邏輯類似，自訂的 CSS 調整不會被佈景主題更新覆蓋掉，但換成別的佈景主題時就會被清空，是同一套「換主題會清空客製化」的原理。
真的不小心把設定蓋掉，也還有一條救回的路，在樣式面板右上角點三個直排的圓點圖示，選擇「重置為預設值」（Reset to defaults），可以回到佈景主題原本的樣式設定。只是這裡要先弄清楚，這個動作是重置回佈景主題最初出廠的設定，不是回到「切換前那組自訂設定」，兩者不是同一件事，別把它當成萬用的復原鍵。
內建組合不夠時自己存一組專屬樣式變體
如果佈景主題內建的樣式變體都不合意，配色不喜歡、字體想換掉，還有兩條路可以走，一條偏開發者向，一條不用寫程式碼。
樣式變體本質上就是一份放在佈景主題/styles 資料夾裡、格式符合規範的 JSON 檔，只要新增一份這樣的檔案，就會在樣式面板的瀏覽樣式清單裡多一個可以選的選項出來。WordPress 官方 Theme Handbook 也提到，這份 JSON 檔可以透過 title 這個屬性，設定它在後台介面上顯示的名稱，雖然不是必填欄位，但填了會讓使用者體驗好上不少。這條路需要直接動到佈景主題的檔案，比較適合懂一點程式的人，一般讀者可能會覺得門檻偏高。
不寫程式碼的替代方式，是 WordPress.org 外掛目錄裡由 WordPress 佈景主題團隊維護的官方外掛 Create Block Theme。這支外掛能把目前在樣式面板裡已經調整好的配色與字體設定，直接另存成一個有名稱的新樣式變體，存好之後就會出現在瀏覽樣式的清單裡，跟佈景主題原本內建的那幾組並列，之後隨時可以切回來。整個過程不需要手動打開任何 JSON 檔案，也不用碰佈景主題的原始碼，對於只想把調好的設定留住、之後重複使用的讀者來說，這是門檻最低的做法。
樣式變體其實就是把「配好一整套」跟「只微調一項」分開處理的機制，先選一組打底，再視需要微調，微調完想留住就存成新的變體。真的動手用過幾次之後就會發現，比起一項一項慢慢調，先弄懂這套整組替換的邏輯，反而是把網站配色與字體管好的捷徑。