WordPress前端html代码压缩优化，附对应知更鸟主题压缩报错的解决方案

今天，逛松果博客的时候，看到了他分享的《wordpress 通过代码压缩网页》一文，让我想起了其实张戈博客之前也用过这个功能，当时是在 WP 迷博客看到的纯代码版本，用了之后发现和知更鸟主题会产生冲突，比如底部滚动条停止滚动、图片暗箱无法弹出等错误。

再次看到这篇文章，我已经将 WP 玩得比较熟了，想着应该可以搞定这种问题吧？折腾 ing...

一、压缩产生乱码

于是，我复制了松果博客的代码，部署后发现前台惨不忍睹：

纳尼？我记得以前用代码版的时候也不会出现这种情况啊！于是到 WP 迷博客找来代码，和松果博客的对比了下，我去这错误太明显了！

松果博客分享的代码中的关键替换位置如下所示：

 $buffer[$i]=(str_replace("t", " ", $buffer[$i]));
 $buffer[$i]=(str_replace("nn", "n", $buffer[$i]));
 $buffer[$i]=(str_replace("n", "", $buffer[$i]));
 $buffer[$i]=(str_replace("r", "", $buffer[$i]));

而正确的代码应该是：

$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]));

少了反斜杠之后的 n、t、r 意义完全不同了！有反斜杠表示换行和 tab 空格等，如果没有反斜杠那就是单纯的字母了，不乱才怪了！

二、部署功能代码

所以，正确的压缩代码如下所示（强迫症又发作了，代码严格缩进了下）：

