如何用Elementor创建类VueJS、React的可复用区块？模板功能存局限

方法1：模板 + 自定义字段（最贴近Vue/React组件思路） #

• 先做一个基础结构的Section/部件模板，把需要动态替换的位置留空，用Elementor的动态标签绑定自定义字段（ACF或WordPress原生自定义字段都可以）
• 使用时，直接在页面插入这个模板，选中模板后通过「动态标签」面板选择对应字段就能替换内容；如果要在模板外部加内容，直接在模板所在Section的上下新增Section或部件就行——注意别选「全页模板」，这类模板会锁死整个页面，没法加外部内容

方法2：全局部件（Global Widget） #

• 把可复用结构做成全局部件，插入页面后，双击就能进入编辑模式改动态内容，同时可以在它的前后自由添加其他Elementor内容
• 开启「允许实例自定义」选项后，修改全局部件的基础结构时，所有引用的地方会同步更新，但每个实例还能单独改自己的动态内容，兼顾复用性和灵活性

方法3：自定义短代码 + 模板（进阶灵活方案） #

• 先做一个带占位符的基础模板，比如把动态内容位置标记成{{title}}、{{content}}
• 写一段简单的PHP短代码，接收参数后替换模板里的占位符，然后在页面用短代码调用，前后可以随意加其他内容
• 示例短代码逻辑：

function dynamic_block_shortcode($atts) {
    $atts = shortcode_atts(array(
        'title' => '默认标题',
        'content' => '默认内容'
    ), $atts);
    ob_start();
    // 替换123为你的模板ID
    echo Elementor\Plugin::instance()->frontend->get_builder_content(123, true);
    $content = ob_get_clean();
    // 替换占位符
    $content = str_replace('{{title}}', $atts['title'], $content);
    $content = str_replace('{{content}}', $atts['content'], $content);
    return $content;
}
add_shortcode('dynamic_block', 'dynamic_block_shortcode');

• 使用时在Elementor里加「短代码」部件，输入[dynamic_block title="自定义标题" content="自定义内容"]即可

关键提醒 #

• 绝对避免用「全页模板」，这类模板会覆盖整个页面，导致无法添加外部内容；优先选「Section」「部件」类型的模板
• 动态标签还能绑定文章标题、特色图片、分类等WordPress原生数据，适合批量生成内容

内容的提问来源于stack exchange，提问作者Ivan Markov