[摘要]

wp-html-compression是WordPress常用的压缩前端代码插件，本文简析纯代码实现WordPress前端代码压缩功能，并指出常见bug的解决方法。

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

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

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

压缩WordPress前端html代码版

/*WordPress前端代码压缩*/

function wp_compress_html(){

function wp_compress_html_main ($buffer){

$initial=strlen($buffer);

$buffer=explode("", $buffer);

$count=count ($buffer);

for ($i = 0; $i <= $count; $i++){

if (stristr($buffer[$i], '')) {

$buffer[$i]=(str_replace("", " ", $buffer[$i]));

}

else {

$buffer[$i]=(str_replace("\t", " ", $buffer[$i]));

$buffer[$i]=(str_replace("\n\n", "\n", $buffer[$i]));

$buffer[$i]=(str_replace("\n", "", $buffer[$i]));

$buffer[$i]=(str_replace("\r", "", $buffer[$i]));

while (stristr($buffer[$i], ' ')){

$buffer[$i]=(str_replace(" ", " ", $buffer[$i]));

}

}

$buffer_out.=$buffer[$i];

}

$final=strlen($buffer_out);

$savings=($initial-$final)/$initial*100;

$savings=round($savings, 2);

$buffer_out.="\n";

return $buffer_out;

}

ob_start("wp_compress_html_main");

}

add_action('get_header', 'wp_compress_html');

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

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

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

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

前端代码压缩出现的bug

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

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

这里的代码将会被保护起来，避免了压缩产生的异常情况

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

错误的免压缩代码，部分主题使用

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

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

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

启用代码压缩前

启用代码压缩后

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

//避免含有代码高亮的文章内容被压缩

function Code_Box($content) {

$matches = array();

//下面是查找代码高亮的关键词

$c = "/(crayon-|)/i";

if(preg_match_all($c, $content, $matches) && is_single()) {

$content = ''.$content;

$content.= '';

}

return $content;

}

add_filter( "the_content", "Code_Box" );

这段代码可以避免使用Crayon Syntax Highlighter和使用

标签做的高亮被压缩，其他代码高亮插件请自行修改，不赘述。

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

文中代码参考了WP迷、张戈等多网站的代码，不一一列举，通通表示感谢！

本文最后更新于2017年3月29日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！