var 上的 Wordpress JS 引用错误

Question

所以我对 Wordpress 主题相当陌生。我知道 wordpress 可能会误解某些 Jquery $ 代码，并且您应该使用 jQuery(document).ready(function($) {} 而不仅仅是普通的 $(.) 代码。 *注意：JS 文件已正确注册并入队，它们都显示在源代码中。

我的问题是我有一个 custom.js 文件，其中列出了我的主题的一些自定义 JS 和 Jquery 代码。没有wordpress它工作正常。但是，使用 wordpress 它正在崩溃。

代码如下：

//sticky header on scroll
jQuery(window).load(function() {
jQuery(".sticky").sticky({topSpacing: 0});
});

//parallax
jQuery(window).stellar({
    horizontalScrolling: false,
    responsive: true/*,
     scrollProperty: 'scroll',
     parallaxElements: false,
     horizontalScrolling: false,
     horizontalOffset: 0,
     verticalOffset: 0*/
});

/*====flex  slider for main slider on header2====*/
jQuery(document).ready(function() {
jQuery('.main-slider').flexslider({
    slideshowSpeed: 5000,
    directionNav: false,
    controlNav: true,
    animation: "fade"
})
});

//owl carousel for work
jQuery(document).ready(function() {
    jQuery("#work-carousel").owlCarousel({
        // Most important owl features
        items: 4,
        itemsCustom: false,
        itemsDesktop: [1199, 4],
        itemsDesktopSmall: [980, 3],
        itemsTablet: [768, 3],
        itemsTabletSmall: false,
        itemsMobile: [479, 1],
        singleItem: false,
        startDragging: true
    });

});

//owl carousel for testimonials
jQuery(document).ready(function() {

 jQuery("#testi-carousel").owlCarousel({
        // Most important owl features
        items: 1,
        itemsCustom: false,
        itemsDesktop: [1199, 1],
        itemsDesktopSmall: [980, 1],
        itemsTablet: [768, 1],
        itemsTabletSmall: false,
        itemsMobile: [479, 1],
        singleItem: false,
        startDragging: true
    });

});
//owl carousel for full width image slider
jQuery(document).ready(function() {

    jQuery("#full-img-slide").owlCarousel({
        // Most important owl features
        items: 1,
        itemsCustom: false,
        itemsDesktop: [1199, 1],
        itemsDesktopSmall: [980, 1],
        itemsTablet: [768, 1],
        itemsTabletSmall: false,
        itemsMobile: [479, 1],
        singleItem: false,
        startDragging: true
    });

});

/* ==============================================
 Counter Up
 =============================================== */
jQuery(document).ready(function($) {
    jQuery('.counter').counterUp({
        delay: 100,
        time: 800
    });
});


/* ==============================================
 WOW plugin triggers animate.css on scroll
 =============================================== */

var wow = new WOW(
        {
            boxClass: 'wow', // animated element css class (default is wow)
            animateClass: 'animated', // animation css class (default is animated)
            offset: 100, // distance to the element when triggering the animation (default is 0)
            mobile: false        // trigger animations on mobile devices (true is default)
        }
);
wow.init();

//portfolio mix
jQuery('#grid').mixitup();


/*========tooltip and popovers====*/
/*==========================*/
jQuery("[data-toggle=popover]").popover();

jQuery("[data-toggle=tooltip]").tooltip();

我在控制台上收到一个错误，显示为 Uncaught ReferenceError: WOW is not defined for the following lines:

var wow = new WOW(
        {
            boxClass: 'wow', // animated element css class (default is wow)
            animateClass: 'animated', // animation css class (default is animated)
            offset: 100, // distance to the element when triggering the animation (default is 0)
            mobile: false        // trigger animations on mobile devices (true is default)
        }
);
wow.init();

我不确定如何解决这个问题，因为我猜它是说 WOW 是一个未定义的变量。 WOW 引用了 wow.js 库 (https://github.com/matthieua/WOW)，并使用他们的 javascript 在主页上调用它。

如果您能提供帮助将不胜感激！

Answer 1

希望这能解决这里的问题。它对我有用！

 jQuery( document ).ready(function() {
    wow = new WOW(
        {
            boxClass:     'wow',      
            animateClass: 'animated', 
            offset:       100,         
            mobile:       false,     
            live:         true       
        }
    )
    wow.init();
});

注意：将其包装在准备好的文档中

Answer 2

在 wordpress 中的 functions.php 中，你是 wp_enqueue_script() 还是 wp_register_script() 用于 wow.js？

Wordpress Codex 说“这是将 JavaScript 链接到 WordPress 生成的页面的推荐方法。”

Check it out 在 wp 法典中。或者，您可以阅读 what wpbeginner.com has to say 关于此主题的内容；）