Elementor MCP使用教程：让Claude直接帮你搭页面

上一篇《WordPress MCP Adapter使用教程》讲的是官方的通用MCP插件，装完之后AI能做什么，要看有没有别的插件公开了能力，对不写代码的人来说门槛不低。

如果你的网站本来就是用Elementor搭的，有更省事的办法：Elementor自己内置了MCP。AI直接在Elementor画布上搭页面，搭出来的是原生的Elementor元素，你可以接着在编辑器里拖拽修改，不是一堆要复制粘贴的代码。

本文根据Elementor官方MCP页面和帮助文档整理，讲怎么连、能做什么、有哪些限制。

Elementor MCP是什么？

MCP是AI客户端和外部工具之间的通用接口标准。Elementor MCP让Claude、Codex、Cursor这些AI工具能够：

• 搭建完整页面和区块（Flexbox、Grid容器、文本、手风琴、背景视频、循环网格等）；
• 管理样式：全局CSS类、颜色和字体变量、响应式断点、悬停状态；
• 制作Theme Builder模板：页眉、页脚、文章页、归档页、弹窗，并设置显示条件；
• 绑定动态数据，比如文章字段、自定义字段、分类法；
• 创建可复用组件，并在多个页面里放置实例；
• 检查和修改已有页面的结构。

几个特点：

1. 内置功能：Elementor 4.3.0及以上自带，不需要再装别的插件；
2. 连接是引导式的：后台生成一段提示词，粘贴给AI就完成配置，不用手写JSON配置文件；
3. 受用户权限限制：AI拥有的权限和授权它的那个WordPress账号一样，不会多；
4. 可选的：不影响原来的编辑器，不想用就不连。

使用前的准备

费用方面：

• 连接MCP本身免费，基础的区块和功能可以免费生成；
• Pro元素需要Pro套餐，比如表单（Forms）、弹窗（Popups）、循环（Loops）、电商组件、Components、动态内容、页眉页脚；
• AI工具自己的费用另算，比如Claude的订阅或API费用，和Elementor无关。

还没有Elementor的话，先看《WordPress主题怎么选》和《WordPress建站详细步骤》把网站搭起来。

操作前先做备份。 AI改的是网站上真实的页面，备份方法见《WordPress网站备份教程》。

连接步骤

整个流程官方对所有客户端都是一样的，唯一的区别是第3步选哪个标签页。

1. 登录WordPress后台，进入「Elementor」→「Elementor MCP」（也可以在编辑器菜单里进入「Elementor > Editor > Elementor MCP」）；
2. 点击 Enable MCP access（启用MCP访问）；
3. 选择你用的AI工具标签页：Claude Code、Claude Desktop、Codex、Cursor，或者 Other（其他支持MCP的客户端）；
4. 勾选确认框。它的意思是：点击「Generate Prompt」会为这个网站创建一个应用密码；
5. 点击 Generate Prompt（生成提示词）；
6. 点击 Copy prompt 复制提示词；
7. 把这段提示词粘贴到你的AI工具里，让它执行，连接就完成了。

提示词里已经自动包含了刚创建的应用密码，所以不需要自己去个人资料里创建。

官方把Claude Code和Claude Desktop归为直接连接，Codex和Cursor是原生集成，Other适用于任何遵循MCP标准的客户端。

如果Elementor的界面里没有Elementor MCP这个菜单，先检查Elementor是否更新到了4.3.0以上。另外Elementor 4.3.4的更新日志里提到修复过「应用密码不可用时连接设置报错」的问题，如果生成提示词没有反应，确认网站的应用密码功能没有被安全插件或主机禁用，并且Elementor是最新版。

怎么让AI搭页面

连接好之后，在AI客户端里用自然语言描述需求，AI会实时修改Elementor画布。几个官方给出的思路：

• 首页首屏：做一个服务页，背景是循环播放的静音视频，文字左对齐，标题样式醒目，下面两个按钮，视频上加暗层让文字更清楚；
• FAQ区块：三个问题，第一个默认展开，开启FAQ结构化数据，标题吸顶，行与行之间细分割线；
• 关于我们页：先让AI出三个容器的页面骨架，再补团队卡片和图片alt文字，最后加统一的悬停效果和手机端堆叠规则；
• 可复用组件：把一个「图标+标题+段落」的特性卡片做成组件，在首屏下面放三个实例；
• 文章模板：用Theme Builder做一个所有文章共用的模板，包含特色图片、标题、日期、作者和宽度合适的正文。

