WordPress Flatsome自定义UX Builder子元素前端不显示求助

核心问题 #

你的卡片容器短码函数未接收并处理嵌套的子元素内容——WordPress容器类短码需要通过$content参数获取内部子短码，再解析后输出。

具体修改步骤 #

1. 更新主文件flatsome-elements.php中的cards_shortcode函数

修改函数定义，添加$content参数，并在输出时替换模板中的<content>标签为解析后的子内容：

public function cards_shortcode($atts, $content = '') {
    $atts = shortcode_atts([
        'href' => 'javascript:void();',
        'background_color' => '#fff',
        'text_color' => '#000',
        'text' => 'Button',
        'letter_case' => '',
        'padding' => '16',
        'margin' => '5',
    ], $atts);

    ob_start();
    require(FLATSOME_ELEMENTS_PATH . 'public-html/cards.html');
    $output = ob_get_clean();

    // 将模板中的<content>标签替换为解析后的子短码内容
    $output = str_replace('<content></content>', do_shortcode($content), $output);

    return $output;
}

2. 验证其他配置

你的integrations/flatsome.php配置是正确的：

• flatsome_cards设为container类型并允许flatsome_card_item子元素
• flatsome_card_item设置require依赖和hidden: true，确保它只能在容器内使用

原理说明 #

• WordPress短码系统中，嵌套的子短码会被作为$content参数传递给父容器短码
• do_shortcode($content)会解析子短码，将其转换为对应的HTML
• 替换模板中的<content>标签后，子元素的HTML就能正确渲染到前端页面中

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