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

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

七牛步骤

先注册七牛帐号,并在账户里面充值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、先在对象存储更多操作中的样式分隔符设置进行设置,详见下图,大家可以根据自己的喜欢的符号进行设置。

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

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

缩略图

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

图片水印

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

七牛拉取网站图片

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

  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 = '//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');

总结

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

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:29   其中:访客  23   博主  6

  1. avatar 野人摊影视分享 3

    comments-ajax-qt.js 修改了这个文件才生效了

  2. avatar 野人摊影视分享 3

    对于问题二无法评论问题的解决方法: 修改评论comments-ajax.js即可 修改了还是无法评论,不知道怎么回事

  3. avatar 热词网 1

    请问方法适用于zblogphp吗?

  4. avatar 成航先森 5

    原来真的是你的,哈哈哈~

  5. avatar 花色伊人 0

    博主可以写个详细的教程么,第一次做的不太懂 :cry:

    • avatar 小C

      @花色伊人 跟着一步一步走下来就行了,如果实在不懂可以加群247482771远程亲自指导!

  6. avatar Koolight 5

    如果需要把根目录的图片也拉到七牛,该怎么设置呢?

    • avatar 小C

      @Koolight 直接用七牛的地址获取网站根目录的文件就可以了!

  7. avatar 米粒博客 4

    都闲置了!

  8. avatar 昊宇自动化设备 3

    来访,欢迎回访!

  9. avatar 热腾网 5

    我的站的七牛CDN出现异常,现在切换到了测试域名。

  10. avatar 个人博客 4

    没有用七牛、内容太少

  11. avatar 真我风采 4

    刚用七牛,没有折腾这么细,只是用它作为图片缓存。加载速度确实快了不少。

  12. avatar 懿古今 5

    我平时就是把图片放在七牛,加一个二级域名,其他的都懒得设置

  13. avatar 野人摊影视分享 3

    那怪昨天来访贵校发现有啥不一样,原来加了水印

  14. avatar 子辰博客 2

    get
    谢谢大大分享!!!

  15. avatar 蒸汽回收机 2

    谢谢博主分享,我第一次知道七牛呢

  16. avatar 纯洁博客 5

    我没有用七牛,可能就是这样网站卡的很

  17. avatar themebetter 3

    贵站已添加到themebetter.com博客导航,期待博主分享更多精彩内容。

  18. avatar 成航先森 5

    最近没空,过来看看

  19. avatar 热腾网 5

    怕镜像??屏蔽七牛抓取就行了。

  20. avatar 免费小说在线阅读 1

    值得一试,感谢博主分享

  21. avatar Koolight 5

    博主太牛了,省去哪个笨重臃肿的插件,还集成了水印功能,重点是水印链接竟然可以如此轻巧!哎呀呀,可惜博主是个男的,不然我就去找你了!

  22. avatar Koolight 5

    试一试~

  23. avatar zhonhaolin 1

    博主折腾的可以啊!我以前也折腾主题来着,挺好玩的。

    • avatar 小C

      @zhonhaolin 在折腾中成长!折腾也是一种乐趣!

评论加载中...