自定义(非元素)小部件/组件的元素或实时预览

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' => ElementorControls_Manager::TAB_SETTINGS,
]
);
$controlStack->add_control(
'header_overlayed',
[
'type' => ElementorControls_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' => ElementorControls_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' => ElementorControls_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);

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

Answer 2

要在修改标头设置时查看 Elementor 预览中的更改，可以使用elementor/frontend/element/after_render操作挂钩添加自定义 JavaScript，以相应地更新预览。下面是如何实现此目的的示例：

1. 将自定义 JavaScript 文件排队到主题的functions.php文件中：

   function enqueue_custom_scripts() {
   wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-script.js', array( 'jquery' ), '1.0', true );
   }
   add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );
   

2. 在模版的/js/目录中创建一个包含以下内容的custom-script.js文件：

   jQuery( document ).ready( function( $ ) {
   // Watch for changes in the header_transparent control
   elementor.settings.page.addChangeCallback( 'header_transparent', function( new_value ) {
   if ( new_value ) {
   $('.header').addClass('header--transparent');
   } else {
   $('.header').removeClass('header--transparent');
   }
   });
   // Watch for changes in the header_overlayed control
   elementor.settings.page.addChangeCallback( 'header_overlayed', function( new_value ) {
   if ( new_value ) {
   $('.header').addClass('header--overlayed');
   } else {
   $('.header').removeClass('header--overlayed');
   }
   });
   });
   

确保根据主题的结构和要求调整路径和类名。在提供的示例中，脚本假定您覆盖了 CSS 类标头(透明和标头(，以将相应的样式应用于标头。

通过使用elementor/frontend/element/after_render挂钩，JavaScript 代码将在渲染每个 Elementor 小部件后执行，从而允许您根据控件值动态更新预览。