在WordPress页脚钩子中实现jQuery/JavaScript遇到问题

首先我注意到你贴出的代码片段是不完整的（最后停在$(docu...），这大概率是第一个问题——如果代码本身存在语法截断或错误，肯定没法正常运行。请先确保你把JSFiddle里的完整代码复制粘贴到了WordPress中。

针对WordPress环境下jQuery代码常见的失效原因，给你几个具体的排查和修复方向：

1. 确保兼容jQuery的NoConflict模式 #

WordPress默认加载的jQuery是NoConflict模式，全局的$变量是未定义的。虽然你用了jQuery(document).ready(function($) {})把$作为参数传入闭包，这部分是正确的，但如果onScroll这类函数定义在闭包外部，里面的$调用就会失效。

正确的做法是把所有依赖$的代码都放到ready闭包内部，示例如下：

jQuery(document).ready(function($) {
    // 将onScroll函数定义在闭包内，确保$能正常使用
    function onScroll(){
        var scrollPos = $(document).scrollTop();
        $('nav a').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('nav ul li a').removeClass("active");
                currLink.addClass("active");
            } else {
                currLink.removeClass("active");
            }
        });
    }

    $(document).on("scroll", onScroll);

    // 平滑滚动逻辑
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top + 2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

2. 用WordPress标准方式加载脚本 #

不要直接在wp_footer钩子中写<script>标签，推荐用wp_enqueue_script来加载脚本，这样能保证脚本的依赖顺序（确保jQuery先于你的代码加载）。

在主题的functions.php中添加如下代码：

function enqueue_custom_scroll_script() {
    // 注册并加载自定义脚本，声明依赖jQuery
    wp_enqueue_script(
        'custom-scroll-script',
        get_template_directory_uri() . '/js/custom-scroll.js', // 将你的JS代码放到这个文件里
        array('jquery'), // 指定依赖jQuery
        '1.0',
        true // 设置为true，让脚本在footer加载
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scroll_script');

3. 查看浏览器控制台的错误信息 #

打开浏览器开发者工具（按F12），切换到Console标签，检查是否有报错：

• 如果出现$ is not defined：说明脚本加载顺序有问题，jQuery还没加载就执行了你的代码
• 如果出现onScroll is not defined：说明函数定义不在闭包内，或者代码有截断
• 如果出现refElement is undefined：说明页面中没有对应锚点ID的元素，或者锚点链接写错了

这些错误信息是定位问题的关键。

4. 排查脚本冲突 #

有时候主题或其他插件的JS脚本会和你的代码冲突（比如同样绑定了scroll事件、修改了$变量）。可以先暂时禁用所有插件，切换到WordPress默认主题（比如Twenty Twenty-Three）测试，如果代码生效了，就说明是主题或插件的冲突，再逐步排查定位。

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