弃用七牛镜像插件,改用WpSuperCache的CDN功能 | ICHARM

首页 » 博文 » Web » 正文

弃用七牛镜像插件,改用WpSuperCache的CDN功能

我爱水煮鱼的七牛镜像插件还是不错的,但是最近,不知道是不是老折腾空间环境的问题,导致七牛有点工作不正常,所以决定放弃使用七牛镜像插件。其实一直使用七牛插件的原因在于水印功能非常方便,这里弃用七牛镜像插件主要还是解决水印的问题。

Wp Super Cache CDN

启动wp super cache的cdn功能非常简单。可以我爱水煮鱼的文章:http://blog.wpjam.com/m/wp-super-cache-4-qiniu-cdn/

有一个问题需要注意的是,必需要开启缓存,cdn才能工作哦!

七牛水印API

首先查看一下七牛水印api是怎么用的:http://developer.qiniu.com/code/v6/api/kodo-api/image/watermark.html

其实就是在图片的url后面加上类似下面的字符串?watermark/1/image/aHR0cHM6Ly9vNnBsZDg1ZHkucW5zc2wuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE1LzExLzIwMTUxMTEzMDgwMjExOTEucG5n/dissolve/90/gravity/SouthEast/dx/10/dy/10

/image/后面是水印图片的url地址(经过base64加密后的),然后后面分别指定了透明度90%,位置右下角、距离底部10px、距离右边10px。

水印问题

有了上面的连接,我们只需相对应的输出<img>的函数进行修改进行了。博主是使用9IPHP主题,functions.php里面有个延迟加载图片的函数,如下:

//图片延迟加载
add_filter ('the_content', 'lazyload');
function lazyload($content) {
	global $post;
	$loadimg_url=get_bloginfo('template_directory').'/images/lazy_loading.gif';
	if(!is_page()) {
		$content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2?watermark/1/image/aHR0cHM6Ly9vNnBsZDg1ZHkucW5zc2wuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE1LzExLzIwMTUxMTEzMDgwMjExOTEucG5n/dissolve/90/gravity/SouthEast/dx/10/dy/10\" src=\"$loadimg_url\"\$3>",$content);
	}
	return $content;
}

关键代码在上面的第7中。这一行的大概意思是将$content(即整个博文内容)中<img 找出来并替换一下,于是哀差闷在preg_replace函数的第二个参数中的$2后面贴上了上面的七牛水印使用的代码。然后保存搞定。

主要的问题搞定了,但是还有一些细节的问题,比如点击图片后,由于外层包裹的超链接地址没有加上水印的代码,所以没有显示水印。通过修改下面代码:

add_filter('the_content', 'magnific_class_replace');
function magnific_class_replace ($content){
	global $post;
    $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4?watermark/1/image/aHR0cHM6Ly9vNnBsZDg1ZHkucW5zc2wuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE1LzExLzIwMTUxMTEzMDgwMjExOTEucG5n/dissolve/90/gravity/SouthEast/dx/10/dy/10$5 class="magnific" rel="magnific" $6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

这个函数的主要功能是为img的上层a标签添加magnific属性,可以看到,其实也是使用正则函数进行替换,于是哀差闷在第五行的$4后面添加上水印的代码。

OK,到此水印的问题已经比较完美的解决了!

缩略图问题

弃用主题自带缩略图功能,改用七牛缩略图 在前面,博主弃用主题自带缩略图时,使用了七牛镜像插件的一个函数,现在这个插件弃用了,自然这里要更新下。

其实还是在图片url后面添加七牛api代码,修改主题的functions.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="'.$strResult[1][0].'?imageView2/1/w/220/h/120" alt="'.get_the_title().'"/>';
    }
}

关键点在第七行。

本文共 4 个回复

发表评论