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：

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中，wow.js是wp_enqueue_script（）还是wp_register_script（）？

Wordpress Codex说＆＃34;这是将JavaScript链接到WordPress生成页面的推荐方法。＆＃34;

wp codex中的

Check it out。或者，您可以阅读what wpbeginner.com has to say关于此主题;）

var上的Wordpress JS参考错误

2 个答案: