如何在Elementor轮播组件中覆写原生类方法或加载样式脚本

方案A：覆写原生Testimonial_Carousel的get_repeater_defaults()方法 #

不需要克隆组件，直接替换原生组件类重写目标方法即可，步骤如下：

• 借助elementor/widget/before_register_widgets钩子取消注册原生Testimonial Carousel组件
• 创建继承自原生Elementor\Widget_Testimonial_Carousel的自定义类，重写get_repeater_defaults()方法
• 注册自定义组件替代原生组件

代码示例：

add_action('elementor/widget/before_register_widgets', 'override_elementor_testimonial_carousel');
function override_elementor_testimonial_carousel() {
    // 移除原生组件
    if (isset(\Elementor\Plugin::$instance->widgets_manager->widgets['testimonial-carousel'])) {
        unset(\Elementor\Plugin::$instance->widgets_manager->widgets['testimonial-carousel']);
    }

    // 自定义组件类
    class Custom_ACF_Testimonial_Carousel extends \Elementor\Widget_Testimonial_Carousel {
        // 重写方法，返回ACF Repeater适配格式的数据
        protected function get_repeater_defaults() {
            // 替换为你的ACF Repeater字段名
            $acf_testimonials = get_field('your_acf_repeater_field_name');
            
            // ACF字段为空时，返回原生默认值作为降级方案
            if (!$acf_testimonials) {
                return parent::get_repeater_defaults();
            }

            // 转换ACF数据格式适配Elementor轮播字段结构
            $defaults = [];
            foreach ($acf_testimonials as $item) {
                $defaults[] = [
                    'author_name' => $item['author_name'], // 对应ACF子字段名
                    'author_title' => $item['author_title'],
                    'testimonial' => $item['testimonial_content'],
                    'author_avatar' => !empty($item['author_avatar']) ? $item['author_avatar']['id'] : '',
                ];
            }

            return $defaults;
        }
    }

    // 注册自定义组件
    \Elementor\Plugin::$instance->widgets_manager->register(new Custom_ACF_Testimonial_Carousel());
}

方案B：为克隆的组件加载样式与JS #

如果坚持使用克隆的acf-testimonial-carousel组件，可通过以下方式加载依赖：

方式1：继承原生组件类（推荐） #

直接继承Elementor\Widget_Testimonial_Carousel而非Widget_Base，自动继承原生组件的样式和脚本依赖，无需额外配置：

class ACF_Testimonial_Carousel extends \Elementor\Widget_Testimonial_Carousel {
    // 自定义组件标识
    public function get_name() {
        return 'acf-testimonial-carousel';
    }

    // 组件显示名称
    public function get_title() {
        return 'ACF 自定义 testimonial 轮播';
    }

    // 重写get_repeater_defaults方法，逻辑同方案A
    protected function get_repeater_defaults() {
        $acf_testimonials = get_field('your_acf_repeater_field_name');
        if (!$acf_testimonials) {
            return parent::get_repeater_defaults();
        }

        $defaults = [];
        foreach ($acf_testimonials as $item) {
            $defaults[] = [
                'author_name' => $item['author_name'],
                'author_title' => $item['author_title'],
                'testimonial' => $item['testimonial_content'],
                'author_avatar' => !empty($item['author_avatar']) ? $item['author_avatar']['id'] : '',
            ];
        }

        return $defaults;
    }
}

方式2：手动指定依赖 #

如果继承的是Widget_Base，需重写get_style_depends()和get_script_depends()方法，指定原生组件的样式和脚本句柄：

class ACF_Testimonial_Carousel extends \Elementor\Widget_Base {
    // 组件基础配置
    public function get_name() {
        return 'acf-testimonial-carousel';
    }

    public function get_title() {
        return 'ACF 自定义 testimonial 轮播';
    }

    // 加载原生轮播组件的样式
    public function get_style_depends() {
        return [
            'elementor-widget-testimonial-carousel', // 原生样式句柄
            // 可添加自定义样式句柄（如主题/插件注册的样式）
        ];
    }

    // 加载Elementor前端核心脚本（包含轮播所需的swiper逻辑）
    public function get_script_depends() {
        return [
            'elementor-frontend', // 核心前端脚本，包含轮播交互逻辑
        ];
    }

    // 重写get_repeater_defaults方法
    protected function get_repeater_defaults() {
        // 你的自定义逻辑
    }

    // 复制原生组件的_register_controls、render等必要方法
}

内容的提问来源于stack exchange，提问作者Chris J Allen