几条实用的经验：

1. 分阶段做复杂页面：先要骨架，再填内容，最后调样式和响应式，比一句话要整页稳得多；
2. 说具体：间距、颜色、手机端怎么显示、改的是哪个元素，写得越清楚越准；
3. 每步都预览：在编辑器里点右上角的预览（眼睛图标），在新标签页看前台效果，满意再发布。

内容会直接上线吗？

官方说明AI生成的内容默认保存为草稿，需要你检查后自己发布。在编辑器里：

1. 看着画布被AI实时更新；
2. 点击眼睛图标 Preview Changes 预览前台效果；
3. 点 Publish 发布，或者点旁边的下拉箭头选 Save Draft 存为草稿。

不过要注意，AI拥有的权限和授权账号一致，管理员账号理论上是能发布的，所以不要放任AI不看就上线。每次发布前自己预览一遍。

如果你正打开着某个页面，AI恰好也保存了这个页面，会弹出 Conflict Warning（冲突提示）：

• Force Save：保留你当前的版本，放弃AI同时做的修改；
• Reload：重新加载画布，采用AI最新的修改。

Angie插件：什么时候需要

Angie是Elementor出的免费AI插件，在WordPress官方插件库里可以搜到。装了它，Elementor MCP能多出这些能力：

• 连接其他插件注册的能力（WooCommerce、Yoast、ACF、WPForms等，通过WordPress的Abilities API）；
• 创建自定义小工具，比如报价计算器、交互表单；
• 定制WordPress后台界面；
• 批量更新内容、排查问题、批量修复SEO。

只是用AI搭页面、做模板，不装Angie也够用。需要跨插件操作（比如让AI同时改商品和页面）再装。

它和WordPress MCP Adapter有什么区别？

两者都是让AI通过「能力」操作WordPress，但定位不同：

简单讲：用Elementor搭站，先用Elementor MCP；想让AI操作Elementor之外的WordPress功能，再考虑MCP Adapter或者Angie。 MCP Adapter的详细用法见《WordPress MCP Adapter使用教程》。

撤销与关闭

不想让某个AI工具继续访问网站时：

• 撤销单个客户端：进入「用户」→「个人资料」，滚动到「应用程序密码」，找到类似 Elementor MCP – Claude Code 的条目，点「撤销」；
• 关闭全部：进入「Elementor」→「Elementor MCP」，页面底部有 Turn off MCP access 区域，点红色的 Turn off 按钮，在弹窗「Turn off MCP access?」里再次确认，所有已连接的AI会立刻被阻止。

目前的限制

• 编辑已有网站时，主要支持V4原子元素（Atomic）和布局；旧的V3小工具布局官方标注为「即将支持」。用老版本Elementor小工具搭的旧页面，AI能改的范围有限；
• 表单、弹窗、循环、电商组件、页眉页脚等需要Elementor Pro；
• 目前只有管理员可以建立连接；
• AI生成的结果可能不符合预期，布局、文案、图片版权、无障碍都需要自己检查。

安全建议

1. 连接前备份网站，最好先在测试站里试；
2. 应用密码相当于账号密码，一个客户端一个，不用就撤销；
3. 提示词里包含应用密码，不要把它发到公开的地方或提交到代码仓库；
4. 发布前一定要预览，尤其是表单和跳转链接；
5. 生成的内容里有数据、承诺、价格的，自己逐项核对。

小结

• Elementor MCP是Elementor 4.3.0+的内置功能，WordPress 6.8+，仅管理员可连接；
• 连接路径：「Elementor」→「Elementor MCP」→ Enable MCP access → 选AI工具 → Generate Prompt → 粘贴给AI；
• AI搭出来的是原生Elementor元素，默认存草稿，预览后再发布；
• Pro功能需要Pro套餐，跨插件操作和自定义小工具需要Angie；
• 目前对V4原子元素支持最好，操作前先备份。

Elementor MCP还在快速更新，具体功能和限制以Elementor官方文档为准。