iT邦幫忙

2026 iThome 鐵人賽

DAY 5
0
Vibe Coding

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

用 AI 開發 WordPress 的全新工作流:Claude Code 進場

  • 分享至 

  • xImage
  •  

之前的文章我們把場景鋪好了:WordPress 在 AI 時代為何還值得學、它把地基準備好、官方也親自下場推出 AI Client 與 Abilities API。今天要補上最後一塊,也是把這一切串起來的工具。因為工具選錯,vibe coding 的體驗會差很多,這系列後半段我全程用 Claude Code,今天就講清楚它是什麼、為什麼是它。

先分清楚:AI 補全、AI 編輯器、AI 命令列

現在的 AI 開發工具大致分三種,搞混很容易選錯。

第一種是 AI 補全,像 GitHub Copilot,你打字它幫你接下一段,本質是加強版的自動完成,第二種是 AI 編輯器,最有名的是 Cursor,它把一整個編輯器包起來,你可以在裡面跟 AI 對話、讓它改多個檔案,體驗很完整。第三種是 AI 命令列工具,Claude Code 屬於這一類,它不是編輯器,而是直接跑在你的終端機裡,你用對話下指令,它幫你讀檔、改檔、跑指令、裝套件。

Cursor 的搜尋量很大、Claude Code 過去一年更是暴漲,兩個都是好工具。我選 Claude Code 當這系列的主力,不是說 Cursor 不好,而是因為它的工作方式特別適合 WordPress 開發。

為什麼是 Claude Code

第一個原因是它活在終端機裡,WordPress 開發本來就有大量的命令列操作,用 WP-CLI 建文章、跑資料庫、裝外掛、看錯誤日誌,Claude Code 直接就在這個環境裡,你說「幫我把這個外掛的版本升上去然後跑一次測試」,它可以真的去執行,而不是只給你一段要自己複製貼上的指令。

第二個原因是它能掌握整個專案的脈絡。它會去讀你專案裡的檔案、看目錄結構,理解這是一個什麼樣的主題或外掛,再動手,這對 WordPress 特別重要,因為一個主題或外掛動輒幾十個檔案交纏在一起,AI 如果只看片段,改出來的東西常常接不上。

第三個原因,是它能透過技能和 MCP 擴充。還記得上一篇講的 MCP 嗎?Claude Code 可以接 MCP,也可以掛上專門為某個領域寫好的技能包。這代表我可以把「怎麼開發 WordPress Block Theme」這套知識,直接餵給它。

把專業知識裝進 AI:Everything-WP 的角色

這就是我要在第三部大量用到的東西:Everything-WP,一套我自己開發的開源工具箱。

vibe coding 最大的風險,前幾篇都提過:AI 會自信地寫出有安全漏洞、不符合規範的程式碼原因是通用的 AI 不懂 WordPress 的眉角,它可能不知道這邊要做 nonce 驗證、要用官方推薦的方式註冊區塊、要遵守佈景主題審查規範。Everything-WP 做的事,就是把這些 WordPress 開發的專業知識和最佳實踐,打包成 Claude Code 能用的技能,裝上之後,AI 生出來的就不再是「能跑但危險」的程式碼,而是照著規矩來的東西。

換句話說,它把 Claude Code 從一個「什麼都懂一點的通才」,變成一個「懂 WordPress 的專才」,這是我認為能安全 vibe coding WordPress 的關鍵。

接下來的工作流

我後半段實作用的工作流是這樣:在終端機裡跑 Claude Code,掛上 Everything-WP 的技能,然後用自然語言一步步描述我要的主題和外掛,讓 AI 在懂規矩的前提下幫我實作,我負責把關和驗收。這就是這整個系列想教你的 vibe coding 方式,不是閉著眼睛讓 AI 亂做,而是站在一個穩固的框架上,讓 AI 又快又不失控。

第一部到這裡告一段落。我們花了五天回答「AI 時代 WordPress 為什麼還值得學」,也把工具和心法都交代了。

明天進入第二部,我們要開始認真拆解技術。Day 6 先回到最基本的問題:傳統佈景主題和 Block Theme 到底差在哪?我會從你可能已經熟悉的傳統範本階層講起,帶你看懂這兩種主題根本的不同。

文章目錄: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/


上一篇
WordPress 原生的 AI 整合:AI Client、Abilities API
下一篇
範本階層的世界:從傳統主題到 Block Theme 的 Template Hierarchy
系列文
從一句話到一個網站:用 Vibe Coding 開發 WordPress Block Theme 的 30 天40
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言