关于 elementor-content
用于安全编辑 Elementor 页面内容的技能,面向需要调整 WordPress 页面或模板的工作流。它强调保留现有结构、最小化改动,并在写入前后验证与备份。
主要功能
- 01谨慎修改 Elementor JSON
- 02读取同站元素与控件结构
- 03写入前备份并验证
- 04写入后核对内容与渲染
- 05检查响应式、全局样式与安全性
适用场景
- 01调整 Elementor 页面或模板
- 02排查 JSON 结构和引用问题
- 03验证页面在不同断点的呈现
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ beeltec/ skills --skill elementor-content安装后在 Claude Code 中输入/elementor-content确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/best-practices.mdelement-structure.mdtheme-builder-templates.mdwidget-catalog.mdwp-cli-operations.md详细介绍
Elementor 内容
保守地操作 Elementor 的 JSON。优先使用导出的模板或暂存副本;将直接写入 _elementor_data 视为低级备用方案,因为小工具架构和内部元数据会因 Elementor、Pro、插件及功能版本而异。
工作流
- 确定目标:JSON 模板还是 WordPress 安装。
- 对于 WordPress,确认站点、文章 ID、文章类型、已安装的 Elementor/Pro 版本以及可用的 CLI 命令。切勿照搬示例中的版本元数据。
- 读取完整文档,并在修改前创建带时间戳的备份。
- 修改不熟悉的控件时,检查同一站点上相同类型的元素。保留未知键和现有值的格式。
- 仅进行满足请求所需的最小树结构或设置变更。保留未变元素的 ID;仅为新元素生成不冲突的 ID。
- 写入前验证 JSON、结构、响应式/全局引用、内容质量和安全性。
- 写入一次,读回并再次解析,然后与预期结果进行比对。
- 运行 Elementor 支持的缓存重新生成命令;仅在相关时清除其他缓存,并在相关断点下直观检查编辑器和前端。
- 如果验证或渲染失败,恢复备份。
如果有暂存或草稿工作流可用,切勿修改线上生产页面。切勿发布、删除或批量更新超出请求授权范围的内容。
选择合适的参考资料
| 需求 | 阅读 |
|---|---|
| JSON 包装结构、树、ID、设置、响应式值、全局值 | references/element-structure.md |
| 常见内置小工具示例 | references/widget-catalog.md |
| 实时数据库读写、备份、验证、CLI | references/wp-cli-operations.md |
| Pro Theme Builder 模板和条件 | references/theme-builder-templates.md |
| 无障碍、响应式设计、性能、安全、QA | references/best-practices.md |
小工具目录仅供参考,并非稳定架构——当精确键名很重要时,请检查同一站点的 JSON 或已注册的小工具控件,尤其是嵌套、Pro、插件或 Editor V4 元素。
数据规则
- 导出的文件使用模板包装结构(
title、type、version、page_settings、content);_elementor_data仅存储内容数组。 - 保持
settings为空数组或对象,与源数据一致;没有理由时不要规范化。 - 每个元素都需要文档内唯一的
id、elType、settings和elements数组;小工具还需要widgetType。 - 保留源数据中的
isInner值;切勿据此推断容器深度,也不要仅因元素移动就重写该值。 - 子元素应归属于容器和明确支持嵌套的小工具;普通小工具的
elements数组应保持为空。 - 除非请求迁移,否则保留旧版区段/列树结构;对于目标站点支持的新布局,优先使用容器。
- 保留
__globals__引用,并确认目标站点上存在被引用的 kit 样式;除非用户要求,否则不要用硬编码值替换全局值。 - 支持
_tablet/_mobile之外的自定义断点后缀;检查站点的断点配置。 - 将富文本、URL、自定义属性、自定义 CSS、短代码和动态标签视为不可信输入。仅保留可信标记;切勿编造可执行内容。
验证
写入前:解析确切的负载并确认根类型;递归检查必填字段和重复的元素/重复器 ID(ID 不必是十六进制);确认目标站点上存在每种小工具类型,并保留受支持的嵌套子项;在目标上下文中检查媒体 ID/URL、内部链接、动态标签和全局样式引用;检查标题顺序、地标、替代文本、描述性链接、键盘行为、可见焦点、对比度和动效控制;检查桌面端和每个已启用的断点,不要仅为了按设备隐藏布局而重复布局;优先使用全局样式、响应式继承、浅层容器树以及尺寸适当的媒体。
写入后:读回并解析存储的值;确认预期差异,并确认无关内容未更改;在可用时运行 wp elementor flush-css(条件发生变化时运行 wp elementor-pro theme-builder clear-conditions);确认编辑器可以加载,然后在相关断点验证前端渲染和交互。