WordPress：正确引入 CSS 和 JS 的正确方法

在开发 WordPress 主题或插件时，正确引入 CSS 和 JS 文件是构建可维护、可扩展项目的重要步骤。直接使用 <link> 或 <script> 标签虽然简单，但容易造成兼容性问题、版本冲突以及难以管理依赖关系。

WordPress 提供了内置的函数和钩子机制，可以更专业地管理脚本和样式表的加载。下面是如何使用 WordPress 推荐的方式引入 CSS 和 JS 文件的改写说明：

---

✅ 正确引入 CSS 和 JS 的方法
一、使用 wp_enqueue_style 引入 CSS 样式文件
作用：

安全地将 CSS 文件加入页面中，并支持依赖管理和条件加载。

语法：

wp_enqueue_style( $handle, $src = '', $deps = array(), $ver = false, $media = 'all' );

• $handle：样式名（唯一标识符）
• $src：CSS 文件的 URL
• $deps：该样式所依赖的其他样式（可选）
• $ver：版本号（用于缓存控制）
• $media：适用的媒体类型（如 all / print / screen）

示例：

function mytheme_enqueue_styles() {
    wp_enqueue_style( 'mytheme-main-style', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles' );

二、使用 wp_enqueue_script 引入 JavaScript 脚本
作用：

统一管理 JS 加载顺序，避免冲突，支持依赖关系和异步加载。

语法：

wp_enqueue_script( $handle, $src = '', $deps = array(), $ver = false, $in_footer = false );

• $handle：脚本名（唯一标识符）
• $src：JS 文件的 URL
• $deps：该脚本所依赖的其他脚本（可选）
• $ver：版本号
• $in_footer：是否在页面底部加载（建议设置为 true）

示例：

function mytheme_enqueue_scripts() {
    wp_enqueue_script( 'mytheme-main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );

三、完整示例（主题 functions.php 中的标准写法）

function mytheme_assets() {
    // 引入主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0', 'all' );

    // 引入第三方库（如 Bootstrap CSS）
    wp_enqueue_style( 'bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css', array(), '5.3.0', 'all' );

    // 引入主 JS 脚本（依赖 jQuery）
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true );

    // 引入 Bootstrap JS（依赖 Popper）
    wp_enqueue_script( 'bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', array('jquery'), '5.3.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_assets' );

四、额外技巧

• 使用 get_template_directory_uri()（父主题） 或 get_stylesheet_directory_uri()（子主题）来获取资源路径。
• 使用 is_page()、is_single() 等条件判断仅在特定页面加载资源。
• 使用 wp_add_inline_style() 和 wp_add_inline_script() 添加内联代码。
• 对于插件，请使用相同的机制注册并加载资源。

五、总结
推荐做法：始终使用 wp_enqueue_style 和 wp_enqueue_script 来加载 CSS 和 JS 文件。

这样不仅符合 WordPress 官方规范，还能有效避免脚本冲突、提升性能、增强可维护性，是制作专业 WordPress 主题和插件的标准方式。