WPJAM「代码高亮」：一键实现 WordPress 页面代码高亮显示

WPJAM「代码高亮」插件特别之处

现在大部分代码高亮的插件都是使用 prism 这个代码高亮 JS 库来实现的，WPJAM「代码高亮」插件也是，只是之前是纯代码方式写到主题里面，今天就把它整理了一下，做成一个插件。

整个插件自己写的代码只有不到 30 行，就是利用 WordPress 的 wp_enqueue_scripts 接口让页面加载 prism 的样式和脚本代码。

然后插件也兼容 WPJAM「静态文件」插件，不单独加载 prism 的样式和脚本代码，把 prism 的样式和脚本代码合并到整个站点唯一的样式和脚本文件中：

所以这个从另外一个侧面说明 WPJAM 出品的插件，不是装的越多越慢，反而相互之间会配合的，最优化去处理问题。

使用 WPJAM「代码高亮」插件

怎么使用 WPJAM「代码高亮」插件呢？非常简单，首先根据你使用不同编辑器略用不同。

如果你使用古腾堡编辑器的话，先点击选择创建一个代码块：

然后输入代码，选择该该区块：

点击右侧区块属性框，在额外的CSS类中输入：language-php，如果你的代码是 JS 则，输入 language-javascript，CSS 则输入 language-css，HTML：language-markup，其他语言尝试一下：language-语言的英文名。

如果是经典编辑器，则切换到代码模式，然后把代码放到：<pre class="language-php"><code> 和 </code></pre> 之间即可，如下图所示：

pre 标签的 class 定义就是语言，如何设置，和上面古腾堡的设置方式是一样的，自己灵活处理一下，个人感觉还是古腾堡编辑器方便一点。

WordPress主题开发中最佳引用脚本js文件函数wp_enqueue_script

当我们在WordPress主题定制开发过程中，经常需要引入一些JS文件，一般的处理方式是在主题文件的header.php或者footer.php文件中引入JS。其实，WordPress有一个最佳引入JS文件的函数，那就是wp_enqueue_script。通过该函数可以安全地将javascript代码加入到WordPress创建的页面中，不仅可以最大限度地保证兼容性，还可以提高WordPress的性能和效率。

函数代码：

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

参数说明：

$handle – 调用的脚本名称，用于区别其它js，因此不能和其它js文件命名相同。$src – js文件的路径（即url），不要直接使用域名url，要使用路径函数，如parent theme使用get_template_directory_uri，child theme使用get_stylesheet_directory_uri。（WP模板路径相关的函数中，通常带有template的是指parent theme，带有stylesheet的指向child theme）$deps – 依赖关系，加载的js文件所依存的其它js的标识字串数组（array:string），即需要在本代码之前加载的代码的名称（如js脚本依赖jquery库，那么这里要用数组的形式写上jquery），非必需。$ver – 加载js文件的版本号，作为查询字串附加在路径的末尾，作用是确保正确的版本信息传递给了客户端，以免受到缓存的影响（如js脚本发生变化时，通过更改版本号可以强制客户浏览器更新缓存），默认为false，调用当前WordPress程序的版本号，如果不想显示，则设置为NULL（不推荐）。$in_footer – boolean类型，设置js文件调用代码是否放置在html底部，设置为ture则放在底部，设置为false则放置在head部分。提示需要模板正确放置wp_footer()函数。

使用方法：

通过wp_enqueue_script函数加载js文件时，应该将它分配给一个钩子，如只在前台调用，使用钩子wp_enqueue_script；只在后台调用，使用admin_enqueue_scripts。

使用举例：

只在前台调用

<?phpfunction my_theme_scripts() {     wp_enqueue_script( \\\'myjs\\\', get_template_directory_uri() . \\\'/js/my.js\\\', array(), \\\'1.0.0\\\', true );}add_action( \\\'wp_enqueue_scripts\\\', \\\'my_theme_scripts\\\' );?>

只在后台调用

<?phpfunction my_theme_scripts() {     wp_enqueue_script( \\\'myjs\\\', get_template_directory_uri() . \\\'/js/my.js\\\', array(), \\\'1.0.0\\\', true );}add_action( \\\'admin_enqueue_scripts\\\', \\\'my_theme_scripts\\\' );?>