HTML5主题转WordPress后JS加载但失效，如何通过wp_enqueue_script修复？

看起来你的问题核心是JS依赖关系配置错误加上jQuery NoConflict模式的冲突，这两个是把静态HTML主题迁移到WordPress时最常见的JS故障点。我来一步步帮你排查修复：

1. 修复wp_enqueue_script的参数错误（最关键） #

你当前的脚本加载代码有个致命问题：wp_enqueue_script的参数顺序被搞混了！正确的参数定义是：

wp_enqueue_script( $handle, $src, $dependencies, $version, $in_footer );

你把$in_footer写到了$dependencies的位置，导致脚本的依赖关系完全失效，而且in_footer的实际值是默认的false（虽然你说控制台显示加载到页脚，大概率是巧合或主题其他设置）。另外，你不需要自己加载jQuery——WordPress已经自带了官方维护的jQuery版本，自定义加载会引发冲突。

修改你的paradigm_scripts函数为：

function paradigm_scripts(){
    // 禁用WordPress自带的jQuery迁移（如果你的主题不需要的话）
    wp_deregister_script('jquery-migrate');
    
    // 正确设置依赖关系和页脚加载
    wp_enqueue_script('scrolly', get_template_directory_uri() . '/js/jquery.scrolly.min.js', array('jquery'), false, true);
    wp_enqueue_script('browser', get_template_directory_uri() . '/js/browser.min.js', array('jquery'), false, true);
    wp_enqueue_script('breakpoints', get_template_directory_uri() . '/js/breakpoints.min.js', array('jquery'), false, true);
    wp_enqueue_script('util', get_template_directory_uri() . '/js/util.js', array('jquery'), false, true);
    wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js', array('jquery', 'scrolly', 'util'), false, true);
}
add_action('wp_enqueue_scripts', 'paradigm_scripts');

这里的关键改动：

• 移除了自定义的jquery.min.js，改用WordPress自带的jquery
• 每个脚本都设置了正确的依赖数组（比如scrolly依赖jquery，main依赖scrolly和util，确保加载顺序严格符合要求）
• 最后一个参数true明确指定脚本加载到页脚

2. 处理jQuery的NoConflict模式 #

WordPress默认启用jQuery的NoConflict模式，这意味着你不能直接用$调用jQuery，必须用jQuery全称，或者手动映射$。

打开你的main.js（或初始化scrolly的脚本），检查是否有类似这样的代码：

$(document).ready(function(){
    $('.scrolly').scrolly();
});

如果有，改成以下两种方式之一：

// 方式1：使用jQuery全称
jQuery(document).ready(function(){
    jQuery('.scrolly').scrolly();
});

// 方式2：手动映射$（更推荐，保持原代码风格）
(function($){
    $(document).ready(function(){
        $('.scrolly').scrolly();
    });
})(jQuery);

原静态HTML里的JS可以直接用$，但WordPress里必须处理这个，否则$会被识别为未定义，导致scrolly初始化失败。

3. 验证脚本初始化时机 #

即使脚本加载到页脚，也可能存在DOM未完全渲染就执行脚本的情况。确保scrolly的初始化代码包裹在DOMContentLoaded或$(document).ready()中——原静态HTML靠脚本位置在页脚实现的初始化，在WordPress里显式声明ready会更稳妥。

4. 检查控制台的隐藏错误 #

虽然你说控制台显示所有JS已加载，但打开浏览器开发者工具（F12）的Console标签，刷新页面后仔细查看是否有$ is not defined或scrolly is not a function这类错误——这些错误会中断脚本执行，滚动功能自然失效。

按照上面的步骤修改后，你的滚动按钮应该就能正常触发动画效果了。

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