标签：七牛

存在的问题在这六一儿童节的欢乐佳节，腾讯云又给先森送了一波小礼，上一次还是先森毕业的时候，腾讯云恭喜先森毕业，并收走了先森1元购买服务器的资格。。。大清早的，腾讯云邮件、短信通知先森腾讯云账号欠费停服了，先森表示一脸懵逼。登录腾讯云费用中心，发现是数据万象产生了CDN回源流量，这更是让先森感到懵逼。腾讯云账号欠费明细先森自2020年就将对象存储从七牛转到腾讯云COS了，在此之间从未发生过费用，之前先森还炫耀过：网站http转为https之始，从七牛到腾讯云突然产生的CDN回源流量让先森真的很奇怪，再次确认，COS是有CDN回源流量包的，先森的CDN源站也是COS域名而非数据万象的域名。COS的CDN回源流量包问题原因先森联系售后在线支持，经过确认得知，只要CDN回源时带了图片处理参数，那么就算是CDN回源到数据万象，啊这。。。先森就很无语售后的答复先森的解决办法数据万象产品的策略已经这样了，先森也没有办法改变，先森去联系售后，也不是为那6分钱讨回公道的，及时止损才是王道。针对这种情况，先森想到了两个解决方案：1、CDN继续使用腾讯云的，源站改为七牛对象存储或CDN域名；2、使用同地域的服务器做一个反向代理，CDN源站改为这个服务器，服务器通过内网访问对象存储，这样就不会产生对象存储和数据万象的流量费用，也就不存在CDN回源流量费了。先森选择了第二种方案，第一种方案可以用来做CDN的备用源站，避免自建反向代理挂了的话导致网站访问受到影响。第二种方案配置起来也简单，宝塔上增加一个站点，设置反向代理，目标URL和发送域名都填上COS的域名即可：宝塔的反向代理配置注意事项需要注意的是，使用的CVM服务器一定要与COS所属地域一致，且CVM的dns服务器保持腾讯云默认DNS，否则不会解析到内网。配置反向代理前，可以在服务器内解析验证一下，解析出来应该是一个169.254.x.x的IP：dig确认内网解析不打算再使用腾讯云数据万象的图片处理功能？那么，如果希望继续使用对象存储COS，但是又不希望无意间使用到数据万象该怎么办呢？经过确认，可以在数据万象的控制台操作对应存储桶“解绑”，解绑后COS桶就无法调用数据万象的能力了。数据万象解绑COS桶

