WordPress 中正确加载 JS 与 CSS 文件的方式

Question

我们在制作 WordPress 主题和插件过程中，经常需要添加 CSS 样式文件或者 JS 脚本文件，由于大多数用户运行在他们的网站上多个插件，可能会加载各式各样的文件，容易引起冲突，所以WordPress 系统为开发者提供了一个很好的脚本及样式文件的排队系统，这有助于防止插件之间的脚本冲突问题。

这篇文章中，主要为大家介绍 WordPress 中添加 JavaScript 文件与 CSS 文件的方法，对那些刚开始学习 WordPress 主题和插件的开发是特别有用的。

错误方式

WordPress 中提供了wp_head 钩子来帮助我们在页面的头部添加指定的头部消息，比如常见的关键词与描述，很多人也同样会使用这种方式来添加站点的外部样式文件与脚本文件，添加代码如下：

add_action('wp_head', 'wp_bad_script');
  function wp_bad_script() {
  echo ''; //添加js文件
}

这种方式虽然使用简单，但是非常不推荐使用，这种加载方式容易造成 WordPress 脚本的冲突。

脚本排队系统

WordPress 在全球拥有强大的开发社群，很多人都非常积极的参与到 WordPress 的主题与插件的开发当中，并且可以免费使用，为了防止各 个开发者开发的插件在使用过程总出现脚本冲突的问题，WordPress 提供了一个非常强大的脚本加载函数 wp_enqueue_script，通过这个 函数，我们可以告诉 WordPress 在哪加载脚本，脚本依赖哪些框架，而且该函数在利用内置的 JavaScript 库时，可以避免多次加载同一个脚本。 这有助于减少页面加载时间，以及避免与其他主题和插件冲突。

使用实例

WordPress 正确加载脚本的使用很简单，代码如下：

function wpb_adding_scripts() {
   wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'), '1.1', true);
   wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

你可以将以上代码放入你的插件文件中或者你主题的 functions.php 文件。

实例中我们首先通过函数 wp_register_script()，这个函数接收 5 个参数：

$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

当我们使用 wp_register_script() 函数注册脚本文件后，就可以使用函数 wp_enqueue_script() 函数来加载该注册的脚本文件。

也许有人会问我们为什么不直接加载脚本文件，而是先注册后加载，这不是多此一举。其实这主要是为了站点其他开发者在其他插件或者主题总方便引用你的核心脚本文件。

加载 CSS 样式文件

WordPress CSS 样式文件的加载与以上介绍的脚本文件加载方式是一样的，如下实例：

function wpb_adding_styles() {
  wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
  wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );

以上实例总我们同样了用了 wp_register_script 钩子来加载样式文件。

实例中我们使用了 plugins_url() 来获取样式文件的路径，这个一般在插件开发过程中使用的居多，如果我们是主题中开发使用到  wp_register_script() 函数则可以使用 get_template_directory_uri() 来获取样式文件路径，如果是子主题中使用，则可以使用函数 get_stylesheet_directory_uri() 来获取路径，实例如下：

function wpb_adding_scripts() {
  wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
  wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

通过以上的分析，希望对大家对 WordPress 添加 JavaScript 文件与 CSS 文件有新的认知。