Zhang Ge's blog shared a tutorial on opening Nginx thumbnails for WordPress before, which is really good! But I always feel that the clarity is not flattering. Even if the cutting quality is adjusted to 90, the distortion is still serious, so I want to find another way.
When I remembered helping a webmaster with CC defense, I found that even if his website was purely static, the CPU was still soaring when attacked. Finally, the analysis of the request log shows that all the pressure comes from the PHP thumbnail function of the website. Although the PHP thumbnail can cache the real-time generated image into a file, PHP still needs to make some simple judgments when requested for the second time, such as whether the thumbnail is cached, whether the cache file is expired, etc. With massive IP requests, these simple PHP dynamic judgments have become a major procrastinator!
It is not difficult to understand why the php cache mode of WP Super Cache is slower than the Mod_Rewrite mode! So, Static cache In the end, we must completely abandon any simple calculation to be considered as incisive!
Well, it's a bit far. Although this webmaster classmate later abandoned the PHP thumbnail function, Zhang Ge has a deep memory. When the Nginx thumbnail failed, I thought of it the first time.
This is a big procrastinator when there are too many visitors, but what if I try to get rid of PHP dynamic judgment? Naturally, it can be brought into full play!
Let's briefly share Zhang Ge's approach.
1、 Accelerate thinking
I followed the path (the former webmaster friend used the Wdone theme of Advocate), and naturally found the way to use this PHP thumbnail in Advocate:
<img src=" http://timthumb Directory/timthumb.php? Src=picture address&h=picture height&w=picture width&zc=1 "class=" thumb "/>
It can be seen that there must be dynamic judgment for this parameter transfer, so to make it completely static, I first need to modify the thumbnail form.
It's very simple. Continue the Nginx thumbnail idea shared before, change the above url to the mode with parameters at the end of the image address, and then rewrite it to the above form in a pseudo static manner. Finally, realize pure Nginx Static cache 。
2、 Deployment method
① PHP code
The copyright of the downloaded content provided by this site belongs to this site. Reprint must Indicate the source!
*The copyright of articles marked with "reprint" belongs to the original author.
After downloading, unzip to get thumb Folder, edit timthumb-config.php , modify according to the note (optional).
Then upload the entire folder to the root directory of the website url The form must be able to see the thumbnail.
② Nginx rules
Step ① After you can see the thumbnail effect normally, we will deploy Nginx rules.
Insert the following rules into the original Nginx rules of the website:
#Nginx Rewrite PHP Thumbnail URL Rules By Zhang Ge Blog location ~ .*\. (gif|jpg|jpeg|png|bmp)$ { set $width ''; set $height ''; set $width $arg_w; set $height $arg_h; #As long as the picture has a width (? W=) or height (? H=) parameter, the access will be rewritten to/thumb/? Src=* on the interface generated by this dynamic thumbnail if ( $width != '' ) { rewrite ^(.*)$ /thumb/? src=http://$host/$1 last; } if ( $height != '' ) { rewrite ^(.*)$ /thumb/? src=http://$host/$1 last; } expires max; }
This only rewrites the URL form of thumbnails. If you need to enable caching, you need to use Nginx's fastcgi cache. For unfamiliar friends, please refer to the sharing before Zhang Ge's blog:
《 Nginx enables fastcgi_cache cache acceleration and supports html pseudo static pages 》
Deploy according to the previous article fastcgi After caching rules, this thumbnail will be Nginx Cached (HIT from yourdomain. com can be seen by viewing the network header information in F12 developer mode), and the loading speed will naturally come up!
3、 Theme modification
After the above operations, we only have this thumbnail function, but when it is applied to blog posts, we can't manually input the size of pictures one by one, can we? And there are a bunch of old articles that can't be manually revised, right?
The actual solution is simple, please refer to the following code:
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; }
Modification principle:
① . Change the image with size in the old article to the full image path. I used to use 300 size image thumbnails, so here we need to remove all 300 height or width images and change them to full size image paths;
② Finally, all the image paths in the article should be marked with the size rules suitable for sharing in this article. For example, what is the above code? W=480, that is, the size of the picture thumbnail is uniformly changed to 480px.
Well, just share so much. If you need it, please refer to the above code. You can add it to the topic functions.php after modifying it according to the actual situation to perfectly realize the article thumbnail.
