wordpress-elementor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

WordPress Elementor

Edit Elementor pages and manage templates on existing WordPress sites. Produces updated page content via browser automation (for visual/structural changes) or WP-CLI (for safe text replacements).

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

Prerequisites

前提条件

Working WP-CLI connection or admin access (use wordpress-setup skill)
Elementor installed and active:
```
wp @site plugin status elementor
```

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

Workflow

工作流程

Step 1: Identify the Page

步骤1：确定目标页面

Find the page to edit:

bash

undefined

找到需要编辑的页面：

bash

undefined

List Elementor pages (pages with _elementor_data meta)

列出Elementor页面（带有_elementor_data元数据的页面）

wp @site post list --post_type=page --meta_key=_elementor_edit_mode --meta_value=builder
--fields=ID,post_title,post_name,post_status

Get the Elementor edit URL

获取Elementor编辑链接

Format: https://example.com/wp-admin/post.php?post={ID}&action=elementor

格式：https://example.com/wp-admin/post.php?post={ID}&action=elementor

undefined

undefined

Step 2: Choose Editing Method

步骤2：选择编辑方式

Change Type	Method	Risk
Text content updates	WP-CLI search-replace	Low (with backup)
Image URL swaps	WP-CLI meta update	Low (with backup)
Widget styling	Browser automation	None
Add/remove sections	Browser automation	None
Layout changes	Browser automation	None
Template application	Browser automation	None

Rule of thumb: If you're only changing text or URLs within existing widgets, WP-CLI is faster. For anything structural, use the visual editor via browser.

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

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

Step 3a: Text Updates via WP-CLI (Safe Method)

步骤3a：通过WP-CLI更新文本（安全方式）

Always back up first:

bash

undefined

务必先备份：

bash

undefined

Export the Elementor data

导出Elementor数据

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


**Simple text replacement**:

```bash

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


**简单文本替换**：

```bash

Dry run — check what would change

试运行 — 查看将更改的内容

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


**After updating**, clear Elementor's CSS cache:

```bash
wp @site elementor flush-css

If the

elementor

WP-CLI command isn't available:

bash

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

wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta
--include-columns=meta_value --precise


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

```bash
wp @site elementor flush-css

若

elementor

WP-CLI命令不可用：

bash

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

Step 3b: Visual Editing via Browser Automation

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

For structural changes, use browser automation to interact with Elementor's visual editor.

Open the editor:

Navigate to

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

Wait for the editor to fully load (Elementor loading screen disappears)
The page appears in the main panel with the widget sidebar on the left

Common editing tasks:

Edit text widget: Click on the text element in the preview → edit inline or in the sidebar
Edit heading: Click the heading → update text in the sidebar panel
Change image: Click image widget → click the image in sidebar → select new from media library
Edit button: Click button → update text, URL, and styling in sidebar
Save: Click the green "Update" button (or Ctrl+S)

Use playwright-cli for independent sessions:

bash

playwright-cli -s=wp-editor open "https://example.com/wp-admin/"

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

打开编辑器：

导航至

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

等待编辑器完全加载（Elementor加载界面消失）
主面板将显示页面，左侧为小工具侧边栏

常见编辑任务：

编辑文本小工具：点击预览中的文本元素 → 直接内联编辑或在侧边栏编辑
编辑标题：点击标题 → 在侧边栏面板更新文本
更换图片：点击图片小工具 → 点击侧边栏中的图片 → 从媒体库选择新图片
编辑按钮：点击按钮 → 在侧边栏更新文本、URL和样式
保存：点击绿色的“更新”按钮（或按Ctrl+S）

使用playwright-cli进行独立会话：

bash

playwright-cli -s=wp-editor open "https://example.com/wp-admin/"

Login first, then navigate to Elementor editor

先登录，然后导航至Elementor编辑器

playwright-cli -s=wp-editor navigate "https://example.com/wp-admin/post.php?post={ID}&action=elementor"


Or Chrome MCP if using the user's logged-in session.

See `references/elementor-workflows.md` for detailed browser automation steps.

