WordPress高亮插件:Crayon Syntax Highlighter加载优化

Crayon Syntax Highlighter是我这种代码控的必装插件。但是,这款插件也有一些小缺憾,比如体积大、拖慢速度、容易产生冲突等。很多博主就是因为这些个原因,才不得不忍痛割爱。

至于冲突问题,上次博客已分享过一次相关教程,感兴趣的可以看看:

解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题

本文主要是分享Crayon Syntax Highlighter插件的CSS和JS加载优化。

优化原理:禁止Crayon Syntax Highlighter插件js和css的全局自动加载机制,只有检测到文章中存在代码时,才会按需加载,这样解决了所有页面均加载js和css拖慢博客速度的问题。

修改方法:

①、禁止自动加载

后台编辑Crayon Syntax Highlighter插件,利用浏览器 Ctrl+F 依次搜索一下关键词,并注释掉:

比如搜索到self::crayon_theme_css();,则直接在这行代码前加上双斜杠//屏蔽即可,如图:

WordPress高亮插件:Crayon Syntax Highlighter加载优化

其中self::enqueue_resources();有2处,总共4处,全部注释即可。

②、按需加载函数

第①步已经禁止插件在前台输出js和css了,下面部署按需加载函数。

将以下代码添加到WordPress主题目录下的functions.php当中即可实现按需加载:

其中, 最后一个css定义了文章高亮代码的样式,默认是classic.css,若在后台选了其他样式,请按实际更改即可!

Ps:其实第②步中的css和js代码,就是未禁止插件全局加载之前,在页面源代码中复制而来的,只要注意代码中全部使用双引号即可(因为单引号给php了)。如果你看明白了,又无法确认代码中css的路径,也可以在禁用全局加载之前,先从前台网页源代码中复制一份,留作第②步使用即可。

做好以上操作之后,那么只有在文章中存在需要高亮显示的代码时,才会在文章页面输出上方的CSS和JS,从而解决了这款高亮插件全局加载CSS和JS,影响页面加载速度的问题。

教程完毕,希望对你有所帮助!

最后弱弱的打个广告:如果你是纯粹的代码盲,而又强迫症一般追求博客速度,那么可以购买张戈博客的有偿服务,让张戈来帮你优化WordPress加载速度!

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:16   其中:访客  11   博主  5

  1. 李阳博客 3 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 联通

    很不错呀。这个代码高亮的确会拖慢速度。但是我也不晓得怎么优化,拖慢就拖慢吧,看了这个教程回头试试

  2. 小武 6 来自天朝的朋友 谷歌浏览器 Windows 8.1 北京市 方正宽带

    前两天我把csdn的高亮代码拿下来了。 感觉还挺好看 :lol:

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      用这个插件只要是为了方便贴代码,其他的方法都没这个用起来顺手,这个可以直接弹出贴代码的框框。

      • 小武 6 来自天朝的朋友 谷歌浏览器 Windows 8.1 辽宁省大连市 电信

        我弄的那个也有这功能..我觉得比这个好看些

        • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

          如果是自行集成,那可以推荐下。
          样式方面,我没觉得有问题,毕竟可以自行定义css。

  3. osblog 2 来自天朝的朋友 谷歌浏览器 Windows 7 山西省太原市 联通

    不错,写程序博客的人都需要高亮,支持。等待您的回访

  4. QQ技巧 0 来自天朝的朋友 搜狗浏览器 Windows 7 江苏省连云港市 电信

    不是太喜欢这插件。

  5. 夏日博客 5 来自天朝的朋友 谷歌浏览器 Windows XP 北京市 北京电信互联网数据中心

    最近打算把站点的高亮插件换掉,之前下载的太不给力了。

  6. 微信营销服务 3 来自天朝的朋友 谷歌浏览器 Windows XP 福建省厦门市 电信

    这个不错哟

  7. Finle 2 来自天朝的朋友 谷歌浏览器 Windows 7 重庆市 电信

    已经不用插件了,哈哈~

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      流弊~~ :cool:

  8. 松果 3 来自天朝的朋友 谷歌浏览器 Windows 7 四川省达州市 电信

    我不会告诉你,直接不加载也没啥,就是少了最上面那个工具栏而已,具体的可以看看我博客 :mrgreen:

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      :mrgreen: 是有这么回事,不过有工具条能方便点。

      • 松果 3 来自天朝的朋友 谷歌浏览器 Windows 7 四川省达州市 电信

        这个插件有544个文件,我在想,要不要换掉他,但是其他高亮插件又容易把行号复制上 :sad:

  9. 幻杀博客 5 来自天朝的朋友 谷歌浏览器 Windows 8.1 山东省潍坊市青州市 联通

    插件好像集成按需加载 :?:

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      :!: 嗯,正常情况是有这么回事。
      不过我的高亮插件和滚动条和暗箱有冲突,之前做过一次禁止加载处理,结果就有了这茬。。。看来一般人是不需要动的。

加载中,请稍候...