WordPress仅加载单个CSS文件问题：如何同时加载自定义样式与Bootstrap？

嘿，我来帮你搞定这个问题！你遇到的情况其实挺常见的，核心问题大概率是样式入队的时机不对，以及没有遵循WordPress的最佳实践来加载样式文件。

问题根源 #

你直接在header.php里调用wp_register_style和wp_enqueue_style，但WordPress有专门的动作钩子来处理脚本和样式的加载——wp_enqueue_scripts。如果跳过这个钩子直接在模板文件里写，很容易出现加载顺序混乱、样式被覆盖或者只加载一个的情况。

正确的解决方案 #

把样式加载的代码移到主题的functions.php文件里，并用WordPress推荐的方式来注册和入队样式，同时设置好依赖关系（这样还能保证自定义样式在Bootstrap之后加载，方便你覆盖Bootstrap的默认样式）。

具体代码如下：

// 注册并入队主题样式
function my_theme_load_styles() {
    // 先加载Bootstrap CSS，handle名称用"bootstrap-min"（尽量避免用点，更规范）
    wp_enqueue_style(
        'bootstrap-min',
        get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css',
        array(), // 无依赖
        '1.0.0' // 版本号
    );

    // 加载自定义样式，依赖Bootstrap，这样会在Bootstrap之后加载
    wp_enqueue_style(
        'custom-style',
        get_template_directory_uri() . '/style.css',
        array('bootstrap-min'), // 依赖Bootstrap的handle
        '1.0.0'
    );
}
// 绑定到wp_enqueue_scripts钩子，确保在正确时机加载
add_action('wp_enqueue_scripts', 'my_theme_load_styles');

后续操作 #

• 打开你的主题文件夹，找到functions.php文件
• 将上面的代码粘贴到文件末尾（注意不要破坏已有的代码）
• 回到header.php，删除你之前写的那几行wp_register_style和wp_enqueue_style代码
• 刷新你的网站，现在两个CSS文件应该都能正常加载了！

额外说明 #

• 不需要分开调用wp_register_style和wp_enqueue_style，wp_enqueue_style可以一次性完成注册和入队，代码更简洁
• 设置依赖关系很重要：自定义样式依赖Bootstrap，能保证加载顺序正确，避免你的样式被Bootstrap覆盖
• 样式的handle名称（第一个参数）尽量用短横线或下划线，避免用特殊字符，减少潜在问题

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