wordpress-elementor

WordPress Elementor

在现有 WordPress 网站上编辑 Elementor 页面并管理模板。通过浏览器自动化（用于视觉或结构调整）或 WP-CLI（用于安全的文本替换）生成更新后的页面内容。

前提条件

• 可用的 WP-CLI 连接或管理员访问权限（使用 wordpress-setup 技能）
• 已安装并启用 Elementor：wp @site plugin status elementor

工作流

步骤 1：确定页面

# List Elementor pages
wp @site post list --post_type=page --meta_key=_elementor_edit_mode --meta_value=builder \
  --fields=ID,post_title,post_name,post_status

# Editor URL format: https://example.com/wp-admin/post.php?post={ID}&action=elementor

步骤 2：选择编辑方式

更改类型	方法	风险
文本内容更新	WP-CLI 搜索替换	低（有备份时）
图片 URL 替换	WP-CLI 元数据更新	低（有备份时）
小工具样式	浏览器自动化	无
添加/移除区块	浏览器自动化	无
布局更改	浏览器自动化	无
应用模板	浏览器自动化	无

经验法则：如果只需更改现有小工具中的文本或 URL，使用 WP-CLI 更快。对于任何结构性更改，请通过浏览器使用可视化编辑器。

步骤 3a：通过 WP-CLI 更新文本

务必先备份：

wp @site post meta get {post_id} _elementor_data > /tmp/elementor-backup-{post_id}.json

执行前检查清单：

1. 备份 postmeta（见上文）
2. 试运行替换
3. 确认试运行结果符合预期（替换数量正确）
4. 执行
5. 清除 CSS 缓存
6. 进行视觉检查

简单文本替换：

# Dry run
wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \
  --include-columns=meta_value --dry-run --precise

# Execute (after confirming dry run looks correct)
wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \
  --include-columns=meta_value --precise

更新后，清除 Elementor 的 CSS 缓存：

wp @site elementor flush-css

如果 elementor WP-CLI 命令不可用：

wp @site option delete _elementor_global_css
wp @site post meta delete-all _elementor_css

可安全替换的内容：

安全	有风险
标题文本	HTML 结构
段落文本	小工具 ID
按钮文本和 URL	区块/列设置
图片 URL（尺寸相同）	布局属性
电话号码、电子邮件地址	CSS 类
地址	元素顺序

步骤 3b：通过浏览器自动化进行可视化编辑

对于结构性更改，请使用浏览器自动化与 Elementor 可视化编辑器交互。

登录流程（如果已通过 Chrome MCP 登录，则跳过）：

1. 导航至 https://example.com/wp-admin/
2. 输入用户名和密码
3. 点击“Log In”
4. 等待仪表盘加载

打开编辑器：

1. 导航至 https://example.com/wp-admin/post.php?post={ID}&action=elementor
2. 等待 Elementor 加载遮罩消失（可能需要 5-10 秒）
3. 当左侧边栏显示小工具面板时，编辑器即可使用

编辑文本内容：

1. 点击页面预览（右侧面板）中的文本元素
2. 该元素会被选中（蓝色边框）
3. 左侧边栏会显示该元素的设置
4. 在“Content”选项卡下，于编辑器字段中编辑文本
5. 更改会实时显示在预览中
6. 点击“Update”（左下角的绿色按钮）或按 Ctrl+S

编辑标题：

1. 点击预览中的标题
2. 左侧边栏 > Content 选项卡 > “Title”字段
3. 编辑文本
4. 可选调整：HTML 标签（H1-H6）、对齐方式、链接
5. 保存

更换图片：

1. 点击预览中的图片小工具
2. 左侧边栏 > Content 选项卡 > 点击图片缩略图
3. 媒体库会打开
4. 选择新图片或上传图片
5. 点击“Insert Media”
6. 保存

编辑按钮：

1. 点击预览中的按钮
2. 左侧边栏 > Content 选项卡：Text（标签）、Link（URL）、Icon（可选）
3. Style 选项卡：颜色、排版、边框、内边距
4. 保存

使用 playwright-cli：

playwright-cli -s=wp-editor open "https://example.com/wp-admin/"
# Login first, then navigate to Elementor editor
playwright-cli -s=wp-editor navigate "https://example.com/wp-admin/post.php?post={ID}&action=elementor"

