首先博主使用的是91php主题。

自从服务器换成linux后，出现了各种水土不服的现象。比如说这个缩略图的功能也不知道怎么回事，突然就没用了。打开浏览器的开发者工具看看，提示下面的内容

A TimThumb error has occured

The following error(s) occured:

  • Error reading the URL you specified from remote host.connect() timed out!

Query String : w=220&h=120&src=http://xxx.icharm.me/wp-content/uploads/xxx/xxx/xxxxxxxx.jpg

TimThumb version : 2.8.11

http://x.icharm.me/wp-content/uploads/xxx/xxx/xxxxxxxx.jpg这个是我的cdn地址，复制到浏览器打开可以正常浏览。具体的原因也没找出来。不过倒是明白了这个主题的缩略图是怎么生成的。博主有使用七牛cdn加速。后台安装了我爱水煮鱼的七牛镜像储存插件。七牛插件将所有的静态资源发布到cdn服务器上去了。并同时修改了页面中请求资源的连接。上面的问题大致意思就是TimeThumb这个函数吧获取指定的图片资源超时。（可能是我服务器的安全组配置的问题。禁止了所有外网出方向的请求）。不过没关系，正好改下主题，把生成缩略图的任务交给七牛来完成。从而减轻服务器的压力，提高访问速度！主题的缩略图，在使用七牛插件后，是这样工作的：首先向七牛服务器请求指定的资源。请求完成后在服务器中生成缩略图并嵌入进页面发送给用户。这里来来回回的，反而拖累了网站访问的速度。所以博主下定决心弃用主题自带缩略图功能，改用七牛缩略图。虽然博主还没摸清wordpress的主题是怎么工作的。/笑哭

不说了首先翻看主题的function.php发现了这个函数：

function _9iphp_post_thumbnail( $width = 255,$height = 130 ){
    global $post;
    $content = $post->post_content;
    preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
    $n = count($strResult[1]);
    if($n > 0){
        return '<img class="thumb pull-left hidden-xs" src="'.get_bloginfo('template_directory').'/images/lazy_loading.gif" data-original="'.get_bloginfo("template_url").'/timthumb.php?w='.$width.'&amp;h='.$height.'&amp;src='.$strResult[1][0].'" title="'.get_the_title().'" alt="'.get_the_title().'"/>';
    }
}

这个函数的最后return了一个img标签。可以看到这个img标签有src和data-original参数。src的值是一张显示正在加载的图片。而data-original的值是缩略图的源文件。第一次看见这个data-original参数，百度了一下。发现这个是用来实现图片的延迟加载的。而我使用的主题的延迟加载图片的功能竟然是用php实现。这个进一步拖累了服务器。该用js实现的话，就可以把任务交给浏览器来完成.

查看了我爱水煮鱼的七牛镜像储存插件的手册。发现他提供了wpjam_post_thumbnail()函数来调用七牛的缩略图API。在该插件的根目录找到了wpjam-thumbnail.php文件里面定义了wpjam_post_thumbnail()函数。

function wpjam_post_thumbnail($size='thumbnail', $crop=1, $class="wp-post-image"){
	if($post_thumbnail = wpjam_get_post_thumbnail(null, $size, $crop, $class)){
		return $post_thumbnail;
	}
}

function wpjam_get_post_thumbnail($post=null, $size='thumbnail', $crop=1, $class="wp-post-image"){

	$post_thumbnail_src = wpjam_get_post_thumbnail_src($post, $size, $crop);

	if($post_thumbnail_src){

		$size = wpjam_get_dimensions($size);
		extract($size);

		$hwstring = image_hwstring($width, $height);

		return '<img src="'.$post_thumbnail_src.'" alt="'.the_title_attribute(array('echo'=>false)).'" class="'.$class.'"'.$hwstring.' />';
	}else{
		return false;
	}	
}

 

可以看到wpjam_get_post_thumbnail()函数最后return了一个img函数。这里我不需要返回img。我们只需要返回$post_thumbnail_src的值。再在主题的function.php返回带有src=$post_thumbnail_src的img标签。

所以哀差闷把wpjam_get_post_thumbnail()函数的return部分改为return $post_thumbnail_src；把wpjam_post_thumbnail()函数的echo改为return。如下：

function wpjam_post_thumbnail($size='thumbnail', $crop=1, $class="wp-post-image"){
	if($post_thumbnail = wpjam_get_post_thumbnail(null, $size, $crop, $class)){
		return $post_thumbnail;
	}
}

function wpjam_get_post_thumbnail($post=null, $size='thumbnail', $crop=1, $class="wp-post-image"){

	$post_thumbnail_src = wpjam_get_post_thumbnail_src($post, $size, $crop);

	if($post_thumbnail_src){

		$size = wpjam_get_dimensions($size);
		extract($size);

		$hwstring = image_hwstring($width, $height);

		return $post_thumbnail_src;
	}else{
		return false;
	}	
}

 

最后把主题的function.php中的_9iphp_post_thumbnail()函数的return部分改为return '<img class="thumb pull-left hidden-xs" src="'.wpjam_post_thumbnail(array(220,120),$crop=1).'" title="'.get_the_title().'" alt="'.get_the_title().'"/>';如下：

function _9iphp_post_thumbnail( $width = 255,$height = 130 ){
    global $post;
    $content = $post->post_content;
    preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
    $n = count($strResult[1]);

    $timethumbUrl = wpjam_post_thumbnail(array(220,120),$crop=1);
    if($n > 0){
        if($timethumbUrl){
        return '<img class="thumb pull-left hidden-xs" src="'.wpjam_post_thumbnail(array(220,120),$crop=1).'" data-original="'.wpjam_post_thumbnail(array(220,120),$crop=1).'" title="'.get_the_title().'" alt="'.get_the_title().'"/>';
            
        }else{
            return '<img class="thumb pull-left hidden-xs" src="'.get_bloginfo('template_directory').'/images/lazy_loading.gif"  title="'.get_the_title().'" alt="'.get_the_title().'"/>'
        }
        
    }
}

这样就OK啦，缩略图显示正常，只是有一点遗憾的就是图片的延迟加载的特效没有。感觉博客没那么生动了。

新的办法

上面的方法比较麻烦，而且会导致侧栏不能随动。具体原因并不清楚。不过哀差闷从新看了遍wpjam-thumbnail.php文件，发现直接使用wpjam_get_qiniu_thumbnail函数可能更好。这样只需要更改主题的function.php中的_9iphp_post_thumbnail函数，如下：

function _9iphp_post_thumbnail( $width = 255,$height = 130 ){
    global $post;
    $content = $post->post_content;
    preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
    $n = count($strResult[1]);
    if($n > 0){
        return '<img class="thumb pull-left hidden-xs" src="'.get_bloginfo('template_directory').'/images/lazy_loading.gif" data-original="'.wpjam_get_qiniu_thumbnail($strResult[1][0],220,120).'" alt="'.get_the_title().'"/>';
    }
}

关于怎么调用wpjam_get_qiniu_thumbnail函数,可以参考七牛的开发文档和该函数的实现代码。

20160516更新

用上面的办法是可以达到目的的，但是我爱水煮鱼的七牛镜像插件，实在不好用，老是给上传些html格式的图片或者视频文件之类的，并不知道什么原因，一直坚持在用的唯一原因是水印的功能。不过哀差闷决定了彻底放弃这个插件，转用wp super cache 的cdn功能。

风雨兼程路，雨雪初霁时