wordpress-elementor by jezweb/claude-skills
npx skills add https://github.com/jezweb/claude-skills --skill wordpress-elementor在现有 WordPress 站点上编辑 Elementor 页面并管理模板。通过浏览器自动化(用于视觉/结构更改)或 WP-CLI(用于安全的文本替换)生成更新后的页面内容。
wp @site plugin status elementor找到要编辑的页面:
# 列出 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
# 获取 Elementor 编辑 URL
# 格式:https://example.com/wp-admin/post.php?post={ID}&action=elementor
| 更改类型 | 方法 | 风险 |
|---|---|---|
| 文本内容更新 | WP-CLI search-replace | 低(配合备份) |
| 图片 URL 替换 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| WP-CLI meta update |
| 低(配合备份) |
| 小部件样式 | 浏览器自动化 | 无 |
| 添加/移除区块 | 浏览器自动化 | 无 |
| 布局更改 | 浏览器自动化 | 无 |
| 模板应用 | 浏览器自动化 | 无 |
经验法则:如果只更改现有小部件内的文本或 URL,使用 WP-CLI 更快。对于任何结构性的更改,请通过浏览器使用可视化编辑器。
务必先备份:
# 导出 Elementor 数据
wp @site post meta get {post_id} _elementor_data > /tmp/elementor-backup-{post_id}.json
简单文本替换:
# 试运行 — 检查将更改的内容
wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \
--include-columns=meta_value \
--dry-run --precise
# 执行(确认试运行结果正确后)
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
对于结构性更改,使用浏览器自动化与 Elementor 的可视化编辑器交互。
打开编辑器:
https://example.com/wp-admin/post.php?post={ID}&action=elementor常见编辑任务:
使用 playwright-cli 进行独立会话:
playwright-cli -s=wp-editor open "https://example.com/wp-admin/"
# 先登录,然后导航到 Elementor 编辑器
playwright-cli -s=wp-editor navigate "https://example.com/wp-admin/post.php?post={ID}&action=elementor"
或者,如果使用用户已登录的会话,可以使用 Chrome MCP。
有关详细的浏览器自动化步骤,请参阅 references/elementor-workflows.md。
列出已保存的模板:
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 数据
SOURCE_DATA=$(wp @site post meta get {source_id} _elementor_data)
SOURCE_CSS=$(wp @site post meta get {source_id} _elementor_page_settings)
# 创建新页面
NEW_ID=$(wp @site post create --post_type=page --post_title="Duplicated Page" --post_status=draft --porcelain)
# 复制 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"
# 重新生成 CSS
wp @site elementor flush-css
# 检查页面状态
wp @site post get {post_id} --fields=ID,post_title,post_status,guid
# 获取实时 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 将页面内容以 JSON 格式存储在 _elementor_data 元数据中。结构如下:
Section → Column → Widget
每个元素都有一个 id、elType、widgetType 和一个 settings 对象。直接操作此 JSON 是可能的,但很脆弱 — 务必先备份,并优先使用 search-replace 而非手动编辑 JSON。
在对 Elementor 数据进行任何 WP-CLI 更改后,必须刷新 CSS 缓存。Elementor 会根据小部件设置预生成 CSS。缓存过时 = 视觉更改不会显示。
wp @site elementor flush-css
# 或者如果 elementor CLI 不可用:
wp @site option delete _elementor_global_css
wp @site post meta delete-all _elementor_css
| 功能 | 免费版 | Pro 版 |
|---|---|---|
| 基本小部件 | 是 | 是 |
| 主题构建器 | 否 | 是 |
| 自定义字体 | 否 | 是 |
| 表单小部件 | 否 | 是 |
| WooCommerce 小部件 | 否 | 是 |
| 动态内容 | 否 | 是 |
主题构建器模板(页眉、页脚、存档页)存储为 elementor_library 文章类型,并带有特定的元数据指示其显示条件。
如果 Elementor CLI 扩展可用:
wp @site elementor flush-css # 清除 CSS 缓存
wp @site elementor library sync # 与模板库同步
wp @site elementor update db # 版本更改后更新数据库
references/elementor-workflows.md — 浏览器自动化步骤、模板管理、安全编辑模式每周安装数
437
仓库
GitHub 星标数
643
首次出现
2026 年 2 月 22 日
安全审计
安装于
codex404
gemini-cli403
opencode403
github-copilot402
amp401
kimi-cli401
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).
wp @site plugin status elementorFind the page to edit:
# List Elementor pages (pages with _elementor_data meta)
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
# Format: https://example.com/wp-admin/post.php?post={ID}&action=elementor
| 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.
Always back up first :
# Export the Elementor data
wp @site post meta get {post_id} _elementor_data > /tmp/elementor-backup-{post_id}.json
Simple text replacement :
# 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:
wp @site elementor flush-css
If the elementor WP-CLI command isn't available:
wp @site option delete _elementor_global_css
wp @site post meta delete-all _elementor_css
For structural changes, use browser automation to interact with Elementor's visual editor.
Open the editor :
https://example.com/wp-admin/post.php?post={ID}&action=elementorCommon editing tasks :
Use playwright-cli for independent sessions:
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"
Or Chrome MCP if using the user's logged-in session.
See references/elementor-workflows.md for detailed browser automation steps.
List saved templates :
wp @site post list --post_type=elementor_library --fields=ID,post_title,post_status
Apply a template to a new page :
wp @site post create --post_type=page --post_title="New Page" --post_status=draftDuplicate an existing page :
# 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
# 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
Take a screenshot to confirm visual changes:
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 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.
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.
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
| 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.
If the Elementor CLI extension is available:
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
references/elementor-workflows.md — Browser automation steps, template management, safe editing patternsWeekly Installs
437
Repository
GitHub Stars
643
First Seen
Feb 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
codex404
gemini-cli403
opencode403
github-copilot402
amp401
kimi-cli401
Gmail过滤器创建教程 - 使用Google Workspace CLI自动分类邮件与添加标签
6,700 周安装
Rust调用关系图生成器 - 可视化函数调用层次结构,提升代码分析效率
539 周安装
parallel-web-extract:并行网页内容提取工具,高效抓取网页数据
595 周安装
腾讯云CloudBase AI模型Web技能:前端调用混元/DeepSeek模型,实现流式文本生成
560 周安装
Apollo Connectors 模式助手:GraphQL API 连接器开发与集成指南
565 周安装
GitHub Trending 趋势分析工具:实时发现热门项目、技术洞察与开源机会
556 周安装
GSAP React 集成教程:useGSAP Hook 动画库与 React 组件开发指南
546 周安装