Elementor Atomic Builder 动态绑定指南:使用 `$$type: dynamic` 的 PropValue 将属性绑定到 WordPress 实时数据

Elementor Atomic Builder 动态绑定指南:使用 `$$type: dynamic` 的 PropValue 将属性绑定到 WordPress 实时数据 Elementor Atomic Builder 动态绑定指南使用$$type: dynamic的 PropValue 将属性绑定到 WordPress 实时数据【免费下载链接】elementorThe most advanced frontend drag drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.项目地址: https://gitcode.com/GitHub_Trending/el/elementor适用读者编辑器前端开发者TS与 PHP 后端开发者 核心模块modules/atomic-widgets/dynamic-tags/dynamic-prop-type.php相关文档动态标签总览、动态标签发现、PropValue 基础本指南围绕 Elementor Atomic Builder 中「动态 PropValue 绑定」这一核心技术主题展开你将以 JSON 形式在 atomic 元素数据中声明一个指向旧版动态标签legacy dynamic tag的引用让标题、图片、链接、颜色等属性在渲染时刻从 WordPress 实时数据文章标题、作者、特色图片等取值而非写死静态内容。读完本文你将掌握dynamicPropValue 的完整 JSON 形状、根级与嵌套绑定差异、group字段的注入规则、分类门控category gating机制以及如何在 PHP、REST 与 MCPModel Context Protocol场景下手写、校验并扩展这类绑定。什么是动态 PropValue 绑定在 Atomic Builder 的元素 JSON 中一个动态绑定dynamic binding就是一个$$type为dynamic的 PropValue——它本身并不携带最终内容而是携带一个指向注册表内旧版动态标签的引用以及该标签所需的一组设置settings。承载该类型的类为Elementor\Modules\AtomicWidgets\DynamicTags\Dynamic_Prop_Type其 prop type 键为dynamic见 dynamic-prop-type.php 中get_key()的实现。底层架构上Elementor 采用「旧版注册表 v4 桥接层」的双层设计详见 overview.md层职责旧版注册表modules/dynamic-tags/、core/dynamic-tags/PHP 标签类继承Tag或Data_Tag通过elementor/dynamic_tags/register注册Atomic 桥接层modules/atomic-widgets/dynamic-tags/把注册表适配为$$type: dynamic的 PropValue为 prop schema 扩展dynamic联合在渲染管线中解析需要注意的是桥接层不会替代旧版注册表——每个 atomic 绑定在渲染时最终都会调用Plugin::$instance-dynamic_tags来产出内容见 dynamic-transformer.php 中get_tag_data_content()的调用。何时使用动态绑定在以下场景中应为一个 widget prop 或样式字段声明dynamic绑定该 prop 或样式字段的 schema 是联合类型union且联合中已包含dynamic例如String_Prop_Type | Dynamic_Prop_Type你在手写元素 JSON、通过REST API或MCP组合/修改元素数据你希望某个字段在渲染时使用WordPress 实时数据而非静态值——例如文章标题、作者名、特色图片 URL、当前分类链接等。PropValue 的标准形状一个完整的动态绑定 JSON 如下{ $$type: dynamic, value: { name: post-title, settings: { before: , after: } } }各字段说明字段是否必填说明$$type是固定为dynamicvalue.name是标签名来自注册表通过 discovery.md 中的list-dynamic-tags查询value.settings是规范化后标签设置没有设置时使用{}disabled否标准 PropValue 标志位为true时渲染解析跳过该字段在 PHP 中构建同样的值可直接使用Dynamic_Prop_Type::generate()use Elementor\Modules\AtomicWidgets\DynamicTags\Dynamic_Prop_Type; Dynamic_Prop_Type::generate( [ name post-title, group post, settings [ before Hello ], ] );generate( $value, $disable false )通过Has_Generatetrait 提供第二个参数传true可同时生成disabled: true的绑定与 PropValue 基础约定一致参见 prop-value.md。从源码看Dynamic_Prop_Type的validate_value()会对持久化数据做严格结构校验见 dynamic-prop-type.phpvalue.name必须存在且为字符串value.group必须存在且为字符串value.settings必须存在且为数组标签必须存在于注册表且其categories与当前 prop 声明的分类有交集settings还要通过该标签对应props_schema的Props_Parser校验。sanitize_value()则会把settings按标签 schema 清洗后再持久化dynamic-prop-type.php。这些约束意味着手写 JSON 时group字段在持久化数据中必不可少——详见下文「group字段」一节。根级绑定与嵌套绑定根级绑定Root-level整个 prop 都是动态的——例如标题字段整体由文章标题标签驱动title: { $$type: dynamic, value: { name: post-title, settings: {} } }嵌套绑定Nested对象内部的某一个字段是动态的其他字段仍是静态。典型场景是图片srcimage: { $$type: image, value: { src: { $$type: dynamic, value: { name: post-featured-image, settings: {} } }, size: { $$type: string, value: full } } }嵌套绑定意味着你可以做到「同一条数据的局部动态化」——例如图片的src跟随文章特色图片而size保持固定的full。从 JSON Schema 生成逻辑看dynamic-prop-type.phpto_json_schema()的说明文本也明确指出动态绑定可以出现在嵌套字段如图片的 src中并且当 prop 声明了allowed_tag_names时schema 会对value.name生成enum枚举约束。Settings 的形状与规范化持久化 JSON中settings内使用完整的 PropValue 信封即{ $$type: ..., value: ... }形式例如before字段对应{ $$type: string, value: Hello }MCP / Agent 撰写时通常直接发送纯值plain values例如before: Hello ——由各处的 resolver 在写入前负责规范化。规范化发生在多个入口下文「group字段」一节会展开编辑器内的dynamicTagLLMResolver、PHP MCP 侧的Dynamic_Tag_Llm_Resolver、以及导入/导出侧的ImportExport\Dynamic_Transformer。一个值得注意的约定fallback键会从 LLM 的 schema 中被省略Dynamic_Tag_Llm_Resolver::OMITTED_SETTING_KEYS因此 Agent 在生成绑定 JSON 时不应包含fallback。具体某个标签允许哪些 settings 键需通过 discovery.md 中的发现接口按标签查询。group字段作者侧省略、解析器注入、持久化必需这是动态绑定中最容易踩坑的字段三条规则如下作者侧形状省略group在编辑器/MCP 中撰写绑定时只提供namesettings不要发送group解析器注入group写入持久化数据之前由 resolver 从注册表中查出该标签的group并注入。三个解析入口分别是编辑器内dynamicTagLLMResolverTSPHP MCPDynamic_Tag_Llm_Resolver导入/导出ImportExport\Dynamic_Transformer见 import-export/dynamic-transformer.php缺失时回退到$tag[group]持久化数据包含groupDynamic_Prop_Type::validate_value()要求group必须存在见 dynamic-prop-type.php因此入库数据始终带group。而渲染阶段只使用name和settings——Dynamic_Transformer::transform()读取name用Dynamic_Tags_Schemas-get( $name )取到该标签的 settings schema再经Render_Props_Resolver解析 settings 后调用get_tag_data_content()输出dynamic-transformer.php。group在渲染链路中完全不参与。分类门控Category Gating哪些 prop 可以绑定哪些标签Dynamic_Prop_Type在加入联合类型时通过categories()声明约束内置映射由Dynamic_Prop_Types_Mapping完成源码见 dynamic-prop-types-mapping.php。映射规则如下Prop 类型对应分类CategoryString_Prop_Type无 enumtextHtml_V3_Prop_TypetextUrl_Prop_TypeurlImage_Src_Prop_TypeimageNumber_Prop_TypenumberColor_Prop_TypecolorSvg_Src_Prop_Typesvg从源码看get_related_categories()先检查该 prop type 是否设置了Dynamic_Prop_Type::META_KEYdynamic元数据再按具体类型映射分类对于Union_Prop_Type则会遍历其全部成员类型合并分类dynamic-prop-types-mapping.php。随后Dynamic_Tags_Module::instance()-get_dynamic_tag_names_by_categories( $categories )会筛选出分类相交的标签名作为allowed_tag_names注入dynamic-tags-module.php——这解释了为什么编辑器里某些 prop 只能选到部分标签。退出动态支持如果一个 prop 明确不允许动态绑定可以显式退出String_Prop_Type::make()-meta( Dynamic_Prop_Type::ignore() )Dynamic_Prop_Type::ignore()返回[ dynamic, false ]元组dynamic-prop-type.phpget_related_categories()读取该元数据为假时直接返回空分类从而跳过dynamic联合注入。扩展为自定义 prop 打开动态绑定如果插件定义了自定义的 atomic prop 类型并希望它接受动态绑定需要手动将Dynamic_Prop_Type加入其联合类型use Elementor\Modules\AtomicWidgets\PropTypes\Union_Prop_Type; use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Array_Prop_Type; use Elementor\Modules\AtomicWidgets\DynamicTags\Dynamic_Prop_Type; use Elementor\Modules\DynamicTags\Module as V1_Dynamic_Tags_Module; $shape[to] Union_Prop_Type::make() -add_prop_type( String_Array_Prop_Type::make()-required() ) -add_prop_type( Dynamic_Prop_Type::make()-categories( [ V1_Dynamic_Tags_Module::TEXT_CATEGORY, ] ) ) -required();分类常量定义于Elementor\Modules\DynamicTags\Module包括TEXT_CATEGORY、URL_CATEGORY、IMAGE_CATEGORY、NUMBER_CATEGORY、COLOR_CATEGORY、SVG_CATEGORY等。内置的映射器通过elementor/atomic-widgets/props-schema与elementor/atomic-widgets/styles/schema两个过滤器把dynamic联合自动注入到匹配的 prop 与样式 schema 中注册见 dynamic-tags-module.php自定义 prop 类型若想走自动注入路径则需要修改Dynamic_Prop_Types_Mapping本身。详细的标签注册与扩展清单参见 extending.md。动态绑定的完整数据流结合源码可以把一次动态绑定的生命周期串联如下注册旧版标签类在elementor/dynamic_tags/register钩子中注册Plugin::$instance-dynamic_tags-register( new My_Custom_Tag() )转换Dynamic_Tags_Editor_Config::get_tags()把可转换的标签转为 atomic 形状name、categories、label、group、atomic_controls、props_schema见 dynamic-tags-editor-config.php无法转换的控件会阻断该标签的转换除非设置force_convert_to_atomic暴露编辑器通过elementor/editor/localize_settings过滤器把标签清单以atomicDynamicTags键暴露给前端dynamic-tags-module.phpSchema 扩展Dynamic_Prop_Types_Mapping按分类把dynamic联合注入 props 与 styles 的 schema写入规范化LLM resolver编辑器dynamicTagLLMResolver/ PHPDynamic_Tag_Llm_Resolver或导入导出 transformer 注入group并包装 settings渲染解析Dynamic_Transformer注册于elementor/atomic-widgets/settings/transformers/register与elementor/atomic-widgets/styles/transformers/registerdynamic-tags-module.php渲染时经Render_Props_Resolver解析 settings最终调用旧版注册表输出内容。值得注意MCP 场景下Dynamic_Tag_Llm_Resolver与编辑器 resolver 会先把纯值 settings 包装为 PropValue 信封再交给Dynamic_Prop_Type::generate()生成最终 JSON——这与 composition-workflow.md 描述的 Agent 组合流程一致。公共 API 一览符号签名用途源码Dynamic_Prop_Type::get_key()→dynamicProp 类型键dynamic-prop-type.phpDynamic_Prop_Type::generate( $value, $disable false )构建 PropValue同上经Has_GenerateDynamic_Prop_Type::ignore()在 schema 中退出动态支持同上Dynamic_Prop_Type::is_dynamic_prop_value( $value ): bool检测是否为动态绑定同上Dynamic_Prop_Typecategories( array )、allowed_tag_names( array )约束允许的标签同上Dynamic_Transformertransform( $value, $key )渲染时解析为输出内容dynamic-transformer.phpDynamic_Prop_Types_Mapping::make()、get_extended_schema( $schema )按分类注入 dynamic 联合dynamic-prop-types-mapping.php内部机制速览Schema 扩展动态联合的注入发生在elementor/atomic-widgets/props-schema与elementor/atomic-widgets/styles/schema两个过滤器上LLM 去重LLM_Schema_Dedupe_Filter挂载在elementor/atomic-widgets/llm-json-schema上用于在 LLM 生成 schema 时去除重复的dynamic联合成员Settings schemaDynamic_Tags_Schemas::get( $tag_name )通过Dynamic_Tags_Converter::convert_control_to_prop_type()把标签的旧版控件text、textarea、select、number、switcher、choose、query、date_time、media 等逐一转换为 prop 类型见 dynamic-tags-schemas.php发现能力Agent 与集成方在绑定前应通过list-dynamic-tagsWordPress Abilityelementor/list-dynamic-tagsMCP 工具名list-dynamic-tags编辑器资源 URIelementor://dynamic-tags查询可用的标签名、分类与 settings schema详见 discovery.md。总结与建议动态绑定是 Elementor Atomic Builder 中「静态元素 JSON 接入 WordPress 实时数据」的官方通道。实操时请牢记四点作者侧只写namesettings纯值group由 resolver 注入、持久化必需、渲染无关settings 以目标标签的 schema 为准且不含fallback分类门控决定了某个 prop 能绑定哪些标签自定义 prop 需手动加入Dynamic_Prop_Type。按此流程无论是编辑器内的拖拽面板、REST 批量写入还是 MCP Agent 组合都能产出校验通过、渲染正确的动态绑定数据。【免费下载链接】elementorThe most advanced frontend drag drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.项目地址: https://gitcode.com/GitHub_Trending/el/elementor创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考