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

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

好了,教程开始

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//实现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,将下面代码复制进去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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张图片来作为随机背景

发表一条评论:

电子邮件地址不会被公开。 必填项已用*标注