先森之前先发了一篇博文，讲述了一些想从http转为https做的一些准备：网站http转为https之始，从七牛到腾讯云前进的道路从来都不是一帆风顺的，先森在切换的过程中也是遇到了一些问题，这里简单的记录一下历程。七牛转腾讯云七牛令先森最喜爱的功能就是图片的处理功能了，现在是腾讯云的对象存储COS也支持直接图片处理，所以先森才开始打算从http转为https。针对七牛的图片处理，先森以前还是写过几篇博文的：WordPress百度UEditor编辑器自动添加七牛云储存裁剪代码将WordPress历史文章中所有图片加上七牛裁剪水印代码七牛图片处理样式的正确使用方式当然，当时的用法比较简单粗暴，直接用了一大段的图片处理参数，而正确的方法应该是将固定的处理方法保存为处理样式，直接在图片后面调用图片处理样式，这个先森也在上面的最后一篇博客中写到了。先森使用图片处理，最主要的用途还是加速网站打开速度。将不同位置的图片缩小至合适的大小，让图片的体积尽可能的减小，以实现加快网站访问速度。先森最喜欢的一点，还是文章中的图片，结合灯箱插件，让图片在未点击时呈现缩放并降低图片质量的状态，点击后显示原始大小及质量。这么好的功能先森当然不想放弃，先森网站的各种缩略图都是不同的大小，所以有不同的样式。本以为从七牛的图片处理换到腾讯云的图片处理，相关规则还得自己研究半天才能实现同样的效果，结果图片处理的规则竟然非常兼容。COS图片处理规则除了需要添加水印的规则，其他的规则直接将七牛的复制过来就可以直接用了，简直方便的一批。COS新增样式时，添加水印图片竟然只能上传图片，而不能从存储桶里直接选择，这一点有些体验不佳。而自己通过自定义规则去添加水印图片的话，又会比较麻烦：使用自定义参数添加水印图片需要满足3个条件不过研究一下还是可以完成操作，总的来说，这个切换过程还是非常满意的。自适应http和https先森前面的文章也写到过，为了避免切换到https有问题，先森切换的时候是没有开启强制跳转到https的，所以这里就需要做到http和https的兼容。先森想到的兼容方式就是将网页中的‘http://’换成‘//’，这样就会根据访问的协议自动显示相应的协议。要实现也很简单，先森下面这篇博客中讲到了“WordPress七牛CDN代码版”：七牛图片处理样式的正确使用方式先森这里把这个代码改吧改吧就能实现https的兼容了。//WordPress七牛CDN代码版function QiNiuCDN(){    function Rewrite_URI($html){        /* 前面是需要用到七牛的域名,后面是需要加速的静态文件类型，使用分隔符 | 隔开即可 */        /* 这里先森小改了一下，兼容https */        $pattern ='/http[s]{0,1}:\/\/(www\.|)capjsj\.cn\/(wp-|ueditor|avatar)([^"\']*?)\.(jpg|js|css|gif|png|jpeg|ico|cur)/i';        /* 七牛CDN空间地址,请自行替换成实际空间地址*/        /* 先森这里又换成腾讯云COS的地址了 */        $replacement = '//cos.capjsj.cn/$2$3.$4';    $html = preg_replace($pattern, $replacement,$html);    /* 增加了一次替换，把http://替换为// */    $html = preg_replace('/http:\/\/www.capjsj.cn/i', '//www.capjsj.cn',$html);    return $html;    }    if(!is_admin()){        ob_start("Rewrite_URI");    }}add_action('init', 'QiNiuCDN');这个时候需要注意，WordPress后台登录的时候，需要使用http，因为在设置-常规处的WordPress地址与站点地址还未修改，为了http与https的兼容，所以当时也并未修改。但若要修改，这里还有个坑。全站HTTPS先森经过一段时间的测试，发现https没有什么问题，所以就打算将网站开启HTTP到HTTPS的强制跳转，并且把后台配置中的站点地址也改成HTTPS，但是先森修改后，竟然遇到了后台地址无限跳转。HTTPS无限302跳转经过一番搜索，发现是需要在WordPress网站根目录中的wp-config.php中添加配置进行解决：/* 解决https无限跳转*/$_SERVER['HTTPS'] = 'on';define('FORCE_SSL_LOGIN', true);define('FORCE_SSL_ADMIN', true);添加在文件开头处即可，药到病除。CDN缓存命中率低先森闲来无事，跑去17ce测试了一下网站的GET速度，结果大出先森预料，竟然全国通红（忘了截图）。先森觉得很奇怪，先森这网站这么久了没更新了，按理说应该访问到的都是缓存才对啊，然后先森进行了排查。先森就从首页排查起，先森在非放置本站的服务器上curl首页，结果发现经常是 X-Cache-Lookup: Cache Miss，但是连着刷两次就会变成Cache Hit，但是再过几秒curl又变成Cache Miss了，这就有点奇怪了。仔细看了一下响应头，结果先森发现 Cache-Control: must-revalidate, max-age=3，这就表示缓存3秒啊，怪不得连着刷能命中缓存，接下来就要看这个响应头是怎么配置的了。不过讲道理，腾讯云的CDN判定是否命中缓存的规则是看X-Cache-Lookup是否为Hit From MemCache或Hit From Disktank，直接显示Cache Hit和Cache Miss是很奇怪的。X-Cache-Lookup:Hit From MemCache 表示命中 CDN 节点的内存。X-Cache-Lookup:Hit From Disktank 表示命中 CDN 节点的磁盘。不过先森也去查了一下，Cache Hit也是正常命中缓存了，也不需要过多的去纠结。这个仅缓存3秒的响应头，先森自己记得是没有配置的，可能比较容易出问题的可能是WordPress中使用的缓存插件。先森使用的缓存插件是WP Super Cache，所以首先就是怀疑这货。百度大法好，果然是这货影响的。默认情况下，WP Super Cache 返回的 Cache Control Header 固定为： cache-control: max-age=3, must-revalidate ，不管你在插件设置中设置的缓存超时时间是多久。修改起来也简单，只要在WordPress根目录的wp-config.php增加配置即可：define('WPSC_CACHE_CONTROL_HEADER','max-age=3600, must-revalidate');参考：WP SUPER CACHE 缓存插件但是，如果CDN的缓存也是继承源站的响应头，那先森在腾讯云CDN的缓存配置岂不是没有用了？所以还是得研究一下什么情况下，CDN会继承源站的配置。腾讯云官方文档对高级缓存配置的说明经过一番查阅腾讯云官方文档，发现是开启高级缓存配置时，CDN会对比源站响应头中的max-age值。先森看了一下自己CDN的配置，果然是开启了高级缓存配置的，赶紧关闭：关闭高级缓存配置这个配置估计是为了迎合一些对自定义配置要求较高的用户，先森这种小站就没必要开启了。CDN对no-cache或者no-store不缓存需要注意的一点是，默认情况下，CDN也不会对no-cache或者no-store的资源进行缓存，所以如果有遇到始终无法缓存的情况，可以检查一下cache-control是否配置了禁止缓存。先森最终是即修改了WP Super Cache的配置，将max-age改为了3600，即1个小时；CDN侧是关闭了高级缓存配置。至于为什么关闭了高级缓存配置的情况下，还要修改插件的缓存配置，那是因为max-age还会影响到客户端浏览器的缓存配置，3秒太短了，所以还是修改一下比较好。修改之后，过了一段时间，先森再进入17ce进行GET测试，测试的结果就能让先森接受了：17ce测速总结先森在网站开启HTTPS中，可能还有一些比较小的坑，先森随手就解决了，这里就没有记录了。网站加了CDN后，访客具体的访问速度先森实际上也不得而知，因为先森自己打开网站觉得还是很快的，结果用17ce一测，全红，这个17ce的数据也不知道与实际情况是否匹配。如果有访问比较慢的，还希望能够留言告诉先森，您的地域与具体访问的URL。

