添加下雪效果有很多方法,我们这里只讲用snowstorm.js来实现。
首先去Github下载snowstorm.js,或者点击这个链接下载:点击打开后点击链接另存为就可以:
https://bootstrap.cc/wp-content/themes/sahifa/js/snowstorm-min.js
首先将snowstorm.js文件上传到主题下面的js文件夹,然后在functions.php里面通过wp_enqueue_script函数导入, 将下面代码复制粘贴到functions.php
function adds_snow_storm_js() {
wp_enqueue_script('snowstorm', get_template_directory_uri() . '/js/snowstorm.js', array('jquery'), '1.44', true);
}
add_action('wp_enqueue_scripts', 'adds_snow_storm_js');
这里已经加载了snowstorm.js这个文件了。
接下来是初始化。如果你的主题选项里有可以直接添加javascript代码的地方,直接将这段代码添加进去,就初始化了snowstorm, 网页就会显示出来:
snowStorm.start();
如果后台没有可以添加javascript的地方,那么有几种方法可以实现,首先,你可以去后台插件处安装一个叫codesnippet的插件,这插件允许你在主题上插入任何代码,甚至php代码。
如果你不想安装插件,你可以用wp_footer钩子,将这个代码复制粘贴到functions.php。
add_action( 'wp_footer', function () { if (!is_admin()) { ?>
<script>
snowStorm.start();
snowStorm.snowFlakeWidth = 60;
snowStorm.snowFlakeHeight = 60;
snowStorm.flakesMax = 128;
snowStorm.flakesMaxActive = 128;
snowStorm.animationInterval = 30;
</script>
<?php } });
snowStorm.snowFlakeWidth = 60; snowStorm.snowFlakeHeight = 60; snowStorm.flakesMax = 128; snowStorm.flakesMaxActive = 128; snowStorm.animationInterval = 30;
这些代码实现雪花的控制。
全部控制代码参考下面: