详解 WordPress `wp_enqueue_scripts` 钩子源码：在 `wp_head()` 中的调用时机。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位同学们，今天咱们来聊聊 WordPress 的一个关键点，也是很多新手容易懵逼的地方：wp_enqueue_scripts 钩子，以及它在 wp_head() 中被调用的时机。放心，今天这堂课，咱们用最接地气的方式，把这个看似高深的问题给掰开了、揉碎了，保证大家听完之后，以后再遇到相关的问题，都能自信地说：“这玩意儿，我熟！”

一、开场白：为啥我们要关注 wp_enqueue_scripts ？

想想看，咱们辛辛苦苦写好的 CSS 样式，JS 脚本，要是没有正确加载到页面上，那岂不是白忙活了？ wp_enqueue_scripts 就是用来优雅地、规范地加载这些资源的。通过它，你可以控制加载顺序、依赖关系，避免各种冲突，让你的网站前端代码井然有序。

二、wp_enqueue_scripts 是个啥？钩子本质分析

先来个定义，wp_enqueue_scripts 是一个 WordPress 动作钩子 (Action Hook)。简单来说，它就是一个特殊的“插座”，允许你在 WordPress 核心代码执行的特定位置，插入你自己的代码。

举个栗子： 想象一下，你家的墙上有一个插座（wp_enqueue_scripts），你可以往上面插各种电器（CSS、JS）。WordPress 会在它觉得合适的时候（wp_head()）给你通电，让你的电器开始工作。

钩子的工作原理：

注册钩子： 你的插件或主题通过 add_action() 函数，把你的自定义函数（也就是要加载 CSS、JS 的函数）注册到 wp_enqueue_scripts 钩子上。
触发钩子： WordPress 在适当的时机，比如在 wp_head() 函数中，会调用 do_action('wp_enqueue_scripts') 来触发这个钩子。
执行函数： 当钩子被触发时，所有注册到该钩子上的函数，都会按照一定的优先级顺序执行。

三、wp_enqueue_scripts 的常见用法：代码实战

废话不多说，直接上代码！

<?php
/**
 *  一个用于加载 CSS 和 JS 的示例函数
 */
function my_enqueue_scripts() {

  // 注册 CSS 文件
  wp_register_style(
    'my-custom-style', // 样式句柄 (Handle)
    get_template_directory_uri() . '/css/custom.css', // 样式文件 URL
    array(), // 依赖关系，为空表示没有依赖
    '1.0', // 版本号
    'all' // 媒介类型，'all' 表示所有设备
  );

  // 加载 CSS 文件
  wp_enqueue_style( 'my-custom-style' );

  // 注册 JS 文件
  wp_register_script(
    'my-custom-script', // 脚本句柄 (Handle)
    get_template_directory_uri() . '/js/custom.js', // 脚本文件 URL
    array( 'jquery' ), // 依赖关系，这里依赖 jQuery
    '1.0', // 版本号
    true // 是否在 footer 加载，true 表示在 footer 加载
  );

  // 加载 JS 文件
  wp_enqueue_script( 'my-custom-script' );

}

// 将函数注册到 wp_enqueue_scripts 钩子上
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

代码解释：

wp_register_style() 和 wp_register_script()：这两个函数用于注册 CSS 和 JS 文件。注册之后，WordPress 就知道了这些文件的存在，但还没有真正加载它们。
- 句柄 (Handle)： 每个资源都有一个唯一的句柄，就像人的名字一样，方便你引用和管理。
- 依赖关系 (Dependencies)： 你可以指定当前资源依赖于哪些其他资源。比如，my-custom-script 依赖于 jquery，WordPress 会确保 jQuery 在 my-custom-script 之前加载。
- 版本号 (Version)： 用于浏览器缓存管理。当你修改了 CSS 或 JS 文件时，更新版本号可以强制浏览器重新下载文件。
- in_footer (仅针对 JS)： 指定是否在页面的 <footer> 部分加载脚本。默认是 false，表示在 <head> 中加载。建议将不影响页面首次渲染的脚本放在 <footer> 中加载，可以提高页面加载速度。
wp_enqueue_style() 和 wp_enqueue_script()：这两个函数用于加载已经注册的 CSS 和 JS 文件。只有调用了这两个函数，资源才会被真正添加到页面上。
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );：这行代码将 my_enqueue_scripts 函数注册到 wp_enqueue_scripts 钩子上。也就是说，当 wp_enqueue_scripts 钩子被触发时，my_enqueue_scripts 函数会被执行，从而加载 CSS 和 JS 文件。

四、wp_head() 中的调用时机：关键所在！

现在，我们来揭开今天的主角：wp_head()。

wp_head() 是一个 WordPress 函数，它通常被放在主题的 header.php 文件中的 <head> 标签内。它的作用是输出一些重要的 HTML 标签，比如：