playwright-cli -s=wp-editor navigate "https://example.com/wp-admin/post.php?post={ID}&action=elementor"


或使用Chrome MCP（若使用用户已登录的会话）。

详细的浏览器自动化步骤请查看`references/elementor-workflows.md`。

Step 4: Manage Templates

步骤4：管理模板

List saved templates:

bash

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

Apply a template to a new page:

Create the page:

wp @site post create --post_type=page --post_title="New Page" --post_status=draft

Open in Elementor via browser
Click the folder icon (Add Template)
Select from "My Templates" tab
Click "Insert"
Customise and save

Duplicate an existing page:

bash

undefined

列出已保存的模板：

bash

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

将模板应用到新页面：

创建页面：

wp @site post create --post_type=page --post_title="New Page" --post_status=draft

通过浏览器在Elementor中打开该页面
点击文件夹图标（添加模板）
从“我的模板”标签中选择
点击“插入”
自定义并保存

复制现有页面：

bash

undefined

Get source page's Elementor data

获取源页面的Elementor数据

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

复制Elementor数据

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

重新生成CSS

wp @site elementor flush-css

undefined

wp @site elementor flush-css

undefined

Step 5: Verify

步骤5：验证

bash

undefined

bash

undefined

Check the page status

检查页面状态

wp @site post get {post_id} --fields=ID,post_title,post_status,guid

Get live URL

获取前端URL

wp @site post get {post_id} --field=guid


Take a screenshot to confirm visual changes:

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

wp @site post get {post_id} --field=guid


截图确认视觉更改：

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

Critical Patterns

核心模式

Elementor Data Format

Elementor数据格式

Elementor stores page content as JSON in

_elementor_data

postmeta. The structure is:

Section → Column → Widget

Each element has an

id

elType

widgetType

, and

settings

object. Direct manipulation of this JSON is possible but fragile — always back up first and prefer

search-replace

over manual JSON editing.

Elementor将页面内容以JSON格式存储在

_elementor_data

文章元数据中。结构如下：

区块 → 列 → 小工具

每个元素包含

id

、

elType

、

widgetType

和

settings

对象。可以直接操作此JSON，但这种方式很脆弱 — 务必先备份，且优先使用

search-replace

而非手动编辑JSON。

CSS Cache

CSS缓存

After any WP-CLI change to Elementor data, you must flush the CSS cache. Elementor pre-generates CSS from widget settings. Stale cache = visual changes don't appear.

bash

wp @site elementor flush-css

通过WP-CLI对Elementor数据进行任何更改后，必须清除CSS缓存。Elementor会根据小工具设置预先生成CSS。缓存过期会导致视觉更改无法显示。

bash

wp @site elementor flush-css

OR if elementor CLI not available:

若Elementor CLI不可用，可使用：

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

undefined

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

undefined

Elementor Pro vs Free

Elementor专业版 vs 免费版

Feature	Free	Pro
Basic widgets	Yes	Yes
Theme Builder	No	Yes
Custom fonts	No	Yes
Form widget	No	Yes
WooCommerce widgets	No	Yes
Dynamic content	No	Yes

Theme Builder templates (header, footer, archive) are stored as

elementor_library

post type with specific meta indicating their display conditions.

功能	免费版	专业版
基础小工具	是	是
主题构建器	否	是
自定义字体	否	是
表单小工具	否	是
WooCommerce小工具	否	是
动态内容	否	是

主题构建器模板（页眉、页脚、归档页）以

elementor_library

文章类型存储，并带有指定其显示条件的元数据。

Common Elementor WP-CLI Commands

常用Elementor WP-CLI命令

If the Elementor CLI extension is available:

bash

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

若Elementor CLI扩展可用：

bash

wp @site elementor flush-css          # 清除CSS缓存
wp @site elementor library sync       # 与模板库同步
wp @site elementor update db          # 版本更新后更新数据库

Reference Files

参考文件

```
references/elementor-workflows.md
```
— Browser automation steps, template management, safe editing patterns

```
references/elementor-workflows.md
```
— 浏览器自动化步骤、模板管理、安全编辑模式