wordpress使用timthumb和七牛云存储函数实现缩略图功能

WordPress 欲思 77评论

最近博客修改了很多地方。找了许多方法去优化网站加快速度。因为用的阿里云主机配置不是太高。所以就想提高加载速度只能从其他方面入手。

网站使用的图片就是一个很大的因素。每篇文章截取的第一张图片的大小都不一样。有时候图片大一点加载就很慢。

这里告诉大家两种方法实现wordpress网站缩略图功能,提高网站加载速度。

wordpress使用timthumb和七牛云存储函数实现自定义缩略图功能

1、使用七牛云存储函数实现缩略图功能

七牛有很强大的缩略图功能,虽然 WordPress 也有缩略图功能,但是相比之下,七牛强太多了,并且生成的缩略图都是尺寸适应的,并且都是在七牛云存储上面。不知道七牛云存储是何物的童鞋请参考我是水煮鱼的介绍:http://blog.wpjam.com/project/wpjam-qiniutek/

安装七牛云存储插件的童鞋可以使用 wpjam_post_thumbnail 函数,直接生成缩略图。代码如下:

<?php  if(wpjam_has_post_thumbnail()){?>
<div class="entry-thumb">
	<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php wpjam_post_thumbnail(array(150,150),$crop=1);?></a>
</div>
<?php } ?>

这个函数有两个参数:

  • $size:设置缩略图的大小,它是一个数组,比如上面例子中就是设置缩略图大小为:宽是 150px,高也是 150px。
  • $crop:设置是否裁剪缩略图,1为裁剪,如果为0,则只是按照最大边进行缩放,不进行裁剪。

另外这个函数相比 WordPress 默认的 the_post_thumbnail 函数相比还有一个强大的地方是,如果没有设置缩略图,它将自动获取第一张图片作为缩略图。

2、使用timthumb.php实现缩略图功能

号称是wordpress网站的缩略图神器。没用过的童鞋可以去搜一下看看什么是 timthumb.php。这是一个专门为 WordPress 而开发的缩略图应用的项目。有点类似于插件,但是又和 WordPress 插件不同,因为它不是被上传于 plugins 文件夹下,而是需要上传到你的主题文件夹中。你可以在这里下载最新版本的 timthumb.php,一般默认配置也就可以了。

timthumb使用技巧须知

1、服务器要开启GD库。
2、在和timthumb.php同一个目录下新建一个cache文件夹用来存储生成的小图片,设置cache文件夹为 755 或 777 权限。
3、请使用绝对地址来表示原有图片,改程序不支持外链图片。
4、最好将规则写入.htaccess文件中。可以加快图片速度。如下:

 RewriteEngine on
 RewriteRule .* – [E=HTTP_IF_MODIFIED_SINCE:%{HTTP:If-Modified-Since}]
 RewriteRule .* – [E=HTTP_IF_NONE_MATCH:%{HTTP:If-None-Match}]

5、将图片的动态地址改为静态地址也会加快服务器的响应速度。

6、图片的最后一个参数不是质量级别而是压缩级别。我们可以单独修改这个参数达到最大压缩比。找到timthumb.php文件第174行左右 $quality = floor($quality * 0.09); 在下面添加:$quality = 9;

7、还有许多的TimThumb 参数可以让你设置,可以自己去看看。

使用的时候,一般图片的地址是这样的:

<img src="http://timthumb所在目录/timthumb.php?src=图片地址&h=图片高度&w=图片宽度&zc=1" />
例如:http://yusi123.com/wp-content/themes/yusi/timthumb.php?src=http://images.yusi123.com/wp-content/uploads/2014/01/360dianping.png&h=146&w=220&q=95&zc=1&ct=1

其中,h为缩略图的高度,w为缩略图宽度,q表示质量,zc有两个属性值,1表示裁剪,0表示按设置的高宽压缩,不裁剪。

这个是我博客已经在使用的代码,大家可以试试看:

//添加特色缩略图支持
if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails');

//输出缩略图地址 From wpdaxue.com
function post_thumbnail_src(){
    global $post;
	if( $values = get_post_custom_values("thumb") ) {	//输出自定义域图片地址
		$values = get_post_custom_values("thumb");
		$post_thumbnail_src = $values [0];
	} elseif( has_post_thumbnail() ){    //如果有特色缩略图,则输出缩略图地址
        $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
		$post_thumbnail_src = $thumbnail_src [0];
    } else {
		$post_thumbnail_src = '';
		ob_start();
		ob_end_clean();
		$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
		$post_thumbnail_src = $matches [1] [0];   //获取该图片 src
		if(empty($post_thumbnail_src)){	//如果日志中没有图片,则显示随机图片
			$random = mt_rand(1, 10);
			echo get_bloginfo('template_url');
			echo '/images/pic/'.$random.'.jpg';
			//如果日志中没有图片,则显示默认图片
			//echo '/images/default_thumb.jpg';
		}
	};
	echo $post_thumbnail_src;
}