如果使用用户已登录的会话，也可以使用 Chrome MCP。

第 4 步：管理模板

列出已保存的模板：

wp @site post list --post_type=elementor_library --fields=ID,post_title,post_status

导出模板（浏览器）：

1. 前往：https://example.com/wp-admin/edit.php?post_type=elementor_library
2. 将鼠标悬停在模板上 >“导出模板”
3. 下载为 .json 文件

导入模板（浏览器）：

1. 前往：https://example.com/wp-admin/edit.php?post_type=elementor_library
2. 点击顶部的“导入模板”
3. 选择文件 > 上传 .json
4. 模板会显示在库中

将模板应用到新页面：

1. 创建页面：wp @site post create --post_type=page --post_title="New Page" --post_status=draft
2. 通过浏览器在 Elementor 中打开
3. 点击文件夹图标（添加模板）
4. 在“我的模板”选项卡中选择模板
5. 点击“插入”
6. 自定义并保存

通过 WP-CLI 复制现有页面：

# Get source page's Elementor data
SOURCE_DATA=$(wp @site post meta get {source_id} _elementor_data)
SOURCE_CSS=$(wp @site post meta get {source_id} _elementor_page_settings)

# Create new page
NEW_ID=$(wp @site post create --post_type=page --post_title="Duplicated Page" --post_status=draft --porcelain)

# Copy Elementor data
wp @site post meta update $NEW_ID _elementor_data "$SOURCE_DATA"
wp @site post meta update $NEW_ID _elementor_edit_mode "builder"
wp @site post meta update $NEW_ID _elementor_page_settings "$SOURCE_CSS"

# Regenerate CSS
wp @site elementor flush-css

通过 WP-CLI 在页面之间应用模板：

# Get source data
SOURCE=$(wp @site post meta get {source_id} _elementor_data)
SETTINGS=$(wp @site post meta get {source_id} _elementor_page_settings)

# Apply to target
wp @site post meta update {target_id} _elementor_data "$SOURCE"
wp @site post meta update {target_id} _elementor_edit_mode "builder"
wp @site post meta update {target_id} _elementor_page_settings "$SETTINGS"

# Clear cache
wp @site elementor flush-css

第 5 步：验证

# Check the page status
wp @site post get {post_id} --fields=ID,post_title,post_status,guid

# Get live URL
wp @site post get {post_id} --field=guid

截取屏幕截图以确认视觉变化：

playwright-cli -s=verify open "https://example.com/{page-slug}/"
playwright-cli -s=verify screenshot --filename=page-verify.png
playwright-cli -s=verify close

---

关键模式

Elementor 数据格式

Elementor 将页面内容以 JSON 格式存储在 _elementor_data postmeta 中。其结构如下：

Section > Column > Widget

每个元素都有一个 id、elType、widgetType 和 settings 对象。可以直接操作此 JSON，但这种做法很脆弱——请务必先备份，并优先使用 search-replace，而不是手动编辑 JSON。

CSS 缓存

通过 WP-CLI 更改 Elementor 数据后，必须清除 CSS 缓存。Elementor 会根据小工具设置预先生成 CSS。缓存过期 = 视觉变化不会显示。

wp @site elementor flush-css
# OR if elementor CLI not available:
wp @site option delete _elementor_global_css
wp @site post meta delete-all _elementor_css

全局小工具

全局小工具在多个页面间共享。编辑一个小工具会更新所有实例。

# List global widgets
wp @site post list --post_type=elementor_library --meta_key=_elementor_template_type \
  --meta_value=widget --fields=ID,post_title

注意：替换全局小工具数据中的文本会影响所有使用该小工具的页面。

Elementor Pro 与 Free

功能	Free	Pro
基本小工具	是	是
主题构建器	否	是
自定义字体	否	是
表单小工具	否	是
WooCommerce 小工具	否	是
动态内容	否	是

主题构建器模板（页眉、页脚、归档页）以 elementor_library 文章类型存储，并带有用于指定其显示条件的特定元数据。

常用 Elementor WP-CLI 命令

如果有 Elementor CLI 扩展：

wp @site elementor flush-css          # Clear CSS cache
wp @site elementor library sync       # Sync with template library
wp @site elementor update db          # Update database after version change