WordPress中enqueue jQuery失效：插件加载时报TypeError: $ is not a function

兄弟，我太懂这个报错的糟心了！你已经做了不少正确的操作——确认用jQuery而非$、给脚本加了jQuery依赖，但还是踩了WordPress jQuery的常见坑，给你梳理几个必查的关键点：

1. 再确认jQuery的noConflict兼容处理 #

WordPress默认加载的jQuery是noConflict模式，也就是说$这个快捷变量不会被自动绑定到jQuery对象上。哪怕你觉得自己全用了jQuery，也可能有漏网之鱼，或者代码没有正确包裹导致的问题。

给你个万能的安全包裹写法，把所有插件JS代码套进去，既能用$又不会报错：

// 最常用的写法：文档就绪后执行，且内部可以用$
jQuery(document).ready(function($) {
    // 你的插件所有JS代码都写在这里
    // 比如 $('.some-element').doSomething(); 完全没问题
});

// 或者更简洁的立即执行函数写法
(function($) {
    $(function() { // 等价于document.ready
        // 你的代码
    });
})(jQuery);

2. 检查脚本注册/入队的钩子和参数是否正确 #

你给出的代码是处理前端CSS的，但脚本的注册入队一定要用对钩子！很多人会误用到init或者后台钩子，导致脚本加载时机不对。

正确的姿势是用wp_enqueue_scripts这个前端专用钩子，并且严格按照规范写参数：

if (!is_admin()) {
    // 绑定前端资源入队的钩子
    add_action('wp_enqueue_scripts', 'woocommerce_ogonecw_enqueue_frontend_assets');
    
    function woocommerce_ogonecw_enqueue_frontend_assets() {
        // 处理样式（你的原有代码可以整合到这里）
        wp_register_style('woocommerce_ogonecw_frontend_css', plugin_dir_url(__FILE__) . 'css/frontend-style.css');
        wp_enqueue_style('woocommerce_ogonecw_frontend_css');
        
        // 处理脚本：重点看依赖和加载位置
        wp_register_script(
            'woocommerce_ogonecw_frontend_js', // 脚本唯一标识
            plugin_dir_url(__FILE__) . 'js/frontend-script.js', // 脚本路径
            array('jquery'), // 依赖：必须写array('jquery')确保先加载jQuery
            '1.0.0', // 版本号，方便缓存刷新
            true // 最后一个参数设为true，让脚本在页脚加载
        );
        wp_enqueue_script('woocommerce_ogonecw_frontend_js');
    }
}

这里划几个重点：

• 必须用wp_enqueue_scripts钩子，别用其他替代
• 脚本依赖必须是array('jquery')，不能写错拼写
• 页脚加载（最后一个参数true）能避免DOM未渲染就执行JS的问题

3. 排查主题/其他插件冲突 #

有时候不是你的插件的问题，是其他插件或者主题乱改jQuery导致的：

• 先切换到WordPress默认主题（比如Twenty Twenty-Four），看报错是否消失
• 禁用所有其他插件，逐个开启，找到冲突的那个

4. 确认脚本路径是否正确 #

打开浏览器开发者工具的Network标签，检查你的插件JS文件是否成功加载——如果是404错误，那就是路径写错了，调整plugin_dir_url(__FILE__)后面的相对路径就行。

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