WordPress主题如何添加下雪特效

添加下雪效果有很多方法,我们这里只讲用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;

这些代码实现雪花的控制。

全部控制代码参考下面:

http://www.schillmania.com/projects/snowstorm/#customizing

Check Also

input file字段选择图片之后怎么实现预览(还未上传到服务器的情况下)

$("#txt_image") …

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注