第二部我們把 Block Theme 的每個零件都對照傳統佈景主題的設計概念,從今天起的第三部,我們要用 AI 一步一步把這些觀念變成跑得起來的主題和外掛。但在打第一行程式碼之前,得先介紹今天的主角:Everything-WP,這是我自己在開發 WordPress 時天天在用的一套 AI 工具箱。
先講一個很多人對 AI 寫程式的誤解:以為只要開著 Claude Code,丟一句「幫我做一個 Block Theme」,它就會生出一份能上線的專案。現實很骨感,實際跑一次後你會拿到一份「看起來很像」但細節到處漏的東西:theme.json 版本號寫錯、區塊少了 esc_html()、i18n 的 text domain 前後不一致、沒有任何測試。不是 AI 笨,是它不知道「你這個專案要遵守哪些規矩」。
傳統主題開發時,這些規矩存在我們腦袋裡:sanitize、escape、nonce、WPCS 排版、README 要有哪些欄位,AI 沒有你的腦袋,所以你得把這些規矩「餵」給它。Everything-WP 做的就是這件事,它把 WordPress 開發的最佳實踐寫成 AI 看得懂、而且會主動遵守的形式。
https://github.com/oberonlai/everything-wp
它是一個 Claude Code 外掛(plugin),裝好之後會替 Claude Code 補上三種東西:
Commands(指令):一組以斜線觸發的工作流。像 /init-theme 生成整個主題骨架、/make-block 把一個參考網站變成設計系統、/init-plugin 開一個外掛專案、/verify 跑完整品質檢查。你打一個指令,它照著一份寫死的步驟走,不會漏。
Skills(技能):深度知識庫。wp-backend 裝著 PHP 安全、資料庫、OOP 慣例;wp-frontend 裝著 CSS/JS 排版標準;wp-block-themes 專講 theme.json、模板、樣式。當任務碰到相關主題,Claude 會自動翻出對應技能來參照,等於隨身帶著一本寫好的 handbook。
Agents(代理):分工的專職角色。planner 負責把需求拆成三層任務、task-executor 照計畫實作(支援 TDD)、code-reviewer 做風險分級的程式碼審查、code-quality 跑 PHPStan / PHPUnit / PHPCS。
拿傳統開發類比:Command 像是你寫好的 shell 腳本,Skill 像是團隊的 coding guideline 文件,Agent 則像是幫你 code review 和跑 CI 的同事。差別是這三者現在都接在 AI 上,AI 會自己去讀並且執行。
第三部不會把每個指令都用過,你也不用記憶每一個指令,只要遵循著設計好的工作流程即可,我們只需要走能夠真正打造一個區塊主題會走到的那條路線:
| 階段 | 用到的工具 |
|---|---|
| 開專案骨架 | /init-theme(block 模式) |
| 從參考網站生設計系統 | /make-block |
| 寫區塊時的知識來源 | wp-block-themes、wp-frontend 技能 |
| 延伸成外掛 | /init-plugin、/plan、/todo |
| 品質收尾 | /verify、/review |
我用下來最大的體會是:Everything-WP 真正的價值不在「生程式碼」,而在「守住品質的底線」。AI 生程式碼很快,快到你來不及一行行檢查,AI 開發真正危險的地方是它寫得快又錯而你沒發現。這套工具把「escape 了沒」、「有沒有測試」、「符不符合 WPCS」變成流程裡自動會跑的關卡,讓你能放心把速度交給 AI,同時不把品質也一起交出去。
下一篇我們把環境準備好:Local 架站、Claude Code、還有把 Everything-WP 這個外掛裝進去,讓後面每一天的實作都有地方跑。
文章目錄:https://oberonlai.blog/category/2026-ithome/