iT邦幫忙

2026 iThome 鐵人賽

DAY 30
0
Vibe Coding

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

完賽總結:AI + WordPress Block Theme 的開發心法與下一步

  • 分享至 

  • xImage
  •  

想不到三十天就這樣過去了@@

從第一天問「AI 時代 WordPress 還值得學嗎」,到昨天用 AI 跑完交付前的品質四關,我們走了一段不算短的路。最後一天不塞新東西,就把這條路串起來,講講我自己這一整趟下來,真正留在手上的幾個心法,還有如果你想繼續的話可以往哪些方向鑽研。

如何讓 AI 寫出穩固的程式碼

這三十天我們都圍繞在同一個問題:利用既有的開源工具,讓 AI 站在巨人肩膀上寫出穩固的程式碼

第一部(Day 1 到 5)我們確認了地基:WordPress 的市佔、生態系、資料自主這些護城河,不會因為 AI 出現就消失,反而因為它有龐大的公開語料,成了 AI 最懂的網站平台之一。

第二部(Day 6 到 13)我們把 Block Theme 的每個零件,都對照回傳統主題的舊知識,證明它沒有推翻你會的東西,只是換了更適合 AI 的做法。

第三部(Day 14 到 29)我們動手用 Everything-WP 加 Claude Code,把觀念變成一套真的跑得起來的區塊佈景主題:從骨架、區塊、互動,到設計系統、效能與交付。

心法一:用既有的知識當基礎來理解 Block Theme

這是我覺得最重要、也最省力的一件事。整個系列我反覆做同一個動作:把新東西對照回傳統主題。theme.json 對照 functions.php 的設定、模板 HTML 對照 PHP 模板、block.jsonviewScript 對照 wp_enqueue_script、Query Loop 對照 The Loop。

Block Theme 我當初自己學習的挫折,主要來自把它當成一套要從零學起的新框架,但實際上不用,過去對範本階層、對 enqueue、對 hook 的理解,幾乎都能平移過來。找到舊知識的錨點,學習曲線會平緩很多,這也是為什麼我一直用「傳統主題」當類比。

心法二:單一來源,是 AI 時代最有價值的紀律

這三十天的文章我們一直在遵循一個原則:每個視覺值只有一個來源,顏色、間距、字級都在 theme.json,區塊只引用不重寫,頁面只引用不寫死,這件事在手動開發時代是「最好這樣做但很難做到」,在 AI 開發時代變成「一定要這樣做而且很容易做到」。

當 AI 產程式碼太快,快到你來不及盯每個細節時,如果值散在各處 AI 隨手塞一個寫死的顏色你很難發現,設計一致性就開始崩壞。把來源收斂成一個等於給 AI 它不能亂改的依據,也給你一個「要改就改這裡」的心智模型,越是讓 AI 大量產出,這條紀律越有價值。

心法三:把判斷留給自己,把執行交給 AI

人類與 AI 的分工:AI 生 edit.js 的樣板碼、生巢狀的區塊標記、掃 i18n 補漏,這些是執行;但「這個區塊該不該就地編輯」、「supports 該開哪幾個」、「首頁版面怎麼排」、「這個值該收進 theme.json 還是留在區塊自己的 CSS」,這些判斷我留給自己。

AI 沒有取代開發者,它接手了開發者「判斷之後的執行」,這聽起來像是能力縮水,但其實相反,它把你從勞力活裡解放出來,逼你把時間花在真正需要人的地方,設計決策、品質把關、理解客戶,會用 AI 的開發者和被 AI 取代的開發者,差別就在這條線劃在哪。

心法四:品質關卡要自動化,不能靠自律

最後一條很實際。PHPCS、PHPStan、PHPUnit、i18n 這些收尾,過去靠工程師自律一關關手動過,趕時間就跳過,當 AI 讓產出速度翻好幾倍,靠自律守品質是癡人說夢。把這些關卡自動化成 /verify/review 這種一句話跑完的流程,速度和品質才可能同時要。

接下來可以往哪走

往深走,讀 WordPress 官方的 Block Editor Handbook(超難念),把 Interactivity API、Block Bindings 這些較新的 API 摸透;往廣走,試著把你手上一個舊的傳統主題,用這三十天的方法慢慢重構成 Block Theme;往協作走,把你自己的 coding 慣例,寫成像 Everything-WP 那樣的 skill 和 command,讓 AI 照你的規矩幫你做事。

至於我自己會想要繼續研究 WooCommerce 的區塊開發,但就是打算休息一陣子後再來展開新連載,連續當了三十天的編輯一早起來校稿獲益良多,也因為這些文章讓我重新審視自己的開發流程所沒有顧及到的環節,寫文章真的是一種超棒的學習工具!

三十天的鐵人賽到這裡結束,但用 AI 開發 WordPress 這件事才剛開始。謝謝你陪我走完這三十天,如果你對於 AI 開發議題有興趣的話可以訂閱我的電子報,我每週五都會更新 AI 開發心得與洞察:

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

再次謝謝你的閱讀,希望 AI 都能讓我們的工作與生活變得更好!


上一篇
WordPress 開發的品質檢測:PHPCS、PHPStan、PHPUnit 與 i18n
下一篇
電商也進入 Block 時代:WooCommerce 與區塊編輯器
系列文
從一句話到一個網站:用 Vibe Coding 開發 WordPress Block Theme 的 30 天31
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言