var上的WordPress JS引用错误

因此, 我对Wordpress主题还很陌生。我知道wordpress可能会误解某些Jquery $代码, 因此你应该使用jQuery(document).ready(function($){}而不是普通的$(。)代码*。注：JS文件已正确注册并入队d, 它们都出现在源代码中。

我的问题是我有一个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：

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在首页上对其进行了调用。

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

#1

希望这可以解决这里的问题。它为我工作！

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

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

#2

在wordpress中的functions.php中, 你是否为wow.js使用了wp_enqueue_script()或wp_register_script()？

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

在wp Codex中签出。或者, 你可以阅读wpbeginner.com关于此主题的意见;)