在WordPress中，wp_enqueue_script() 和 wp_enqueue_style() 是两个非常关键的函数，它们用于在主题或插件中注册、排队和加载JavaScript脚本和CSS样式表。以下是使用这两个函数的基本步骤：

1. 注册脚本和样式

首先，你需要注册你的脚本和样式。这通常在 functions.php 文件中完成。

// 注册一个JavaScript脚本
function my_theme_enqueue_scripts() {
    wp_register_script(
        'my-custom-script', // 脚本ID
        get_template_directory_uri() . '/js/my-script.js', // 脚本URL
        array('jquery'), // 依赖关系，例如jQuery
        '1.0.0', // 版本号
        true // 是否在页脚加载
    );

    // 注册一个CSS样式表
    wp_register_style(
        'my-custom-style', // 样式ID
        get_template_directory_uri() . '/css/my-style.css', // 样式URL
        array(), // 依赖关系
        '1.0.0', // 版本号
        'all' // 媒体类型
    );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

2. 排队脚本和样式

注册之后，你可以在 wp_enqueue_scripts 钩子中排队这些脚本和样式。

// 排队JavaScript脚本
function my_theme_enqueue_scripts() {
    // 注册脚本（如上所示）

    // 排队脚本
    wp_enqueue_script('my-custom-script');
}

// 排队CSS样式表
function my_theme_enqueue_styles() {
    // 注册样式（如上所示）

    // 排队样式
    wp_enqueue_style('my-custom-style');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

3. 在脚本中传递变量

有时你需要从PHP向JavaScript脚本传递变量。你可以使用 wp_localize_script() 函数来实现。

function my_theme_enqueue_scripts() {
    // 注册脚本（如上所示）

    // 排队脚本
    wp_enqueue_script('my-custom-script');

    // 传递变量到JavaScript
    $translation_array = array(
        'some_string' => __('Some string', 'text-domain'),
        'a_value' => '10'
    );
    wp_localize_script('my-custom-script', 'my_custom_script_vars', $translation_array);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

在JavaScript中，你可以通过 my_custom_script_vars 对象访问这些变量。

console.log(my_custom_script_vars.some_string); // 输出 "Some string"

注意事项

• 确保 wp_enqueue_script() 和 wp_enqueue_style() 函数是在 wp_enqueue_scripts 钩子下调用的。
• 如果你的脚本依赖于其他脚本（如jQuery），确保在注册时指定依赖关系。
• 使用版本号可以帮助你避免缓存问题，当脚本或样式更新时，只需更改版本号即可。
• 如果你的脚本需要在页脚加载，确保在 wp_register_script() 中将最后一个参数设置为 true。

遵循这些步骤，你可以有效地管理WordPress前端资源。