//压缩 html 代码 
function wp_compress_html(){
    function wp_compress_html_main ($buffer){
        $initial=strlen($buffer);
        $buffer=explode("<!--wp-compress-html-->", $buffer);
        $count=count ($buffer);
        for ($i = 0; $i <= $count; $i++){
            if (stristr($buffer[$i], '<!--wp-compress-html no compression-->')) {
                $buffer[$i]=(str_replace("<!--wp-compress-html no compression-->", " ", $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<!--压缩前的大小: $initial bytes; 压缩后的大小: $final bytes; 节约：$savings% -->";   
    return $buffer_out;
}
ob_start("wp_compress_html_main");
}
add_action('get_header', 'wp_compress_html');

部署方法：将以上代码粘贴到 WordPress 主题目录下的 functions.php 文件的最后一个 ?> 之前即可。

Ps：使用知更鸟主题的博客，需要将以上代码稍微改动一下，否则首页不会被压缩，已亲测！

修改方法：

将上述代码中的最后三行：

ob_start("wp_compress_html_main");
}
add_action('get_header', 'wp_compress_html');

修改为：

if ( !is_admin() ) { 
        ob_start("wp_compress_html_main");
    }
}
add_action('init', 'wp_compress_html');

也就是将 get_header 动作修改为全局 init，然后再加上排除 WP 后台的判断，否则后台写文章就惨不忍睹了...（这样修改后，压缩生效的范围更大，若不出错，建议用修改后的代码！）

三、绕过压缩注释

然后，本文的重点来了：

关于在页面位置加上避免压缩的注释，很多教程都是错的！亲测无效！

网络上很多教程，包括松果博客、WP 酷以及 WP 迷，他们都是这样描述的：

实际上，我测试了半天都不能生效！仔仔细细检查代码中的逻辑判断，终于推敲出正确的注释如下：

<!--wp-compress-html--><!--wp-compress-html no compression-->
此处代码不会被压缩，主要是避免压缩带来的错误，比如 JS 错误
<!--wp-compress-html no compression--><!--wp-compress-html-->

只有这样包裹代码，被包裹的代码才不会被压缩，网上分享的大部分方法都是无效的。

顺带再说一个技巧，如果博客使用了 Crayon Syntax Highlighter 高亮插件，那么启用代码压缩之后，你会发现在文章页面双击代码切换到纯文本模式时，会发现代码全挤在一团了！好吧，全都给压缩了，尴尬中...

解决办法：

将以下代码加入到主题 functions.php 当中，当检测到文章内容中有代码标签时，文章内容不会被压缩：

function unCompress($content) {
    if(preg_match_all('/(crayon-|<\/pre>)/i', $content, $matches)) {
        $content = '<!--wp-compress-html--><!--wp-compress-html no compression-->'.$content;
        $content.= '<!--wp-compress-html no compression--><!--wp-compress-html-->';
    }
    return $content;
}
add_filter( "the_content", "unCompress");

四、知更鸟专用

搞定了绕过压缩问题，那压缩代码后知更鸟的各种错误也就好解决了，折腾了半小时，就把所有错误给解决了！下面分享一下，主要给旧版知更鸟主题的博主提供参考。

①、head 部分，需要绕过压缩的是 time.php（时间模块）和 pirobox.php（图片暗箱）中的 js 代码：

i. 编辑知更鸟主题下的 includes 中的 time.php，参考下图添加注释：

ii. 编辑知更鸟主题下的 includes 中的 pirobox.php，参考下图添加注释：

②、侧边栏部分，需要绕过压缩的是侧边栏 TAB 滑动模块和跟随模块中的 js 代码

i. 编辑知更鸟主题下的 includes 目录中的 tab.php 和 tab_h.php，参考下图加注释：

ii. 编辑知更鸟主题下的 includes 目录中的 recently.php，参考下图添加注释：

③、当未搜索到内容时的搜索结果页面，底部的 js 代码需要绕过压缩，否则展开功能无法使用：

解决办法：修改知更鸟主题目录下的 search.php 文件，如下添加免压缩注释请：

完成以上步骤，知更鸟主题的博客应该可以修复因为 html 代码压缩带来的错误了！在添加注释的时候，一定注意前后代码是不同的，切记不要颠倒顺序了，否则压缩范围就南辕北辙了哦！

当然，也可能有些知更鸟主题博客，安装了其他插件，压缩代码后会导致更多错误，若遇到这种情况，也不要着急！你只要记住修复这种问题的思路就是：哪个功能失效，就去找对应功能所在的代码，然后添加免压缩注释即可！一般都是 JS 代码被压缩，产生的报错。

2014/12/9 最新补充，经过长期观察，发现 js 压缩报错无外乎 2 种情况：

①、js 代码的作者偷懒，简写了某些语句。比如 js 的 if 结构一般是:

if(条件){
    语句 1;
}else{
    语句 2;
}

可有些人写 js 的时候，不知道是自视高超还是偷懒，就写成如下形式：

if(条件)
    语句 1;
else
    语句 2;

这种偷懒格式，一旦压缩，就会破坏逻辑判断从而报错！如果压缩报错，并发现这种偷懒模式，只要写全代码即可。

②、js 代码中存在//注释语句，比如： 

<script type="text/javascript">
function test(){
//定义一个变量：
var string1 = 'newstring';
alert(string1);
}
</script>

这种代码，一旦压缩就会变成这样：

<script type="text/javascript">function test(){//定义一个变量：var string1 = 'newstring';alert(string1);}</script>

由于这个注释是半闭合的，因此压缩后就会伤及无辜，把后面的语句一起给注释了！从而报错！！

解决办法有 2 种：

i. 删除半闭合注释即可；

ii. 使用/* */ 全封闭注释 ；

2015/06/17 最新补充：解决压缩功能和代码高亮冲突的问题

用了此压缩功能后，肯定有部分同学发现博客的代码高亮排版都错乱了！因为压缩功能把文章中的高亮代码也给压缩了！我们该如何绕过这个压缩呢？总不能对所有文章都加入免压缩的注释吧？那压缩覆盖面就大大的减小了！

其实，我们可以这样解决：对于存在高亮代码的文章，则自动在文章内容的首尾插入免压缩的注释。

功能实现：将如下代码加入到主题的 functions.php 当中即可：

//自动在存在高亮代码的文章收尾插入免压缩注释 By 张戈博客
  function Code_Box($content) {
    $matches = array();
    //一下是匹配高亮代码的关键词，本代码适用于 Crayon Syntax Highlighter 插件，其他插件请自行分析关键词即可
    $c = "/(crayon-|<\/pre>)/i";
    if(preg_match_all($c, $content, $matches) && is_single()) {
        $content = '<!--wp-compress-html--><!--wp-compress-html no compression-->'.$content;
        $content.= '<!--wp-compress-html no compression--><!--wp-compress-html-->';
     }
    return $content;
}
add_filter( "the_content", "Code_Box" );

本文主要为了修正网络上对 WordPress 前端 HTML 代码压缩优化方法中的错误，以及知更鸟主题下的兼容修复方法。我个人也是非常喜欢这个压缩功能，尤其是对知更鸟这种页面内容庞大的主题，更是效果显著！如果你也有强迫症，如果你也喜欢压榨 WordPress 性能，那么我也推荐你来试试！