『WordPress』条件加载JavaScript脚本实现SyntaxHighlighter语法高亮

在前不久发布的《SyntaxHighlighter：无需插件的语法高亮解决方案》一文中，我们介绍了Syntax Highlighter的用法，通过调用远程javascript脚本实现了语法高亮效果。接下来我们要谈谈如何对其进行优化。

场景

考虑到代码高亮仅在特定场合使用，亦即，仅当页面存有需要高亮展示的代码时。因此，我们只需在相应页面加载渲染用的javascript脚本即可，而无需在全部页面调用，如此一来可以进一步优化页面加载时间。

分析

于是我们的问题转化为：如何对带有代码的页面进行判断呢？以本站为例，与代码有关的文章都归属在分类“程序人生”及其子目录下，因而，我们可以在加载javascript时，对这一条件进行判断，然后选择是否进行Syntax Highlighter脚本的调用。我们通过WordPress提供的Conditional Tags不难解决这个问题。

方案

整个解决方案分两大步骤进行：

1. 判断日志是否归属于某一分类或其子目录。
   这里我们需要构造一个做出此条件判定的函数。幸运的是，WordPress已经给出了答案，即：
   

   function post_is_in_descendant_category( $cats, $_post = null )
   {
   	foreach ( (array) $cats as $cat ) {
   		// get_term_children() accepts integer ID only
   		$descendants = get_term_children( (int) $cat, 'category');
   		if ( $descendants && in_category( $descendants, $_post ) )
   			return true;
   	}
   	return false;
   }

   我们只需将此函数附加到主题的function.php文件中即可。

2. 修改header.php，利用上述函数判断并加载Syntax Highlighter的javascript脚本。
   
   首先我们利用WordPress的wp_enqueue_script函数，加上上面的条件判断函数，加载JS脚本，注意参数为分类ID：

   // 仅当显示指定目录或其子目录下的日志时才加载脚本。
   if ( in_category(100) || post_is_in_descendant_category(100) ) {
   	wp_enqueue_script('shCore', 'http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js');
   	wp_enqueue_script('shBrushPhp', 'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js');
   	wp_enqueue_script('shBrushSql', 'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js');
   	wp_enqueue_script('shBrushXml', 'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js');
   }

   然后象往常一样加载CSS并调用使Syntax Highlighter生效的all()函数：

   <!-- Syntax Highlighter CSS -->
   <?php if ( in_category(100) || post_is_in_descendant_category(100) ) { ?>
   <link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" />
   <link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css" />
   <?php } ?>
   
   <script type="text/javascript">
   	SyntaxHighlighter.all();
   </script><!-- End of Syntax Highlighter -->

至此我们就完成了语法高亮的条件加载，节约了页面载入时间。