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

  • A+
所属分类:WordPress实用技巧

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();
self::crayon_font_css();
self::enqueue_resources();

 

比如搜索到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,影响页面加载速度的问题。

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

weinxin
我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
青青子衿

发表评论

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

目前评论:1   其中:访客  1   博主  0

    • avatar 彼丶岸 0

      测试评论区效果