WordPress Flatsome主题UX Builder自定义容器无法容纳子元素咨询

你的自定义容器无法容纳子元素，核心问题是未在UX Builder的短代码配置中明确声明该元素支持内容/子元素，同时存在两处配置细节问题，具体分析和修正如下：

关键原因 #

UX Builder不会默认将自定义短代码识别为可容纳子元素的容器，必须通过特定配置项告知编辑器该元素支持嵌套内容，否则编辑器不会提供插入子元素的交互区域。

修正步骤及代码 #

1. 完善UX Builder短代码配置 #

在add_ux_builder_shortcode的配置数组中添加content项，同时调整wrap参数（容器元素建议保留默认的true，避免破坏编辑器交互）：

// 向UX Builder添加新的自定义容器
add_ux_builder_shortcode('custom_container', array(
    'name' => __('自定义容器'),
    'category' => __('内容'),
    'content' => __('容器内容'), // 关键：声明该元素支持子内容
    'wrap' => true, // 容器元素需保留此设置，确保编辑器交互正常
    'options' => array(
        'background' => array(
            'type' => 'colorpicker',
            'heading' => __('背景色'),
            'default' => '#fff',
            'group' => '常规'
        ),
        'image2' => array(
            'type' => 'image',
            'heading' => __('背景图片'),
            'group' => '常规'
        ),
    ),
));

2. 修正短代码输出函数 #

确保函数中处理所有配置的参数（比如你添加的image2图片选项），同时保持do_shortcode处理嵌套内容：

// 处理自定义容器输出的函数
function shortcode_custom_container($atts, $content = null) {
    extract(shortcode_atts(array(
        'background' => '#fff',
        'image2' => '',
    ), $atts));

    // 构建样式字符串，包含背景色和背景图
    $style = "background-color: {$background};";
    if (!empty($image2)) {
        $image_url = wp_get_attachment_image_url($image2, 'full');
        $style .= " background-image: url({$image_url}); background-size: cover;";
    }

    // 输出容器HTML并处理嵌套短代码
    return '<div class="custom-container" style="' . esc_attr($style) . '">' . do_shortcode($content) . '</div>';
}

// 注册短代码
add_shortcode('custom_container', 'shortcode_custom_container');

额外说明 #

• content配置项：这是让UX Builder识别容器元素的核心，值可以是任意描述文本，用于在编辑器中提示该区域的作用。
• wrap参数：设置为false会禁用编辑器内的外层包装，导致拖拽子元素的交互失效，容器类元素必须保持wrap => true。
• 参数一致性：UX Builder配置中的选项需和短代码函数内的shortcode_atts参数一一对应，否则设置的属性无法传递到前端输出。

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