WordPress纯代码开启七牛CDN静态文件及Gravatar头像加速并集成七牛缩略图水印功能

  • A+
所属分类:WordPress 优化

昨天有网友留言提到七牛问题,碰巧博客上线一周年之际,便更新技术教程,作为回馈。

WordPress纯代码开启七牛CDN静态文件及Gravatar头像加速并集成七牛缩略图水印功能

网上七牛教程已经很全面了,但都比较分散,所以这里集中一下,将代码版七牛都整理出来!

前言

说到WordPress加速问题,撇开自身条件(服务器)不说,我们说说利用网络资源来为自己的博客加速。其中最显著的就是利用七牛CDN来加速网站静态文件了!

利用七牛实现网站动静分离,首先得注册一个七牛账号。

七牛账号注册:点此注册

注册好账号之后登陆七牛,在主页面选择 > 对象储存 > 立即添加 > 创建空间。

WordPress纯代码开启七牛CDN静态文件及Gravatar头像加速并集成七牛缩略图水印功能

空间创建好之后在镜像存储中设置好自己的域名,确认加速即可!

WordPress纯代码开启七牛CDN静态文件及Gravatar头像加速并集成七牛缩略图水印功能

将七牛功能部署到WordPress可以利用《七牛镜像云储存插件》,使用说明作者水煮鱼大神已经说明得很清楚了,这里我们说的是纯代码将七牛功能集成到WordPress!

WordPress开启七牛CDN静态文件

将网站静态文件拉取到七牛空间。

  1. /**
  2.  * 七牛CDN静态文件加速 D9Y.NET整理
  3. **/
  4. define('FocusCDNHost','http://www.d9y.net');//wordpress网站网址
  5. define('FocusCDNRemote','http://static.d9y.net');//cdn域名
  6. define('FocusCDNIncludes','wp-content,wp-includes');//设置加速目录
  7. define('FocusCDNExcludes','.php|.xml|.html|.po|.mo');//设置文件白名单
  8. define('FocusCDNRelative','');//Check this if you want to have links like <wp-content/abc.png> rewritten - i.e. without your blog's domain as prefix.
  9. function do_cdnrewrite_ob_start() {
  10. $rewriter = new FocusCDNRewriteWordpress();
  11. $rewriter->register_as_output_buffer();
  12. }
  13. add_action('template_redirect', 'do_cdnrewrite_ob_start');
  14. class FocusCDNRewriteWordpress extends FocusCDNRewrite
  15. {
  16. function __construct() {
  17. $excl_tmp = FocusCDNExcludes;
  18. $excludes = array_map('trim', explode('|', $excl_tmp));
  19. parent::__construct(
  20. FocusCDNHost,
  21. FocusCDNRemote,
  22. FocusCDNIncludes,
  23. $excludes,
  24. !!FocusCDNRelative
  25. );
  26. }
  27. public function register_as_output_buffer() {
  28. if ($this->blog_url != FocusCDNRemote) {
  29. ob_start(array(&$this, 'rewrite'));
  30. }
  31. }
  32. }
  33. class FocusCDNRewrite {
  34. var $blog_url    = null;
  35. var $cdn_url     = null;
  36. var $include_dirs   = null;
  37. var $excludes    = array();
  38. var $rootrelative   = false;
  39. function __construct($blog_url, $cdn_url, $include_dirs, array $excludes, $root_relative) {
  40. $this->blog_url   = $blog_url;
  41. $this->cdn_url    = $cdn_url;
  42. $this->include_dirs  = $include_dirs;
  43. $this->excludes   = $excludes;
  44. $this->rootrelative  = $root_relative;
  45. }
  46. protected function exclude_single(&$match) {
  47. foreach ($this->excludes as $badword) {
  48. if (stristr($match, $badword) != false) {
  49. return true;
  50. }
  51. }
  52. return false;
  53. }
  54. protected function rewrite_single(&$match) {
  55. if ($this->exclude_single($match[0])) {
  56. return $match[0];
  57. } else {
  58. if (!$this->rootrelative || strstr($match[0], $this->blog_url)) {
  59. return str_replace($this->blog_url, $this->cdn_url, $match[0]);
  60. } else {
  61. return $this->cdn_url . $match[0];
  62. }
  63. }
  64. }
  65. protected function include_dirs_to_pattern() {
  66. $input = explode(',', $this->include_dirs);
  67. if ($this->include_dirs == '' || count($input) < 1) {
  68. return 'wp\-content|wp\-includes';
  69. } else {
  70. return implode('|', array_map('quotemeta', array_map('trim', $input)));
  71. }
  72. }
  73. public function rewrite(&$content) {
  74. $dirs = $this->include_dirs_to_pattern();
  75. $regex = '#(?<=[(\"\'])';
  76. $regex .= $this->rootrelative
  77. ? ('(?:'.quotemeta($this->blog_url).')?')
  78. : quotemeta($this->blog_url);
  79. $regex .'/(?:((?:'.$dirs.')[^\"\')]+)|([^/\"\']+\.[^/\"\')]+))(?=[\"\')])#';
  80. return preg_replace_callback($regex, array(&$this, 'rewrite_single'), $content);
  81. }
  82. }

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

将代码域名与七牛CDN域名替换成自己对应的域名。

