WOW.js无法正常使用Wordpress [英] WOW.js not working properly with Wordpress

问题描述

所以我试图让我的Wordpress模板上的wow.js（和Animate.css）工作。我已经将它们全部链接在一起（它不会引发错误）并且动画确实有效，但出于某种原因，动画在页面加载时触发，而不是在页面滚动时触发。其影响是所有的动画在页面加载时开始。我相信wow.js有什么问题，但我似乎无法找到答案。

继承我的代码。

在functions.php中：

  function theme_styles （）{
 //在这里添加任何css样式表
 wp_enqueue_style（'animate'，get_template_directory_uri（）。'/ css / animate.min.css'）; 
} 
 function theme_js（）{
 wp_enqueue_script（'wow'，get_template_directory_uri（）。'/ js / wow.min.js'，array（），''，true）; 
} 
 
 //将上面的所有样式表添加到wp 
 add_action（'wp_enqueue_scripts'，'theme_styles'）; 
 //将上面的所有javascript添加到wp 
 add_action（'wp_enqueue_scripts'，'theme_js'）; 
  

在footer.php中：

 <？php wp_footer（）; ？> 
 
< script type =text / javascript> 
 var wow = new WOW（
 {
 boxClass：'wow'，// animated element css class（default is wow）
 animateClass：'animated'，//动画css类（默认为动画）
偏移量：0，//触发动画时元素的距离（默认值为0）
 mobile：false //触发移动设备上的动画（true为默认值）
} 
）; 
 wow.init（）; 
< / script> 
  

我也尝试使用另一种方法（在functions.php中）启动wow， t工作：

  // *入队脚本激活WOW.js 
 add_action（'wp_enqueue_scripts'，'sk_wow_init_in_footer ）; 
函数sk_wow_init_in_footer（）{
 add_action（'print_footer_scripts'，'wow_init'）; 
} 
 
 // *在< / body>之前添加JavaScript 
函数wow_init（）{？> 
< script type =text / javascript> 
 new WOW（）。init（）; 
< / script> 
 <？php} 
  

在页面模板中（以front.page.php为例） ）：

 < div class =container-fluid> 
< header class =row> 
 
< / header> 
< / div> 
  

解决方案

入队 wow.init ）并添加 wow.js 作为依赖关系适用于我：

  add_action（'wp_enqueue_scripts'，'b5f_wow_init'）; 
 
函数b5f_wow_init（）{
 wp_register_script（'wow'，get_stylesheet_directory_uri（）。'/js/wow.min.js'）; 
 wp_enqueue_script（'my-wow'，get_stylesheet_directory_uri（）。'/js/my-wow.js'，array（'wow'），null，true）; 
 wp_enqueue_style（'wow-css'，get_stylesheet_directory_uri（）。'/css/animate.min.css'）; 
 
  

和 my-wow.js

  var wow = new WOW（
 {
 boxClass：'wow '，//动画元素css类（默认为哇）
 animateClass：'animated'，//动画css类（默认为动画）
偏移量：0，//触发元素时的距离动画（默认值为0）
 mobile：false //触发移动设备上的动画（true为默认值）
} 
）; 
 wow.init（）; 
  

So I'm trying to get wow.js (and Animate.css) working on my Wordpress templates. I've got them all linked up fine (it throws no errors) and the animations do work but for some reason the animations are triggered on page load and not on page scroll. The affect is that all the animations begin when the page is loaded. I believe there is something wrong with wow.js somewhere but I can't seem to find out what.

Heres my code. Thanks in advance.

In functions.php:

function theme_styles(){
    //Add any css style sheets here
    wp_enqueue_style('animate', get_template_directory_uri() .'/css/animate.min.css');
}
function theme_js(){
    wp_enqueue_script('wow', get_template_directory_uri() .'/js/wow.min.js',array(),'',true);
}

//Adds all style sheets above to wp
add_action('wp_enqueue_scripts', 'theme_styles');
//Adds all javascript above to wp
add_action('wp_enqueue_scripts', 'theme_js');

In footer.php:

<?php wp_footer(); ?>

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

I have also tried to initiate wow using another method(in functions.php), But that doesn't work either:

//* Enqueue script to activate WOW.js
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
function sk_wow_init_in_footer() {
        add_action( 'print_footer_scripts', 'wow_init' );
}

//* Add JavaScript before </body>
function wow_init() { ?>
    <script type="text/javascript">
        new WOW().init();
    </script>
<?php }

In Page templates (front-page.php as an example):

<div class="container-fluid">
    <header class="row">
        <h1 class="wow fadeInDown">Delivering high quality professional websites for small to medium sized businesses in and around Bournemouth</h1>
    </header>
</div>

解决方案

Enqueuing wow.init() and adding wow.js as a dependency works for me:

add_action( 'wp_enqueue_scripts', 'b5f_wow_init' );

function b5f_wow_init() {
    wp_register_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js' );
    wp_enqueue_script( 'my-wow', get_stylesheet_directory_uri() . '/js/my-wow.js', array( 'wow' ), null, true );
    wp_enqueue_style( 'wow-css', get_stylesheet_directory_uri() . '/css/animate.min.css' );
}

And my-wow.js as default values:

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

这篇关于WOW.js无法正常使用Wordpress的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！