WordPress前端html代码压缩优化,附对应知更鸟主题压缩报错的解决方案 | 张戈博客

  • 时间:
  • 浏览:3
  • 来源:森七博客 - 专注共享张凯博客资讯

今天,逛松果博客的原先 ,看完了他分享的《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*60

;   
        $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性能,那末 我也推荐你来试试!