在一個豔陽高照的拜六，我坐高鐵到新竹參加我第一次的新竹 WordPress 小聚，分享這陣子用 AI 開發 WordPress 原生區塊主題（Block Theme）的心得。區塊主題是 WordPress 官方主推的做法，把網站版面拆成一顆顆可以重複使用的區塊，不裝頁面編輯器也能在後台調整版面。
原本擔心這個題目太硬根本不會有人想要來聽，下午兩點的活動在 1:55 時還沒有半個人出現，想說該不會只有我一位XD，還好主辦阿常與一些熟面孔陸續出現才鬆了一口氣，接著就是驚訝原來一些熟面孔也是新竹小聚的常客～
跟每場都爆炸多人的北部小聚比起來，新竹小聚的小規模反而真的能夠跟每一位夥伴進行深度的交流，年紀大了好像這種規模比較適合我。小聚一共三小時，主題分享約四十分鐘，剩下的時間都在聊天，認識了新竹在地的接案工作室、設計師，也跟常在小聚碰面的夥伴有了更深的認識。
以下是我這次分享主題的逐字稿整理：
頁面編輯器是 WordPress 的推手
WordPress 網站的版面設計通常有兩種做法：一種是工程師手刻佈景主題，程式碼乾淨、載入速度快，但客戶想改個標題都要回頭找工程師；另一種是裝 Elementor 這類頁面編輯器，不懂程式也能拖拉出漂亮的版面，WordPress 的普及有一大半是它們撐起來的。
方便是真的，代價也是真的：頁面編輯器為了精準控制版面，會在網頁裡塞進一層又一層的結構，開一個頁面就載入一大包用不到的資源，速度慢下來，接著是年費，然後是最讓人焦慮的更新——生態系越大、外掛之間牽扯越深，大版本更新按下去，沒人敢保證版面不會跑掉。
區塊主題：WordPress 官方自己做的樂高
WordPress 官方從 2021 年開始把重心放在區塊編輯器上，一路演進到現在，區塊主題已經是一套完整的系統，我在簡報裡用樂高比喻它的四個核心：
- theme.json 是樂高說明書——一個檔案定義整個網站的品牌色、字體大小、間距，甚至可以規定「客戶只能選這五種顏色」、「間距只能選 10px、20px、30px」
- 區塊（Block）是積木——按鈕、卡片、輪播，每個元件都是一顆獨立的積木，任何頁面都能重複使用
- Pattern 是拼好的小房子——好幾顆積木組成的段落，例如首頁的形象區，拼一次到處用
- 範本（Template）是整個場景——把 Pattern 兜起來，變成訪客實際看到的頁面
這套結構的完整原理我在〈從傳統佈景主題到區塊佈景主題〉寫過，這篇想講的是後面的事：這套結構跟 AI 放在一起，效果比我自己預期的好很多。
AI 寫程式會放飛自我，區塊主題管得住
大家對 AI 寫程式的印象通常是「很會生，但管不住」，丟一句話給它，它就開始自由發揮，A 頁面跟 B 頁面明明該長一樣的按鈕，硬是給你兩種樣式，你只能反覆提醒「這邊要跟首頁一樣」。
問題不完全在 AI，傳統佈景主題的寫法太自由，資料夾怎麼架、CSS 怎麼寫全看工程師個人習慣，AI 讀這種程式碼就像讀一本沒有目錄的書。區塊主題剛好相反：樣式集中在 theme.json、每個元件是獨立區塊、樣式跟資料分開存放，AI 拿到的是一本有目錄、有規格表的說明書。
我做過一個實驗：把自己既有的網站丟給 Claude Code，請它抽出所有 UI 元件做成獨立區塊，它列出卡片、部落格列表、輪播一整排元件，之後要組新頁面，只要說「用現有的元件拼一個首頁」，因為每顆積木都事先檢查過，拼出來的成品跟預期幾乎沒有落差。
Theme.json 的組成
本次主要介紹 theme.json 中與區塊主題開發最相關的五個部分：
- settings
- styles
- customTemplates
- templateParts
- patterns
settings 是管理開啟或關閉在後臺、區塊編輯器或是範本編輯器裡面的每一個控制選項。也就是說，如果今天你想要讓客戶可以改區塊裡面文字的色彩，卻不能改框線，全部都可以在這個 Settings 裡面進行設定。
styles 是會把所有我們要用得到的顏色、字型尺寸、邊框寬度、間距以及邊距的所有數值進行定義，之後當我們在設計區塊的時候，就不會直接把 CSS 的值給寫死，而是會全部使用 settings 中的這些變數來進行控制，藉此來確保所有的樣式都是在允許的可控範圍之中。
然後當 AI 要修改樣式時，它就可以去找 styles 裡面的這些變數來進行修改，就不會像以前傳統的佈景主題一樣，可能要在兩三千行的 style.css 裡面去尋找散落在每一個選擇器底下相同的屬性。
上圖可以看到，在 styles 裡面設定 background 的實際具體值時，是用 var(--wp--preset--color--base) 而不是直接寫死，直接使用 settings 裡面所命名的變數名稱，這樣一來，當我們在 settings 裡面指定好這些樣式之後，就可以直接套用在 styles 裡面來進行統一管理：
另外 styles 裡面也可以針對指定區塊的樣式來進行調整，不管是 WordPress 無論是內建的區塊還是我們自己設計的，都可以帶入區塊的名稱，然後來完全客製化每一個區塊的樣式：
簡言之 settings 負責定義可用的顏色、字級、間距等設計預設值，WordPress 會將這些 preset 轉換成 CSS 變數；styles 則負責引用這些預設值，設定網站、元素與區塊實際使用的樣式。
customTemplates 用來註冊可供文章、頁面或自訂文章類型手動選擇的自訂範本。註冊後使用者可以在編輯器側欄的範本選項中切換版型，也就是在後台編輯頁面時，會在右側欄看到變更範本可以點擊，點擊後可以進一步選擇範本：
templateParts 用來註冊可重複使用的範本區塊，例如 Header、Footer、Sidebar 等，並提供名稱、標題及所屬 area。實際在 Template 中載入時，則透過 Template Part Block 引用；若設定 tagName，還能輸出 <header>、<footer> 等語意標籤。
最後的 patterns 可以指定要引入哪些在官方目錄上面的內容版面，這樣就能夠讓後臺的管理者在後台直接插入使用省去自行尋找的時間。
Block 的組成
Block 主要分為靜態以及動態兩種：所謂的靜態 Block，可以想像是我們以往在「所見即所得」編輯器中輸入的內容，當按下儲存後，就會直接寫入資料庫，這個靜態內容就是我們後臺所寫入的內容。
而動態 Block 可以做程式的邏輯判斷，或是可以直接從資料庫撈出最新的幾篇文章。也就是說，過往我們自己要去做資料庫查詢的功能要放在 Block 裡面的話，就需要使用動態 Block 來做，一個 Dynamic Block 通常會包含 block.json、JavaScript 編輯器程式，以及 render.php 或 PHP render_callback；若需要自訂樣式或前端互動，還可以加入 CSS 與 view.js 等檔案，我有用到的分別是：
- block.json
- index.js
- render.php
- style.css
block.json 是整個 Block 的設定檔，它負責註冊區塊、定義區塊名稱、可接收的 attributes（參數）、支援功能，以及要載入哪些 JavaScript、CSS 和 PHP。可接收參數的部分就像以往我們在註冊短代碼的時候一樣，可以讓使用者透過帶入參數的方式，來客製化這個短代碼的內容，區塊也是一樣的邏輯。
改用區塊來組成頁面，最大的好處就是每一次當載入頁面時，只會讀取個別 block 有用到的 CSS 或是 JS，它不會像以前我們傳統的佈景主題一樣，不管什麼頁面都會把所有的靜態資源載入進來；區塊佈景主題可以自動做動態的判斷，避免頁面載入不需要的資源。
index.js 負責註冊 Block，並定義它在區塊編輯器中的行為，包括後台預覽、設定面板以及各種互動功能。而靜態 Block 不會有 render.php，它只存在於動態 Block 中，它會在前端用 PHP 做處理後輸出 HTML，render.php 負責前端的伺服器端渲染；若編輯器端另外使用 ServerSideRender，也可以用同一套 PHP 輸出提供後台預覽。
style.css 用來定義這個 Block 的樣式，它會和 theme.json 所產生的全域樣式一起作用，實際套用哪一個樣式，仍取決於 CSS 的選擇器優先權與載入順序。
Pattern 的組成
Pattern 是由多個區塊組成的內容版面。WordPress 官方提供 Block Pattern Directory，收錄社群貢獻的免費 Pattern，可直接瀏覽、複製並使用。
Pattern 分為「同步」與「非同步」兩種：
- 同步 Pattern：可跨頁面共用內容，只要修改其中一處，所有使用該 Pattern 的地方都會同步更新。
- 非同步 Pattern：插入後會成為目前頁面的獨立內容，修改時不會影響其他地方。
建立 Pattern 的方式有兩種：
- 編輯器建立：在後台編輯器選取多個區塊後，直接儲存為 Pattern。
- 程式碼建立：在佈景主題的
patterns資料夾建立 Pattern 檔案，加入 Pattern Header（例如 Title、Slug、Categories 等），再撰寫對應的區塊標記（Block Markup）。
Template－最終呈現的畫面
Template 可以理解成網站最後輸出的頁面版型，它決定了一個頁面要顯示哪些內容，以及這些內容如何排列。和傳統 WordPress 主題最大的不同在於，Block Theme 的 Template 是由 HTML 與 Block 組成，而不是由 PHP 組成。
1. Template 採用純 HTML
在傳統主題中，我們會在 single.php、archive.php 等 PHP 檔案裡，透過 the_title()、the_content()、have_posts() 等函式取得資料，再輸出成 HTML。
而在 Block Theme 中，Template 改成使用 HTML 檔案，並透過各種 Block（例如 Post Title、Post Content、Query Loop 等）來取得 WordPress 的資料並呈現在畫面上。因此，大部分的版面配置都可以直接在 Site Editor 中完成，而不需要撰寫 PHP。
2. Template Hierarchy 並沒有改變
雖然 Template 從 PHP 改成了 HTML，但 WordPress 的 Template Hierarchy（範本階層） 並沒有改變。
例如文章頁面仍然會依照相同的優先順序尋找範本：
single-{post_type}.html
↓
single.html
↓
singular.html
↓
index.html因此，如果你熟悉傳統 WordPress 的 Template Hierarchy，在 Block Theme 中幾乎可以直接沿用相同的觀念，只是副檔名由 .php 改成了 .html。
3. Template 支援資料庫覆寫
Block Theme 的另一個特色是 Template 可以被資料庫中的內容覆寫。
當使用者透過 Site Editor 修改某個 Template 時，WordPress 不會直接修改佈景主題中的 HTML 檔案，而是將修改後的內容儲存在資料庫中。
之後網站會優先讀取資料庫中的 Template，而不是主題內的 HTML 檔案。這也是為什麼使用者可以在後台自由調整版面，而不需要修改程式碼。
此外，開發者也可以透過 theme.json 的 customTemplates 註冊自訂 Template，讓使用者在頁面編輯器中選擇不同的版型，例如 Landing Page、Full Width 或 WooCommerce 專用頁面等。
把整套流程包成開源工具 EverythingWP
理解了區塊的基礎知識後，我把它封裝成開源工具 EverythingWP，在 Claude Code 輸入一個指令，它會一步步引導你建立符合官方規範的區塊主題，連程式碼品質檢查都包在裡面。
其中我最常用的是 make-block 指令：丟一個參考網站的網址或設計圖給它，它會先爬出這個網站的設計規則——用了哪些顏色、字體怎麼搭配，這些規則叫做 Design Token，然後寫進 theme.json 這本說明書，接著把網站上的元件逐一抽出來做成區塊，最後產生一頁 UI Library，讓你逐顆檢查積木長得對不對。
檢查這一步比較花時間，但做企業網站的話很划算：品牌視覺整理進說明書之後，客戶未來自己加頁面、做活動頁，成品都不會偏離品牌風格。這也是我在〈告別 Elementor〉那次改版之後，決定把流程標準化的原因。
現場問答比簡報精彩
分享後的問答時間，有三題我覺得值得記下來。
「這真的可以取代 ACF 嗎？」ACF 是幫客戶開自訂欄位的老牌外掛，我的答案是：區塊內建的設定欄位已經夠用，文字、清單、重複資料搭配 AI 都開得出來，而且欄位跟著區塊走，客戶在哪裡看到區塊，就在哪裡改內容，不用捲到頁面最下面找欄位。
「WooCommerce 可以用區塊嗎？」可以，但目前的卡點是台灣的金流外掛支援還在路上，社群已經有夥伴把支援區塊的金流外掛提交上架了，現階段以台灣電商的情境還是使用短代碼的方式會比較穩定。
「效能真的有差嗎？」WordPress 支援按照實際出現的 Block 載入對應資源。只要透過 block.json 或 正確註冊區塊的 CSS 與 JavaScript，就能減少未使用資源；實際是否完全按需載入，仍取決於 WordPress 設定與資源的註冊方式。
這場分享我帶回家的三件事
- 區塊主題已經成熟——官方磨了多年，做品牌官網該有的能力都有了
- 先給約束，AI 才跑得快——theme.json 就是護欄，規格寫死了，生成的品質才會穩
- 社群的問題比簡報有價值——大家關心的是維護成本、客戶好不好改，不是技術多新
如果你也在評估要不要從頁面編輯器搬過來，建議先拿一個小頁面試起，或直接用 EverythingWP 跑一次流程，跑完就知道這套做法適不適合你。之前那篇〈用 AI 開發 WordPress 外掛心得〉是同一個脈絡，外掛跟佈景主題開發只要遵循好固定流程，剩下就能放心的交給 AI。