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

投稿  小C博客 2016-07-12 07:26 阅读 595 次 评论 37 条

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

七牛步骤

先注册七牛帐号,并在账户里面充值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');

总结

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

文章标签: ,   ,   ,  
原文地址:http://www.mxiaoc.com/1105.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 小C博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana

发表评论


表情

  1. Amals
    Amals 【镇长】 @回复

    七牛没怎么用过

  2. 易淘金股票博客
    易淘金股票博客 【县长】 @回复

    谢谢分享好文章!!!!!

  3. 明月登楼的博客
    明月登楼的博客 【总理】 @回复

    Robots借用了!呵呵!

  4. 本质游戏
    本质游戏 【村长】 @回复

    感觉没什么用。

  5. 后知后觉
    后知后觉 【农民】 @回复

    张戈的七牛代码不太完善,会导致无法显示缩略图的

  6. 内涵客栈
    内涵客栈 【县长】 @回复

    七牛太强大了,神器

  7. 半夏
    半夏 【村长】 @回复

    打打酱油

  8. benen005
    benen005 【县长】 @回复

    确实不错

  9. 龙砚庭
    龙砚庭 【市长】 @回复

    难怪眼熟,前几天在小c那里见过。

    • boke112导航
      boke112导航【站长】2016-07-12 21:39  回复

      @龙砚庭[呲牙] 投稿文章都是这样,就算是自己原创也不敢保证网上只有自己这一篇文章

  10. 微笔记_博客
    微笔记_博客 【农民】 @回复

    七牛的新手路过,mark

  11. 夏日博客
    夏日博客 【县长】 @回复

    七牛的还行了,不少站长都在用,貌似以前的时候是免费的。

  12. 森纯博客
    森纯博客 【县长】 @回复

    希望柯好

  13. 铁床
    铁床 【村长】 @回复

    我一直都是用七牛的,通过插件实现的,emlog如何代码实现呢?

  14. 明月登楼的博客
    明月登楼的博客 【总理】 @回复

    曾经用过七牛,后来不敢用了!并不是很稳定的!

  15. 片段艺文志
    片段艺文志 【村长】 @回复

    很实用的教程,或许真该卸载七牛插件了!

  16. 我爱动感单车网
    我爱动感单车网 【省长】 @回复

    [微笑] 我是从来还没用过七牛家的任何东西,一是因为不怎么会整这些,二嘛自己比较懒。

  17. 静松太极拳
    静松太极拳 【市长】 @回复

    这个很有用 收存 以后要用到了 见太难 得慢慢搞才行

  18. 爱时尚
    爱时尚 【省长】 @回复

    我发现我网站的文章,图片被人盗了,加水印还是有必要的

  19. 2016年最新电影资源欢迎点击
    2016年最新电影资源欢迎点击 【农民】 @回复

    对哈,可能我需要?

  20. 夏天烤洋芋
    夏天烤洋芋 【县长】 @回复

    可能我的电影站会需要吧?

  21. 香港恒创主机终身8折
    香港恒创主机终身8折 【省长】 @回复

    好的代码书写 是博客速度飞起来

  22. 你懂的电影
    你懂的电影 【省长】 @回复

    这个知识点很重要

  23. 真我风采
    真我风采 【县长】 @回复

    充值10元不行,貌似要10元以上,这是个坑,我最后无奈充值了11元。结果最后发现,不充值也可以用,而且我只用来放图片。最后钱只能放里面,搞不出来了。

  24. 演绎法
    演绎法 【县长】 @回复

    不用这个呢

  25. diouna
    diouna 【农民】 @回复

    你的博客确实好,三天不来受不了!

  26. Koolight
    Koolight 【省长】 @回复

    已作七牛处理。