当然,还有更简洁的代码可以实现七牛CDN加速功能,比如张戈博客中分享的代码。

  1. //WordPress七牛CDN代码版
  2. function QiNiuCDN(){
  3.     function Rewrite_URI($html){
  4.         /* 前面是需要用到七牛的域名,后面是需要加速的静态文件类型,使用分隔符 | 隔开即可 */
  5.         $pattern ='/http:\/\/(www\.|)d9y\.net\/wp-([^"\']*?)\.(jpg|js|css|gif|png|jpeg)/i';
  6.         /* 七牛CDN空间地址,请自行替换成实际空间地址 */
  7.         $replacement = 'http://static.d9y.net/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');

我用的是上面那段臃肿的代码了,至于用那种代码,那就是仁者见仁智者见智了!

七牛缩略图水印

七牛除了作为图床来为WordPress加速外,还有一个很重要的功能就是缩略图与水印功能!

分隔符设置

WordPress纯代码开启七牛CDN静态文件及Gravatar头像加速并集成七牛缩略图水印功能

缩略图设置

WordPress纯代码开启七牛CDN静态文件及Gravatar头像加速并集成七牛缩略图水印功能

水印设置

WordPress纯代码开启七牛CDN静态文件及Gravatar头像加速并集成七牛缩略图水印功能

七牛缩略图和水印

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

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

注意将/ThumbnailsWatermark改为自己的分隔符和样式名称,斜杠为样式分割符,ThumbnailsWatermark为样式名称。

设置图片默认尺寸属性

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

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

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

七牛加速Gravatar头像

在七牛里新建一个空间,镜像地址填写 gravatar.duoshuo.com

  1. /**
  2.  * 七牛加速Gravatar头像 D9Y.NET整理
  3. **/
  4. function qiniu_get_avatar($avatar) {
  5.     $avatar = str_replace(array("cn.gravatar.com","www.gravatar.com","0.gravatar.com","1.gravatar.com","2.gravatar.com"),"gravatar.d9y.net",$avatar);
  6.     return $avatar;
  7. }
  8. add_filter( 'get_avatar', 'qiniu_get_avatar', 10, 3 );

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

将gravatar.d9y.net替换成自己新建的七牛CDN域名。

解决开启七牛CDN之后评论出错

使用七牛CDN加速之后,发现评论提交提示“{"error":"get from image source failed: E405"}”错误,无法评论。

主要原因是CDN缓存了commonts-ajax.js文件,而commonts-ajax.js中加载的是主题目录的js文件,路径错误,所以导致无法评论。

解决办法,修改主题文件夹里的comments-ajax.js文件。

  1. var i = 0got = -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_urljs_url = js_url.replace('static.d9y.net','www.d9y.net');

添加一行 js_url = js_url.replace('static.d9y.net','www.d9y.net');

将七牛域名与域名地址修改为自己的域名。

防止七牛镜像整站

使用七牛CDN加速之后,发现打开七牛域名,竟和原网站一模一样,就是说,网站被七牛镜像了。

下面提供三种方法来解决网站被镜像问题。

添加Robots

  1. User-agent: *
  2. Disallow: /
  3. User-agent: Googlebot-Image
  4. Allow: /
  5. User-agent: Baiduspider-image
  6. Allow: /
  7. Allow: /robots.txt
  8. Allow: /*.ico$
  9. Allow: /*.png$
  10. Allow: /*.jpg$
  11. Allow: /*.jpeg$
  12. Allow: /*.gif$
  13. Allow: /*.bmp$
  14. Allow: /wp-content/
  15. Disallow: /

将上述代码保存为robots.txt文件上传至七牛空间。

禁止七牛Agent

  1. /**
  2.  * 防七牛镜像 D9Y.NET整理
  3. **/
  4. if( strpos($_SERVER['HTTP_USER_AGENT'],'qiniu-imgstg-spider') !== false) {
  5. header('HTTP/1.1 503 Service Temporarily Unavailable');
  6. echo '防七牛镜像';
  7. exit;
  8. }

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

首页添加JS跳转

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

将上面的代码放到主题根目录下的head.php中适当位置即可。

注意:若是保留注释部分,需将head.php以UTF-8模式保存。

至此,纯代码部署七牛全功能已全部完成。

教程至此结束。

感谢张戈博客、小C博客!

历史上的今天:

  • 我的微信
  • 扫一扫
  • weinxin
  • 我的微信公众号
  • 扫一扫
  • weinxin
avatar

发表评论

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

目前评论:34   其中:访客  34   博主  0

    • avatar酷玩外设0

      博主请问一下 七牛那个自动加水印的代码,我这边加上去之后,不显示水印,但是我在控制台看的时候是有这个样式代码的。把带样式的图片链接打开也是有水印的。去掉$5$6之后水印出来了 但是位置不对

        • avatarKoolight9

          @酷玩外设 七牛后台需要设置水印样式和分隔符的,七牛生效也需要点时间。

        • avatar堆爱博客4

          js跳转添加在哪个标签里面?

            • avatarKoolight9

              @堆爱博客 那个可以添加在主题header.php中。

                • avatar堆爱博客4

                  @Koolight 首页的缩略图和边栏小工具缩略图都不能正常显示了。需要修改哪里的代码?

                    • avatarKoolight9

                      @堆爱博客 应该是主题缩略图裁剪参数php被缓存到七牛了,在七牛拉取的代码里排除.php,我用的比较长的那段代码。

                • avatar堆爱博客4

                  赞一个。

                    • avatarKoolight9

                      @堆爱博客 哈哈,七牛是个好东西!

                      • avatarKoolight9

                        @堆爱博客 评论不上啊,是不是没处理comments-ajax.js文件啊?

                          • avatar堆爱博客4

                            @Koolight 的确是!前两天刚把七牛静态地址换了一下!这个js文件里面的静态地址忘记改了!现在刷新一下缓存就OK了!

                              • avatarKoolight9

                                @堆爱博客 当初我弄七牛也是在这个地方走了很多弯路。

                          • avatarchen1

                            想問問,我使用了後,wordpress 網站 不能調用 js,怎麼處理

                              • avatarKoolight9

                                @chen 代码里面的网站要改为自己的域名,还要区分带不带www的。