如何为Fusion元素添加自定义设置标签并注入设置组？

你当前的自定义组件方案确实会导致冗余，而直接给现有Fusion元素（比如fusion_container）添加自定义设置组是更优雅的解决思路——Avada的Fusion Builder提供了一系列钩子来实现这个需求，下面是具体的步骤和示例：

1. 给目标Fusion元素添加自定义设置组 #

使用fusion_builder_before_element_options钩子，你可以在指定元素的选项面板末尾插入自定义设置组。比如针对fusion_container元素添加一个「Web服务包裹设置」组：

add_action('fusion_builder_before_element_options', 'add_web_service_settings_to_container', 10, 2);
function add_web_service_settings_to_container($element, $args) {
    // 只针对fusion_container元素生效
    if ('fusion_container' !== $element) return;

    // 注册自定义设置组
    fusion_builder_register_settings(
        'web_service_wrap_group',
        [
            'label' => 'Web服务包裹设置',
            'icon'  => 'fusiona-code',
            'fields' => [
                'enable_web_service_wrap' => [
                    'label'   => '启用Web服务包裹',
                    'type'    => 'radio_button_set',
                    'options' => [
                        'yes' => '是',
                        'no'  => '否'
                    ],
                    'default' => 'no'
                ],
                'web_service_endpoint' => [
                    'label'       => 'Web服务接口地址',
                    'type'        => 'text',
                    'dependency'  => [
                        'element' => 'enable_web_service_wrap',
                        'value'   => 'yes'
                    ]
                ]
                // 可以添加更多自定义参数，比如请求方式、额外参数等
            ]
        ]
    );
}

这段代码会在fusion_container的选项面板里新增一个带图标的设置组，里面包含开关和接口地址字段，还做了依赖显示（只有开启开关后才显示地址输入框）。

2. 捕获并处理自定义设置的值 #

接下来需要用fusion_builder_shortcode_atts钩子，把自定义设置的值传递到短代码的属性中，方便后续处理：

add_filter('fusion_builder_shortcode_atts', 'pass_web_service_settings_to_shortcode', 10, 3);
function pass_web_service_settings_to_shortcode($atts, $shortcode, $post_id) {
    if ('fusion_container' !== $shortcode) return $atts;

    // 将自定义设置的值合并到短代码属性中
    $atts['enable_web_service_wrap'] = isset($_POST['enable_web_service_wrap']) ? sanitize_text_field($_POST['enable_web_service_wrap']) : 'no';
    $atts['web_service_endpoint'] = isset($_POST['web_service_endpoint']) ? esc_url_raw($_POST['web_service_endpoint']) : '';

    return $atts;
}

3. 拦截短代码输出，完成Web服务内容包裹 #

最后用元素对应的短代码钩子（比如fusion_container_shortcode），拦截原始Fusion元素的输出，调用Web服务并完成包裹：

add_filter('fusion_container_shortcode', 'wrap_container_with_web_service_content', 10, 2);
function wrap_container_with_web_service_content($output, $atts) {
    // 如果未启用包裹，直接返回原始输出
    if ('yes' !== $atts['enable_web_service_wrap'] || empty($atts['web_service_endpoint'])) {
        return $output;
    }

    // 调用Web服务获取内容（这里替换成你的实际调用逻辑，比如POST请求、带参数等）
    $web_service_response = wp_remote_get($atts['web_service_endpoint']);
    if (is_wp_error($web_service_response)) {
        // 处理请求错误，这里可以返回原始内容或错误提示
        return $output;
    }
    $web_service_content = wp_remote_retrieve_body($web_service_response);

    // 将原始Fusion容器内容包裹在Web服务返回内容之外
    return $web_service_content . $output;
}

关键优势 #

• 无需重复创建自定义组件，直接复用Fusion原生元素的所有功能，完美解决fusion_container这类元素的局限性
• 自定义设置和原生元素选项无缝集成，用户操作体验更统一
• 代码结构更简洁，后续维护和扩展成本更低

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