现在的位置:首页>wordpress>正文

WordPress代码开启七牛CDN及集成七牛缩略图方法

2015年01月19日 ⁄ 共 4676字 评论 4 条

之前在介绍纯静态缓存代码的时候,曾搬出了七牛CDN的代码版,我瞅着应该是从鱼叔的WordPress七牛云存储插件中扒出来的一大段代码,主要是还集成七牛缩略图,给人很严谨,很专业的赶脚.

这里部落需要补充一下,与七牛CDN相关的问题,比如缓存之类的,大家可以看看给网站加速之七牛免费CDN使用教程这篇文章,也是非常有参考价值的.里面涉及到一些SEO相关的内容,强烈建议大家看看.

一、七牛CDN代码

其实,我只用了寥寥数行代码就搞定了:

/**
* WordPress七牛CDN代码版 By 张戈博客
**/
function QiNiuCDN(){
function Rewrite_URI($html){
/* 前面是需要用到七牛的域名,后面是需要加速的静态文件类型,使用分隔符 | 隔开即可 */
$pattern ='/http:\/\/(www\.|)zhangge\.net\/wp-([^"\']*?)\.(jpg|js|css|gif|png|jpeg)/i';
/* 七牛CDN空间地址,请自行替换成实际空间地址 */
$replacement = 'http://zgboke.qiniudn.com/wp-$2.$3';
$html = preg_replace($pattern, $replacement,$html);
return $html;
}
if(!is_admin()){
ob_start("Rewrite_URI");
}
}
add_action('init', 'QiNiuCDN');

 

使用说明:将上面的代码修改后添加到WordPress主题下的functions.php中即可。

Ps:实际上,如果是结合之前分享PHP缓存代码,仅需以上代码中的第8、10、11行即可实现,合并亦可:
 

$html = preg_replace('/http:\/\/(www\.|)zhangge\.net\/wp-([^"\']*?)\.(jpg|js|css|gif|png|jpeg)/i','http://zgboke.qiniudn.com/wp-$2.$3',$html);

 

图片尺寸

最近遇到一件很惭愧的事情,个人保守估计,很多WordPress站长都没意识到,甚至都没设置过。

先看一个设置界面:

qiniuCDNjcxnt1

没错,就是WordPress后台的多媒体设置,可以设置一些图片尺寸。实际上,WordPress安装后就默认了多个尺寸,只要你上传图片,他就会将图片自动裁剪出多种尺寸!浪费空间暂且不说,某些擦边球网站图片特多,一个月成千上万图片,你还裁剪一下...可想而知,WordPress网站的效率呈直线下降(目录下的文件数太多会影响PHP性能,感兴趣的可以自行查资料)!

说一下,我以前的做法:

从我用知更鸟主题开始,我就简单研究过这个尺寸设置,知更鸟主题是带特色图片裁剪功能的:

qiniuCDNjcxnt2

因此,使用知更鸟之后,我在多媒体中如此设置尺寸如下图:

qiniuCDNjcxnt3

目的是为了让图片暗箱放大功能得到充分利用,很多博客集成了暗箱,但是他并没有明白暗箱的真谛!

可能喜欢暗箱效果,是因为他很炫,很新奇。实际上,我认为暗箱放大有一个很实用的功能就是加快网页的加载速度!为什么这么说呢?

比如我这样来设置:我写文章的时候,插入的是最宽为300px的中等图片,插入图片后,WordPress会默认给图片一个原始图片的超链接:

qiniuCDNjcxnt4

那么读者打开文章页面时,浏览器只会加载这个300px的img中图,而用户如果想看清楚图片时,就会点击图片放大,这时候才会加载最清晰的完整图片!要知道,并不是每个读者都会想去看图片的!所以,暗箱放大功能可以变相的加快页面加载速度!因为你在文章中插入的是小体积的中等图,只有点击放大才会加载大图。

有意思的是,很多博客用了暗箱放大,但是文章的img引用的是完整图片,而a标签链接的也是完整图片,那点击放大还有意义么???难道真的只是为了酷炫?那只能说你还没摸透暗箱的实际价值!

