Elementor插件开发：仅在使用自定义Widget的页面加载JS脚本

哥们，我太懂你现在的头疼了——辛辛苦苦写的Elementor插件，结果JS脚本不管页面用没用到你的Widget，全站都加载，既浪费资源又影响性能。别慌，我来给你捋捋怎么改成只在需要的页面加载脚本。

首先得说清楚你当前代码的问题：你现在直接用wp_enqueue_scripts和elementor/frontend/before_register_scripts钩子全局注册并加载脚本，相当于告诉WordPress“所有页面都要加载这个JS”，自然所有页面的footer都会有它的影子。

接下来上解决方案，核心思路是只在两种场景下加载脚本：一是Elementor的编辑模式（编辑页面时需要脚本渲染Widget），二是前端页面实际渲染了你的自定义Widget。具体改法如下：

第一步：替换钩子，新增专属脚本加载方法 #

先打开你的Plugin类，找到init方法，把原来这两行：

add_action( 'elementor/frontend/before_register_scripts', [ $this, 'enqueue_scripts' ] );
add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );

删掉，换成：

add_action( 'elementor/frontend/after_enqueue_scripts', [ $this, 'enqueue_widget_scripts' ] );

第二步：编写enqueue_widget_scripts方法 #

这个方法就是用来做条件判断的，先注册脚本，再根据场景决定是否加载。把原来的enqueue_scripts方法替换成下面这个：

/**
 * 仅在需要的场景下加载Widget专属脚本
 */
public function enqueue_widget_scripts() {
    // 先注册脚本（只注册，不直接加载）
    wp_register_script( 
        'my-elementor-addon-script', 
        plugin_dir_url( __FILE__ ) . '../assets/js/app.js', 
        [], 
        '1.0', 
        true 
    );

    // 场景1：Elementor编辑模式下，必须加载脚本（不然编辑时Widget功能不正常）
    if ( \Elementor\Plugin::instance()->editor->is_edit_mode() ) {
        wp_enqueue_script( 'my-elementor-addon-script' );
        error_log('编辑模式下加载Widget脚本');
        return;
    }

    // 场景2：前端页面，检查当前页面是否包含你的Widget
    $builder_data = \Elementor\Plugin::instance()->frontend->get_builder_data();
    if ( empty( $builder_data ) ) {
        return; // 页面没有用Elementor构建，直接跳过
    }

    // 遍历Elementor页面数据，查找是否存在你的Widget
    $target_widget_slug = 'hello-world-widget-1'; // 这里要和你Widget的get_name()返回值一致！
    $has_target_widget = false;

    // 递归遍历所有Elementor元素（包括嵌套的容器、列）
    $check_widget_in_elements = function( $elements ) use ( $target_widget_slug, &$check_widget_in_elements, &$has_target_widget ) {
        foreach ( $elements as $element ) {
            // 找到目标Widget，标记为true并终止递归
            if ( isset( $element['widgetType'] ) && $element['widgetType'] === $target_widget_slug ) {
                $has_target_widget = true;
                return;
            }
            // 如果是容器类元素（比如section、column），继续检查子元素
            if ( isset( $element['elements'] ) && ! empty( $element['elements'] ) ) {
                $check_widget_in_elements( $element['elements'] );
                if ( $has_target_widget ) {
                    return;
                }
            }
        }
    };

    $check_widget_in_elements( $builder_data );

    // 如果页面包含目标Widget，就加载脚本
    if ( $has_target_widget ) {
        wp_enqueue_script( 'my-elementor-addon-script' );
        error_log('前端页面包含Widget，加载脚本');
    }
}

关键注意点 #

别漏了！你必须确保$target_widget_slug的值和你自定义Widget类里get_name()方法返回的完全一致。比如你的Elementor_Hello_World_Widget_1类里应该有这段代码：

public function get_name() {
    return 'hello-world-widget-1'; // 这个值要和上面的$target_widget_slug一模一样
}

最后验证一下 #

改完之后，你可以：

1. 打开一个没用到你Widget的页面，查看源码，应该找不到app.js的引用了；
2. 打开用到Widget的页面，源码里会有这个脚本；
3. 进入Elementor编辑模式，脚本也会正常加载，不影响编辑体验。

这样就完美解决了全局加载的问题，只有真正需要的页面才会加载你的JS脚本~

备注：内容来源于stack exchange，提问作者Dannie