上面的代码获取图片的顺序是:自定义域 thumb 的图片 > wordpress特色图片 > 文章第一张图片 > 随机图片/默认图片

然后在调用缩略图的地方使用类似的代码:

<img src="http://timthumb所在目录/timthumb.php?src=<?php echo post_thumbnail_src(); ?>&h=150&w=2000&zc=1" alt="<?php the_title(); ?>"/>

就可以显示缩略图。你可以修改上面的参数,实现不同位置显示不同大小的缩略图。

timthumb常见问答

1.WordPress本身就有截取缩略图的功能,为什么要使用timthumb呢?

WordPress本身的缩略图截取功能,会对上传的任何图片都进行裁剪,每个图片都删除缩略图保存在空间中,特点是,图片只生成一次,需要调用是不会再次生成,但是有很多缩略图根本用不到,占用空间。

timthumb只对要作为缩略图的那个图片进行裁剪,并且是在有访问请求时才临时处理生成,生成的是一个配置文件,不存在真正的缩略图文件,在一定的时间内会缓存在空间中,失效后,有访问请求会重新生成。特点是,不会生成多余的缩略图,但是处理过程需要一定的服务器资源支持。

2.听说timthumb以前有漏洞,现在不放心?

任何程序都会存在漏洞,包括WordPress本身,timthumb之前也一样,但是最新版本已经算是比较安全了,我只能说,如果你担心,那就不要用。

注意:如果你的图片域名解析出现问题。“timthumb文件大概126行的地方有: $ALLOWED_SITES = array  添加那个外部图片的顶级域名就可以了。

转载请注明:欲思博客 » wordpress使用timthumb和七牛云存储函数实现缩略图功能

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (140)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(77)个小伙伴在吐槽
  1. 首页破图怎么解决?
    ll2016-03-04 16:43 回复
  2. 评论有乱码 首页的那个缩略图有时候会很小。 求解决方法 :roll: 我是小白
    区草2015-11-09 14:03 回复
  3. 手机版本,焦点图没有
    小孩儿2015-09-13 11:43 回复
  4. 完全小白请问 七牛的插件一直在使用 ,wpjam_post_thumbnail 这个插件的在哪里修改呢?
    summerdad2015-09-05 08:48 回复
  5. 外链图片的缩略图无法显示的时候,可以通过将timthumb.php中的define ('ALLOW_ALL_EXTERNAL_SITES', false);修改为define ('ALLOW_ALL_EXTERNAL_SITES', true);
    V-Lover2015-08-08 13:52 回复
  6. 本人非常喜欢楼主的主题,用的SAE空间自带的博客程序。上传了博主的主题后出现错误,由于本人是小白。看不懂是SAE限制太多,还是主题不适用SAE。。希望能帮助一下找到解决办法。错误提示如下:Warning: copy(/data1/www/XXXXXXXXXXXXXX/avatar/37aaf36601aaba519ff5d604f3658245.png) [function.copy]: failed to open stream: Permission denied in wp-content/themes/yusi1.0/functions.php on line 234Warning: filesize() [function.filesize]: stat failed for /data1/www/XXXXXXXXXXXXXX/avatar/37aaf36601aaba519ff5d604f3658245.png in wp-content/themes/yusi1.0/functions.php on line 237Warning: copy(/data1/www/XXXXXXXXXXXXXX/avatar/37aaf36601aaba519ff5d604f3658245.png) [function.copy]: failed to open stream: Permission denied in wp-content/themes/yusi1.0/functions.php on line 238Warning: copy(/data1/www/XXXXXXXXXXXXXX/avatar/37aaf36601aaba519ff5d604f3658245.png) [function.copy]: failed to open stream: Permission denied in wp-content/themes/yusi1.0/functions.php on line 234太长。。省略。。
    小田哥哥2015-07-28 11:59 回复
    • 头像本地缓存。可能是没有相关文件夹和权限。
      欲思2015-07-31 11:42 回复
      • 请问一下有啥好的解决办法没有。。就喜欢你这主题╮(╯▽╰)╭
        小田哥哥2015-07-31 11:43 回复
      • 我也遇到这个问题了?这个好解决么?看不懂
        伟哥哥2015-08-17 18:18 回复
    • 同样的问题,怎么解决呢?
      Gavin2015-12-29 16:27 回复
  7. 可以帮我去优化下吗
    我是儒将2015-07-03 01:18 回复
  8. 甚是喜欢博主的主题
    i2086|勿忘初心2015-06-17 09:11 回复
  9. 不知道是因为WordPress程序本身臃肿,还是因为使用了缩略图的缘故,网站的响应时间高达600毫秒以上,实在是太慢了。
    阿龙个人博客2015-06-16 23:52 回复
    • 你可以使用七牛云储存插件,非常快
      php2016-06-02 12:56 回复
1 2 3