/ 目錄 / 演練場 / claude-wordpress-skills
● 社群 elvismdev ⚡ 即開即用

claude-wordpress-skills

作者 elvismdev · elvismdev/claude-wordpress-skills

讓 Claude 成為資深 WordPress 工程師——涵蓋資安、效能、Gutenberg 區塊、主題與外掛開發規範。

claude-wordpress-skills 是一套專業的 WordPress 技能包:資安稽核(nonces、capabilities、escaping)、效能優化(快取、查詢調校)、Gutenberg 區塊開發(現代 JS + block.json),以及主題/外掛最佳實踐(i18n、無障礙設計、WP Coding Standards)。載入一次,Claude 就不再寫 2015 年風格的 WordPress 程式碼。

為什麼要用

核心特性

即時演示

實際使用效果

claude-wordpress-skill.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "claude-wordpress-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/elvismdev/claude-wordpress-skills",
        "~/.claude/skills/claude-wordpress-skills"
      ],
      "_inferred": true
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "claude-wordpress-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/elvismdev/claude-wordpress-skills",
        "~/.claude/skills/claude-wordpress-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "claude-wordpress-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/elvismdev/claude-wordpress-skills",
        "~/.claude/skills/claude-wordpress-skills"
      ],
      "_inferred": true
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "claude-wordpress-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/elvismdev/claude-wordpress-skills",
        "~/.claude/skills/claude-wordpress-skills"
      ],
      "_inferred": true
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "claude-wordpress-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/elvismdev/claude-wordpress-skills",
        "~/.claude/skills/claude-wordpress-skills"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "claude-wordpress-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/elvismdev/claude-wordpress-skills",
          "~/.claude/skills/claude-wordpress-skills"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add claude-wordpress-skill -- git clone https://github.com/elvismdev/claude-wordpress-skills ~/.claude/skills/claude-wordpress-skills

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: claude-wordpress-skills

如何以現代方式建立 Gutenberg 區塊

👤 建立自訂區塊的 WordPress 開發者 ⏱ ~45 min intermediate

何時使用: 需要自訂編輯器區塊,但不想手動搭建過時的 ESNext + webpack 腳手架。

前置條件
  • Node 18+ 與 WordPress 6.3+ — nvm install 18; wp-env or local install
  • 已克隆技能包 — git clone https://github.com/elvismdev/claude-wordpress-skills ~/.claude/skills/claude-wordpress-skills
步驟
  1. 描述區塊需求
    Build a Testimonial block: quote text, author name, author photo — edit and save views.✓ 已複製
    → block.json + edit.js + save.js scaffolded, @wordpress/scripts build setup
  2. 新增屬性與控制項
    Add an alignment control and a color picker.✓ 已複製
    → BlockControls / InspectorControls added correctly
  3. 打包並註冊
    Write the PHP that registers the block from block.json.✓ 已複製
    → register_block_type( __DIR__ . '/build/block.json' )

結果: 一個具備正確封裝的現代 Gutenberg 區塊。

注意事項
  • 缺少 i18n 包裝 — 技能包會提醒 Claude 使用 __() 和 _x() 包裝字串
搭配使用: filesystem

稽核外掛常見的 WordPress 資安問題

👤 外掛維護者、網站擁有者 ⏱ ~60 min advanced

何時使用: 在發布外掛之前,或接手他人外掛時。

步驟
  1. 確定稽核範圍
    Audit this plugin for: nonce usage on every form, capability checks on every action, output escaping, SQL prep.✓ 已複製
    → Per-category findings with file:line
  2. 修復高風險問題
    Apply the top 3 fixes — nonces on the admin form, esc_html on the dashboard widget, $wpdb->prepare on the custom query.✓ 已複製
    → Diffs to the plugin files
  3. 回歸測試
    List what to manually test to confirm the fixes don't break anything.✓ 已複製
    → Short manual test checklist

結果: 一個已有文件記錄修復項目、更為安全的外掛。

注意事項
  • 在已有 REST 權限回呼的情況下誤報 nonce 問題 — 提供上下文說明:已設定權限回呼的 REST 路由不需要表單 nonce
搭配使用: github

對速度緩慢的 WordPress 網站進行效能優化

👤 負責 WordPress 網站效能的開發者 ⏱ ~60 min advanced

何時使用: TTFB 過高、後台反應緩慢,或某個特定範本拖慢整體速度。

步驟
  1. 找出效能瓶頸
    Walk me through common WordPress perf bottlenecks and which log/profiling tool to start with.✓ 已複製
    → Query Monitor, debug.log, object cache check
  2. 查詢調校
    Here are the top 5 slow queries. Suggest indexes or query rewrites.✓ 已複製
    → Per-query recommendations
  3. 快取策略
    Which caching layers should be active here? Object cache, page cache, fragment caching — suggest a stack.✓ 已複製
    → Concrete cache plan with plugins/services

結果: 可在下次部署後實際量測到的具體效能提升。

注意事項
  • 在未修復底層慢查詢的情況下直接安裝快取外掛 — 每次變更前後都要進行量測

組合

與其他 MCP 搭配,撬動十倍槓桿

claude-wordpress-skill + filesystem

跨外掛/主題目錄進行稽核與重構

Audit wp-content/plugins/my-plugin/ for security issues and apply the top 5 fixes.✓ 已複製
claude-wordpress-skill + github

為資安修復建立附有說明的 PR

Open a PR titled 'Security: nonces on admin forms' with the patches.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
gutenberg-block-authoring block intent + attributes 任何自訂區塊開發工作 0
wp-security-audit plugin/theme path 發布前或接手外掛時的審查 0
wp-performance-review slow endpoints + config 需要改善速度時 0
wp-coding-standards any PHP/JS code 撰寫程式碼時自動套用 0

成本與限制

運行它的成本

API 配額
none
每次呼叫 Token 數
5–20k per audit or block
費用
free
提示
以單一檔案或功能為範圍進行操作;不要一次把 100 個外掛餵給 Claude

安全

權限、密鑰、影響範圍

憑證儲存: 技能包本身不儲存任何憑證;若同時使用部署/REST 工具,則需提供 WP 後台帳號憑證
資料出站: none

故障排查

常見錯誤與修復

Block build fails with @wordpress/scripts

確認 Node 版本,以及 @wordpress/scripts 已列於 devDependencies;重新建置。

驗證: node -v && npx wp-scripts --version
Claude suggests outdated enqueue patterns

指定你所目標的 WordPress 版本,並優先使用 register_block_type_from_metadata。

替代方案

claude-wordpress-skills 對比其他方案

替代方案何時用它替代權衡
claude-code-owasp-skill需要通用的網頁應用程式資安,而非 WordPress 專屬涵蓋範圍較廣,但缺少 WP 慣用模式
symfony-ux-skill使用 Symfony 而非 WordPress技術棧不同

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills