自定义(非Elementor )小部件/组件的elementor实时预览

Question

我有一个主题，其中有一个标题组件。该标头不是Elementor小部件，而只是一个普通的HTML/PHP组件。就像Elementor小部件一样，它有一些属性，例如透明的，覆盖的...

我已经通过钩子将这些属性添加到Elementor页面设置部分：

add_action('elementor/element/wp-page/document_settings/before_section_start', 'page_settings' );

function page_settings($controlStack){
    $controlStack->start_controls_section(
            'page_settings',
            [
                'label' => _x('Page Settings', 'elementor', 'theme'),
                'tab' => \Elementor\Controls_Manager::TAB_SETTINGS,
            ]
        );

        $controlStack->add_control(
            'header_overlayed',
            [
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label' => _x('Header Overlayed', 'elementor', 'theme'),
                'label_on' => __('True', 'theme'),
                'label_off' => __('False', 'theme'),
                'return_value' => true,
                'default' => false,
            ]
        );

        $controlStack->add_control(
            'header_transparent',
            [
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label' => _x('Header Transparent', 'elementor', 'theme'),
                'label_on' => __('True', 'theme'),
                'label_off' => __('False', 'theme'),
                'return_value' => true,
                'default' => false,
            ]
        );

        $controlStack->end_controls_section();
}

现在的问题是，当我更改任何设置时，我希望在Elementor的预览中看到更改。

我尝试连接到elementor/editor/after_enqueue_scripts (任何其他钩子)来执行自定义JS和模拟预览。不幸的是，我没有运气。

JavaScript代码看起来像这样：

var headerTransparency = function( newValue ){
        if( newValue == 'true' ){
            $('.header').addClass('header--transparent');
        }else{
            $('.header').removeClass('header--transparent');
        }
    }
elementor.settings.page.addChangeCallback( 'header_transparent', headerTransparency );

有什么办法可以做到吗？

Answer 1

因为您只做了一个样式更改，所以也可以使用selectors选项。

$controlStack->add_control(
    'header_overlayed',
    [
        'type' => \Elementor\Controls_Manager::SWITCHER,
        'label' => _x('Header Overlayed', 'elementor', 'theme'),
        'label_on' => __('True', 'theme'),
        'label_off' => __('False', 'theme'),
        'return_value' => true,
        'default' => false,
        'selectors' => [
            '{{WRAPPER}} .your-target-selector' => 'background-color: #f00 !important;' //{{VALUE}} for the field value
        ],
    ]
);

但是您的JS方法也是可能的。我猜你的错误是你的钩子不是因为缺少事件而触发的。这应该是js文件的内容：

jQuery(document).ready(function(){
    elementor.settings.page.addChangeCallback( 'header_transparent', headerTransparency );
});

function headerTransparency ( newValue ) {
    if( newValue == 'true' ){
        jQuery('.header').addClass('header--transparent');
    }else{
        jQuery('.header').removeClass('header--transparent');
    }
}

如果你的注入可能有一些错误-你可以像这样注入脚本/样式：

add_action('elementor/editor/before_enqueue_scripts', function() {
    wp_enqueue_script( 'js-test-inject', get_template_directory_uri() . '/assets/js/test-inject.js', array( 'jquery' ), null, true );
}, 10, 3);

我在我的网站上测试了你的方案，它对我有效;)