Question

我目前正在努力将自定义样式注入到现有的elementor小部件中（没有自定义样式）。

当然，我可以将更改简单地放在全局.css中，但是我不会从基于elementor动态组件的include中受益。

我在官方代码参考中找到了一些方法，但是它们似乎并没有实现我想要实现的目标。例如elementor/editor/before_enqueue_styles仅影响整个编辑器，与前端相同。

Answer 1

将以下内容用于小部件上的动态样式和脚本：

class ReplaceMeClassName extends \Elementor\Widget_Base {
    public function __construct( $data = [], $args = null ) {
        parent::__construct( $data, $args );
        
        /** Main Style **/
        $src= 'the_source_with_complete_url.min.css';
        $version=filemtime( 'the_source_with_complete_path.min.css');
        if(WP_DEBUG===true){
            /** style **/
            $src= 'the_source_with_complete_url.css';
            $version=filemtime('the_source_with_complete_path.css');
        }
        /** style **/
        wp_register_style( 'name_of_the_style', $src, /* depends */ array(), $version );
        
        /** Main Script **/
        $src= 'the_source_with_complete_url.min.js';
        $version=filemtime( 'the_source_with_complete_path.min.js');
        if(WP_DEBUG===true){
            /** Script **/
            $src= 'the_source_with_complete_url.js';
            $version=filemtime('the_source_with_complete_path.js');
        }
        /** Script **/
        wp_register_script( 'name_of_the_script', $src, /* depends */ array(), $version );
    }
    /**
     * Enqueue when widget is on page.
     */
    public function get_style_depends() {
        return array( 'name_of_the_style' );
    }
    /**
     * Enqueue scripts when widget is on page.
     */
    public function get_script_depends() {
        return array( 'name_of_the_script' );
    }
    /* ..... */

向elementor小部件添加自定义样式/脚本

1 个答案: