专栏首页张戈的专栏WordPress集成PHP缩略图,并开启Nginx缓存的方法

WordPress集成PHP缩略图,并开启Nginx缓存的方法

之前张戈博客分享过一篇给 WordPress 开启 Nginx 缩略图的教程,用着确实不错!但是总感觉清晰度不敢恭维,就算将裁剪质量调到 90 依然失真严重,于是想另辟蹊径。

想起之前帮一个站长做 CC 防御的时候,发现他的网站就算被纯静态化,被攻击时 CPU 依然狂飙。最后分析请求日志发现,所有的压力来自网站的 PHP 缩略图功能。这个 PHP 缩略图虽然可以将实时生成的图片缓存成文件,但是第二次被请求,PHP 依然需要进行一些很简单的判断,比如这个缩略图是否被缓存、缓存文件是否过期等。在海量 IP 的请求下,这些简单的 PHP 动态判断就成为了拖沓大户了!

这也就不难理解 WP-Super-Cache 的 php 缓存模式比 Mod_Rewrite 模式要慢的原因了!所以,静态缓存最终都要完全抛弃掉任何简单计算才能算是淋漓尽致!

好了,扯得有点远了。虽然这位站长同学后来抛弃了这个 PHP 缩略图功能,但是张戈却记忆深刻。当  Nginx 缩略图不给力时,我第一时间就想到了它。

这玩意在访问量过大时是个拖沓大户,但如果我想办法去掉其中的 PHP 动态判断呢?自然就能发挥到淋漓尽致了!

下面简单分享下张戈的做法。

一、加速思路

我顺藤摸瓜(之前那位站长朋友用的就是倡萌的 Wdone 主题),自然就在倡萌那找到了这个 PHP 缩略图的使用方法:

<img src="http://timthumb所在目录/timthumb.php?src=图片地址&h=图片高度&w=图片宽度&zc=1" class="thumb" />

可以看到,这种传参肯定是存在动态判断的,所以要完全静态化,我首先就要修改这个缩略图形式。

很简单,延续之前分享的 Nginx 缩略图思路,把上面的 url 改成在图片地址最后带参数的模式,然后伪静态重写为上面的形式,最后通过 Nginx 实现纯静态缓存。

二、部署方法

①、PHP 代码

下载地址

下载后解压得到 thumb 文件夹,编辑里面的 timthumb-config.php,按照注释修改下(可选)。

然后将整个文件夹上传到网站根目录,现在按照倡萌给出的 url 形式肯定就可以看到缩略图了。

②、Nginx 规则

第①步能够正常看到缩略图效果后,我们接着部署 Nginx 规则。

在网站原有的 Nginx 规则中插入如下规则:

#Nginx重写PHP缩略图URL规则 By 张戈博客
location ~ .*\.(gif|jpg|jpeg|png|bmp)$ {
      set $width '';
      set $height '';
      set $width $arg_w;
      set $height $arg_h;
      #只要图片带上宽度(?w=)或高度(?h=)参数,都会将访问重写到/thumb/?src=* 这个动态缩略图生成的接口上
      if ( $width != '' ) {
           rewrite ^(.*)$ /thumb/?src=http://$host/$1 last;
      }
      if ( $height != '' ) {
           rewrite ^(.*)$ /thumb/?src=http://$host/$1 last;
      }
      expires  max;
}

这样还只是重写了缩略图的 URL 形式,如果需要开启缓存,则需要用到 Nginx 的 fastcgi 缓存,还不熟悉的朋友请先参考张戈博客之前的分享:

Nginx 开启 fastcgi_cache 缓存加速,支持 html 伪静态页面

按照之前的文章部署 fastcgi 缓存规则后,这个缩略图就被 Nginx 缓存了(在 F12 开发者模式中查看 network 头部信息即可看到 HIT from yourdomain.com),加载速度自然也就上来了!

三、主题修改

做完上述操作之后,还只是具备了这个缩略图功能,而实际应用到博客文章,总不能手工一个一个输入图片带上尺寸吧?而且还有一堆老文章也不可能人工修改一遍吧?

实际解决很简单,请参考如下代码:

