Elementor MCP

Elementor 製 WordPress サイトを操作するための MCP サーバー — ページ構造の読み取り、ウィジェットの編集、グローバルデザイントークンの管理、そして何も壊さずに行うこと。

Elementor はページレイアウト全体を保護された postmeta キー（_elementor_data）内の JSON ブロブとして保持しています。WordPress REST API はこれを読み書きできないため、汎用の WordPress MCP サーバーではページの一覧表示はできても、ページ上の内容には触れられません。このプロジェクトはそのギャップを埋めます。

得られるもの

• 50 のツール — ページ構造、要素の手術、ウィジェットスキーマ、グローバルデザイン、テンプレート、履歴、サイト全体の検索をカバー。

• ライブウィジェットスキーマ。 コントロール定義は対象サイト自身の Elementor レジストリから読み取られるため、取得するスキーマはそのサイトにインストールされているウィジェット（コア、Pro、サードパーティのアドオンパックを含む）を正確に記述したものになります。ハードコードされた陳腐化するリストではありません。

• 安全な並行書き込み。 すべての書き込みは、ページが読み取られた時点のコンテンツハッシュを保持し、その間にページが変更された場合は拒否されます。黙って上書きされることはありません。

• Undo。 すべての書き込みは、まずレイアウトのスナップショットを取ります。elementor_restore_snapshot で最後の変更をロールバックできます。

• アトミックバッチ。 複数ステップの再構築は 1 つの操作として適用されるか、まったく適用されないかのどちらかです。ページが半分編集された状態で放置されることはありません。

• マルチサイト。 1 つのサーバーで複数の WordPress インストールをフロントにでき、それぞれ名前でアドレス指定でき、それぞれ独立して読み取り専用に設定できます。

Related MCP server: elementor-mcp-agent

アーキテクチャ

2 つの構成要素があり、どちらか一方だけでは機能しません。

MCP client  ──stdio──▶  elementor-mcp (Node)  ──REST──▶  WordPress
                                                          ├── Elementor MCP Bridge (this repo)
                                                          └── Elementor

plugin/elementor-mcp-bridge/ — elementor-mcp/v1 REST 名前空間を公開する WordPress プラグイン。Elementor 自身の Document::save()（エディタが使うのと同じ経路なので、サニタイズ、リビジョン、CSS 再生成がすべて正しく行われる）を通じて Elementor ドキュメントを読み書きし、ライブウィジェットレジストリをイントロスペクトしてスキーマを取得します。

src/ — MCP サーバー。要素ツリーを自身のプロセス内に保持し、そこで構造的な作業を行うため、400 KB のページでもその JSON がモデルのコンテキストに入ることなく編集できます。

この分割は意図的です。ツリーの手術は TypeScript 側にあり、59 のケースに対してユニットテストされています。PHP 側は薄く保ち、Elementor に委任します。

インストール

1. ブリッジプラグイン

インストール可能な zip をビルドし、wp-admin の Plugins → Add New → Upload Plugin からアップロードします。

./scripts/package-plugin.sh
# build/elementor-mcp-bridge-1.0.0.zip

このスクリプトは、いずれかのファイルが php -l に失敗した場合にビルドを拒否するため、壊れたプラグインがパッケージ化されることはありません。

または直接インストールします。

rsync -a plugin/elementor-mcp-bridge/ user@host:/var/www/site/wp-content/plugins/elementor-mcp-bridge/
wp plugin activate elementor-mcp-bridge     # or activate in wp-admin

WordPress 5.9+、PHP 7.4+、Elementor 3.x または 4.x が必要です。

動作していることを確認します。

curl -u 'user:app password' https://example.com/wp-json/elementor-mcp/v1/status

Windows では、curl は Invoke-WebRequest のエイリアスであり、-u を受け付けません。代わりに同梱の診断ツールを使用してください。これは到達可能性、REST API、プラグインの有効化、認証情報を順にチェックするため、失敗した場合にどの項目が原因かを特定できます。

.\scripts\Test-Bridge.ps1 -SiteUrl https://example.com -Username admin -AppPassword 'abcd efgh ijkl mnop'

または、エイリアスではなく curl.exe で実際の curl を強制します。

2. アプリケーションパスワード

wp-admin で Users → Profile → Application Passwords に移動し、elementor-mcp という名前のものを追加して、生成された値をコピーします。これはアカウントのログインパスワードではありません。独立して失効させることができます。

ブリッジはすべてのルートで実際の WordPress ケイパビリティをチェックするため、エージェントはそのユーザーが手動でできることだけを実行できます。ユースケースをカバーする最小のロールを持つアカウントを付与してください — Editor で通常は十分です。サイト全体のデザイン設定を変更する必要がある場合のみ Administrator にします。

