在WordPress中，wp_enqueue_script() 和 wp_enqueue_style() 是用于管理前端脚本和样式的两个核心函数。以下是如何使用这些函数的步骤和示例：

1. 注册脚本和样式

在将脚本和样式添加到页面之前，您需要先注册它们。注册脚本和样式不是必须的，但如果您想在之后使用 wp_enqueue_script() 或 wp_enqueue_style() 来管理它们，这是一个好习惯。

// 注册一个脚本
wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0', true );

// 注册一个样式
wp_register_style( 'my-custom-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0', 'all' );

参数说明：

• 'my-custom-script' 和 'my-custom-style' 是脚本和样式的唯一标识符。
• 脚本和样式的URL。
• 对于脚本，array( 'jquery' ) 表示这个脚本依赖于jQuery，它会在jQuery之后加载。
• '1.0' 是版本号，用于缓存管理。
• 对于脚本，true 表示脚本应该被放在页面的底部。
• 对于样式，'all' 表示样式适用于所有媒体类型。

2. 队列脚本和样式

注册之后，您可以使用 wp_enqueue_script() 和 wp_enqueue_style() 将它们添加到队列中，这样它们就会被输出到页面上。

// 队列一个脚本
wp_enqueue_script( 'my-custom-script' );

// 队列一个样式
wp_enqueue_style( 'my-custom-style' );

3. 在正确的位置添加函数

为了确保脚本和样式在WordPress中正确加载，您需要在 wp_enqueue_scripts 动作钩子中添加这些函数。

function my_theme_enqueue_scripts() {
    // 注册和队列脚本
    wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_script( 'my-custom-script' );

    // 注册和队列样式
    wp_register_style( 'my-custom-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0', 'all' );
    wp_enqueue_style( 'my-custom-style' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

4. 传递变量到JavaScript

有时候，您可能需要在JavaScript中使用WordPress的数据。您可以使用 wp_localize_script() 来传递变量。

function my_theme_enqueue_scripts() {
    // 注册和队列脚本
    wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0', true );

    // 传递变量到JavaScript
    $translation_array = array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'some_data' => 'Some data',
    );
    wp_localize_script( 'my-custom-script', 'my_ajax_obj', $translation_array );

    wp_enqueue_script( 'my-custom-script' );

    // 注册和队列样式
    wp_register_style( 'my-custom-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0', 'all' );
    wp_enqueue_style( 'my-custom-style' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

在JavaScript中，您可以通过 my_ajax_obj.ajax_url 和 my_ajax_obj.some_data 访问这些变量。

通过以上步骤，您可以在WordPress中有效地管理前端脚本和样式。