已为Elementor Section Widget添加自定义控件，如何注入选中的CSS类？

你可以通过Elementor提供的过滤器钩子，把选中的控件值添加到Section的容器类名里，具体步骤如下：

1. 确认控件名称 #

假设你添加的下拉控件名称是bg_color（如果你的控件名不同，记得替换成自己的），选项值为white、kb-blue等。

2. 添加过滤器代码 #

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

// 针对Section Widget添加自定义背景类
add_filter( 'elementor/frontend/section/container_class', function( $class, $section ) {
    // 获取当前Section的BG Color控件值
    $bg_color = $section->get_settings_for_display( 'bg_color' );
    
    // 如果有选中的值，追加到类名后
    if ( ! empty( $bg_color ) ) {
        $class .= ' ' . esc_attr( $bg_color );
    }
    
    return $class;
}, 10, 2 );

代码说明 #

• elementor/frontend/section/container_class是Elementor专门为Section容器类提供的过滤器，第一个参数是原有类名，第二个参数是当前Section的实例对象。
• get_settings_for_display( 'bg_color' )用于获取控件的前台显示值（已经处理过动态内容的最终值）。
• esc_attr()用于安全转义，避免XSS风险。

备选方案（通用Widget钩子） #

如果你需要更通用的处理（比如同时处理多个Widget），可以用通用Widget容器类过滤器，需要额外判断是否为Section：

add_filter( 'elementor/widget/container_class', function( $class, $widget ) {
    // 只处理Section Widget
    if ( 'section' !== $widget->get_name() ) {
        return $class;
    }
    
    $bg_color = $widget->get_settings_for_display( 'bg_color' );
    
    if ( ! empty( $bg_color ) ) {
        $class .= ' ' . esc_attr( $bg_color );
    }
    
    return $class;
}, 10, 2 );

添加代码后，刷新前端页面，选中的类名就会自动添加到Section的容器元素上了。

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