发布于 由admin

分析 WordPress `wp_enqueue_scripts` 钩子的源码：如何安全地加载 CSS 和 JavaScript 文件。

早上好，各位代码界的段子手们！今天咱们来聊聊 WordPress 里那个负责给网页“穿衣服”（加载 CSS）和“打鸡血”（加载 JavaScript）的家伙——wp_enqueue_scripts 钩子。别看它名字像个咒语，其实用好了，能让你的主题或插件优雅又高效，避免各种加载冲突和性能问题。

一、wp_enqueue_scripts：舞台中心的魔术师

想象一下，你的 WordPress 网站是个舞台，每个主题、每个插件都是个演员，他们都想在舞台上展示自己的才艺（CSS 样式和 JavaScript 脚本）。如果没有一个统一的管理，那舞台肯定乱成一锅粥，演员们互相抢麦、服装撞衫，观众看得一脸懵。

wp_enqueue_scripts 钩子就是这个舞台的导演，它负责协调各个演员，让他们的才艺有序地展示出来。更准确地说，它允许你在 WordPress 的前端页面加载 CSS 和 JavaScript 文件。

二、wp_enqueue_scripts 钩子的基本用法：喊出你的名字

要让 wp_enqueue_scripts 钩子听你的，首先得告诉它你的存在。这很简单，只需在你的主题的 functions.php 文件或者插件的主文件中，使用 add_action() 函数注册一个回调函数。

