全域樣式與樣式變化：一鍵切換網站配色與版面

2026 iThome 鐵人賽

DAY 12

Vibe Coding

從一句話到一個網站：用 Vibe Coding 開發 WordPress Block Theme 的 30 天系列第 12 篇

18th鐵人賽 wordpress global style wordpress style variation

Oberon Lai

2026-08-15 10:33:19

175 瀏覽

分享至

我接過一個需求，客戶想在「一般版」和「節慶版」配色之間切換，聖誕節換成紅綠、平常回到藍白。傳統佈景主題時代，我的做法是準備兩套 CSS，再寫一段 PHP 判斷日期去 wp_enqueue_style 不同檔案，還得處理快取。

後來嘗試改用 Block Theme 重做同樣的需求，只花了幾分鐘就搞定，因為全域樣式和樣式變化把換配色這件事，從寫死的 CSS 變成了可切換的設定。

這是 Block Theme 一個很被低估的能力，它的關鍵藏在上一篇講過的 theme.json 裡。

全域樣式：theme.json 的後台化身

之前提到 theme.json 用 styles 定義全站的預設樣式，背景色、內文字型、連結顏色。全域樣式就是這份 styles 在後台的視覺化面板。

打開網站編輯器的樣式選單，你會看到一個可以調排版、色彩、背景等設定的介面，你在這裡的每一個調整，本質上都是在改 theme.json 裡 styles 那一段的值，只是換成滑鼠點選、而且改完即時預覽：

開發者用 JSON 決定好基礎樣式，網站擁有者用面編輯器修改，兩邊改的是同一份設定，這正是之前提過的「檔案 vs 資料庫」機制在樣式層的具體實作：編輯器改的東西存進資料庫，覆蓋在檔案 theme.json 的預設之上。

拿傳統主題類比，這相當於把 style.css 裡那些「全站通用的變數」抽出來，做成一個客戶自己就能安全調整的後台面板，而且不會像以前那樣，客戶亂改 CSS 就整站爆版。因為他能調的範圍，早就被 settings 框好了。

樣式變化：一個主題，多套完整風格

全域樣式是「調整目前套用的樣式」，樣式變化更進一步的讓同一個主題，內建好幾套可以整組切換的完整風格。

做法出乎意料地簡單。在主題的 styles/ 資料夾裡，每放一個 JSON 檔，就是一套變體：

your-theme/
├── theme.json          ← 預設風格
└── styles/
    ├── christmas.json   ← 節慶版：紅綠配色
    └── dark.json        ← 深色版

每個變體檔的結構跟 theme.json 一樣，只寫你要覆蓋的部分：

{
	"version": 3,
	"title": "節慶版",
	"settings": {
		"color": {
			"palette": [
				{ "slug": "primary", "color": "#c8102e", "name": "節慶紅" }
			]
		}
	}
}

放好之後，網站編輯器的樣式設定就會多出兩個選項，使用者點一下，整站配色字體瞬間換過去：

回到開頭那個客戶需求：兩套 CSS 加 PHP 判斷日期的整套工程，現在變成兩個 JSON 檔加一次點選。

為什麼傳統主題做不到這麼乾淨

傳統主題不是不能換外觀，同樣的需求也可以用子主題處理，但核心問題在於傳統主題的樣式是命令式、全域、靠覆蓋順序運作的。你要切換風格，得載入另一套 CSS 去覆蓋原本的，然後開始跟 specificity 和 !important 打架，還要祈禱沒有漏改的角落。切換邏輯本身也得自己寫，用 cookie 記住選擇、用 PHP 換 enqueue、處理快取。

Block Theme 的樣式是宣告式、結構化的，每套變體就是一份完整的設定描述，切換等於「換一份設定來源」，WordPress 自己重新生成對應的 CSS 變數。沒有權限覆蓋層級、沒有自己寫切換邏輯、沒有快取地雷，這就是「宣告式 vs 命令式」差異，在使用者體驗層面最直接的體現。

面向	傳統佈景主題換風格	區塊主題樣式變化
定義一套新風格	另寫一整份 CSS	一個 `styles/*.json`，只寫要蓋的值
切換機制	自己寫 PHP + cookie + enqueue	後台面板點一下
樣式衝突	要跟 specificity、`!important` 打架	無，換的是設定來源
誰能切換	通常只有開發者	網站擁有者自己就能切
對 AI 開發	AI 難以預測覆蓋結果	AI 產一份 JSON 即成一套變體

因為變體就是一份結構化 JSON，這也是 AI 極擅長生成的東西，第三部我們甚至可以讓 AI 一次幫你生出好幾套配色變體，你在後台一個一個點著看哪套順眼。這在傳統主題「一套風格一份 CSS」的年代是難以想像的效率。

配色與字體的全站切換講完了，第二部只剩最後一塊拼圖，下一篇我們處理區塊版面——那個讓你把一整組排好版的區塊「存起來重複利用」的機制，以及介紹同步和非同步區塊版面的差異。

文章目錄：https://oberonlai.blog/category/2026-ithome/

Hi, 我是 Oberon Lai，十多年前我從一個不懂程式的平面設計師，一頭栽進 WordPress 的世界。從佈景主題到外掛開發，從接案到自研產品，這段旅程讓我深刻理解：好的技術不只是寫出能跑的程式碼，而是真正解決人的問題。

我積極投入參與社群，公開演講紀錄如下：

我專精 WordPress 開發，從企業形象網站的設計與開發、佈景主題客製化，到既有網站的改版升級，提供完整的 WordPress 建置服務。開發面涵蓋外掛開發與維護、區塊編輯器（Gutenberg）客製區塊、ACF 與 Custom Post Type 的資料架構設計，以及 REST API 整合與 Multisite 多站架構建置。同時也協助網站效能改善與 SEO 調校、安全性檢測與強化，並導入自動化部署與版本控制流程，搭配長期的技術顧問與維運支援，讓網站上線後也能穩定運作。

亦提供 WooCommerce 商店的建置與設定，並串接綠界、LINE Pay、藍新等台灣主流金流。可依需求進行結帳頁面客製化、訂單狀態自動化流程設計，以及商品管理與庫存系統的客製開發；也支援 WooCommerce Subscription 定期定額、REST API 應用開發、報表與數據匯出等進階需求。此外，透過購物流程 UX 改善、電商網站效能調校與 HPOS 高效能訂單儲存相容開發，全面提升營運效率，並提供電商營運技術顧問服務。

AI 浪潮席捲而來，我選擇擁抱而非恐懼，我把 AI 融入開發工作流以及客戶的產品中，也持續累積「AI 看不見的部分」：真實踩坑經驗、最新漏洞情報那些只有第一線工程師才看得見的細節，如果你有任何 WordPress 的客製化需求或是 AI 開發相關的問題非常歡迎加入 LINE 官方帳號與我聯繫：

https://page.line.me/vrf7844t?oat_content=url&openQrModal=true

如果想要獲取 AI 開發實戰經驗也能訂閱我的電子報，每週五上午準時出刊：

https://oberonlai.blog/wordpress-newsletter/