纯代码为WordPress压缩前端HTML代码 附BUG修复

王小优
王小优
王小优
231
文章
0
评论
2015年10月9日
评论
4,838 3081字阅读10分16秒

WP-HTML-Compression是WordPress常用的压缩前端代码插件,本文简析纯代码实现WordPress前端代码压缩功能,并指出常见BUG的解决方法。

除了主机的因素之外,一个网站的加载速度还跟前端代码压缩程度有关,如果对前端HTML做压缩优化,可以在一定程度上减小页面大小,提高加载速度。而在WordPress主题中应用最广的应该就是WP-HTML-Compression这个插件或者代码版了。

其原理是删除前端html中空格和制表符等不必须的内容,从而简化代码,你甚至不需要设置什么,只要一段代码就能给WordPress加速。

纯代码为WordPress压缩前端HTML代码 附BUG修复

绝大多数的优质主题都会集成这个代码,今天单独拿出来说,一方面是想帮助没有集成此功能的主题用;另外一方面是想将一些常见好用的WordPress代码单独列出来,也算是稍作研究,会吃鱼也会钓鱼,以便单独写主题模板时按需定制功能。

压缩WordPress前端HTML代码版

  1. /*WordPress前端代码压缩*/  
  2. function wp_compress_html(){  
  3. function wp_compress_html_main ($buffer){  
  4. $initial=strlen($buffer);  
  5. $buffer=explode("<!--wp-compress-html-->", $buffer);  
  6. $countcount=count ($buffer);  
  7. for ($i = 0; $i <= $count; $i++){  
  8. if (stristr($buffer[$i], '<!--wp-compress-html no compression-->')) {  
  9. $buffer[$i]=(str_replace("<!--wp-compress-html no compression-->", " ", $buffer[$i]));  
  10. }  
  11. else {  
  12. $buffer[$i]=(str_replace("\t", " ", $buffer[$i]));  
  13. $buffer[$i]=(str_replace("\n\n", "\n", $buffer[$i]));  
  14. $buffer[$i]=(str_replace("\n", "", $buffer[$i]));  
  15. $buffer[$i]=(str_replace("\r", "", $buffer[$i]));  
  16.    
  17. while (stristr($buffer[$i], ' ')){  
  18. $buffer[$i]=(str_replace(" ", " ", $buffer[$i]));  
  19. }  
  20. }  
  21. $buffer_out.=$buffer[$i];  
  22. }  
  23. $final=strlen($buffer_out);  
  24. $savings=($initial-$final)/$initial*100;  
  25. $savings=round($savings, 2);  
  26. $buffer_out.="\n<!--压缩前的大小: $initial bytes; 压缩后的大小: $final bytes; 节约:$savings% -->";  
  27. return $buffer_out;  
  28. }  
  29.    
  30. ob_start("wp_compress_html_main");  
  31. }  
  32.    
  33. add_action('get_header', 'wp_compress_html');  

使用方法很简单,只需要将上述代码添加到WordPress主题目录的function.php文件中,即最后一个?>之前即可。

但我个人比较习惯将代码量较大的功能单独出来,做一个文件,然后在function.php文件中引入,如将上述代码新建一个wp-html-compression.php文件,放在主题include文件夹中,在function.php文件中引入:

  1. include (TEMPLATEPATH . '/includes/wp-html-compression.php');  

这样做的好处就是可以更高效的维护代码,同时也可以在主题后台很轻松的定制要不要启用前台代码压缩功能,当然多了一次引入会在效率上有一点点影响,不过function.php文件里的代码就清爽了很多了,这个仁者见仁,看各位的习惯了。

前端代码压缩出现的BUG

1、部分代码避免被压缩方法

此功能既然是压缩前端的代码,自然而然会将一些JS代码给压缩了,事实上有些JS被压缩后会失效,所以我们需要将这部分内容绕过压缩。只需要将你想绕过压缩的代码加个包裹层即可,代码如下:

  1. <!--wp-compress-html--><!--wp-compress-html no compression-->  
  2. 这里的代码将会被保护起来,避免了压缩产生的异常情况  
  3. <!--wp-compress-html no compression--><!--wp-compress-html-->  

注意:目前网上流传的绕过压缩的代码如下,使用者请自查。

  1. <!--wp-compress-html no compression-->  
  2. 错误的免压缩代码,部分主题使用  
  3. <!--wp-compress-html no compression-->  

其实很多时候JS被压缩出错是因为JS中出现了//注释,试想下后面的空格被删除了,所有的代码将出现在//后面,相当于代码都被注释了,肯定会出错啊。最简单的解决办法就是删除注释或者使用闭合注释/*这里是注释*/,这样就可以避免后面的内容被注释掉了。

2、避免文章中高亮的代码被压缩

很多博文中会分享代码,当你使用代码高亮插件的时候再压缩前端代码,就会出现高亮失效的情况,如图:

纯代码为WordPress压缩前端HTML代码 附BUG修复

启用代码压缩前

纯代码为WordPress压缩前端HTML代码 附BUG修复

启用代码压缩后

原因很简答,代码高亮是将代码格式化,以优美的方式展示给读者;而压缩是直接将样式等修饰内容粗暴的删除,这样肯定会导致高亮失效的,只需要在function.php文件添加另外一段代码,就可以避免代码高亮被压缩了。

  1. //避免含有代码高亮的文章内容被压缩  
  2. function Code_Box($content) {  
  3. $matches = array();  
  4. //下面是查找代码高亮的关键词  
  5. $c = "/(crayon-|<\/pre>)/i";  
  6. if(preg_match_all($c$content$matches) && is_single()) {  
  7. $content = '<!--wp-compress-html--><!--wp-compress-html no compression-->'.$content;  
  8. $content.= '<!--wp-compress-html no compression--><!--wp-compress-html-->';  
  9. }  
  10. return $content;  
  11. }  
  12. add_filter( "the_content""Code_Box" );  

这段代码可以避免使用Crayon Syntax Highlighter和使用<pre>标签做的高亮被压缩,其他代码高亮插件请自行修改,不再赘述。

前端代码压缩对于功能较多的网站有较为显著的加速效果,但比起来主机对加载速度的影响还是小很多了,所以这是个锦上添花的功能,而达不到雪中送炭的感觉,如果你想让你的WordPress网站更快一步,那就使用此功能吧。

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
匿名

发表评论

匿名网友 填写信息

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