想換個配色或字體就得重做一套主題，這是不少人對 WordPress 改版面的舊印象。其實在區塊主題（Block Theme）上，只要在主題裡多放幾個 JSON 檔，網站就能擁有好幾套外觀，使用者在站台編輯器點兩下就能切換，不用碰任何 CSS。這個機制就是區塊主題樣式變體（Style Variations）。

這篇會把樣式變體從頭講清楚：它跟子主題、區塊樣式（Block Styles）到底差在哪、要符合什麼條件才能用、怎麼動手建立第一個變體、一般使用者又該怎麼在後台切換。最後也會帶到 WordPress 6.6 之後才有的色彩變體與字體變體，讓你能像換濾鏡一樣自由搭配。

樣式變體是什麼，跟子主題、區塊樣式差在哪

樣式變體是同一個區塊主題底下的「另一套外觀設定」。它的本體是一個放在主題 styles 資料夾裡的 JSON 檔，內容會在原本的 theme.json 之上疊加並覆寫，於是同一個主題就能切出深色、淺色、不同品牌色等多種樣貌，而版型、區塊結構完全不動。

這三個名詞很容易混在一起，先用一句話各自定位：

• 樣式變體（全站）：整個網站的外觀切換，影響色彩、字體、間距等全域設定，使用者在站台編輯器一鍵套用。
• 區塊樣式（Block Styles）：針對單一區塊的外觀選項，例如替「按鈕」做一個「外框樣式」，作者在編輯文章時逐個區塊套用。
• 子主題（Child Theme）：獨立的另一個主題資料夾，繼承母主題後再改寫，常用於改 PHP 樣板或較深層的客製。

樣式變體出現後，全站換色、換字體這類需求大多不必再開子主題。早期 Automattic 團隊釋出的多款主題就示範了這個轉變，例如 Alara 的兩個延伸版本 Framboise 與 Richmond，差別其實只在一個 JSON 檔。換句話說，過去要靠子主題才能做的「同骨架、不同外觀」，現在用一個樣式變體檔就能達成，維護成本低很多。

用樣式變體前要先確認哪些條件

樣式變體只在區塊主題上運作，傳統的古典主題（靠 style.css 與 PHP 樣板那種）沒有這個機制。動手前先確認三件事，可以省下找不到選項的冤枉時間。

第一、主題必須是區塊主題。判斷方法很簡單：後台「外觀」選單裡若出現「編輯器」（Site Editor），而不是舊的「自訂」（Customizer），就是區塊主題。Twenty Twenty-Two 之後的內建主題都屬於這一類。

第二、theme.json 要用第 2 版以上。樣式變體這套機制從 theme.json version 2 才開始支援，目前較新的主題多半已經是 version 2 或 version 3。打開主題根目錄的 theme.json，最上面那行 "version" 看一下數字即可。

第三、WordPress 版本要夠新。全站樣式變體的切換介面在 WordPress 6.0 正式內建；若要用後面會講到的色彩變體、字體變體，則需要 6.6 以上。現行版本早就超過這個門檻，但若是接手舊站，升級到最新的大版本再操作會比較順。

怎麼建立第一個全站樣式變體

建立樣式變體的核心動作只有兩步：在主題裡開一個 styles 資料夾，然後丟進一個結構正確的 JSON 檔。WordPress 會自動掃描這個資料夾，把裡面每一個合格的 JSON 當成一個可選樣式。

以下用內建的區塊主題作為示範，假設要做一個叫「酒紅」的配色變體。先在主題根目錄建立 styles 資料夾，檔案結構會像這樣：