3. サーバー

npm install
npm run build

設定

単一サイト:

WORDPRESS_URL=https://example.com
WORDPRESS_USERNAME=your-user
WORDPRESS_APP_PASSWORD="abcd efgh ijkl mnop qrst uvwx"

複数サイト — ELEMENTOR_MCP_SITES を JSON 配列に設定します:

[
  { "name": "live",    "url": "https://example.com",         "username": "u", "appPassword": "..." },
  { "name": "staging", "url": "https://staging.example.com", "username": "u", "appPassword": "...", "readOnly": true }
]

クライアントの接続

Claude Code:

claude mcp add elementor -- node /path/to/elementor-mcp/dist/index.js

または MCP クライアント設定を直接編集:

{
  "mcpServers": {
    "elementor": {
      "command": "node",
      "args": ["/path/to/elementor-mcp/dist/index.js"],
      "env": {
        "WORDPRESS_URL": "https://example.com",
        "WORDPRESS_USERNAME": "your-user",
        "WORDPRESS_APP_PASSWORD": "abcd efgh ijkl mnop qrst uvwx"
      }
    }
  }
}

うまく使うためのコツ

ツールの説明はこの方向を指していますが、短くまとめると:

1. サイトごとに 1 回 elementor_site_status — バージョン、ウィジェット数、認証済みユーザーができること。

2. elementor_get_outline で要素 ID を取得します。本当にすべての設定が必要な場合を除き、elementor_get_page_tree には手を出さないでください。アウトラインはサイズのごく一部です。

3. 馴染みのないウィジェット設定を設定する前に elementor_get_widget_schema。コントロール名は推測できず、間違ったキーは黙って保存され、目に見える効果がありません — これは Elementor 自動化が失敗する最も一般的な原因です。

4. 複数ステップの操作には elementor_batch_edit。

5. 結果を確認するには elementor_render_page。

レスポンシブ設定は _tablet と _mobile サフィックスを使用します（padding、padding_tablet、padding_mobile）。スキーマはどのコントロールがレスポンシブかを示し、正確なキーを明示します。

安全性モデル

完全削除とコミットされたサイト全体の置換を許可するには、wp-config.php に追加します:

define( 'EMCP_ALLOW_DESTRUCTIVE', true );

ツール

完全なリファレンスは docs/TOOLS.md にあります。分野別:

• サイト — elementor_list_sites、elementor_site_status、elementor_native_mcp_call

• ページ — 一覧、取得、アウトライン、作成、複製、削除、レンダリング、メタデータ更新、完全なツリー

• 要素 — 取得、検索、ウィジェット追加、コンテナ追加、更新、移動、複製、削除、並べ替え、ラップ、バッチ編集、ツリー置換

• ウィジェット — 一覧、スキーマ、要素タイプ、動的タグ

• デザイン — グローバル、グローバルカラー設定、グローバル更新、カスタム CSS、グローバルクラス、CSS フラッシュ

• テンプレート — 一覧、取得、保存、適用、エクスポート、インポート

• 履歴 — スナップショット（一覧/作成/復元）、リビジョン（一覧/復元）

• コンテンツ — 検索、検索と置換、ウィジェット使用状況、メディア一覧、画像アップロード

Elementor 独自の MCP モジュール

Elementor 4.3 には組み込みの MCP モジュールが同梱されており、WordPress Abilities API の背後にゲートされ、v4 のアトミック機能 — グローバルクラス、変数、コンポーネント、コンポジション — に焦点を当てています。それが存在する場合、elementor_native_mcp_call は直接プロキシするため、ここにあるすべての機能に加えて、それらの機能も利用できます。

これはこのサーバーの代替ではありません。Elementor 4.3+ とオプションの依存関係のインストールが必要であり、現存する Elementor サイトの圧倒的多数が構築されている従来のセクション / カラム / ウィジェットモデルをカバーしていません。elementor_site_status は、それが利用可能かどうかを報告します。

開発

npm run build            # compile
npm test                 # 59 unit tests
npm run typecheck        # source and tests
npm run smoke            # boot the server and exercise the MCP handshake
npm run docs             # regenerate docs/TOOLS.md from the running server
php tests/plugin-load.php   # load the plugin and register all 32 routes
./scripts/package-plugin.sh # build the installable zip

tests/plugin-load.php は、スタブ化された WordPress 関数に対してブリッジを読み込み、すべてのルートに呼び出し可能なハンドラーと権限コールバックがあることを検証します。実際のサイトの代わりにはなりませんが、zip がアップロードまで隠すアクティベーションの致命的エラーを検出します。

ライセンス

MIT。 LICENSE を参照。