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

释放双眼,带上耳机,听听看~!

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

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

一、压缩产生乱码

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

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

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

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

而正确的代码应该是:

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

二、部署功能代码

所以,正确的压缩代码如下所示(强迫症又发作了,代码严格缩进了下):

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

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

修改方法:

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

修改为:

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

三、绕过压缩注释

然后,本文的重点来了:

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

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

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

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

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

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

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

解决办法:

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

四、知更鸟专用

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

①、head 部分,需要绕过压缩的是 time.php(时间模块)和 pirobox.php(图片暗箱)中的 js 代码:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

②、js 代码中存在//注释语句,比如: 

这种代码,一旦压缩就会变成这样:

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

解决办法有 2 种:

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

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

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

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

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

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

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

相关专题

wordpress

Wordpress WordPress是一款个人博客系统,并逐步演化成一款内容管理系统软件,它是使用PHP语言和MySQL数据库开发的。用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。 立刻购买 交流圈子 推荐模板/插件 虚位以待 马上入驻 虚位以待 马上入驻 虚位以待 马上入…

为TA充电
共{{data.count}}人
人已赞赏

【龙萱坤诺】声明:

龙萱坤诺所有资源来源于网络及用户分享或为本站原创,仅限用于学习和研究,如有侵权请邮件联系站长!不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站概不负责!

 

龙萱坤诺欢迎您投稿发表文章,更有龙萱坤诺奖励和额外收入!根据投稿内容质量,可获邀入驻本平台,开启您的站长之路!

 

如有链接无法下载、失效或广告,请到论坛反馈!

联系我们

© 转载请声明:转载自“龙萱坤诺"

网站开发

WordPress百度自动推送JS优化,规避错误、重复推送问题

2019-1-26 13:32:56

网站开发

让 WordPress 飞起来的几个 function

2019-1-26 13:35:29

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

热门专栏

文章发布排行

更多
  • 官方编辑

    仁师lv9

    文章

    6169

    评论

    4

    粉丝

    5

    关注

    0

    龙萱坤诺官方编辑员
  • 玩机技巧

    初学子lv0

    文章

    722

    评论

    2

    粉丝

    1

    关注

    0

    分享最新、最热的玩机教程。有需要的教程也可以圈子发帖提需求呦。
  • 微客创赢

    坛圣lv13

    文章

    288

    评论

    26

    粉丝

    6

    关注

    4

    程序员小白
  • 龙萱坤诺

    坛圣lv13

    文章

    133

    评论

    61

    粉丝

    7

    关注

    5

    龙萱坤诺管理员
  • wordpress建站

    有学者lv2

    文章

    70

    评论

    12

    粉丝

    2

    关注

    0

    Wordpress建站服务商