WordPress Elementor如何创建支持传参的全局同步可复用组件

完全匹配你要的「统一维护结构样式、单页传入差异化内容、修改后全实例自动同步」的需求，不需要从零造轮子，按现有使用场景可选以下成熟方案：

1. Elementor原生方案（适配当前Elementor使用场景，零额外学习成本） #

不要用手动复制Section的工作流，直接用Elementor自带的全局组件+动态字段能力，逻辑和Vue组件完全对齐：

• 第一步在Elementor主题构建器新建通用模块，做好“上图下文”的基础结构，把通用样式（图片高度、内外边距、字体规则等）先配置好，图片、文本的内容位置预留占位，将两个位置的内容源绑定为自定义字段类型的动态标签
• 第二步把这个模块保存为允许实例自定义内容的全局组件，不要锁定内容编辑权限，仅保留结构和通用样式的全局同步规则
• 后续在任意页面、任意多站点子站插入这个组件时，只需要在组件的侧边栏设置项里上传对应图片、填写对应文本即可，不需要改动结构
• 后续要调整通用样式时，只需要修改主题构建器里的全局组件源文件，所有站点、所有页面插入的组件实例会自动同步最新样式，之前单独配置的差异化图片、文本内容不会被覆盖。
  如果用的是免费版Elementor没有原生动态字段能力，搭配免费的自定义字段插件即可实现相同的参数绑定效果，逻辑完全一致。

2. 自定义古腾堡区块方案（轻量无页面构建器依赖） #

如果不想重度依赖Elementor，可以直接注册自定义古腾堡区块，开发逻辑和Vue单文件组件几乎一致：

• 区块的基础结构、通用样式统一写在区块注册文件中，预留图片地址、展示文本两个可配置属性作为入参
• 编辑内容时直接插入对应区块，在区块侧边栏上传图片、输入对应文字即可完成单页配置
• 后续调整通用样式只需要修改区块源文件的样式代码，全站点所有插入的区块会自动同步更新，不会出现复制内容后无法批量调整的问题。
  多站点场景下可以把这个自定义区块封装成简易功能插件，在网络层面全局启用，所有子站都可以直接调用，不需要重复配置。

3. 原生模板片段方案（适合有基础PHP能力的场景，维护成本最低） #

如果熟悉基础的WordPress模板开发，可以直接用原生模板机制实现，稳定性最高：

• 把“上图下文”的通用结构、样式写在父主题的模板片段文件中，预留图片、文本的变量位
• 在需要加载这个模块的位置，用WordPress原生函数调用模板片段，同时传入当前页面对应的图片、文本参数即可，调用示例：

get_template_part( 'template-parts/banner-under-header', null, array(
  'banner_image' => get_post_meta( get_the_ID(), 'under_header_banner', true ),
  'banner_text'  => get_post_meta( get_the_ID(), 'under_header_text', true ),
) );

• 后续调整通用样式、结构只需要修改这一个模板片段文件，所有站点、所有调用位置会自动同步更新，完全不存在批量修改的维护成本。

内容的提问来源于stack exchange，提问作者Florian Kozel