Question

我有一个带有标题组件的主题。该标头不是Elementor小部件，而只是普通的HTML / PHP组件。就像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);

我在我的网站上测试了您的情况，它对我有用；）

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

1 个答案: