wordpress 通过新的$this->add_control()扩展现有的Elementor Widget并将类添加到elementor section Widget中

uttx8gqw  于 2023-06-21  发布在  WordPress
关注(0)|答案(1)|浏览(136)

我开始为elementor部分小部件创建一个custom_control。我添加了一个带有类列表的下拉列表。
我遵循这个结构:https://developers.elementor.com/docs/hooks/injecting-controls/#targeting-specific-elements

function inject_custom_control( $element, $section_id, $args ) {

    if ( 'section' === $element->get_name() && 'section_background' === $section_id ) {

        $element->start_controls_section(
            'custom_section',
            [
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'label' => esc_html__( 'Kraiburg Einstellungen', 'textdomain' ),
            ]
        );

        $element->add_control(
            'bg_color',
            [
                'type' => \Elementor\Controls_Manager::SELECT,
                'label' => esc_html__( 'BG Color', 'textdomain' ),
                'options' => [
                    'white' => esc_html__( 'white', 'textdomain' ),
                    'kb-blue' => esc_html__( 'blue', 'textdomain' ),
                    'kb-light-blue' => esc_html__( 'light-blue', 'textdomain' ),
                    'kb-yellow' => esc_html__( 'yellow', 'textdomain' ),
                    'kb-dark-blue' => esc_html__( 'dark-blue', 'textdomain' ),
                ],
                'default' => 'white',
            ]
        );

        $element->end_controls_section();

    }

}
add_action( 'elementor/element/before_section_start', 'inject_custom_control', 10, 3 );

到目前为止一切顺利。
下拉列表出现在我的elementor编辑器中。但是我如何编辑elementor部分小部件的HTML输出呢?我想添加类名。

fhg3lkii

fhg3lkii1#

这将是一个有点晚的答复,但我确实使用;

$element->add_control(
    'bg_color',
    [
        'type' => \Elementor\Controls_Manager::SELECT,
        'label' => esc_html__( 'BG Color', 'textdomain' ),
        'options' => [
            'white' => esc_html__( 'white', 'textdomain' ),
            'kb-blue' => esc_html__( 'blue', 'textdomain' ),
            'kb-light-blue' => esc_html__( 'light-blue', 'textdomain' ),
            'kb-yellow' => esc_html__( 'yellow', 'textdomain' ),
            'kb-dark-blue' => esc_html__( 'dark-blue', 'textdomain' ),
        ],
        'default' => 'white',
        'prefix_class' => '',
    ]
);

正如你可以看到只添加了prefix_class,现在你的部分将有选择的值与其他CSS类名如下;

class="elementor-section elementor-top-section elementor-element elementor-element-bc33e25 kb-yellow elementor-section-boxed elementor-section-height-default elementor-section-height-default"

适用于Elementor 3.13.4免费版,希望对您有帮助。

相关问题