<?php
function my_theme_scripts() {
    // 这里写加载 CSS 和 JavaScript 的代码
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
?>

这段代码的意思是：“当 WordPress 准备加载前端脚本时（wp_enqueue_scripts 钩子被触发时），就执行 my_theme_scripts 这个函数。”

三、wp_enqueue_style() 和 wp_enqueue_script()：亮出你的武器

现在，my_theme_scripts 函数就像一个武器库，你可以用 wp_enqueue_style() 函数来加载 CSS 文件，用 wp_enqueue_script() 函数来加载 JavaScript 文件。

  • wp_enqueue_style()：给网页穿上漂亮的衣服

    wp_enqueue_style(
    'my-theme-style', // 样式表的唯一标识符（handle）
    get_template_directory_uri() . '/css/style.css', // 样式表的 URL
    array(), // 依赖的其他样式表（可以为空）
    '1.0', // 版本号（可选）
    'all' // 媒体类型（可选，默认为 'all'）
);
    • 'my-theme-style'：这是你给这个样式表起的名字，必须是唯一的。WordPress 会用它来识别这个样式表，避免重复加载。
    • get_template_directory_uri() . '/css/style.css'：这是样式表的 URL。get_template_directory_uri() 函数会返回当前主题的目录 URL，然后我们拼接上 CSS 文件的相对路径。
    • array()：这个参数用来指定当前样式表依赖的其他样式表。比如，你的样式表依赖 Bootstrap 的样式表，就可以在这里指定。WordPress 会确保依赖的样式表先加载。
    • '1.0'：这是样式表的版本号。每次修改样式表后，最好更新版本号，这样浏览器才能强制刷新缓存。
    • 'all'：这是媒体类型，指定样式表应该应用在哪些设备上。'all' 表示所有设备。其他的选项包括 'screen'（电脑屏幕）、'print'（打印）等等。

  • wp_enqueue_script()：给网页注入活力

    wp_enqueue_script(
    'my-theme-script', // 脚本的唯一标识符（handle）
    get_template_directory_uri() . '/js/script.js', // 脚本的 URL
    array( 'jquery' ), // 依赖的其他脚本（可以为空）
    '1.0', // 版本号（可选）
    true // 是否在 </body> 标签之前加载（可选，默认为 false，即在 <head> 标签中加载）
);
    • 'my-theme-script'：这是你给这个脚本起的名字，必须是唯一的。
    • get_template_directory_uri() . '/js/script.js'：这是脚本的 URL。
    • array( 'jquery' )：这个参数用来指定当前脚本依赖的其他脚本。比如，你的脚本依赖 jQuery，就必须在这里指定。WordPress 会确保依赖的脚本先加载。
    • '1.0'：这是脚本的版本号。
    • true：这个参数决定脚本是在 <head> 标签中加载，还是在 </body> 标签之前加载。true 表示在 </body> 标签之前加载，这样可以加快页面加载速度。

四、安全加载：避免撞衫和冲突

在 WordPress 的世界里，撞衫（CSS 冲突）和打架（JavaScript 冲突）是常有的事。为了避免这种情况，我们需要遵循一些安全加载的原则。

  1. 使用唯一的标识符（handle）

    每个 CSS 和 JavaScript 文件都必须有一个唯一的标识符。这就像给每个人发身份证一样，确保 WordPress 能够准确地识别每个文件，避免重复加载。

  2. 声明依赖关系

    如果你的 CSS 或 JavaScript 文件依赖于其他文件，一定要声明依赖关系。这样 WordPress 才能按照正确的顺序加载文件，避免出现脚本错误或样式错乱。

  3. 使用版本号

    每次修改 CSS 或 JavaScript 文件后，最好更新版本号。这样浏览器才能强制刷新缓存，确保用户看到的是最新的版本。

  4. 合理选择加载位置

    一般来说，CSS 文件放在 <head> 标签中加载，JavaScript 文件放在 </body> 标签之前加载。这样可以加快页面加载速度，提升用户体验。但有些特殊的 JavaScript 文件，比如需要在页面渲染之前执行的，可以放在 <head> 标签中加载。

  5. 条件加载

    有些 CSS 和 JavaScript 文件只需要在特定的页面或条件下加载。比如，某个样式表只在文章页面需要，就可以使用 is_single() 函数来判断当前是否是文章页面，然后有条件地加载样式表。

    function my_theme_scripts() {
    if ( is_single() ) {
        wp_enqueue_style( 'my-post-style', get_template_directory_uri() . '/css/post.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

  6. 使用 wp_register_style() 和 wp_register_script() 预注册

    wp_register_style() 和 wp_register_script() 函数可以用来预先注册 CSS 和 JavaScript 文件，但不立即加载。这样可以在需要的时候再使用 wp_enqueue_style() 和 wp_enqueue_script() 函数加载，更加灵活。

    function my_theme_register_scripts() {
    wp_register_style( 'my-fancy-style', get_template_directory_uri() . '/css/fancy.css', array(), '1.0' );
    wp_register_script( 'my-fancy-script', get_template_directory_uri() . '/js/fancy.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_register_scripts' );

function my_theme_scripts() {
    if ( is_page( 'contact' ) ) {
        wp_enqueue_style( 'my-fancy-style' );
        wp_enqueue_script( 'my-fancy-script' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

    这段代码的意思是：首先使用 my_theme_register_scripts 预先注册 my-fancy-style 和 my-fancy-script，然后在 my_theme_scripts 函数中判断当前是否是 “contact” 页面，如果是，则加载这两个文件。

五、代码示例：一个完整的例子

下面是一个完整的例子，演示了如何使用 wp_enqueue_scripts 钩子加载 CSS 和 JavaScript 文件，并声明依赖关系。

<?php
function my_theme_scripts() {
    // 加载 Bootstrap CSS
    wp_enqueue_style(
        'bootstrap',
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
        array(),
        '5.3.0'
    );

    // 加载自定义 CSS
    wp_enqueue_style(
        'my-theme-style',
        get_template_directory_uri() . '/css/style.css',
        array( 'bootstrap' ), // 依赖 Bootstrap CSS
        '1.1'
    );

    // 加载 jQuery
    wp_enqueue_script( 'jquery' ); // WordPress 自带 jQuery

    // 加载 Bootstrap JavaScript (需要 popper.js)
    wp_enqueue_script(
        'bootstrap',
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
        array('jquery'),
        '5.3.0',
        true
    );

    // 加载自定义 JavaScript
    wp_enqueue_script(
        'my-theme-script',
        get_template_directory_uri() . '/js/script.js',
        array( 'jquery', 'bootstrap' ), // 依赖 jQuery 和 Bootstrap JavaScript
        '1.2',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
?>

这个例子做了以下几件事：

  • 加载了 Bootstrap 的 CSS 和 JavaScript 文件。
  • 加载了自定义的 CSS 和 JavaScript 文件。
  • 声明了 CSS 和 JavaScript 文件的依赖关系。
  • 将 JavaScript 文件放在 </body> 标签之前加载。

六、高级技巧：深入挖掘wp_enqueue_scripts 的潜力

  1. 使用 wp_localize_script() 将 PHP 变量传递给 JavaScript

    有时候，我们需要在 JavaScript 中使用 PHP 变量。wp_localize_script() 函数可以帮助我们实现这个目标。

    function my_theme_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );

    $data = array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'nonce' => wp_create_nonce( 'my_nonce' )
    );

    wp_localize_script( 'my-theme-script', 'my_vars', $data );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

    这段代码将 ajax_url 和 nonce 两个 PHP 变量传递给了 JavaScript，可以在 JavaScript 中使用 my_vars.ajax_url 和 my_vars.nonce 来访问这些变量。

    在 script.js 中：

    jQuery(document).ready(function($) {
    console.log(my_vars.ajax_url);
    console.log(my_vars.nonce);
});

  2. 使用 get_stylesheet_directory_uri() 获取子主题目录 URL

    如果在子主题中加载 CSS 和 JavaScript 文件，应该使用 get_stylesheet_directory_uri() 函数来获取子主题的目录 URL，而不是 get_template_directory_uri() 函数（它会返回父主题的目录 URL）。

    wp_enqueue_style(
    'my-child-theme-style',
    get_stylesheet_directory_uri() . '/css/style.css',
    array(),
    '1.0'
);

  3. 表格总结

函数/钩子 描述 参数 返回值 示例
wp_enqueue_scripts WordPress 钩子，用于在前端页面加载 CSS 和 JavaScript 文件。 无，但通常通过 add_action 添加回调函数，回调函数内调用 wp_enqueue_style 和 wp_enqueue_script。 无 add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
wp_enqueue_style() 用于加载 CSS 文件。 $handle (string, 必须): 样式表的唯一标识符。
$src (string, 可选): 样式表的 URL。
$deps (array, 可选): 依赖的其他样式表。
$ver (string|false|null, 可选): 版本号。
$media (string, 可选): 媒体类型。		 无 wp_enqueue_style( 'my-theme-style', get_template_directory_uri() . '/css/style.css', array(), '1.0' );
wp_enqueue_script() 用于加载 JavaScript 文件。 $handle (string, 必须): 脚本的唯一标识符。
$src (string, 可选): 脚本的 URL。
$deps (array, 可选): 依赖的其他脚本。
$ver (string|false|null, 可选): 版本号。
$in_footer (bool, 可选): 是否在 标签之前加载。		 无 wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );
wp_register_style() 用于注册 CSS 文件，但不立即加载。 参数同 wp_enqueue_style()。 无 wp_register_style( 'my-fancy-style', get_template_directory_uri() . '/css/fancy.css', array(), '1.0' );
wp_register_script() 用于注册 JavaScript 文件，但不立即加载。 参数同 wp_enqueue_script()。 无 wp_register_script( 'my-fancy-script', get_template_directory_uri() . '/js/fancy.js', array( 'jquery' ), '1.0', true );
wp_localize_script() 用于将 PHP 变量传递给 JavaScript。 $handle (string, 必须): 脚本的唯一标识符（必须先使用 wp_enqueue_script 注册）。
$object_name (string, 必须): JavaScript 对象的名称。
$l10n (array, 必须): 要传递的 PHP 变量数组。		 无 wp_localize_script( 'my-theme-script', 'my_vars', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
get_template_directory_uri() 获取当前主题的目录 URL。 无 当前主题的目录 URL (string)。 get_template_directory_uri() . '/css/style.css'
get_stylesheet_directory_uri() 获取当前子主题的目录 URL (如果使用的是子主题)。如果使用父主题，则返回父主题的目录 URL。 无 当前子主题的目录 URL (string)。 get_stylesheet_directory_uri() . '/css/style.css'
admin_url() 获取 WordPress 管理后台的 URL，可以用于构建 AJAX 请求的 URL。 $path (string, 可选): 管理后台 URL 的相对路径。
$scheme (string, 可选): URL 协议 (例如: ‘http’, ‘https’, ‘relative’, ‘admin’, ‘login’, ‘register’等).		 管理后台的 URL (string)。 admin_url( 'admin-ajax.php' )
wp_create_nonce() 创建一个 nonce (number used once)，用于验证请求的合法性，防止 CSRF 攻击。 $action (string|int, 必须): 用于生成 nonce 的 action 名称。 生成的 nonce (string)。 wp_create_nonce( 'my_nonce' )
is_single() 判断当前页面是否是文章页面。 无 如果当前页面是文章页面，则返回 true，否则返回 false (bool)。 if ( is_single() ) { ... }
is_page() 判断当前页面是否是某个特定的页面。 $page (int|string|array, 可选): 页面 ID、页面 slug 或页面标题。 如果当前页面是指定的页面，则返回 true，否则返回 false (bool)。 if ( is_page( 'contact' ) ) { ... }

七、总结：优雅地驾驭 wp_enqueue_scripts

wp_enqueue_scripts 钩子是 WordPress 主题和插件开发中不可或缺的一部分。掌握它的用法，可以让你优雅地加载 CSS 和 JavaScript 文件，避免各种冲突和性能问题。记住，代码的艺术在于简洁和高效，让你的 WordPress 网站像一首流畅的诗，而不是一堆杂乱的垃圾。

希望今天的讲座对大家有所帮助！下次再见，祝大家代码写得飞起，Bug 绕道而行！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注