在 WordPress 中，wp_enqueue_scripts 是一个用于挂载脚本和样式的方法

在 WordPress 中，wp_enqueue_scripts 是一个用于挂载脚本和样式的方法。它通常与 wp_enqueue_style 和 wp_enqueue_script 函数一起使用，以确保脚本和样式在适当的时间加载。以下是如何正确使用这些函数的指南。

步骤 1: 创建一个函数来加载脚本和样式

首先，在你的主题的 functions.php 文件中创建一个函数，该函数将使用 wp_enqueue_style 和 wp_enqueue_script 来加载你的 CSS 和 JavaScript 文件。

function my_custom_enqueue_scripts() {
    // 加载样式表
    wp_enqueue_style('my-main-style', get_template_directory_uri() . '/css/main.css');

    // 加载脚本
    wp_enqueue_script('my-main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}

步骤 2: 使用 wp_enqueue_scripts 挂载你的函数

使用 wp_enqueue_scripts 钩子将你的函数挂载到正确的 WordPress 操作中，以确保在适当的时间加载你的脚本和样式。

add_action('wp_enqueue_scripts', 'my_custom_enqueue_scripts');

示例：完整代码

以下是一个完整的示例，展示如何在你的主题的 functions.php 文件中正确使用 wp_enqueue_scripts。

<?php
// 在子主题或主题的 functions.php 文件中

function my_custom_enqueue_scripts() {
    // 加载样式表
    wp_enqueue_style('my-main-style', get_template_directory_uri() . '/css/main.css');

    // 加载脚本
    wp_enqueue_script('my-main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}

// 使用 wp_enqueue_scripts 钩子挂载自定义函数
add_action('wp_enqueue_scripts', 'my_custom_enqueue_scripts');

详细说明

• wp_enqueue_style 函数:
  • 第一个参数是样式句柄，用于唯一标识这个样式。
  • 第二个参数是样式文件的 URL。get_template_directory_uri() 函数会返回当前主题的根目录 URL。
• wp_enqueue_script 函数:
  • 第一个参数是脚本句柄，用于唯一标识这个脚本。
  • 第二个参数是脚本文件的 URL。
  • 第三个参数是一个数组，包含这个脚本的依赖脚本句柄。在这个例子中，脚本依赖于 jQuery。
  • 第四个参数是脚本的版本号。null 表示使用默认版本。
  • 第五个参数是一个布尔值，表示是否在页面底部加载脚本。true 表示在页面底部加载，通常这对于提高页面加载速度是有利的。

加载其他资源

除了加载你的主题资源外，你还可以通过同样的方法加载第三方资源，例如 Google 字体、外部 CSS 框架等。

function my_custom_enqueue_scripts() {
    // 加载 Google 字体
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:400,700');

    // 加载自定义样式表
    wp_enqueue_style('my-main-style', get_template_directory_uri() . '/css/main.css');

    // 加载 jQuery（如果未加载）
    if (!wp_script_is('jquery', 'enqueued')) {
        wp_enqueue_script('jquery');
    }

    // 加载自定义脚本
    wp_enqueue_script('my-main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}

add_action('wp_enqueue_scripts', 'my_custom_enqueue_scripts');

这种方法确保你的资源在正确的时间和位置加载，避免冲突和重复加载。