当然,这img加载图片的大小得看主题,是300px还是其他,就随个人喜好了!

七牛缩略图

前几日,帮用户优化WordPress的时候,偶然试用了一次七牛的缩略图!用完之后,不禁感叹:既然都用七牛CDN了,何必让图片弄得四分五裂,七零八落?真的有必要裁剪图片存放么?我以前也真是愚昧了。

就算在多媒体里面只保留了一个300px大小的中图,但是知更鸟主题的特色图片依然是裁剪成3份,也就是说我上传一张图片,会裁剪为五份!!这也太坑爹了吧?

实际上,七牛的提供了缩略图API的,而且功能实用又强大,完全可以替代WordPress自带的苦逼裁剪功能!在我换成了七牛缩略图之后,对空间多余尺寸图片进行了清理,这些多余尺寸图片,居然占据了空间近三分之一的大小!

1.进入七牛,在数据处理中新建裁剪样式:

qiniuCDNjcxnt5

2.选择缩放模式,确保图片内容完整:

qiniuCDNjcxnt6

3.输入想要的缩略图尺寸,比如我一直中意的300px:

qiniuCDNjcxnt7

4.相信细心的朋友,您应该看到图片水印了,这时你还可以顺便弄个水印,又可以省掉一个WordPress插件了.直接点击,然后上传您的水印文件,如下图:

qiniuCDNjcxnt8

5.最后保存,得到最终API参数,如下图:

qiniuCDNjcxnt9

得到参数了该如何应用到网站呢?

这里就懒得写代码了,直接扒鱼叔的七牛插件中的缩略图代码,代码有点长就不贴出了。

1.下载代码

下载水煮鱼的WordPress七牛云存储插件,解压后里面的wpjam-thumbnail.php文件即为缩略图代码。

2.集成功能

将wpjam-thumbnail.php这个文件上传到主题目录,然后编辑主题目录下的functions.php,在第一个<?php后面加上如下代码即可集成七牛缩略图功能:

/* 集成七牛缩略图功能 */
include("wpjam-thumbnail.php");

3.应用到文章

如上文所说,我们为了进一步优化页面加载速度,文章中的img图片通常引用的是缩略图,所以将如下代码添加到主题的functions.php中即可完成替换:

 

add_filter('the_content', 'QiNiuThumbnail');
function QiNiuThumbnail($content) {
global $post;
$pattern ="/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
/* 下面这行代码中的300表示缩略图的大小,请根据实际需求修改即可 */
$replacement = '<img$1src=$2$3.$4?imageMogr2/thumbnail/300x$5$6>';
$content = preg_replace($pattern, $replacement, $content);
/* 此处预留位置,可删除 */
return $content;
}

 

以上代码需要将博客地址替换为七牛地址,需要结合前文上文七牛CDN代码使用,当然可以进一步DIY。

应用到主题

到这里就有点小麻烦了,因为每个主题的情况都不一样。我只能粗略的说一下张戈博客的实施情况!

知更鸟主题一共需要3种缩略图尺寸,如下图:

qiniuCDNjcxnt10

那我就需要找到这三个图片对应的php代码,然后替换为七牛缩略图地址即可,这里就要用到鱼叔的代码了!

先简单说下鱼叔的七牛缩略图函数的用法:

当你的主题引入了鱼叔的代码后,就得到了一个缩略图函数:

wpjam_post_thumbnail($size,$crop,$class);

相关参数说明如下:

参数 说明
$szie 设置缩略图的大小,可以是一个数组,比如array(150,150),也可以是字符串,比'thumbnail',字符串只能 为’thumbnail’, ‘medium’, ‘large’ 这几个关键字,分别对应 WordPress 后台 > 设置 > 多媒体中的设置大小。

$crop 设置是否裁剪缩略图,1为裁剪,如果为0,则只是按照最大边进行缩放,不进行裁剪。

