wordpress代码高亮插件WP SyntaxHighlighter 优化

2019独角兽企业重金招聘Python工程师标准>>>

WP SyntaxHighlighter 一款很不错的wordpress 代码高亮插件。 本站当前使用的代码高亮插件。 在后台选择的是2.1.382版本。能使用代码复制、打印等小工具。但是他在页面加载的时候十分的不便。会加载每一个你所设定的高亮代码对应的js。出现

<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shCore.js?ver=2.1"></script>
<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shBrushBash.js?ver=2.1"></script>
<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shBrushCss.js?ver=2.1"></script>
<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shBrushJava.js?ver=2.1"></script>
<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shBrushJScript.js?ver=2.1"></script>
<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shBrushPerl.js?ver=2.1"></script>
<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shBrushPhp.js?ver=2.1"></script>
<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shBrushPowerShell.js?ver=2.1"></script>
<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shBrushPython.js?ver=2.1"></script>
<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shBrushRuby.js?ver=2.1"></script>
<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shBrushSql.js?ver=2.1"></script>
<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shBrushXml.js?ver=2.1"></script>

这样的代码。每加载一个都会对服务器提交一次请求。不利于网站的加载。 对其优化主要从以下两个方面： 1) 把所需的 shBrushXxx.js 文件合并到一个 js 文件中，如 shBrushes.js，这样可以减少加载那些 js 时 HTTP 连接的消耗，如果是 Keep-Alive 还好些。 2) 对合并后的 shBrushes.js 文件进一步压缩，节约网络流量，有好的 js 压缩工具可以选择众多 js 文件压缩并合并。 当前我就将以上所需的shBrushXxx.js 压缩到一个文件中。并利用在线的js压缩工具进行压缩，得到一个shBrushMinAll.js。将它放到/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/script/目录下 然后就是修改我们的插件文件了。找到wp-syntaxhighlighter.php 这个文件; 1041行注释代码：

// echo "<script type=\"text/javascript\" src=\"".$wp_sh_plugin_url.$lib_dir."/scripts/shCore.js?ver=".$wp_sh_lib_ver."\"></script>\n";

1068行注释代码：

// foreach ($wp_sh_brush_files as $lang => $val) {
			// 	$brush_file = $val[0];
			// 	$brush_ver = $val[2];
			// 	$brush_enable = $val[3];
			// 	if (($brush_ver == '2.1' || $brush_ver == '1.5') && $brush_enable == 'true') {
			// 		echo "<script type=\"text/javascript\" src=\"".$wp_sh_plugin_url.$lib_dir."/scripts/".$brush_file."?ver=".$wp_sh_lib_ver."\"></script>\n";
			// 	} elseif (($brush_ver == '2.1' || $brush_ver == 'all') && $brush_enable == 'added') {
			// 		echo "<script type=\"text/javascript\" src=\"".$brush_file."?ver=".$wp_sh_lib_ver."\"></script>\n";
			// 	}
			// }

在注释代码后面加上：

echo "<script type=\"text/javascript\" src=\"".$wp_sh_plugin_url.$lib_dir."/scripts/shBrushMinAll.js?ver=".$wp_sh_lib_ver."\"></script>\n";

保存完成后。再看看页面，已经ok了;

<script type="text/javascript" src="http://www.xxku.net/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter2/scripts/shBrushMinAll.js"></script>

转载于:https://my.oschina.net/u/265943/blog/292884