Young87

当前位置：首页 >个人收藏

WordPress纯代码纯静态开启七牛CDN并集成七牛缩略图和水印功能

日期： 2016-08-03    分类： 个人收藏 309次阅读

最近发现好多网站都使用了动静分离，我就研究了下使用七牛缓存图片，并使用七牛图片样式对图片进行缩略和加水印。

七牛步骤

先注册七牛帐号，并在账户里面充值10元钱，用于使用七牛的CDN功能，先添加资源中的对象存储并在镜像存储中添加镜像源，添加完之后绑定你的二级域名，稍等下你会看到域名信息中一个CNAME，这时你将CNAME解析到你的域名中，这完成了第一步。

PS：这里就不详细介绍了，不懂下面留言。

添加Robots

Robots存放在对象存储中的内容管理中，下载下来并更改上传。下面是我自己的Robtos，大家根据自己的情况自行修改。

  1. User-agent: *
  2. Allow: /robots.txt
  3. Allow: /*.ico$
  4. Allow: /*.png$
  5. Allow: /*.jpg$
  6. Allow: /*.jpeg$
  7. Allow: /*.gif$
  8. Allow: /*.bmp$
  9. Allow: /wp-content/
  10. Disallow: /

集成七牛缩略图和水印

1、先在对象存储更多操作中的样式分隔符设置进行设置，详见下图，大家可以根据自己的喜欢的符号进行设置。

WordPress用代码纯静态开启七牛CDN并集成七牛缩略图和水印功能

2、设置完样式分割符之后设置图片样式，新建图片样式，设置图片缩略图和图片水印功能，详见下图！

WordPress用代码纯静态开启七牛CDN并集成七牛缩略图和水印功能 第2张

七牛缩略图设置

WordPress用代码纯静态开启七牛CDN并集成七牛缩略图和水印功能 第3张

七牛图片水印设置

七牛拉取网站图片

今天的重头戏来了，使用代码从网站服务器拉取图片到七牛云存储，这点代码我是从张戈哪拿来的，进行了简单的修改。

  1. //使用七牛拉取网站图片
  2. function QiNiuCDN(){
  3.     function Rewrite_URI($html){
  4.         /* 前面是需要用到七牛的域名,后面是需要加速的静态文件类型，使用分隔符 | 隔开即可 */
  5.         $pattern = '/http:\/\/(www\.|)mxiaoc\.com\/wp-([^"\']*?)\.(js|css|jpg|gif|png|jpeg|bmp|ico)/i';
  6.         /* 七牛CDN空间地址,请自行替换成实际空间地址 */
  7.         $replacement = 'http://static.www.mxiaoc.com/wp-$2.$3';
  8.         $html = preg_replace($pattern, $replacement, $html);
  9.         return $html;
  10.     }
  11.     if(!is_admin()){
  12.         ob_start("Rewrite_URI");
  13.     }
  14. }
  15. add_action('init', 'QiNiuCDN');

将上面的代码放到主题根目录下的functions.php中即可。注意改为自己的域名！

集成七牛缩略图和水印代码

集成七牛的缩略图和水印代码需要用到七牛的样式在前面已经介绍了怎么创建样式就不说了，不懂的看前面的，也可以问小C。

  1. //七牛缩略图和水印
  2. add_filter('the_content', 'QiNiuThumbnailWatermark');
  3. function QiNiuThumbnailWatermark($content) {
  4.    global $post;
  5.    $pattern ="/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
  6.    /* 下面这行代码中的ThumbnailsWatermark是七牛样式中的样式名称而斜杠为七牛中设置的样式分割符 */
  7.    $replacement = '<img$1src=$2$3.$4/ThumbnailsWatermark$5$6>';
  8.    $content = preg_replace($pattern, $replacement, $content);
  9.    return $content;
  10. }

将上面的代码放到主题根目录下的functions.php中即可。注意将ThumbnailsWatermark改为自己的样式名称还有自己设置的分割符。

设置图片默认尺寸属性

设置图片的默认尺寸属性大家可以根据自己的情况自行修改！

  1. //设置图片默认尺寸属性
  2. add_filter('the_content', 'removeimg_size');
  3. function removeimg_size($content) {
  4.     global $post;
  5.     //去掉srcset属性
  6.     $content = preg_replace("/srcset=('|\")(.*?)('|\")/i", '', $content);
  7.     //设置图片默认尺寸属性
  8.     $content = preg_replace('/<img(.*?)width="(.*?)" height="(.*?)"(.*?)>/i', '<img$1width="auto" height="auto"$4>', $content);
  9.     return $content;
  10. }

将上面的代码放到主题根目录下的functions.php中即可。

开启七牛后遇到的问题

1、开启七牛后你的网站被七牛镜像了，访问七牛域名你发现是你自己的网站。

2、开启七牛后你的网站无法评论。

关于问题一七牛镜像的解决办法就是通过js跳转方式进行跳转到自己的网站。

先找到你网站的head中的部分代码，加上如下js代码即可，以下代码取至张戈博客。不懂的可以下面留言！

  1. <script type="text/javascript">
  2. /* 如果浏览器域名不是www.mxiaoc.com将跳转到www.mxiaoc.com对应的页面*/
  3. if (document.location.host != "www.mxiaoc.com") {
  4.     location.href = location.href.replace(document.location.host,'www.mxiaoc.com');
  5. }
  6. </script>

对于问题二无法评论问题的解决方法：

修改评论comments-ajax.js即可

  1. var i = 0, got = -1, len = document.getElementsByTagName('script').length;
  2. while ( i <= len && got == -1){
  3.     var js_url = document.getElementsByTagName('script')[i].src,
  4.             got = js_url.indexOf('comments-ajax.js'); i++ ;
  5. }
  6. /** 解决七牛评论出错的问题 */
  7. js_url = js_url.replace('static.www.mxiaoc.com','www.mxiaoc.com');

总结

七牛的使用今天就介绍到这里，也许不是很详细，但是大家应该都能看懂，如果不懂的可以下方留言。

除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog

标签：wordpress wordpress 七牛 图片 存储 缓存

上一篇： shell脚本的几种不同执行方式的区别实验

下一篇： 如何让网站在360搜索结果中显示“官网”标志？

精华推荐