<title> 标签 (页面标题)
<meta> 标签 (元数据，比如描述、关键词)
<link> 标签 (用于链接 CSS 文件)
<script> 标签 (用于链接 JS 文件)

重点来了： wp_head() 函数内部会调用 do_action('wp_head')。而 do_action('wp_head') 钩子，会在 wp_enqueue_scripts 钩子之后被触发。

关系图：

----------------------------------
| header.php                     |
|----------------------------------|
| <head>                         |
|   ...                          |
|   <?php wp_head(); ?>         |  <-- 调用 wp_head()
|   ...                          |
| </head>                        |
----------------------------------
        |
        V
----------------------------------
| wp_head() 函数内部            |
|----------------------------------|
| ...                            |
| do_action('wp_head');           |  <-- 触发 wp_head 钩子
| ...                            |
----------------------------------
        |
        V
----------------------------------
|  do_action('wp_head') 触发的动作 |
|----------------------------------|
|  (包括：输出 CSS 和 JS 链接)    |
----------------------------------

调用顺序：

WordPress 开始解析页面。
解析到 header.php 文件，执行 wp_head() 函数。
wp_head() 函数内部会触发 do_action('wp_head') 钩子。
在 wp_head 钩子被触发之前，WordPress 会先触发 wp_enqueue_scripts 钩子。
所有注册到 wp_enqueue_scripts 钩子上的函数（比如我们上面的 my_enqueue_scripts 函数）会被执行，CSS 和 JS 文件会被注册和加载。
然后，wp_head 钩子被触发，WordPress 根据之前加载的 CSS 和 JS 文件，生成相应的 <link> 和 <script> 标签，并输出到页面上。

重要结论：

wp_enqueue_scripts 在 wp_head 之前运行。 这意味着，你需要在 wp_enqueue_scripts 钩子中注册和加载你的 CSS 和 JS 文件，WordPress 才能在 wp_head 中正确地将它们输出到页面上。
加载顺序很重要。 如果你需要确保某个 CSS 或 JS 文件在其他文件之前加载，可以使用 wp_register_style() 和 wp_register_script() 的 dependencies 参数来指定依赖关系。
不要直接在 header.php 中写 <link> 和 <script> 标签。 虽然这样也能加载 CSS 和 JS 文件，但这不符合 WordPress 的规范，而且容易造成冲突和管理上的混乱。始终使用 wp_enqueue_scripts 钩子来加载资源。

五、进阶技巧：条件加载和优先级控制

条件加载： 有时候，你可能只需要在特定的页面上加载某些 CSS 或 JS 文件。这时，可以使用 WordPress 的条件判断函数，比如 is_home()、is_page()、is_single() 等。

function my_conditional_scripts() {
  if ( is_page( 'contact' ) ) { // 只在 contact 页面加载
    wp_enqueue_script( 'contact-form', get_template_directory_uri() . '/js/contact-form.js', array('jquery'), '1.0', true );
  }
}
add_action( 'wp_enqueue_scripts', 'my_conditional_scripts' );

优先级控制： add_action() 函数的第三个参数可以用来控制函数的执行优先级。优先级越低，函数执行得越早。默认优先级是 10。
```
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts', 20 ); // 降低优先级，让它在其他函数之后执行
```

六、常见问题和解决方案

CSS 或 JS 文件没有加载：
- 检查是否正确注册和加载了文件 ( wp_register_style/wp_register_script 和 wp_enqueue_style/wp_enqueue_script )。
- 检查文件路径是否正确。
- 检查是否有语法错误，导致加载中断。
- 清除浏览器缓存。
- 确保你把加载资源的函数挂载到了 wp_enqueue_scripts 钩子上。
CSS 或 JS 文件加载顺序错误：
- 使用 wp_register_style() 和 wp_register_script() 的 dependencies 参数来指定依赖关系。
- 调整 add_action() 函数的优先级参数。
JS 报错：$ is not defined：
- 这通常是因为 jQuery 没有正确加载。确保你的脚本依赖于 jQuery ( array( 'jquery' ) )，并且 jQuery 在你的脚本之前加载。
- 使用 jQuery(document).ready(function($) { ... }); 来包裹你的 jQuery 代码，以确保在 DOM 加载完成后再执行。

七、总结：wp_enqueue_scripts 是你的好朋友！

wp_enqueue_scripts 钩子是 WordPress 主题和插件开发中不可或缺的一部分。掌握了它的用法，你就可以优雅地、规范地加载 CSS 和 JS 文件，避免各种冲突，让你的网站前端代码井然有序。记住，它在 wp_head() 之前执行，加载顺序很重要，善用依赖关系和优先级控制，你就能成为 WordPress 前端开发高手！

好了，今天的课程就到这里。希望大家能够学有所获，以后在开发 WordPress 项目时，能够更加得心应手。下课！

发表回复 取消回复

发表回复取消回复