$class 设置日志缩略图的 class,默认为"wp-post-image"。

知更鸟主题首页和分类页面的小缩略图(140x100)用到的是主题目录下的thumbnail.php文件,编辑此文件,如下即可完成首页和分类模块中小缩略图的替换:

 

<div class="thumbnail_t">
<?php if ( get_post_meta($post->ID, 'thumbnail', true) ) : ?>
<?php $image = get_post_meta($post->ID, 'thumbnail', true); ?>
<!-- 此处在图片地址后面加上七牛的API参数 -->
<a href="<?php the_permalink() ?>" target="_blank" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php echo $image; ?>?imageView2/2/w/140/h/100" alt="<?php the_title(); ?>"/></a>
<?php else: ?>
</div>
<div class="thumbnail">
<a href="<?php the_permalink() ?>" target="_blank" rel="bookmark" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail()) {
//the_post_thumbnail('thumbnail', array('alt' => get_the_title()));
<!-- 此处替换为鱼叔的七牛API函数即可 -->
wpjam_post_thumbnail(array(140,100),$crop=0);
} else { ?>
<!-- 一样在图片地址后面添加七牛缩略图参数 -->
<img class="home-thumb" src="<?php echo catch_first_image() ?>?imageView2/2/w/140/h/100" width="140px" height="100px" alt="<?php the_title(); ?>"/>
<?php } ?></a>
<?php endif; ?>
</div>

 

保存后,刷新首页,再去查看小缩略图的地址,就已经变成我们想要的了.因为每个主题都不一样,所以没有通用性,也很难说清楚!喜欢折腾的朋友就参考上述代码自行搞定吧!

禁止主题和WordPress的自动裁剪功能

这一点在WP后台设置就行了,如下图:

qiniuCDNjcxnt11

插入图片

当全部办妥之后,你会发现2个小问题:

a. 后台写文章插入图片,只能插入完整尺寸;

b. 如果直接插入完整尺寸,那么前台文章显示的缩略图就惨不忍睹!

为啥会这样?如果你在后台插入的是完整图片,那么经过七牛缩略图处理之后,就变成了小尺寸的图片,而你文章插入完整图片时,定义的尺寸也是完整尺寸,那尼玛前台肯定拉伸成TM都不认识的样子了。

解决办法:

1.很简单,咱们在写文章插入图片的时候,还是选择插入完整图片:

qiniuCDNjcxnt12

2.点击刚刚插入的图片,弹出悬浮工具条,点击编辑按钮:

qiniuCDNjcxnt13

3.选择自定义尺寸,并在下方的宽度里面填写你要的缩略图大小:

qiniuCDNjcxnt14

4.更新后,自然就恢复了以前设置的那种大小了:

qiniuCDNjcxnt15

WordPress代码开启七牛CDN及集成七牛缩略图小结

文章内容来源自 张戈博客,由部落整理发布.

文章写得非常详细了,所以部落也没有去验证,对于那些相使用七牛CDN,确实是一个福音了,另外,备注说明一下,文章中的鱼叔,就是我爱水煮鱼,wordpress七牛插件就是他开发的.

评论 4 条 评论内容很精采,有内幕,而且绝对有干货

  1. 小布网点我月赚3000 2015年01月19日 14:36  @回复  Δ-49楼 回复

    不明觉厉!!!!!!!

  2. 51爆料网 2015年01月20日 14:59  @回复  Δ-48楼 回复

    来支持下你的文章,欢迎回踩啊。

  3. 我要网赚 2015年01月20日 15:37  @回复  Δ-47楼 回复

    2014年度十大网络用语:
    1、我也是醉了
    2、有钱就是任性
    3、蛮拼的
    4、挖掘机技术哪家强
    5、保证不打死你
    6、萌萌哒
    7、时间都去哪了
    8、我读书少,你别骗我
    9、画面太美我不敢看
    10、且行且珍惜

  4. 阅博客 2015年01月30日 12:34  @回复  Δ-46楼 回复

    有用,很好

给我留言