如何创建自定义Elementor小部件并嵌入短代码？实现主题模板可编辑嵌入

1. 确认自定义小部件已完成Elementor注册 #

先确保你的自定义小部件已经通过Elementor官方API完成注册，示例代码如下（可放在主题functions.php或自定义插件中）：

add_action('elementor/widgets/widgets_registered', function() {
    require_once get_template_directory() . '/widgets/my-custom-widget.php';
    Elementor\Plugin::instance()->widgets_manager->register_widget_type(new My_Custom_Widget());
});

其中My_Custom_Widget是你的小部件类，widget_type参数需要和该类get_name()方法返回的ID完全一致（区分大小写）。

2. 在自定义主题模板中使用Elementor内置短代码调用小部件 #

直接在主题模板文件（如page.php、single.php等）中，通过elementor_widget短代码嵌入你的自定义小部件，同时传递初始设置：

<?php
// 定义小部件的初始配置参数
$widget_settings = [
    'title' => '默认自定义标题',
    'content' => '这是自定义小部件的默认内容',
    // 这里添加你的小部件对应控件的参数
];

// 将配置转为JSON并转义，避免语法冲突
$settings_json = wp_json_encode($widget_settings);
$escaped_settings = esc_attr($settings_json);

// 输出短代码
echo do_shortcode("[elementor_widget widget_type='my_custom_widget' settings='{$escaped_settings}']");
?>

3. 在Elementor编辑器中编辑嵌入的小部件 #

当开发者使用Elementor编辑页面时，模板中嵌入的短代码会自动转换为对应小部件的可编辑占位符。点击该占位符即可打开Elementor的小部件编辑面板，直接修改参数，保存后前端会同步更新内容。

注意事项 #

• widget_type的值必须与自定义小部件get_name()返回的ID完全匹配，否则无法识别。
• 配置参数的键名需要和小部件类_register_controls()方法中定义的控件名称一致。
• 如果需要动态获取配置（比如从自定义字段、文章元数据读取），只需将$widget_settings替换为对应数据源即可。

内容的提问来源于stack exchange，提问作者KAJAL JATAV