WordPress中从functions.php调用的JavaScript代码无法执行

嘿，我来帮你搞定这个WordPress加载JS的问题！既然代码在JSFiddle里能正常跑，那肯定是WordPress的脚本加载规则没踩对，下面是几个高频踩坑点和对应的解决办法：

1. 没正确声明脚本依赖 #

WordPress的脚本加载有严格的依赖顺序，要是你的Cookie同意脚本用到了jQuery，但没告诉WP它依赖jQuery，就会因为jQuery还没加载完就执行你的代码而报错。修正后的代码应该是这样：

add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' ); 
function my_enqueue_assets() { 
    wp_enqueue_style( 'cookies-consent-style', get_stylesheet_directory_uri().'/cookies-consent/cookies-consent.css' ); 
    // 重点：添加jQuery依赖，设置页脚加载
    wp_enqueue_script(
        'cookies-consent', 
        get_stylesheet_directory_uri().'/cookies-consent/cookies-consent.js', 
        array('jquery'), // 声明依赖jQuery
        '1.0.0', // 版本号，方便缓存刷新
        true // 让脚本在页脚加载，确保DOM已渲染
    );
}

2. 文件路径错误 #

先确认你的JS文件位置是否正确：get_stylesheet_directory_uri()指向的是当前激活主题的根目录，所以你的cookies-consent.js应该放在wp-content/themes/你的主题名称/cookies-consent/文件夹里。可以直接在浏览器地址栏输入完整路径（比如https://你的域名/wp-content/themes/你的主题/cookies-consent/cookies-consent.js），如果显示404，那就是路径写错了。

3. jQuery兼容模式冲突 #

WordPress默认把jQuery设置成了无冲突模式，也就是说你不能直接用$来调用jQuery，必须用jQuery。如果你的JS代码里全是$，肯定会报错。解决办法有两个：

• 全局替换：把代码里所有的$换成jQuery
• 用包裹函数兼容：在JS文件开头加这段代码，之后就能正常用$了：

jQuery(document).ready(function($) {
    // 把你原来的JS代码全部放在这个函数里
    // 比如你的Cookie弹窗初始化代码
});

4. 缓存搞鬼 #

有时候浏览器或者WordPress的缓存插件（比如WP Rocket、W3 Total Cache）会缓存旧的JS文件，导致你的新代码没生效。可以试试这几招：

• 按Ctrl+F5强制刷新浏览器，清空本地缓存
• 如果你用了缓存插件，去插件后台刷新全站缓存
• 给脚本加动态版本号，让浏览器强制加载新文件：把上面代码里的'1.0.0'换成time()，每次刷新页面都会生成新的版本号，适合开发阶段用。

5. 钩子优先级问题 #

如果你的脚本需要在其他脚本之后加载，可以调整wp_enqueue_scripts钩子的优先级，默认是10，你可以设成更高的数字（比如20），让它晚一点执行：

add_action( 'wp_enqueue_scripts', 'my_enqueue_assets', 20 ); 

先从这几个方向排查，尤其是依赖声明和jQuery兼容问题，这是WordPress加载JS最容易踩的坑！

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