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

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

syntax-highlighter-conditional-loading

场景

考虑到代码高亮仅在特定场合使用,亦即,仅当页面存有需要高亮展示的代码时。因此,我们只需在相应页面加载渲染用的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 -->

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

作者:Keefe Dunn

a dreamer, a learner, a lawful beginner.

1条评论

发表评论

您的电子邮箱地址不会被公开。