WordPress中如何正确引入CSS文件

在WordPress开发过程中，样式表(CSS)是控制网站外观的重要组成部分。本文将详细介绍在WordPress中引入CSS文件的几种标准方法。

方法一：使用wp_enqueue_style函数

这是WordPress官方推荐的方式，通过functions.php文件添加：

function my_theme_styles() {
wp_enqueue_style(
'my-theme-style', // 样式表句柄
get_stylesheet_directory_uri() . '/css/style.css', // 样式表路径
array(), // 依赖项
'1.0.0', // 版本号
'all' // 媒体类型
);
}
add_action('wp_enqueue_scripts', 'my_theme_styles');

方法二：直接在header.php中引入

虽然不推荐，但可以直接在主题的header.php文件中添加：

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/style.css">

方法三：使用@import规则

在主题的主样式表(style.css)中导入其他CSS文件：

@import url("css/secondary.css");

最佳实践建议

1. 优先使用wp_enqueue_style：这种方式可以避免重复加载，正确处理依赖关系
2. 添加版本参数：便于浏览器缓存管理
3. 考虑加载顺序：确保依赖的样式表先加载
4. 子主题处理：使用get_stylesheet_directory_uri()而非get_template_directory_uri()

性能优化提示

• 合并多个CSS文件减少HTTP请求
• 使用最小化版本(.min.css)
• 对非关键CSS延迟加载
• 考虑内联关键CSS以提高首屏加载速度

通过以上方法，您可以高效地在WordPress主题或插件中引入CSS文件，同时遵循WordPress开发的最佳实践。