如何加载高效的脚本与样式到WordPress

在进行开发 WordPress 主题或插件时会经常需要加载一些 JavaScript 来实现某些特殊功能，或添加一些CSS样式表美化UI；Wordpress为了最大限度地保各证 JavaScript 脚本的兼容性，不至于出现 JavaScript 失效的情况，所以一般在页头加载 JavaScript 文件。

我们一般不建议直接去修改主题的 header.php，或者添加代码到 wp_head() 或 wp_footer() 钩子上，而是将代码添加到 function.php 中使用 WordPress 官方文档建议使用的 WP 内建的 wp_enqueue_script() 和 wp_enqueue_style() 等函数进行操作。

函数：wp_enqueue_script()

使用方法：

参数分解：

• $handle：用于区别 JS 名称，即标识字串 (string)；
• $src：JS 的文件 URL (string)；
• $deps：加载的 JS 所依存的其他 JS 标识字串数组 (array:string, 非必需)；
• $ver：JS 的版本号，留空则使用当前 WP 版本号 (string, 非必需)；
• $in_footer：是否放置到网页 HTML 底部加载 (boolean, 非必需)。

函数：wp_enqueue_style()

使用方法：

参数分解：

• $handle：用于区别 CSS 的名称，即标识字串 (string)；
• $src：CSS 的文件 URL (string)；
• $deps：加载的 CSS 所依存的其他 CSS 标识字串数组 (array:string, 非必需)；
• $ver：CSS 文件的版本号，留空则使用当前 WP 版本号 (string, 非必需)；
• $media：用于加载 CSS 的头部标签 link 的 media 参数值 (string, 非必需)。

示例:

在以往我们制作 WP 主题的时候，当引入 JS 文件或 CSS 文件时，通常是直接编辑 header.php 文件，然后将相应的页面头部 HTML 代码添加进去。或者利用 wp_head() 函数钩子插入 HTML 代码。

遇到一个插件或主题功能比较多的 WordPres 网站时，如果仍使用自行插入代码的方式引入 JS / CSS，将可能导致 JS 的重载和 CSS 的重定义或覆盖的后果。而使用 wp_enqueue_script()和wp_enqueue_style() 等函数操作头部引用，将输出 HTML 语句的工作交给 WP 内核去完成（几乎所有插件都这么做），不仅能够避免重复加载的现象出现，也可实现按 PHP 脚本顺序，任意修改、覆盖、删除即将被加载的 JS 文件和 CSS 文件。

相关函数：

函数：wp_register_script()

wp_register_script 用于注册一个脚本文件（JS文件）并将返回值的句柄提供给函数 wp_enqueue_script() 使用。

使用方法：

参数分解：

• $handle：
  (string) (必须) 脚本名称. 名称必须唯一在之后函数 wp_enqueue_script() 会使用到该名称.
  Default: None
• $src：
  (string) (必须) 脚本路径，可以使用绝对路径。
  Default: None
• $deps：
  (array) (可选) 脚本依赖包，依赖包会在脚本加载之前预先加载。
  Default: array()
• $ver：
  (string) (可选)脚本版本控制。
  Default: false
• $in_footer：
  (boolean) (可选) 定义脚本的位置，如果为true脚本会在页面底部加载，默认在head头部加载。
  Default: false

应用实例
使用下面的方式，脚本被会自己的加载：

// 使用下面的方式进行脚本的注册及入队
add_action('wp_enqueue_scripts', 'enqueue_and_register_my_scripts');
 
function enqueue_and_register_my_scripts() {
    // 注册脚本
    wp_register_script('my_plugin', plugins_url('my-plugin/js/my_script.js'));
    // 只在特定页面使用该脚本
    if (is_page('careers')) {
        // 需要使用脚本依赖于上面注册的脚本及jQuery，则
        wp_enqueue_script('my-careers-script', plugins_url('my-pluing/js/my_careers_script.js', array('jquery', 'my_plugin'));
    }
}