最近先森还是重拾了一点大学期间的激情，对网站又上心了一点。周围的网站看着都将http换成了https，先森也想着动一动了。目前是已经完全换为https有一段时间了，先森也记录一下切换过程中折腾的一些情况。首先，七牛七牛，先森最早开始使用的CDN与对象存储。当然，当时并不清楚这些概念，不过依然非常感谢七牛这些年来的陪伴。先森最早一篇关于七牛的文章是2015年9月初写的，先森的域名是同年6月份购买的。最早的记录：WordPress使用七牛CDN导致ajax评论报错{“error”:”get from image source failed: E405″}当初先森还不愿意使用七牛，因为插件没什么作用，但后面正确使用后的感觉是真香，这一香，就香了五年。七牛对象存储的免费额度七牛免费10G的存储空间，以及10G的下载流量，还有图片处理的免费额度，让当时囊中羞涩（现在也是）的先森万分欣喜。当时先森使用的还是万网的免费虚拟主机，一个月只有10G的流量，刚开始没有使用七牛的时候，各种折腾，然后各种跑满。使用七牛，让图片、js文件等静态文件都走七牛CDN后，问题得到有效解决。不过要使用https了，还是得跟七牛暂时告一段落了。七牛CDN的免费额度七牛的对象存储必须搭配CDN进行使用，否则无法外网访问。而七牛的CDN只有http请求有免费额度，https是必须收费的。虽然非常感谢七牛的陪伴，但是有白嫖的机会又何必花钱呢？然后，腾讯云先森一直不愿意换HTTPS的原因就是因为七牛，尤其是七牛的图片处理，可以在请求图片时对图片进行各种压缩、裁剪、加水印等操作，对网站加速访问很有益处。但先森毕竟是一名腾讯云公有云售后运维，对自家产品了解还是很深的。在七牛使用了两个产品，一个是对象存储，一个是CDN。而要换到腾讯云，就得观察好对应的产品。以前知道腾讯云也有图片处理的相关产品，叫做万象优图，现在改名叫做数据万象，不仅仅做图片处理了。但是一直没有去深入了解，也觉得既要使用腾讯云对象存储，还要使用万象优图，很麻烦，不像七牛那么方便：对象存储的图片，加上参数就能做图片处理。但是今年3月，腾讯云对象存储做出了改变，当时发了邮件：对象存储发布图片处理功能当时先森对网站是放任不管的，对此也没有在意。不过最近腾讯云又发了一次短信通知，先森又去研究了一下。对象存储COS先森目前对网站本来就不是很重视，要切换使用一定是在有免费额度的基础上。这里就需要注意的是，腾讯云的对象存储COS在去年9月份是对免费额度进行了调整的，在2019年1月22日之前开通使用对象存储的老用户继续每月享有之前的免费额度，之后开通的，就只有6个月的免费额度了。但是老用户还得注意，看自己有没有收到过以下邮件：COS免费额度变更标明了【不受此次变更影响】的用户才能继续享受每月免费额度，如果有什么疑问，可以在腾讯云官网联系在线客服或提交工单。腾讯云COS的免费额度还是比较给力，存储50G，流量10G，请求次数100万次。先森在使用时，一般都是配合CDN进行使用，所以这里要关注的是CDN回源流量。先森这边刚好有个账号还享有免费额度，所以具备七牛迁移腾讯云的基本条件。然后继续往下看。腾讯云的对象存储简称COS，后面都直接用COS了。数据万象CICOS的图片处理功能，使用的是数据万象的功能，所以还得看数据万象有没有免费额度。在数据万象的文档中可以看到，很多操作都是有免费额度的：数据万象免费额度这里先森重点关注的是基础图片处理和CDN回源流量，这两项是先森用的上的。基础图片处理10TB/月，七牛是20TB/月，对于先森来说完全够了，先森11月5号开始使用，截止目前才用不到2GB，说来也是惭愧。CDN回源流量10GB/月，对先森来说也是完全够用了。由于是结合COS来使用的，图片不添加处理参数时，是不会回源到数据万象的，所以这个流量先森目前用的特别少，才200MB+。需要注意的是外网出流量，只要你不直接使用数据万象CI默认域名进行访问，仅使用CDN->COS->CI的方式访问的话，是不会产生的。数据万象默认域名格式为存储桶名-账号Appid.piccd.myqcloud.com，尽量还是使用自己的域名通过CDN访问吧。内容分发网络CDN对象存储和数据万象都有免费额度了，那么再来看看CDN。CDN不像对象存储和数据万象，这样费用那样费用，简单直接，就一个流量费用。不过CDN的免费额度按照官方文档来说，个人用户于官网开通 CDN 当天可获赠共120GB免费境内流量包。分6个月生效，每月生效20GB。其他就没有更多说明了，不过目前看来，只要接入了CDN，每个月还是会有10GB的赠送流量包，对先森来说够用了，使用前可以在控制台看下自己是否有赠送流量包：CDN免费流量包另外一点，SSL证书要从http切换为https，证书是肯定少不了的。想要安全，肯定不可能使用自颁发的证书，不过免费的证书也还是挺多的。先森使用的SSL证书是在腾讯云上直接免费申请的。腾讯云申请的免费证书是由亚洲诚信提供的，实际上也是DigiCert的免费DV证书。想比于Let's Encrypt证书的3个月一换，先森还是喜欢一年一换的。虽然Let's Encrypt证书可以跑脚本进行替换，但是从宝塔上的一些体验来看，这个自动替换还是有点坑的。先森不想过多的去修改源站web服务器上的配置，所以SSL证书是直接部署到CDN上的，使用http的方式进行回源。刚开始切换https的时候，先森担心https会出现问题，所以没有开启http到https的强制跳转，将证书部署在CDN上面，切换起来比较方便。当然，在切换的过程中，还是不免的遇到一些坑，为了避免篇幅过长，先森这边后面再说。后面的记录：网站从http转为https折腾记录

