网页缩略图的用途挺多的,比如说主题预览、友链链接、博客展示等等,但如果每次都手动去完成截屏、裁剪、上传、更新图片地址这些流程,势必会增加很多工作量,如果有什么函数、插件或者第三方的 API 可以帮助我们完成这些繁琐的步骤那会让我们的工作更加轻松愉快。
这里要推荐一个网站,ShrinkTheWeb,该网站已经可以帮助我们完成上面所说的截屏、裁剪、上传、更新图片地址这些流程,因为 ShrinkTheWeb 提供了一整套功能强大的 API,使用此 API 需要先注册为 ShrinkTheWeb 网站的会员,每个免费用户都可以使用限量次数的缩略图服务,就我看来,老外还是很慷慨的,这个免费用户的限量对于我们这些个人用户而言已经是绰绰有余。当然,这些绝对不是本文的重点,而接下来对 ShrinkTheWeb 生成的网页缩略图进行缓存并运用于 WordPress 才是本文的重点。
再进入正题前先说一下为什么要缓存缩略图,这和缓存 Gravatar 头像的道理是一样的。其一,因为从国外服务器调用图片的速度肯定没有从本地服务器快;其二,ShrinkTheWeb 有着面临被墙的危险(好像以前被墙过一次),如果一旦被墙,API 就会持续不断地调用无法跨越的墙外的图片,这会严重影响网站速度,甚至拖跨服务器;其三,在调用不到网页缩略图的时候,会显示一张印有 ShrinkTheWeb LOGO 的图片(不知道收费用户会不会是这样),即使作为免费用户,我也不愿意看到这样的 LOGO 图片,而缓存缩略图可以帮我们解决这一尴尬,因为之后提到的方法中可以设置默认图片;其四,ShrinkTheWeb 是明文输出最后的图片地址,地址中包括了 API Key,虽说是免费用户,但是如果被恶意盗用,我也没精力经常去注册更换 API Key,而缓存缩略图也可以弥补这一不足。
大家可以先看一下 DEMO,我在新主题 ChinaBlogs 中就运用了这一方法,包括首页的本期博客推荐位的头像和下面博客展示轮播上,都用了网页缓存缩略图的方法。方法如下:
一、准备工作:
在网站的根目录新建一个 thumbnail 的文件夹,并把权限设为 755 或者 777,这个目录是为了存放网页的缩略图,所以必须可写。再把希望的默认缩略图存放在主题目录的 images 文件夹中,我把这个文件命名为 thumb_default.png,这个目录和文件名各位可以根据需要修改。
二、在 WordPress 主题的 functions.php 中加入如下代码:
$path_parts = pathinfo($stwurl);
$stwurl_temp = $path_parts["filename"];
$id = ( false === $id ) ? " : $id = 'id="'.$id.'" ';
$thumb_pic = get_bloginfo('wpurl'). '/thumbnail/'.$stwurl_temp. '-'.$stwsize.'.jpg';
$thumb_file = ABSPATH. 'thumbnail/'.$stwurl_temp.'-'.$stwsize.'.jpg';
$expired = 604800; //七天自动更新
if ( empty($stwurl) ) copy( get_bloginfo('template_url').'/images/thumb_default.png', $thumb_file );
if ( !is_file($thumb_file) || (time() - filemtime($thumb_file)) > $expired ){
$stwapi = 'http://images.shrinktheweb.com/xino.php?stwembed=1&stwaccesskeyid='.$stwaccesskeyid.'&stwsize='.$stwsize.'&stwurl='.$stwurl;
copy($stwapi, $thumb_file); $thumb_pic = esc_attr($stwapi);
}
return '<img '.$id.'src="'.$thumb_pic.'" alt="'.$alt.'" />';
}
三、参数介绍:
1、$stwsize
这是缩略图的大小,有六个值可以选择:mcr、tny、vsm、sm、lg、xlg,这六个值分别对应的尺寸是:75*56、90*68、100*75、120*90、200*150、320*240。
2、$stwurl
这个就是需要生成的网页的网址,网址可以是 http 或者 https 开头,也可以是 www 开头,或者不是 www 开头也可以。
3、$alt 和 $id
顾名思义,就是最后输出 img 标签的 alt 和 id,这个就不多说了。
4、$stwaccesskeyid
这个就是我们的 API Key 了,在注册 ShrinkTheWeb 之后,会在控制面板中得到两个 Key,Access Key 和 Secret Key,这里我们用到的 $stwaccesskeyid 参数就是指 Access Key,可以无视 Secret Key。
四、调用函数:
因为已经写的不少,这里就不作扩展了,只是举一个简单的例子:
这段代段输出的 HTML 代码如下,可以作一下对比参考:
这时候你网站根目录下的 thumbnail 目录下就已经生成了一张 wange.im-lg.jpg 尺寸为 200*150px 的网页缩略图。好了,一个程序一篇文章,这就是我今天折腾的成果,各位 have fun~