接著在 styles/maroon.json 裡寫入變體內容。一個樣式變體最少要有 version、title 與 settings 或 styles:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "酒紅",
  "settings": {
    "color": {
      "palette": [
        { "slug": "base", "color": "#ffffff", "name": "底色" },
        { "slug": "contrast", "color": "#7c290f", "name": "主色" },
        { "slug": "accent", "color": "#ffd8be", "name": "強調色" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    }
  }
}

幾個欄位的作用要弄懂，這也是新手最常踩錯的地方：

• version：對應 theme.json 的版本，與主題保持一致即可，目前多用 2 或 3。
• title：這個變體在後台顯示的名稱。沒有填 title 時，WordPress 會直接拿檔名（去掉副檔名）當顯示名稱，所以用中文標籤就靠這欄。
• settings：定義可用的色票、字體、間距等「素材」，概念跟 theme.json 的 settings 完全一樣。
• styles：把上面定義的素材實際套到背景、文字、區塊、元素上。

寫好存檔後不用做任何註冊動作，WordPress 掃到 styles 資料夾裡的這個檔，就會自動把「酒紅」列進可選樣式。要再多做幾套，複製這個檔、改個 title 與色碼就好。

一般使用者怎麼在站台編輯器切換樣式

切換樣式變體不需要寫程式，這正是它最方便的地方：網站管理者在後台點幾下就能整站換裝，前台立刻反映。流程固定如下。

第 1 步、進入後台「外觀」，點「編輯器」開啟站台編輯器（Site Editor）。

第 2 步、在左側面板點「樣式」（Styles），通常會看到一個半黑半白的圓形圖示。

第 3 步、點開樣式面板右上角的「瀏覽樣式」（早期版本叫 Other Styles / Browse styles）。這時主題內所有樣式變體會以縮圖排成一排，把滑鼠移上去就能即時預覽整站套用後的樣子。

第 4 步、選定喜歡的變體後，點右上角的「儲存」。儲存後前台才會真正換成新樣式，沒有儲存只是預覽。

值得留意的是，套用變體不會改寫主題檔案本身。WordPress 把使用者選的樣式存進資料庫（全站樣式的覆寫紀錄），所以日後主題更新時，這些 JSON 變體檔還在，使用者選過的偏好也保留。如果想回到主題預設外觀，在同一個「瀏覽樣式」清單裡選「預設」那一張縮圖再儲存即可。

只想換色彩或字體該怎麼做

從 WordPress 6.6 開始，樣式變體不再只有「整套替換」一種。系統會自動辨識變體檔的內容範圍，把只動色彩的歸成色彩變體、只動字體的歸成字體變體，使用者因此能把色彩與字體分開挑、自由混搭，而不是被綁死在某一套完整外觀裡。

辨識規則很單純：當一個 JSON 檔的 settings 與 styles 只涉及 color，WordPress 就把它當色彩變體；只涉及 typography 就當字體變體。你不需要額外宣告類型，內容寫什麼就被歸成什麼。

舉例來說，做一個只換色票的翡翠綠變體，檔案內容可以精簡到只剩色彩設定：

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "翡翠綠",
  "settings": {
    "color": {
      "palette": [
        { "slug": "base", "color": "#ecfdf5", "name": "底色" },
        { "slug": "contrast", "color": "#022c22", "name": "對比色" },
        { "slug": "accent", "color": "#10b981", "name": "強調色" }
      ]
    }
  }
}

這類色彩變體存好後，除了出現在「瀏覽樣式」清單，也會出現在樣式面板的「色彩」→「調色盤」區塊，讓使用者單獨切換配色而不動字體。字體變體同理，只放 typography 設定即可，系統會在介面生出對應的字體選項。

變體類型一多，全部平放在 styles 資料夾會難管理。WordPress 支援在 styles 底下開子資料夾並自動遞迴掃描，建議依類型分層擺放：

子資料夾名稱可以自訂，WordPress 只看檔案內容判斷類型，不靠資料夾名稱分類；分層純粹是為了人好管理。Automattic 的 Assembler 主題就把這套機制推到極致，內含數十組色彩與字體變體，靠混搭組合出數百種外觀。一般專案不必做到這麼多，但分色彩、字體兩組各放三到五個，已經能給使用者很大的調整空間。

樣式變體建好卻沒出現？常見狀況排除

把上面步驟跑完後，最常見的回報是「檔案放了，後台卻看不到那個變體」。多數情況都落在幾個固定原因，逐項對照通常就能找出問題。

主題不是區塊主題：這是最根本的一條。古典主題沒有站台編輯器，自然沒有樣式變體面板。先確認後台「外觀」底下是「編輯器」而非「自訂」。

JSON 格式有錯：變體檔只要少一個逗號、多一個括號，WordPress 就會略過整個檔案，介面上什麼也不顯示，而且不一定報錯。把檔案內容貼進任何 JSON 檢查工具驗一次，或從一個能正常顯示的變體複製過來再改，最保險。

version 欄位不對或缺漏：樣式變體需要 theme.json version 2 以上，且變體檔自己的 version 要與主題一致。版本對不上時，該檔同樣會被忽略。

檔案放錯位置：變體必須在主題的 styles 資料夾（或其子資料夾）裡，放到主題根目錄或其他地方都不會被掃到。子資料夾可以，但別放到 styles 以外。

快取沒清：若用了頁面快取或物件快取外掛，新變體有時要清一次快取、重新整理站台編輯器才會出現。改完看不到，先強制重新整理瀏覽器與後台。

排查時有個好習慣：一次只改一個變數。先讓最精簡的變體檔（只有 version、title、一段 settings.color.palette）能正常顯示，再逐步往裡加內容，出問題時就知道是哪一段造成的。

接下來該怎麼把樣式變體用在自己的網站

樣式變體把「換外觀」這件事從「重做主題」降級成「多放一個 JSON 檔」，對需要在同一套網站結構下提供深色模式、節慶配色、或多品牌色的人來說，是維護成本最低的做法。動手順序也很清楚：先確認主題是支援 version 2 以上的區塊主題，在 styles 資料夾放入第一個變體檔，到站台編輯器的「瀏覽樣式」確認能切換，再依需求把色彩、字體拆成獨立變體讓使用者混搭。

先從一個只改色票的最小變體開始，跑通整條流程後再加字體與區塊層級的變化。等到你能用幾個 JSON 檔養出一整套可切換的外觀，網站日後要換季、換活動主視覺，就只是後台點兩下、按儲存的事。