最新在新建一个博客，新的博客是建在云服务器的，完全自主，不得不说感觉非常好，比起虚拟主机可操作性强太多了。因为可操作性强，所以想把该做的都做好，比如备份。受张戈博客影响，看到了张戈的同步7天的那篇文章，想照着操作的时候发现，七牛的qrsync工具竟已废弃：qrsync已废弃看这简介，推荐使用qshell命令行工具，先森就干脆研究下使用新的工具来同步。有段时间没和七牛云储存打交道了，变化还是挺大的。为七牛的推陈出新点个赞。一、数据库、网站本地备份脚本在服务器上编辑shell脚本，脚本代码如下：#!/bin/bash# Name:liuxxbak.sh# This is a ShellScript For Auto Backup and Delete old Backup# Date:2017-8-19source /etc/profilebackupdir=/web/data/liuxx_bak   # 本地备份路径time=` date +%Y%m%d `date=` date +"%Y-%m-%d %H:%M:%S" `day=15  #本地备份保留天数# 数据库信息user=rootpassword=******host=127.0.0.1port=3306databases=wordpress# 本地网站根目录backhome=/web/data/html/if [ ! -d $backupdir ]; then  mkdir $backupdirfi        mysqldump -h $host -P $post -u $user -p$password ${data} | gzip > $backupdir/${data}_$time.sql.gzif [ "$?" == 0 ];then        echo "[${date}] 数据库 ${data} 备份成功!!" >> ${backupdir}/mysqllog.logelse#备份失败则进行以下操作        echo "[${date}] 数据库 ${data} 备份失败!!" >> ${backupdir}/mysqllog.logfi# 备份网站tar -zcvf $backupdir/liuxx_${time}.tar.gz $backhome > /dev/null 2>&1# 删除同步find $backupdir -name "*.gz" -type f -mtime +${day} -exec rm {} \; > /dev/null 2>&1先森将以上代码保存为‘liuxxbak.sh’，名称可以随意自定义。保存后需要增加可执行权限：chmod +x liuxxbak.sh使用说明：将以上内容变量按需修改：backupdir=本地备份绝对路径day=本地备份保留天数user=数据库用户名（建议使用root用户，出错可能性小）password=数据库密码host=数据库IP或域名port=数据库端口databases=数据库名称backhome=本地网站根目录脚本执行方式：./liuxxbak.sh或者/web/data/liuxxbak.sh    # 绝对路径执行如此可以检查一下是否能够成功备份。二、远程备份到七牛云储存1.命令。首先下载qshell命令行工具，下载页面：根据服务器类型选择下载linux 64位的服务器可以直接在服务器上这样下载并增加可执行权限：wget -O qshell http://devtools.qiniu.com/2.1.3/qshell-linux-x64 && chmod +x qshell可以将qshell命令放入自定义目录。或直接放至/usr/bin/路径下，这样就可以任何地方直接输入命令了。2.鉴权。有了命令之后，我们需要七牛的鉴权，否则没法使用接下来的命令。需要鉴权的命令都需要依赖七牛账号下的 AccessKey 和 SecretKey。所以这类命令运行之前，需要使用 account 命令来设置下 AccessKey ，SecretKey 。鉴权的方式很简单，首先进入七牛的个人中心->密钥管理中，找到AccessKey 和 SecretKey。然后在服务器中运行一下命令：/web/data/qshell account ak sk执行之后，用户的所有信息写入到磁盘$HOME_DIR/.qshell下面。如：root用户执行后，信息会保存在/root/.qshell/account.json文件中。如果你修改了密钥，只需要重新执行以上命令即可，配置信息将被覆盖。3.同步。终于到了这一步。qshell命令的命令有很多，同步需要用到的命令是qupload。qupload是用来将本地目录中的文件同步到七牛空间中的命令。命令格式：qshell qupload [<ThreadCount>] <LocalUploadConfig>ThreadCount：并发上传的协程数量，默认为1，即文件一个个上传，对于大量小文件来说，可以通过提高该参数值来提升同步速度。LocalUploadConfig：数据同步的配置文件，该配置文件里面包含了一些诸如本地同步目录，目标空间名称等信息。ThreadCount是可以忽略的参数，默认一个文件一个文件的上传，因为是要备份数据库和本地网站文件，文件较少且大，顾保持默认就好。LocalUploadConfig为配置文件，配置文件中可带的参数共有21个，先森选用了其中的7个。详细的配置介绍请看这里。先森选用的参数如下，将以下内容保存到文件‘localupload.cnf’：{   "src_dir"            :   "/web/data/liuxx_bak",   "bucket"             :   "liuxx-backup",   "ignore_dir"         :   true,   "overwrite"          :   true,   "check_exists"       :   true,   "check_hash"         :   true,   "rescan_local"       :   true}解释，*为必须项："src_dir":"/web/data/liuxx_bak",  # 本地备份路径*"bucket":"liuxx-backup",    #同步数据的目标空间名称，可以为公开空间或私有空间*"ignore_dir":true,    #远程同步到七牛时，忽略本地路径"overwrite":true,    #覆盖同名文件"check_exists":true,    #上传前检查是否有同名文件"check_hash":true,    #在check_exists设置为true的情况下生效，是否检查本地文件hash和空间文件hash一致"rescan_local":true,    #检测本地新增文件并同步最后，远程同步到七牛云储存的命令为:/web/data/qshell qupload /web/data/localupload.cnf可以执行一下上面的命令，检查是否能够成功同步。先森同步到七牛云的效果：同步效果三、定时备份同步准备工作已经完毕了，现在所需的就是每天的自动备份及远程备份了。执行crontab -e添加以下内容：00 02 * * * /web/data/liuxxbak.sh30 02 * * * /web/data/qshell qupload /web/data/localupload.cnf >/dev/null 2>&1凌晨两点执行本地备份，凌晨两点半执行远程备份。当然，你也可以将qshell命令加到liuxxbak.sh脚本的最后，那么只用添加第一条计划任务就可以了。四、七牛十五天循环备份七牛云储存免费的存储空间大小是10G，如果你的七牛云存储空间有点紧急的话，可以继续本操作。这时候，点击‘生命周期’，添加规则，我们可以设定删除15天前的文件。先森设定的规则如下：删除15天前的文件当然，如果七牛云存储的剩余空间很足的话，可以保留更多天，这样可供回退的版本就更多了。总结无论是用虚拟主机，还是使用云服务器，有一套备份的机制是很重要的。如果像先森一样，主站使用的是虚拟主机，也有另外的云服务器的话，这套备份方案改改，也可以把自己虚拟主机的数据库一起备份起来嘛。

