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("nn", "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("nn", "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 性能,那么我也推荐你来试试!
- Opencv学习(一)——安装配置遇到的问题
- The .NET of Tomorrow
- 国内自动驾驶企业在美国首秀其最新L4级自动驾驶货运卡车
- Nginx源码安装及调优配置
- Greenplum 简单性能测试与分析
- CentOS6 安装couchdb2 集群
- 如何遍历维数和各维上限未定的多维数组
- 求长度的另一种方法(""+obj).Length
- ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现
- GreenPlum 简单性能测试与分析(续)
- 最终版 Reflector v1.0 (+简单的反流程混淆)
- 性能&分布式&NewLife.XCode对无限数据的支持
- ASP.NET MVC下的异步Action的定义和执行原理
- 包学会之浅入浅出Vue.js:结业篇
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统
- java获取时间整点工具代码
- MyBatis预编译机制详解
- ActiveMQ NMS使用过程中的一点经验
- asp.net core 认证及简单集群
- WebAPI问题追踪日志记录过滤器
- 使用责任链模式消除if分支实践
- sql操作知识点个人笔记(SQLServer篇)
- kettle学习笔记(二)——kettle基本使用
- Spring源码深度解析(二)
- Repository个人实践
- 摩斯码编解码器
- kettle学习笔记(三)——kettle资源库、运行方式与日志
- 使用Let's Encrypted HPPTS你的网站
- .net core web api + Autofac + EFCore 个人实践