WordPress后台小工具脚本入队后失效，如何正确入队？

你的问题核心是脚本加载顺序错误以及缺少手动初始化逻辑——WooCommerce的wc-enhanced-select等组件默认仅在自身页面自动初始化，自定义小工具区域需要手动触发，同时还要保证脚本依赖和加载时机正确。

步骤1：修正脚本入队的依赖与加载位置 #

修改你的入队代码，明确脚本依赖关系，并指定在页脚加载（最后一个参数设为true），确保DOM元素先于脚本加载：

if ( in_array( $screen_id, array( 'widgets' ) ) ) {
    // 入队select2（WordPress内置或WooCommerce提供的版本）
    wp_enqueue_script( 'select2' );
    
    // 入队selectWoo，依赖select2
    wp_enqueue_script( 
        'selectWoo', 
        WC()->plugin_url() . '/assets/js/selectWoo/selectWoo.min.js', 
        array( 'select2' ), 
        WC_VERSION, 
        true 
    );
    
    // 入队wc-enhanced-select，依赖jquery和selectWoo
    wp_enqueue_script( 
        'wc-enhanced-select', 
        WC()->plugin_url() . '/assets/js/frontend/select2.min.js', 
        array( 'jquery', 'selectWoo' ), 
        WC_VERSION, 
        true 
    );

    // 加载自定义初始化脚本
    wp_enqueue_script( 
        'widget-wc-select-init', 
        get_stylesheet_directory_uri() . '/js/widget-wc-select-init.js', 
        array( 'wc-enhanced-select' ), 
        '1.0', 
        true 
    );
}

步骤2：添加自定义初始化脚本 #

在主题目录下创建js/widget-wc-select-init.js文件，写入以下代码，确保DOM就绪后初始化小工具中的选择框：

jQuery(document).ready(function($) {
    // 选择小工具中需要初始化的select元素，根据实际class调整选择器
    $('.widget select.wc-enhanced-select, .widget select.select2').each(function() {
        // 调用wc-enhanced-select初始化方法
        $(this).wcEnhancedSelect({
            // 可添加自定义配置，比如占位符、搜索阈值等
            placeholder: '请选择',
            minimumResultsForSearch: 2
        });
    });
});

额外注意事项 #

• 确保你的小工具中的<select>元素添加了对应的class（比如wc-enhanced-select），否则初始化脚本找不到目标元素。
• 如果使用的是WooCommerce后台的小工具，确认当前用户有管理员权限，脚本不会被权限限制拦截。
• 可以通过浏览器控制台检查是否有报错，比如脚本404（路径错误）或依赖缺失，针对性调整路径。

内容的提问来源于stack exchange，提问作者uzairhanif