iT邦幫忙

2026 iThome 鐵人賽

DAY 15
0
Vibe Coding

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

環境準備:Local、Claude Code for VSCode 與 Everything-WP 安裝

  • 分享至 

  • xImage
  •  

上一篇介紹了 Everything-WP 這套工具箱,本篇說明如何安裝,順便把後面每天實作要用的環境一次備齊。這篇會有點像安裝說明書,但我盡量講清楚每一步「為什麼」要這樣,而不只是叫你複製指令。

我們要準備三樣東西:一個能跑的本地 WordPress 環境、Claude Code、以及主角 Everything-WP 外掛。

第一步:本地 WordPress,用 Local

開發主題不能直接在正式站上改,得有個本地環境。我用的是 Local(前身 Local by Flywheel),因為它最省事:下載、按幾下、一個乾淨的 WordPress 就起來了,PHP、MySQL、SSL 全都幫你配好,不用碰 Docker 或 command line,具體開一個新站的步驟如下:

一、安裝並啟用 Local,進入主畫面後點選左下角的加號:

二、選擇 Create a new site 後點擊右下角的 Continue

三、輸入網站名稱後點擊 Continue

四、環境選擇 Preferred 後點擊 Continue

五、輸入使用者帳密後點擊 Add Site

六、以上步驟完成後就會開始進行 WordPress 本機網站的建立,完成後會看到以下畫面:

七、點擊 VSCode 編輯器就能直接開啟網站的根目錄,如果你還沒安裝 VSCode 的話可以由此下載

第二步:安裝 Claude Code

由於我們的工作環境會在 VSCode 裡面,因此直接安裝 Claude Code for VS Code 模組即可,從 VSCode 左側欄找到延伸模組的按鈕,搜尋 Claude Code for VS Code,點擊安裝即可:

安裝完成後呼叫 VSCode 的命令選擇器:

搜尋 Claude,點選 Claude Code: Open in New Tab 選項:

就能在視窗裡面看到 Claude Code 的對話介面:

第三步:裝上 Everything-WP

Everything-WP 是以 Claude Code 外掛的形式發佈的。在 Claude Code 裡,輸入以下兩行指令安裝:

/plugin marketplace add oberonlai/everything-wp
/plugin install everything-wp@everything-wp

裝完之後,昨天講的那些 /init-theme/make-block/verify 指令,還有背後的 skills 和 agents,就全部就位了。你可以打一個 /every 看看指令清單有沒有多出這些項目,有的話就成功了:

檢查清單

動手往下走之前,確認這幾項都 OK:

項目 怎麼確認
本地 WordPress Local 裡站點是綠燈、後台打得開
Claude Code 在 VSCode 能夠呼叫 Claude Code
Everything-WP /every 看得到 /everything:init-theme 等指令
Composer / Node composer -Vnode -v 有版本輸出

環境備好了之後,下一篇我們正式打第一個指令:/init-theme,讓 AI 一鍵 scaffold 出一個完整的 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/


上一篇
認識 Everything-WP:我的 AI 開發 WordPress 工具箱
下一篇
建立有程式碼品質約束的 WordPress 區塊主題骨架
系列文
從一句話到一個網站:用 Vibe Coding 開發 WordPress Block Theme 的 30 天40
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言