AI导哈

Elementor数据管理服务

用于读取和修改WordPress中Elementor页面数据的MCP服务器，支持DDEV（本地）和REST（远程）双模式操作。

  • by 8866Jason
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 8866Jason/wpw-elementor-mcp

使用说明

wpw元件mcp

MCP服务器，用于读取和修改WordPress中的Elementor页面数据。支持双模操作： DDEV （通过WP-CLI本地）和 表征状态转移 （通过桥接插件远程）。

特性

  • 23个工具：12个读+4个写+4个CRUD+3个搜索/效率
  • 双模架构——一个代码库，两个后端
  • 完整的Elementor数据访问：页面树、元素设置、CSS、全局工具包
  • CRUD操作：添加、删除、移动、克隆元素
  • 跨页面搜索和页面导出
  • 带Zod模式验证的类型安全TypeScript

快速开始

DDEV模式（本地）

需要一个带有Elementor的DDEV WordPress项目：

{
  "mcpServers": {
    "elementor": {
      "command": "node",
      "args": ["/path/to/wpw-elementor-mcp/build/index.js"],
      "env": {
        "DDEV_PROJECT_DIR": "/path/to/your-ddev-project"
      }
    }
  }
}

REST模式（远程）

需要在WordPress网站上安装桥接插件：

  1. 上传 wordpress-plugin/elementor-mcp-bridge.php 到 wp-content/plugins/
  2. 在WordPress管理中激活插件
  3. 在用户中创建应用程序密码→ 您的个人资料
{
  "mcpServers": {
    "elementor": {
      "command": "node",
      "args": ["/path/to/wpw-elementor-mcp/build/index.js"],
      "env": {
        "ELEMENTOR_SITE_URL": "https://your-site.com",
        "ELEMENTOR_USERNAME": "admin",
        "ELEMENTOR_APP_PASSWORD": "xxxx xxxx xxxx xxxx"
      }
    }
  }
}

工具参考

阅读工具（12）

工具 说明
elementor_list_pages 列出所有包含Elementor数据的页面
elementor_get_page_tree 获取页面的元素层次结构树
elementor_get_element 获取元素设置（可过滤：全部/布局/响应）
elementor_find_elements 按类型/类别/文本搜索页面中的元素
elementor_list_templates 列出Elementor库模板
elementor_get_element_context 获取具有祖先/兄弟布局上下文的元素
elementor_get_responsive_diff 台式机vs平板电脑vs移动设备设置差异
elementor_get_layout_debug 容器柔性布局调试表
elementor_get_page_css 阅读页面的所有CSS源代码
elementor_get_global_kit 读取全局设计标记（颜色、字体、间距）
elementor_get_compiled_css 读取Elementor编译的CSS文件
elementor_get_element_selector 获取CSS选择器和匹配规则

书写工具（4）

工具 说明
elementor_update_element 更新元素设置（合并语义）
elementor_update_html_widget 安全更新HTML小部件内容
elementor_update_page_css 添加/替换WordPress附加CSS
elementor_clear_cache 清除Elementor CSS缓存

CRUD工具（4）

工具 说明
elementor_add_element 向页面添加新容器或小部件
elementor_delete_element 删除元素和所有子元素
elementor_move_element 将元素移动到不同的容器/位置
elementor_update_global_kit 更新全局设计令牌

搜索和效率工具（3）

工具 说明
elementor_search_all_pages 一次在所有页面上搜索元素
elementor_clone_element 深度克隆元素（同一页或跨页）
elementor_export_page 将完整页面Elementor数据导出为JSON

建筑

wpw-elementor-mcp/
├── src/
│   ├── index.ts            # MCP server entry, tool registration (23 tools)
│   ├── elementor.ts         # Service layer (parse/validate backend output)
│   ├── backend.ts           # Backend interface (ElementorBackend)
│   ├── ddev-backend.ts      # DDEV mode: WP-CLI + PHP eval
│   ├── rest-backend.ts      # REST mode: HTTP client calls
│   ├── rest-client.ts       # Axios HTTP client with auth
│   ├── php-templates.ts     # PHP code templates for DDEV mode
│   ├── types.ts             # TypeScript interfaces
│   └── wp-cli.ts            # WP-CLI command runner
├── wordpress-plugin/
│   └── elementor-mcp-bridge.php   # REST API bridge (24 endpoints)
├── build/                   # Compiled JavaScript
├── package.json
└── tsconfig.json

双模设计

服务器根据环境变量自动检测后端模式：

  • 休息模式 激活时 ELEMENTOR_SITE_URL, ELEMENTOR_USERNAME，以及 ELEMENTOR_APP_PASSWORD 都准备好了
  • DDEV模式 是回退，使用WP-CLI直接执行PHP

两种模式实现相同的功能 ElementorBackend 接口，确保无论传输方式如何，工具行为都相同。

WordPress桥接插件

这 elementor-mcp-bridge.php 文件是一个单文件WordPress插件，它在 elementor-mcp/v1 命名空间。它

  • 使用WordPress应用程序密码身份验证
  • 需要 edit_posts 能力
  • 返回与DDEV模式输出格式匹配的JSON响应
  • 写入操作后清除CSS缓存
  • 适用于PHP 7.4+，无外部依赖

发展

# Install dependencies
npm install

# Build TypeScript
npm run build

# Watch mode
npm run watch

# Run tests
npm test

# Start server directly
npm start

许可证

麻省理工学院

相关 MCP