为什么 wordpress 不能加载我的 jQuery 脚本？

Question

我的 wordpress 网站不会将脚本加载到我的页面中。我将以下函数放在functions.php中：

function nav_script () {

    wp_enqueue_script( 'script', get_stylesheet_directory_uri() .'/js/script.js', array('jQuery'), '1.0.0', true);

}

add_action('wp_enqueue_scripts', 'nav_script'); 

scripts.js中包含的脚本如下：

$(document).ready(function() {
    var stickyNavTop = $('.blog-nav').offset().top;
                             
        var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
                        
                    if (scrollTop > stickyNavTop) { 
                        $('.blog-nav').addClass('sticky');
                    } 
                    else {
                        $('.blog-nav').removeClass('sticky'); 
                    }
                };
                                 
            stickyNav();
                                 
        $(window).scroll(function() {
            stickyNav();
    });
});

当我查看页面的源代码时，我没有看到脚本，所以由于某种原因它没有被加载......我在头部有 wp_head 并且在正文结束标记之前有 wp_footer，所以我对可能发生的事情一无所知，有人可以帮忙吗？正如我在 JSFiddle 中尝试的那样，该函数在普通的 html 中工作......

正在编辑...伙计们，我通过“手动”将脚本添加到函数中来实现一些目标，如下所示：

    function nav_script () {
        ?>
        <script>
            
            $(document).ready(function() {
                                var stickyNavTop = $('.blog-nav').offset().top;
                                 
                                    var stickyNav = function(){
                                    var scrollTop = $(window).scrollTop();
                            
                                    if (scrollTop > stickyNavTop) { 
                                            $('.blog-nav').addClass('sticky');
                                    } else {
                                            $('.blog-nav').removeClass('sticky'); 
                                    }
                                    };
                                     
                                    stickyNav();
                                     
                                    $(window).scroll(function() {
                                        stickyNav();
                                });
                            });
            
        </script>
        <?php
    }

add_action('wp_head', 'nav_script');    

但我注意到两件事： 一：头部不插入<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> CDN不行； 二：只有当我重新加载网站时它才会起作用，这表明我存在一些插件冲突......

Answer 1

我已经解决了我的问题。对于第一个问题，即 .js 文件没有加载到页面中，因为源代码中不存在，我使用了类似于我之前使用的代码，只是更简单，删除了 array 和与版本和页脚相关的值，就像这样：function

blognav_script () {
    wp_enqueue_script('blognav', get_stylesheet_directory_uri() . '/js/script.js');
}

add_action('wp_enqueue_scripts', 'blognav_script');

...我不能准确地说出原因，但是如果您将我的源代码与我在 cmets 上发布的源代码进行比较，您会注意到“/js/script.js”的存在。 - 页面来源：https://jsfiddle.net/qx5fbxa7/ -.

第二个问题：除非我刷新页面（已编辑），否则脚本不会加载...我用条件逻辑解决了设置类的条件：

// function to run on page load and window resize
    function stickyUtility() {

        // only update navOffset if it is not currently using fixed position
        if (!jQuery(".blog-nav").hasClass("fixed")) {
            navOffset = jQuery(".blog-nav").offset().top;
        }

// run on page load
    stickyUtility();

我实际上是改了整个脚本，但是要指出如何解决这个问题，这是可以解决它的行！

Answer 2

WordPress 无法将 $ 识别为 jQuery 的缩写，只需添加

var $ = jQuery

在顶部