七牛图片处理样式，也就是我们通过创建一个样式，样式内定义了要对图片进行怎样的操作，然后我们只需要在图片后面加上样式分隔符和样式名称，即可对图片进行处理的一种方式。说起来，这种方式就像我们添加在functions.php中定义的加在钩子上的函数，要用的时候，直接调用函数，函数内的处理也就随之而动了。使用方法七牛图片处理样式，之前先森一直称其为七牛裁剪代码。因为先森将处理样式用在的一般是缩略图上，所以称之为裁剪；而代码主要就是先森闹了笑话了。先森之前对七牛图片处理样式的使用一直是将样式内容直接加在图片后面，中间加上了个问号,这样就导致图片的链接看起来非常的长（如下图）。加上七牛裁剪代码链接特别显得长上面的这种使用方式，简而言之就是，七牛为我们准备好了一个调用函数，而先森却非要每次都把函数内容重新写一遍。还好，先森在@第9页看到了正确的使用方法。正确的使用方法应该如下图，直接用斜杠+样式名称。正确的使用方式注意事项1.七牛图片处理样式的个数不是固定的，每个存储空间可以定义100个图片处理样式。这一点对我们小站影响比较小，先森目前才使用7个样式。2.就像PHP语言要加上<?php ?>来区分php代码一样，图片链接那么长，图片名称和图片处理样式的名称都是用户自定义的，万一两个名称重复了怎么办呢？所以，七牛也需要一个协议好的“定义”来区分一串字符是否为图片处理样式。而七牛的这个“定义”，就是样式分隔符。样式分隔符这个样式分隔符乍眼一看，好像没有什么作用，选择哪一个好像都没有什么。但是，先森使用之后，认为这个分割符还是很有作用的。样式分隔符能够使用的符号如下：- _ ! / ~ ` @ $ ^ & * ( ) + = { } [ ] | : ; " ' < > , .七牛默认使用的是斜杠，但先森觉得，这个斜杠就是最不应该作为样式分隔符的。先森使用斜杠为分隔符之后，网站上的图片名称就完全一样了。道理很简单，在一个链接中，最后一个斜杠后面的内容，默认为下载后的文件名。如下图，dengxiang是先森设置的样式名，清一色啊。文章中的图片全是图片样式名称所以先森也会找时间，把七牛的图片样式分隔符，以及主题中的样式分隔代码给更换了。大家可以看看七牛官方的演示图片，以中横线为样式分隔符的效果：以中横线为分隔符的效果所以希望还没有开始使用七牛图片处理样式的朋友，第一步先更改样式分隔符。代码部分如果使用七牛图片处理样式，就相当于修改了图片的后缀名，所以七牛云储存也就匹配不到文章中的图片了。在使用斜杠为分隔符的情况下，先森尝试了修改七牛云储存中的本地设置-扩展名设置（因为分隔样式是斜杠，所以用了反斜杠转移，不然会出错），但是并没有起作用。大家可以试试换了分隔符后的情况。扩展名修改所以，只能摒弃七牛云储存了。然后我们需要做的是将图片拉取到七牛存储空间，然后网站上访问的也是来着七牛的图片。因为从一开始先森使用的就是七牛云储存，而七牛云储存设置的第一步就是填写API，这让先森陷入了一个误区——没有API图片就不会保存到七牛存储空间。后来先森想明白了，只需要直接把图片上的域名改为七牛的域名，然后七牛会判断图片是否存在于存储空间。如果存在，直接输出；如果不存在，回源拉取图片到七牛存储空间。那么明白了就简单了，我们只需要将网站上图片链接中的域名直接换成七牛域名即可，在主题的functions.php中添加：//WordPress七牛CDN代码版function QiNiuCDN(){    function Rewrite_URI($html){        /* 前面是需要用到七牛的域名,后面是需要加速的静态文件类型，使用分隔符 | 隔开即可 */        $pattern ='/http:\/\/(www\.|)capjsj\.cn\/(wp-|ueditor|avatar)([^"\']*?)\.(jpg|js|css|gif|png|jpeg)/i';        /* 七牛CDN空间地址,请自行替换成实际空间地址 */        $replacement = 'http://img.capjsj.cn/$2$3.$4';    $html = preg_replace($pattern, $replacement,$html);    return $html;    }    if(!is_admin()){        ob_start("Rewrite_URI");    }}add_action('init', 'QiNiuCDN');这样我们就用代码实现了将静态资源拉取到七牛存储空间。接下来需要做的，是给文章中的图片加上七牛蹄片处理样式，同样是在functions.php中添加：/** * 七牛缩略图和水印 D9Y.NET整理**/function QiNiuThumbnailWatermark($content) {   global $post;   $pattern ="/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";   /* 下面这行代码中的dengxiang是七牛样式中的样式名称，而斜杠为七牛中设置的样式分割符 */   $replacement = '<img$1src=$2$3.$4/dengxiang$5$6>';   $content = preg_replace($pattern, $replacement, $content);   return $content;}add_filter('the_content', 'QiNiuThumbnailWatermark');?>当然，上面这串代码只是一下就将网站文章图片添加上了七牛图片处理样式，其他如相关文章、最新文章、文章列表中的缩略图还没有添加对应的样式。对于这些，先森是直接在调用图片时手动添加样式，直接加在functions.php中的函数，先森还没去研究。先森的例子如下：<img src="<?php echo post_thumbnail_src(); ?>/sidebar" alt="<?php the_title(); ?>" />总结总之，使用七牛图片处理样式，能使你的图片链接看上去更清爽。但如果使用斜杠为样式分隔符，又会使你的图片名称看起来非常操蛋。另外，七牛图片处理，不仅仅是裁剪图片大小，更为重要的是，可以设置图片水印。

近期先森对WordPress和七牛研究的比较勤，折腾了很多，其中很多都是和七牛有关的。七牛的裁剪功能确实好用，但是先森为缩略图（文章下面相关文章的图片）和文章中的图片都加上七牛裁剪代码后，就发生了冲突。关于为缩略图和文章图片添加七牛裁剪代码，大家可以先看看这些文章：1.七牛代码如何使用：WordPress调整Tag标签页文章列表缩略图优化小记2.已发布的文章添加代码：将WordPress历史文章中所有图片加上七牛裁剪水印代码其实，发生冲突是必然的事情。首先，缩略图调用的图片，是从文章中调用图片链接。图片链接获取的优先顺序是：自定义字段为 thumb 的图片>特色缩略图>文章第一张图片>随机图片/默认图片。也就是只有文章中没有图片时，才会调用你设置的随机图片。而文章中的图片，先森已经全部加上了七牛裁剪代码。调用这些图片链接的时候，链接里面实际上已经有一段七牛裁剪代码了。这将导致，缩略图调用的时候在后面增加的裁剪代码会重复加在后面，而七牛的规则是只生效前面的一段，也就是缩略图的裁剪失效了，你调用缩略的时候还是更大的图片，没有达到裁剪缩小图片体积的目的。加上了两段七牛裁剪代码前期准备这种情况，整理了一下思路，总结了下解决方案。增加判断，如果图片链接中含有裁剪代码，则替换成新的裁剪代码；如果不包含，则直接在链接后面添加裁剪代码。要用两种函数，查找和替换。先森在w3school里找到了这两种适合的函数，要了解的可以看看：查找函数：PHP strpos() 函数替换函数：PHP str_replace() 函数除了准备这两个函数，如果是使用WordPress大学中的缩略图调用代码的同学，还要修改下代码。缩略图调用：WORDPRESS添加相关文章功能（标题/缩略图样式）WordPress大学提供的代码，是加在functions.php中的，调用的时候可以直接输出图片链接：//添加特色缩略图支持if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails'); //输出缩略图地址 From wpdaxue.comfunction 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;}因为要对图片链接增加查找，所以上面代码中，最后几行的输出可不能要，这样是判断不了的。需要将上面的最后五行的"echo"换成"return"，即： return get_bloginfo('template_url').'/images/pic/'.$random.'.jpg'; //如果日志中没有图片，则显示默认图片 //echo '/images/default_thumb.jpg'; } }; return $post_thumbnail_src;}解决方法准备齐全之后，就可以解决问题了。之前，先森是这样调用相关文章的图片的： <img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/130/h/100/q/100" alt="<?php the_title(); ?>" class="thumbnail" />那么，现在为了解决重复代码的问题，需要将上面的代码换成下面的内容：<?php     $imgsrc = post_thumbnail_src();    $qiniu_dengxiang='imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMi5wbmc=/dissolve/80/gravity/SouthEast/dx/5/dy/4';    $qiniu_xiangguan='imageView2/1/w/130/h/100/q/100'; if(strpos($imgsrc,$qiniu_dengxiang)){?>            <img src="<?php echo str_replace($qiniu_dengxiang,$qiniu_xiangguan,$imgsrc);?>" alt="<?php the_title(); ?>" class="thumbnail" />           <?php }        else{?>            <img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/130/h/100/q/100" alt="<?php the_title(); ?>" class="thumbnail" />        <?php }?>修改保存之后，检查一番，发现问题确实得到了解决：只增加了一次七牛裁剪代码同理，侧边栏的最新文章缩略图也可以这么修改，先森也就不累述了。

关于七牛云储存的好，各位站长都有所了解。以前先森不怎么重视的七牛缩略图裁剪、为图片增加水印等功能，先森也开始重视起来了。经过七牛裁剪之后的效果显而易见，图片体积小了，网页打开速度也就快了。当然，成航先森的网站访问量较小，还不存在服务器压力过大等问题。总之，七牛能为我们减少很多问题。前段时间，先森鼓捣出了怎么让百度UEditor在编辑图片的时候，就为图片添加上七牛裁剪的代码。但是这样影响到的图片，也之后实现该效果之后的文章中的图片，之前已经发布的图片就没法影响到了。但是这还就成了先森心中的一根刺。关于七牛云储存代码的文章，大家可以看看：1.七牛代码如何使用：WordPress调整Tag标签页文章列表缩略图优化小记2.如何更方便的使用：WordPress百度UEditor编辑器自动添加七牛云储存裁剪代码其实关于如何处理这种情况，先森心里早已有了想法。首先，不可能自己一篇篇的打开文章，修改图片的链接，这太繁琐了，不现实。使用插件的话，也太麻烦。所以肯定还是要动动非常敏感的数据库啦。本来，现实想的是，先使用正则表达式，查找图片链接，然后为图片后面，增加七牛的裁剪代码。也就是在每张图片的后面，增加以下代码：?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10但是百度了一下，MySql数据库使用正则，好像很麻烦的样子（实际上是有点懒，看着头晕）。所以还是研究链接本身，最终想出了懒办法。还是直接使用我们百试不爽的替换大法：update 表 set 内容字段=replace(内容字段,'需要被替换字符串','替换字符串')研究链接之后，发现，只要把能只有图片链接才有的部分，替换成这部分加上七牛裁剪即可。所以最后显示用的替换语句是：update wp_posts set post_content=replace(post_content,'.jpg" title','.jpg" title') update wp_posts set post_content=replace(post_content,'.png" title','.png" title')因为先森文章中图片基本只有jpg和png两种格式，图片<img>便签中，都是链接后面加title，所以就用上面的那种替换。运行之后，发现没有问题：替换图片链接运行之后，抽样检查了一下以往的文章，发现确实生效了，没有出现问题，OK！

先森在之前的文章页谈到过，先森想要将七牛云储存、Auto Highslide插件和百度UEditor编辑器三方面协调，在能够使Auto Highslide插件的灯箱效果不失效的情况下，让从百度UEditor编辑器插入的图片，在不被灯箱放大的时候，变成被七牛裁剪过的图片。即张戈博客提到过的：“那么读者打开文章页面时，浏览器只会加载这个300px的img中图，而用户如果想看清楚图片时，就会点击图片放大，这时候才会加载最清晰的完整图片！要知道，并不是每个读者都会想去看图片的！所以，暗箱放大功能可以变相的加快页面加载速度！因为你在文章中插入的是小体积的中等图，只有点击放大才会加载大图。”因为先森用的不是WordPress自带的编辑器已经早早的用上了百度UEditor编辑器，所以不能像张戈说的那样，在编辑的时候插图选择插中等大小的图，所以先森就得从百度UEditor编辑器这里下手了。关于WordPress百度UEditor编辑器的更多文章，大家可以看这些：百度UEditor编辑器插件1.4.3.1 For WordPress解决百度UEditor编辑器上传的图片无法被七牛CDN自动缓存问题解决使用百度UEditor编辑器后移动端图片被拉伸问题此次先森想要达到的目的，是图片从百度UEditor编辑器上传后，自动带上已经准备好的七牛裁剪代码：?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10这段代码会将图片裁剪为宽度500px，高度自适应，并带上先森设置的水印。先森本来想像“解决百度UEditor编辑器上传的图片无法被七牛CDN自动缓存问题”一文中的方法一样，修改/wp-content/plugins/ueditor/ueditor/php文件夹中的config.json文件。但先森无奈的发现，这里只能修改链接前缀，不能添加后缀，所以还需另寻他法了。先森又想起“解决使用百度UEditor编辑器后移动端图片被拉伸问题”一文中解决问题的方法，是注释了/wp-content/plugins/ueditor/ueditor/dialogs/image中image.js文件里的一段代码，这段代码是输出通过百度UEditor编辑器设置的图片的高宽，这导致了移动端图片被拉伸。这段代码附件的代码是以下内容：getInsertList: function () {            var data = this.getData();            if(data['url']) {         return [{                    src: data['url'],                    _src: data['url'],                    width: data['width'] || '',                    height: data['height'] || '',                    border: data['border'] || '',                    floatStyle: data['align'] || '',                    vspace: data['vhSpace'] || '',                    title: data['title'] || '',                    alt: data['title'] || '',                    /* style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"*/                }];            } else {                return [];            }        }这里的代码，是控制输出通过UEditor编辑器修改过的图片属性。先森看到了上面的“src: data['url'],”部分，再看到下面的被注释部分，照葫芦画瓢的修改了一下上面的代码：getInsertList: function () {            var data = this.getData();            if(data['url']) {         return [{                    src: data['url']+"?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10",                    _src: data['url']+"?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10",                    width: data['width'] || '',                    height: data['height'] || '',                    border: data['border'] || '',                    floatStyle: data['align'] || '',                    vspace: data['vhSpace'] || '',                    title: data['title'] || '',                    alt: data['title'] || '',                    /* style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"*/                }];            } else {                return [];            }        }就这样，删除浏览器缓存后再到后台尝试插入图片，结果没看到有添加成功，就以为是失败了。但后面想明白了，上面的代码控制的是输出通过UEditor编辑器修改后的数据。点击图片-修改，随便做个修改，再看代码，OK。图片链接后面添加上了七牛的裁剪代码。后来又操作了几下，发现高兴的太早。当你每次修改图片信息时，UEditor编辑器都会给你加一次七牛裁剪代码。这才明白，这里有个循环。通过设置变量“i=0”，结尾让“i++”，判断“if（i==0）”后发现，UEditor编辑器不仅仅是这一段代码循环，而是每次打开图片修改框，都会重新调用一次image.js。七牛裁剪代码产生了重复知道了问题所在就简单了，用JavaScript的indexOf()函数，判断指定的字符串值中是否存在于字符串中。关于这个函数的用法，可以参考：W3School：JavaScript indexOf() 方法明白了indexOf()函数的用法之后，先森对上面的代码做了如下调整：        getInsertList: function () {            var data = this.getData(); var abcd=data['url']; if (abcd.indexOf("/10/dy/10")<0){ data['url']=data['url']+"?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10";}            if(data['url']) { return [{                    src: data['url'],                    _src: data['url'],                    width: data['width'] || '',                    height: data['height'] || '',                    border: data['border'] || '',                    floatStyle: data['align'] || '',                    vspace: data['vhSpace'] || '',                    title: data['title'] || '',                    alt: data['title'] || '',                    /* style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"*/                }];            } else {                return [];            }        }然后经过测试，发现可行。上传图片后，打开图片的修改，做任意修改操作后会增加七牛裁剪代码，且不会重复。并且先森特意去服务器上查看了下图片上传的文件夹，发现这样操作代码并不会造成图片的二次上传。先森用测试文章插入图片，对图片的大小进行了对比：网页图片大小对比上图中，上面部分是在电脑上看到的图片原图信息，下面部分是网页中图片的信息。对比发现，原图大小是63.8KB，而经过七牛裁剪之后，图片大小减少到了35.1KB，几乎减少了一半，效果是非常明显的。但这样还是没有达到先森预期的效果，那就是点击图片会加载出原图大小。而这样操作之后，打开的图片还是被七牛裁剪过的。这算是一个小小的遗憾了，先森会再想办法解决。经过半天的研究，先森通过修改知更鸟鸟叔的代码，终于实现先森想要达到的效果：不点击图片的时候，显示被七牛裁剪成固定500px宽度的图片，点击后，显示七牛不裁剪但带了水印的图片。<script type="text/javascript">$(function() { $('#newsContent img').each(function(i){ if (! this.parentNode.href) {var imgsrc = this.src  //需要设置新的变量，不设置的话，会使不点击的图片链接也跟着改变if (imgsrc.indexOf("?") != -1){imgsrc=imgsrc.replace(/[^\?]*$/, "imageView2/1/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/5/dy/5");//替换问号后面的内容为新的内容} $(this).wrap("<a href='"+imgsrc+"' class='highslide-image' onclick='return hs.expand(this);'></a>"); } });});</script>用上面的代码替换鸟叔的代码即可达到目标。这里用的是replace()函数。这个函数的语法是:stringObject.replace(regexp/substr,replacement)要使用先森上面的代码达到七牛裁剪的效果，自己在七牛中设置好数据处理的样式后，替换先森的replacement段数据即可。

Auto Highslide插件是先森用的灯箱插件，也就是文章中的图片可以点击放大，并且文章中的所有图片可以像幻灯片一样左右切换查看。安装Auto Highslide插件后，鼠标放在文章的图片中，鼠标图案会变成放大镜，提示可以放大。发大这个在实际应用中很有用。这个插件的设定是，点击图片放大，放大会放大到适应屏幕的大小，如果查看最大化（实际大小），需要点击按钮或者快捷键“F”键：Auto Highslide插件查看实际大小认识这个插件，先森也是在免费资源部落看到的。搜了一下，在WordPress插件库里搜索，好像搜不到Auto Highslide插件，所以要看详细介绍或下载的，可以去免费资源部落看看：免费资源部落：WordPress博客网站文章图片美化技巧:放大、幻灯片播放本文记录的是先森将Auto Highslide插件变成主题自带，也就是代码化的折腾过程。各个WordPress的先辈们都在说，WordPress的插件过多，会影响网站的响应速度，所以插件是装的越少越好。当然，这也不是绝对，要看自己的优化。先森最近想实现的是让灯箱能够配合上七牛的图片处理。目标有两个：1.图片加上水印；2.没放大之前，图片是被七牛裁剪成宽度500px的，点击图片后显示原图。但是先森思考了很久，也没有想出能够同时实现两个目标的方法。因为先森的WordPress后台文章编辑是用的百度UEditor编辑器，所以不能像WordPress自带的编辑器插入图片时选择切好的大中小三种图片大小。这就需要七牛、百度UEditor编辑器、Auto Highslide插件三方的协调，所以先森有点脑子不够用。虽然没有想出怎么解决，但是却顺便把Auto Highslide插件代码化给解决了。将服务器中的Auto Highslide插件文件夹下载下来，打开“auto-highslide.php”文件。找到文章中的以下代码：'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide已用有3段以上代码，分别在第23、24、27行，将以上代码全部替换成以下代码：'.get_bloginfo('template_directory').'插件的代码也就修改完了，非常简单。接下来现将修改好的“auto-highslide.php”文件，与插件文件夹中的“highslide”文件夹上传到你的主题文件夹中。当然，仅仅如此还没有生效，还需要在你的主题functions.php中添加下面的代码：//灯箱插件代码化include("auto-highslide.php");这就完工了。设置之前先森将插件停用了，看了一下图片放大失效了。设置完后再检查，OK，放大效果又回来了。下面就可以放心的把插件删除啦：删除Auto Highslide插件重要补丁要使Auto Highslide插件生效，还需要在日志中插入图片时，选择链接到媒体文件，如果不设置的话，图片暗箱效果就无法生效。但每次都点击设置的话，会比较麻烦。如果发布了很多文章之后，才开始启用灯箱，如果还要将发布过的文章重新设置图片，那就更麻烦了。所以感谢知更鸟博客鸟哥，教了大家一种补救方法，大家可以去原文看看：知更鸟博客：为WordPress文章图片自动添加链接到原图方法其实也很简单，将下面的JS代码到主题header.php模版文件中：<script type="text/javascript">$(function() { $('#newsContent img').each(function(i){ if (! this.parentNode.href) { $(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>"); } });});</script>该脚本会检查文章中的图片是否包含了链接，如果没有，会自动为图片添加链接到原图。修改其中的 #newsContent 为你主题正文的CSS类。如果你的主题未加载jquery.js库文件，代码将无效，可以将这句代码加到上面<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

最近开始工作了，但是工作目前比较闲，所以又开始研究WordPress了。目前本站的所有文章列表中，只有标签页设置了缩略图，但是本站的缩略图一直是先森心中的一个心病，因为觉得没有做好。比如，有些图片比较宽，就会导致缩略图的下半部分是空的，就像下面这样：缩略图过宽导致下半部分为空所以，先森就想对这种情况做一个优化。当前想到的优化方法有两种，一种是先森的友链kouss博客中的“用CSS3使图片在容器内垂直水平居中”提到的CSS优化方法。第二种是著名博客我爱水煮鱼提到的七牛云储存插件中带的日志说略图功能。CSS优化方法尝试首先进行了比较简单的尝试，通过修改CSS来改良。这个简单，不用修改文件，直接审查元素就可以测试了。这种方法是：div容器的css样式width: 80px;height: 80px;overflow: hidden;img标签的css样式width: auto;height: auto;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);下面做一个对比：CSS修改之前的效果CSS修改之后的效果通过对比可以看到，虽然修改CSS之后，缩略图不会留空了，但是却显得很随意，没有显示出想要的部分，所以也有些不尽人意。当然，先森是直接按照上面的代码改的，如果修改下CSS代码，肯定可以让效果更好，但是今天不想调试CSS代码，以后有空再研究。七牛缩略图方法尝试这种方法来自我爱水煮鱼博客中的“七牛镜像存储 WordPress 插件：一键实现 WordPress 博客静态文件 CDN 加速”一文，其中提到了七牛云储存插件中wpjam_post_thumbnail 函数帮你通过使用七牛的缩略图 API 直接生成缩略图的方法：<?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，则只是按照最大边进行缩放，不进行裁剪。上面的代码放的位置是你放he_post_thumbnail()函数的位置。这个函数会调用你为文章设置的缩略图，当你没有设置缩略图的时候，会调用文章的第一张图片。这个功能在发布文章的时候比较新颖（2013年），但到了现在就有点不够用了。先森对这种方式进行了一波尝试，来看看效果：使用七牛云储存插件的函数之后图片出现了拉伸当文章内没有插入图片时通过上面两图，可以看到，使用七牛云储存插件的函数之后，图片出现了拉伸的问题。以及，当图片内没有图片时，就会显示空白。因此也让先森不满意，但当先森要放弃时，又想起七牛本身提供的图片处理——裁剪。虽然并不能达到想要的目标，但是裁剪之后却可以加快网页的加载速度。七牛裁剪功能的应用进入七牛网站，选择空间后点进数据处理，点击“新建图片样式”：七牛-新建图片样式点击后，进行设置。本站的缩略图是240*160的，所以只需要设置下宽高就行了：七牛-设置处理缩放方式设置好之后点击完成，会出现下面的结果：裁剪设置成功后的结果关于设置成功后要如何使用，很简单，在图片链接后面加上一个问号，再加上上图中红框中的内容即可。如：http://img.capjsj.cn/ueditor/php/upload/image/20150831/1441015508862148.jpg?imageView2/1/w/240/h/160/q/75再来检查一下有没有得到优化：使用七牛裁剪之前使用七牛裁剪之后可以看到的是，原本的缩略图只是将图片缩小了而图片的尺寸没有更改，共61.2KB。使用七牛裁剪之后，图片的尺寸变成了240*160，大小也缩减至12.1KB。值得一提的是，本站缩略图使用的是博客WordPress大学中“WORDPRESS添加相关文章功能（标题/缩略图样式）”一文输出缩略图地址的代码：//添加特色缩略图支持if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails'); //输出缩略图地址 From wpdaxue.comfunction 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;}以上代码放置于主题中functions.php中。调用的时候是直接使用函数post_thumbnail_src()，所以本站在缩略图中添加七牛裁剪的方式就是之间在函数后面加裁剪代码即可：<img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/240/h/160/q/75" alt="<?php the_title(); ?>" />本文就算是对今天的鼓捣做一个记录，若能帮到大家那也是极好的。