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();
self::crayon_font_css();
self::enqueue_resources();
比如搜索到 self::crayon_theme_css();,则直接在这行代码前加上双斜杠//屏蔽即可,如图:
其中 self::enqueue_resources();有 2 处,总共 4 处,全部注释即可。
②、按需加载函数
第①步已经禁止插件在前台输出 js 和 css 了,下面部署按需加载函数。
将以下代码添加到 WordPress 主题目录下的 functions.php 当中即可实现按需加载:
function Crayon_Resources($content) {
$pre = "/(crayon-|</pre>)/i";
if(preg_match_all($pre, $content, $matches) && is_single()) {
$content.= '<script type="text/javascript">/* <![CDATA[ */
var quicktagsL10n = {"closeAllOpenTags":"u5173u95edu6240u6709u6253u5f00u7684u6807u7b7e","closeTags":"u5173u95edu6807u7b7e","enterURL":"u8f93u5165URL","enterImageURL":"u8f93u5165u56feu50cfURL","enterImageDescription":"u4e3au56feu50cfu8f93u5165u63cfu8ff0","fullscreen":"u5168u5c4f","toggleFullscreen":"u5207u6362u5168u5c4fu6a21u5f0f","textdirection":"u6587u672cu65b9u5411","toggleTextdirection":"u5207u6362u7f16u8f91u5668u6587u672cu4e66u5199u65b9u5411"};
/* ]]> */</script>
<script type="text/javascript" src="'.site_url().'/wp-includes/js/quicktags.min.js?ver=4.0"></script>
<script type="text/javascript">
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"2.6.8","is_admin":"0","ajaxurl":"http://zhangge.net/wp-admin/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"u4f7fu7528 %s u590du5236uff0cu4f7fu7528 %s u7c98u8d34u3002","minimize":"u70b9u51fbu5c55u5f00u4ee3u7801"};
var CrayonTagEditorSettings = {"home_url":"http://zhangge.net","css":"crayon-te","css_selected":"crayon-selected","code_css":"#crayon-code","url_css":"#crayon-url","url_info_css":"#crayon-te-url-info","lang_css":"#crayon-lang","title_css":"#crayon-title","mark_css":"#crayon-mark","range_css":"#crayon-range","inline_css":"crayon-inline","inline_hide_css":"crayon-hide-inline","inline_hide_only_css":"crayon-hide-inline-only","hl_css":"#crayon-highlight","switch_html":"#content-html","switch_tmce":"#content-tmce","tinymce_button_generic":".mce-btn","tinymce_button":"a.mce_crayon_tinymce,.mce-i-crayon_tinymce","tinymce_button_unique":"mce_crayon_tinymce","tinymce_highlight":"mce-active","submit_css":"#crayon-te-ok","cancel_css":"#crayon-te-cancel","content_css":"#crayon-te-content","dialog_title_css":"#crayon-te-title","submit_wrapper_css":"#crayon-te-submit-wrapper","data_value":"data-value","attr_sep":":","css_sep":"_","fallback_lang":"sh","dialog_title_add":"u63d2u5165u4ee3u7801u9ad8u4eae","dialog_title_edit":"u7f16u8f91u4ee3u7801u9ad8u4eae","submit_add":"u63d2u5165","submit_edit":"u4fddu5b58","bar":"#crayon-te-bar","bar_content":"#crayon-te-bar-content","extensions":{"scpt":"applescript","applescript":"applescript","swf":"as","fla":"as","cs":"c#","h":"c++","hh":"c++","hpp":"c++","hxx":"c++","h++":"c++","cc":"c++","cpp":"c++","cxx":"c++","c++":"c++","pas":"delphi","java":"java","class":"java","jar":"java","mv":"miva","mvc":"miva","mvt":"miva","m":"objc","mm":"objc","pl":"perl","py":"python","pyw":"python","pyc":"python","pyo":"python","pyd":"python","rb":"ruby","rbx":"ruby","rhtml":"ruby","vbs":"vb"}};
var CrayonSyntaxSettings = {"version":"2.6.8","is_admin":"0","ajaxurl":"http://zhangge.net/wp-admin/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"u4f7fu7528 %s u590du5236uff0cu4f7fu7528 %s u7c98u8d34u3002","minimize":"u70b9u51fbu5c55u5f00u4ee3u7801"};
/* ]]> */
</script>
<script type="text/javascript" src="'.site_url().'/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.te.min.js?ver=2.6.8"></script>
<link rel="stylesheet" id="crayon-css" href="'.site_url().'/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css" type="text/css" media="all" />
<link rel="stylesheet" id="crayon-font-consolas-css" href='.site_url().'/wp-content/plugins/crayon-syntax-highlighter/fonts/consolas.css" type="text/css" media="all" />
//下面这个css和插件后台设置的主题有关系,如果需要换样式,则需要修改以下CSS名称
<link rel="stylesheet" type="text/css" href="'.site_url().'/wp-content/plugins/crayon-syntax-highlighter/themes/classic/classic.css">';
}
return $content;
}
add_filter( "the_content", "Crayon_Resources");
其中, 最后一个 css 定义了文章高亮代码的样式,默认是 classic.css,若在后台选了其他样式,请按实际更改即可!
Ps:其实第②步中的 css 和 js 代码,就是未禁止插件全局加载之前,在页面源代码中复制而来的,只要注意代码中全部使用双引号即可(因为单引号给 php 了)。如果你看明白了,又无法确认代码中 css 的路径,也可以在禁用全局加载之前,先从前台网页源代码中复制一份,留作第②步使用即可。
做好以上操作之后,那么只有在文章中存在需要高亮显示的代码时,才会在文章页面输出上方的 CSS 和 JS,从而解决了这款高亮插件全局加载 CSS 和 JS,影响页面加载速度的问题。
教程完毕,希望对你有所帮助!
最后弱弱的打个广告:如果你是纯粹的代码盲,而又强迫症一般追求博客速度,那么可以购买张戈博客的有偿服务,让张戈来帮你优化 WordPress 加载速度!
- 一个数字截取引发的精度问题(二)
- 【独家推送】GoogLeNet构建技术分析因子的模式识别基于TensorFlow
- 一个数字截取引发的精度问题(一)
- 基于TLS1.3的微信安全通信协议mmtls介绍
- 在 WCF 中使用高效的 BinaryFormatter 序列化
- Visual Studio 2012 中的ASP.NET Web API
- gradeview可拖动效果实现
- 【Python量化投资】拟合具有非平稳特征的神经网络对股票进行预测
- 使同事羡慕不已的8个npm命令
- JavaScript代码风格要素
- 从 WebAPI Beta 更新到WebAPI RC
- 再谈异步
- canvas-画线
- canvas-入门
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- WPF SharpDx 性能优化方法
- java中的reference(四): WeakReference的应用--ThreadLocal源码分析
- 聊聊dubbo-go的availableCluster
- 删除排序链表中重复元素的方法
- java异常体系及1.7中的try-with-resources
- JAVA中的静态代理、动态代理以及CGLIB动态代理分析
- 基于centos7 搭建storm1.2.3集群过程
- JAVA中的浅克隆和深克隆分析
- mysql表占用多少磁盘空间以及清理表空间
- 基于docker快速搭建hbase集群
- 在springboot中对kafka进行读写操作
- [883]python安装包出现Retrying
- 深入理解java虚拟机学习笔记(三)-虚拟机性能监控与故障处理工具
- [884]Elasticsearch可视化工具
- 如何控制nodejs的线程数