在WordPress中，wp_enqueue_script() 和 wp_enqueue_style() 是两个非常重要的函数，它们用于在WordPress主题或插件中正确地加载JavaScript脚本和CSS样式表。以下是如何使用这两个函数的步骤：

使用 wp_enqueue_script() 加载JavaScript脚本

1. 钩子到 wp_enqueue_scripts 动作：
   在主题的 functions.php 文件或插件文件中，你需要将你的脚本注册和排队到 wp_enqueue_scripts 动作钩子。

   add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

2. 定义 my_theme_enqueue_scripts 函数：
   在这个函数中，你可以使用 wp_enqueue_script() 来加载你的JavaScript文件。

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

   • 'my-custom-script' 是脚本的唯一标识符。
   • 'get_template_directory_uri() . '/js/my-script.js' 是脚本的URL。
   • array('jquery') 表示这个脚本依赖jQuery库，因此jQuery会在这个脚本之前加载。
   • '1.0.0' 是脚本的版本号。
   • true 表示脚本应该被放置在页面的底部。

使用 wp_enqueue_style() 加载CSS样式表

1. 钩子到 wp_enqueue_scripts 动作：
   和加载脚本一样，你需要将样式表的注册和排队也放到 wp_enqueue_scripts 动作钩子中。

   add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

2. 定义 my_theme_enqueue_styles 函数：
   在这个函数中，你可以使用 wp_enqueue_style() 来加载你的CSS文件。

   function my_theme_enqueue_styles() {
      // 注册一个样式表
      wp_register_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0.0', 'all');
   
      // 队列样式表
      wp_enqueue_style('my-custom-style');
   }

   • 'my-custom-style' 是样式表的唯一标识符。
   • 'get_template_directory_uri() . '/css/my-style.css' 是样式表的URL。
   • array() 可以用来指定这个样式表依赖的其他样式表。
   • '1.0.0' 是样式表的版本号。
   • 'all' 表示这个样式表适用于所有媒体类型。

注意事项

• 确保 wp_enqueue_script() 和 wp_enqueue_style() 在正确的位置被调用，通常是在 wp_enqueue_scripts 动作钩子中。
• 如果你的脚本或样式依赖于其他脚本或样式，请确保在注册时将它们列为依赖项。
• 使用版本号可以帮助浏览器在文件更新后重新加载资源。
• 在本地化和传递参数给JavaScript脚本时，可以使用 wp_localize_script() 函数。

通过遵循上述步骤，你可以有效地管理WordPress中的脚本和样式，并确保它们在正确的位置和时间被加载。