這個網站(對,就是你現在正在看的這個)不管是配色、動畫,還是你剛剛可能點開過的那兩篇 3ds Max 和 Maya 文章,都是我這陣子用 Claude 一步一步弄出來的——我不是工程師,CSS 選擇器的優先權、Elementor 的資料結構這些東西,都是這次一路除錯才搞懂的。這篇不是要教你「怎麼裝一個 WordPress 的 MCP」——那個我早就裝好了,是想聊聊裝完之後才發現,真正好用的其實不是它。
先裝好的 MCP
跟 Maya 那篇一樣,WordPress 這邊也有現成的套件可以裝,叫 wp-mcp-server。設定檔長這樣:
{
"mcpServers": {
"wordpress": {
"command": "npx",
"args": ["-y", "wp-mcp-server"],
"env": {
"WP_URL": "https://truvisox.com",
"WP_USERNAME": "你的帳號",
"WP_PASSWORD": "應用程式密碼"
}
}
}
}裝起來很簡單,重新連上 MCP 之後,Claude 馬上就能讀文章列表、開新文章、抓媒體庫的圖片。光是拿來寫部落格文章,這樣就夠用了。
碰到的牆
問題是這個網站其他部分——首頁、關於我、商城,還有你現在看的這個部落格列表頁——全部是用 Elementor 做的「頁面(page)」,不是「文章(post)」。wp-mcp-server 只給了四個工具:讀文章、開文章、抓媒體、抓分類,一個都碰不到頁面,更別說 Elementor 那包藏在 _elementor_data 裡的資料了。
Claude for Chrome 接手之後
Claude for Chrome 是個瀏覽器擴充功能,裝了之後 Claude 就能看到、操作我電腦上實際開著的分頁。我只要自己先登入 wp-admin 一次,Claude 就能從那個分頁裡拿到兩把鑰匙——登入用的 cookie,還有 WordPress 每次寫入資料都要帶的一次性驗證碼(叫 nonce,藏在 window.wpApiSettings.nonce 裡)。拿到這兩把鑰匙,剩下就是直接呼叫 REST API 了——想改文章就改文章、想改頁面就改頁面,連 Elementor 的資料、快取清除的按鈕都碰得到。
const nonce = window.wpApiSettings.nonce;
const res = await fetch('/wp-json/wp/v2/pages/167', {
method: 'POST',
headers: { 'X-WP-Nonce': nonce, 'Content-Type': 'application/json' },
body: JSON.stringify({ meta: { _elementor_data: 修改過的內容 } })
}).then(r => r.json());
// 這段 fetch 是在瀏覽器分頁裡執行的,不是我自己打的指令整段過程裡,我一次密碼都沒打過,終端機也沒貼過任何帳密——身份驗證全靠我瀏覽器裡本來就登入的那個 session,權限跟我自己手動操作完全一樣,能做的事也一樣多。
兩條路的優缺點
| MCP(wp-mcp-server) | Claude for Chrome | |
|---|---|---|
| 能碰到的範圍 | 只有 posts 相關的 4 個工具 | 整個 REST API,pages / Elementor / 快取都行 |
| 設定門檻 | 要另外申請應用程式密碼、寫設定檔 | 裝好擴充功能、登入一次就好 |
| 安全模型 | 密碼常駐在設定檔裡 | 借用瀏覽器 session,沒有密碼落地 |
| 速度與穩定性 | 工具介面固定,呼叫快、不容易出錯 | 靠即時讀網頁狀態,偶爾要重新導覽分頁 |
| 適合場景 | 重複、明確的文章操作 | 一次性、探索性、碰到工具邊界的任務 |
這次踩到的坑(真實案例)
以下幾個是這次真的在這個網站上撞到、後來解掉的問題,不是我編出來湊字數的:
該用哪一條路?
這兩條路不用二選一,我自己是這樣分工的:
- 重複性高、範圍固定的任務:交給 MCP,例如固定格式的發文流程
- 一次性、探索性的任務:交給 Claude for Chrome,像這次改版面對齊、修 CSS bug
- MCP 工具碰不到的地方:自動退到瀏覽器這條路,不用等工具補齊功能才能動手
下載:如果你想先把 MCP 裝起來
MCP 這條路還是值得先裝起來——重複性的任務交給它,比較穩、比較省事。下載後把檔案內容貼給你的 Claude,跟它說一聲「請照這份指令幫我裝 WordPress 的 MCP」,它會自己去確認網站資訊、寫設定檔,遇到要你去 wp-admin 產生應用程式密碼的地方,會直接停下來問你。
📄 給 AI 助理讀的可執行安裝指令
寫到這裡,這系列也算集滿三篇了——從自己刻一座橋接、裝一個現成套件,到這次乾脆繞過工具直接操作瀏覽器,三種完全不同的思路,我都真的做出來、也真的能用。
如果你也希望 Claude 碰到 MCP 工具的邊界時懂得換條路走,前提是先裝好 Claude for Chrome 這類瀏覽器擴充功能。這系列另外兩篇,一篇是《為什麼要讓 Claude 連接 3ds Max》,一篇是《讓 Claude 直接操作 Maya 場景》,講的是完全不一樣的兩種連法,有興趣可以一起看看。
自動引用通知: Claude 接上 Maya 教學:dcc-mcp-maya 安裝設定完整指南