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/


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

尚未有邦友留言

立即登入留言