add_filter ('the_content', 'content_thumbnail');
function content_thumbnail($content) {
        global $post;
        $pattern1 ="/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\") alt=\"(.*?)\"(.*?)>/i";
        $pattern2 ="/<img(.*?)src=('|\")(.*?)-300x(\d+?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
        $pattern3 ="/<img(.*?)src=('|\")(.*?)-(\d+?)x300.(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
        $replacement = '<img$1src=$2$3.$5$6$7>';
        $replacement2 = '<img$1src=$2$3.$4?w=480$5 alt="'.$post->post_title.'" tilte="'.$post->post_title.'"$7>';
        $content = preg_replace($pattern2, $replacement, $content);
        $content = preg_replace($pattern3, $replacement, $content);
        $content = preg_replace($pattern1, $replacement2, $content);
        $content = preg_replace('/<img(.*?)width="(.*?)" height="(.*?)"(.*?)>/i', '<img$1$4>', $content);
	}
	return $content;
}

修改原理:

①、将老文章中带尺寸的图片改成完整图片路径,我之前用的是 300 大小的图片缩略图,所以这里需要将高或宽 300 的全部去掉,变成完整尺寸图片路径;

②、最后将文章中所有图片路径上带上适合本文分享的尺寸规则,比如上述代码是?w=480,即图片缩略图统一改为 480px 大小。

好了,就分享这么多,有需求的朋友可以参考上面的代码,根据实际情况修改后加入到主题 functions.php 即可完美实现文章缩略图了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为WordPress开启Nginx缩略图功能,七牛从此陌路

    张戈博客曾分享过不少关于云存储的一些经验技巧,对七牛感兴趣或者遇到相关问题的朋友可以看一看以前的相关文章: 七牛&又拍云 CDN 云存储节省 GET 次数的小...

    张戈
  • Nginx内容替换模块http_substitutions_filter_module及实用案例分享

    说到 Nginx 的内容替换功能,大部分人应该都听说过 Nginx 内置的的 subs_filter 替换模块,但是这个模块有个缺憾,就是只能替换一次,而且还不...

    张戈
  • Nginx 内容替换模块 http_substitutions_filter_module 及实用案例分享

    说到Nginx的内容替换功能,大部分人应该都听说过Nginx内置的的subs_filter替换模块,但是这个模块有个缺憾,就是只能替换一次,而且还不支持正则表达...

    张戈
  • 为WordPress开启Nginx缩略图功能,七牛从此陌路

    张戈博客曾分享过不少关于云存储的一些经验技巧,对七牛感兴趣或者遇到相关问题的朋友可以看一看以前的相关文章: 七牛&又拍云 CDN 云存储节省 GET 次数的小...

    张戈
  • 浙大版《C语言程序设计(第3版)》题目集 习题6-8 统计一行文本的单词个数

    本题目要求编写程序统计一行字符中单词的个数。所谓“单词”是指连续不含空格的字符串,各单词之间用空格分隔,空格数可以是多个。

    C you again 的博客
  • Linux 宝塔面板免费版开启 waf 防火墙的方法

    宝塔面板在 6.x 之前的版本中自带了 Nginx 防火墙功能(Nginx管理 > 过滤器),到了 6.x 之后,,,为了推行收费版的防火墙插件,宝塔官方把这个...

    周俊辉
  • 空间转录组学(Spatial Transcriptomics)

    前面给大家简单的科普了空间转录组,可能还是有些人对背后的技术原理有些疑惑,那么我们深入的探讨一下技术原理。文末有视频会更直观。

    生信交流平台
  • VBA对象变量

    大家好,前面介绍了vba中两个主要的对象,单元格range对象和工作表worksheet对象,以及它们的属性和方法。

    无言之月
  • 判断是否为回文

    //判断是否为回文——判断用户输入的字符串是否为回文。回文是指正反拼写形式都是一样的词,譬如“racecar”。 #define _CRT_SECURE_NO_...

    _gongluck
  • 013. 罗马数字转整数 | Leetcode题解

    罗马数字包含以下七种字符: I , V , X , L , C , D 和 M 。

    苏南

扫码关注云+社区

领取腾讯云代金券