如何为Elementor Toggle小部件填充MySQL查询数据（Elementor Pro 3.13.2）

核心思路 #

借助WordPress钩子机制，在Elementor渲染指定Toggle部件时，自动将MySQL查询结果生成的Toggle条目替换原有内容，无需修改部件本身的设置。

具体代码示例 #

将以下代码添加到主题的functions.php文件，或自定义插件中：

add_filter( 'elementor/widget/render_content', 'populate_dlista_toggle', 10, 2 );
function populate_dlista_toggle( $content, $widget ) {
    // 仅匹配Toggle类型且CSS ID为'dlista'的部件
    if ( 'toggle' !== $widget->get_name() ) {
        return $content;
    }
    
    $settings = $widget->get_settings_for_display();
    if ( 'dlista' !== $settings['css_id'] ) {
        return $content;
    }

    // 执行自定义MySQL查询（替换为你的表名和查询条件）
    global $wpdb;
    $results = $wpdb->get_results( "SELECT title, content FROM your_table WHERE your_condition", ARRAY_A );
    
    // 生成符合Elementor样式的Toggle条目HTML
    $toggle_items = '';
    foreach ( $results as $row ) {
        $toggle_items .= sprintf( '
            <div class="elementor-toggle-item">
                <div class="elementor-toggle-title">%s</div>
                <div class="elementor-toggle-content">%s</div>
            </div>
        ', esc_html( $row['title'] ), wp_kses_post( $row['content'] ) );
    }

    // 替换原有Toggle的内容区域
    $content = preg_replace( '/<div class="elementor-toggle-items">(.*?)<\/div>/s', '<div class="elementor-toggle-items">' . $toggle_items . '</div>', $content );
    
    return $content;
}

代码说明 #

• 钩子定位：通过elementor/widget/render_content钩子拦截部件渲染，精准匹配目标Toggle部件。
• 数据库操作：使用WordPress内置的$wpdb类执行查询，避免原生MySQL函数的安全风险，兼容WordPress环境。
• 样式兼容：生成的HTML结构完全匹配Elementor Toggle的默认DOM结构，保证原有样式和折叠交互正常生效。
• 安全处理：用esc_html()转义标题、wp_kses_post()过滤内容，防止XSS攻击。

注意事项 #

• 替换代码中的your_table和your_condition为你的实际表名与查询条件。
• 若需要保留原有Toggle内容，可修改正则替换逻辑，将生成的条目追加到原有内容之后。
• 操作前请备份主题functions.php文件，避免语法错误导致站点异常。

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