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网站上安装桥接插件：
- 上传
wordpress-plugin/elementor-mcp-bridge.php到wp-content/plugins/ - 在WordPress管理中激活插件
- 在用户中创建应用程序密码→ 您的个人资料
{
"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许可证
麻省理工学院