WordPress的Function.php中Style.css与Bootstrap CDN加载异常如何解决

一、现有代码存在的核心问题 #

原代码有3个语法和逻辑错误会导致资源加载异常：

1. wp_enqueue_script的依赖参数必须传入数组格式，原代码直接传字符串jquery会触发参数校验错误，导致脚本注册失败
2. Bootstrap 5 已完全移除jQuery依赖，不需要额外指定jQuery作为前置依赖
3. 自定义样式未指定依赖关系，可能出现先于Bootstrap CSS加载、被Bootstrap默认规则覆盖的情况

二、修正后的完整代码 #

<?php 
function custom_load_assets(){
    // 加载Bootstrap CSS
    wp_enqueue_style('bootstrap-cdn-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css', array(), '5.0.2');
    // 加载Bootstrap JS，*第五个参数设为true*即指定加载到页脚
    wp_enqueue_script('bootstrap-cdn-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js', array(), '5.0.2', true);
    // 加载自定义样式，指定依赖Bootstrap CSS，确保在Bootstrap之后加载，添加版本号避免缓存
    wp_enqueue_style('my_style', get_stylesheet_directory_uri().'/style.css', array('bootstrap-cdn-css'), '1.0.0');           
}
add_action('wp_enqueue_scripts', 'custom_load_assets');

三、后续排查步骤 #

如果替换代码后仍存在问题，按以下顺序排查：

• 验证自定义样式文件路径：打开网站前端按F12打开开发者工具，切换到「网络」面板筛选CSS请求，查看style.css的请求状态：
  • 状态码为404：检查style.css是否放在当前激活主题的根目录下，文件名大小写是否和代码中一致，服务器是否有目录读取权限
  • 状态码为200：切换到「元素」面板，选中未变色的标题元素，查看右侧样式面板的规则优先级，Bootstrap默认给h1~h6标签设置了独立的color规则，继承自body的color规则优先级更低不会生效，此时直接给对应标题标签写样式即可，例如h1 {color: orange;}
• 验证Bootstrap JS加载：在开发者工具「网络」面板筛选JS请求，确认bootstrap.min.js请求正常，且查看页面源码中该脚本的位置在</body>标签之前即可

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