WordPress 标准脚本加载：wp_enqueue_scripts 用法详解

WordPress 脚本加载规范

在 WordPress 中加载脚本（包含 CSS 和 JS，下同）文件时，许多开发者习惯直接在 header.php 文件中添加 link 标签，或者通过 wp_head 钩子将 link 标签直接插入到 head 标签内。然而，这种做法并不符合 WordPress 的官方开发规范。

标准的脚本加载方式应当使用 WordPress 官方提供的函数，以统一标准。这样做具有多重优势：首先，它提升了系统的安全性和可管理性；其次，操作更加便捷。此外，该机制不仅允许主题挂载脚本，插件同样可以挂载，并且能够统一管理脚本，调整其挂载顺序、位置及其他相关配置。

选择合适的加载钩子

在确定具体加载脚本的函数之前，必须明确该函数应在哪个钩子（Hook）中执行。WordPress 提供了四个常用的脚本加载钩子，分别对应不同的场景：wp_enqueue_scripts（用于前台页面加载）、admin_enqueue_scripts（用于后台管理页面加载）、login_enqueue_scripts（用于登录页面加载）以及 init（用于全局加载）。

在这四个钩子中，wp_enqueue_scripts 是最常用的一个。将脚本挂载到 wp_enqueue_scripts 上，意味着这些脚本仅在前台页面加载时生效。

加载 JavaScript 脚本

接下来介绍如何加载 JavaScript 脚本。假设我们需要在前台加载一个位于主题根目录 js 文件夹下的 themes.js 文件。实现这一目标需要两个步骤：首先，使用 wp_register_script() 函数将 JS 文件添加到脚本注册表中（即注册脚本）；随后，使用 wp_enqueue_script() 函数将已注册的脚本挂载到页面中。

以下是具体的代码实现示例：

加载 CSS 样式表

除了 JavaScript，CSS 文件的加载也遵循类似逻辑。我们需要使用 wp_register_style() 注册样式表，并通过 wp_enqueue_style() 将其挂载。

function Bing_enqueue_scripts(){
  wp_register_script( 'themes_js', get_bloginfo( 'template_directory' ) . '/js/themes_js.js' );//注册 ID 为 themes_js 的 JS 脚本
  wp_enqueue_script( 'themes_js' );//挂载脚本
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

CSS 加载的具体代码示例如下：

function Bing_enqueue_scripts(){
  wp_register_style( 'style', get_bloginfo( 'template_directory' ) . '/style.css' );
  wp_enqueue_style( 'style' );
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

本文简要讲解了脚本加载的基本方法。合理利用 WordPress 的脚本排队机制，可以使程序逻辑更加灵活，同时提升页面加载效率。

通过上述步骤，开发者可以规范地在 WordPress 中管理前端资源。