GeneratePress子主题：如何用functions.php批量/逐个添加CSS文件？

嘿，针对你的问题，我来给你详细拆解一下：

一、一次性批量添加VS逐个添加：哪种正确？ #

两种方式都是合法且正确的，主要取决于你的需求：

• 批量添加：适合CSS文件之间没有严格加载顺序要求的场景，操作更高效，减少重复代码。
• 逐个添加：适合需要精确控制加载顺序（比如某文件依赖另一个文件的样式），或者需要针对特定页面加载不同CSS的场景，可控性更强。

二、用functions.php批量添加所有.css文件的方法 #

你可以借助PHP的glob()函数遍历子主题目录下的CSS文件，再通过WordPress的wp_enqueue_style()函数批量注册加载。以下是完整代码：

function gp_child_enqueue_all_css() {
    // 指定主主题样式的handle，确保子主题CSS在主主题样式之后加载
    $parent_style = 'generate-style';

    // 遍历子主题根目录下的所有.css文件
    // 若CSS文件在子文件夹（如/css/），则修改路径为：get_stylesheet_directory() . '/css/*.css'
    $css_files = glob(get_stylesheet_directory() . '/*.css');
    
    // 过滤掉可能的错误结果（比如目录中没有CSS文件时）
    if (!empty($css_files)) {
        foreach ($css_files as $file) {
            // 用文件名生成唯一的handle，避免冲突
            $handle = 'gp-child-' . basename($file, '.css');
            // 获取文件的URL地址
            $file_url = get_stylesheet_directory_uri() . '/' . basename($file);
            
            // 注册并加载CSS文件，依赖主主题样式保证加载顺序
            wp_enqueue_style(
                $handle,
                $file_url,
                array($parent_style),
                wp_get_theme()->get('Version') // 用子主题版本号刷新缓存
            );
        }
    }
}
// 在wp_enqueue_scripts钩子中执行函数
add_action('wp_enqueue_scripts', 'gp_child_enqueue_all_css');

注意事项： #

• 如果你的CSS文件存放在子主题的子目录中（比如/assets/css/），记得修改glob()的路径和get_stylesheet_directory_uri()的拼接部分。
• 若某些CSS文件有依赖关系（比如theme.css需要在custom.css之前加载），批量方式可能无法保证顺序，这种情况下建议用逐个添加的方式。

三、逐个添加CSS文件的正确操作方式 #

如果需要精确控制加载顺序，或者只需要加载特定文件，直接用wp_enqueue_style()逐个注册即可，每个文件需要唯一的handle。示例代码：

function gp_child_enqueue_individual_css() {
    $parent_style = 'generate-style';

    // 加载自定义样式文件
    wp_enqueue_style(
        'gp-child-custom',
        get_stylesheet_directory_uri() . '/custom.css',
        array($parent_style), // 依赖主主题样式
        wp_get_theme()->get('Version')
    );

    // 加载响应式样式文件（若需要依赖其他子主题CSS，可添加到数组中，比如array($parent_style, 'gp-child-custom')）
    wp_enqueue_style(
        'gp-child-responsive',
        get_stylesheet_directory_uri() . '/responsive.css',
        array($parent_style),
        wp_get_theme()->get('Version')
    );

    // 可继续添加更多CSS文件...
}
add_action('wp_enqueue_scripts', 'gp_child_enqueue_individual_css');

核心要点： #

• 每个CSS文件的handle必须唯一，不能和主主题或其他插件的handle重复。
• 通过$deps参数（数组）可以指定依赖关系，确保样式按正确顺序加载。
• 使用子主题的版本号作为$ver参数，方便在更新样式后强制浏览器刷新缓存。

内容的提问来源于stack exchange，提问作者Ogi22