wordpress实现调用Unsplash图片作为随机背景

之前写过一篇类似文章：js实现网页七天背景（每日自动更换），
今天我分享的这篇教程是针对wordpress而写的，不过在此之前先介绍一下Unsplash：
Unsplash 是一个免费高质量照片的网站，都是真实的摄影照片，每10天更新10张照片，值得设计师们收藏，本篇教程将随机调用这个网站里的图片来作为网站背景。
效果演示前往 表白驿站，首页banner背景

好了，教程开始

1.将下面代码添加到主题的functions.php里

//实现Unsplash随机背景

    function enqueue_styles() {
        wp_enqueue_style('vegas','https://cdnjs.cloudflare.com/ajax/libs/vegas/2.2.0/vegas.min.css');
    }

    function enqueue_scripts() {
        wp_enqueue_script('vegas','https://cdnjs.cloudflare.com/ajax/libs/vegas/2.2.0/vegas.min.js',array('jquery'),'1.0',false);

        wp_enqueue_script( 'unsplash-background', get_stylesheet_directory_uri() . '/js/unsplash-background.js', array( 'jquery' ), '1.0', false );
    }

    add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
    add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

2.在主题的js目录下新建文件unsplash-background.js，将下面代码复制进去

jQuery(document).ready(function($) {
	$.backgrounds = [];
	var width = $(window).width();
	var height = $(window).height();
	var api = 'https://unsplash.it/'+width+'/'+height+'?image=';
	var limit = 5;
	var current = 0;

	$.get('https://unsplash.it/list', function(data) {
		for (var i = 0; i < limit; i++) {
			var random = Math.floor(Math.random() * data.length) + 1;
		  	var photo = data[random];
			$.backgrounds.push(
				{ 
					src: api + photo.id 
				}
			);
		}
		
		$("body").vegas({
		    slides: $.backgrounds
		});
	});
});

代码分析：
第二十行“body”为我们要添加背景的类，可以是标签（body）、class（.main）或id（#main）。
第六行 limit = 5 指定我们每次刷新网页都缓存5张图片来作为随机背景