自定义WordPress主题加载Bootstrap但样式不生效求助

正在构建自定义WordPress区块模板主题，已通过wp_enqueue_scripts钩子加载jQuery、Bootstrap CSS和JS，页面源码显示资源已成功加载，但使用Bootstrap的CSS类和响应式布局代码时，样式完全未生效，页面采用WordPress默认CSS渲染，原本的响应式模块也被替换为WordPress默认列格式。相关站点：VoicesOfTheChurch.com

当前Enqueue脚本代码 #

function theme_assets() {
    // Register theme stylesheet.
    $theme_version = wp_get_theme()->get( 'Version' );

 //CSS
    wp_enqueue_style('custombootstrap', 'https:/cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css', array(), '3.4.4', 'all');
    wp_enqueue_style('customstyle', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'all');

    //JS
    wp_enqueue_script('customjquery', 'https://code.jquery.com/jquery-3.7.0.js', array(), '2.1.4', true);
    wp_enqueue_script('custombootstrap', 'http://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js', array(), '3.4.4', true);
    
}
add_action( 'wp_enqueue_scripts', 'theme_assets' );

测试用Bootstrap HTML代码 #

<div class="container-fluid px-0">
    <header>
        <div class="shape"></div>
        <!-- Navbar -->
        <nav class="navbar fixed-top navbar-expand-lg navbar-transparent">
            <a class="navbar-brand" href="#">SPORT SHOES</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">MEN</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">WOMEN</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">KIDS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">BOYS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">GIRLS</a>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- ./ end of navbar -->
        <div class="container">
            <div class="row">
                <div class="col-md-6 left-side">
                    <img src="https://i.imgur.com/jrRBTai.png" class="w-100">
                </div>
                <div class="col-md-6 right-side">
                    <h1>SPORTS SHOES</h1>
                    <p>FREE DELIVERY</p>
                    <div class="text-center">
                        <button class="btn order-button">ORDER NOW</button>
                    </div>
                </div>
            </div>
        </div>
    </header>
</div>

解决方案 #

1. 修复资源加载的核心问题 #

• 修正CDN路径：Bootstrap CSS的路径少了一个斜杠，https:/cdn.jsdelivr.net 改为 https://cdn.jsdelivr.net；Bootstrap JS的HTTP协议改为HTTPS，避免混合内容问题
• 避免重复Handle名称：CSS和JS使用了同一个custombootstrap handle，会导致资源覆盖，分别改为custom-bootstrap-css和custom-bootstrap-js
• 声明依赖关系：Bootstrap JS依赖jQuery，必须在wp_enqueue_script的第二个参数中添加array('customjquery')，确保jQuery先加载
• 修正版本号：当前代码中资源版本号与实际版本不符，统一修正为对应库的真实版本号，便于缓存管理

修正后的Enqueue代码：

function theme_assets() {
    // Register theme stylesheet.
    $theme_version = wp_get_theme()->get( 'Version' );

    // CSS
    wp_enqueue_style('custom-bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css', array(), '4.6.2', 'all');
    // 将customstyle的依赖设为custom-bootstrap-css，确保Bootstrap样式先加载
    wp_enqueue_style('customstyle', get_template_directory_uri() . '/style.css', array('custom-bootstrap-css'), '1.0.0', 'all');

    // JS
    wp_enqueue_script('customjquery', 'https://code.jquery.com/jquery-3.7.0.js', array(), '3.7.0', true);
    // 声明依赖customjquery
    wp_enqueue_script('custom-bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js', array('customjquery'), '4.6.2', true);
    
}
add_action( 'wp_enqueue_scripts', 'theme_assets' );

2. 解决样式优先级冲突 #

• 确保style.css依赖Bootstrap CSS，这样Bootstrap样式会先被加载，自定义样式可以按需覆盖
• 如果WordPress默认主题样式（如区块编辑器的默认样式）仍干扰，可以在自定义样式中使用更具体的选择器，例如：

/* 覆盖默认区块列样式，启用Bootstrap网格 */
.wp-block-columns .wp-block-column {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
}

• 谨慎使用!important，仅在必要时用于强制覆盖高优先级的默认样式

3. 检查区块编辑器的HTML过滤 #

• 使用“自定义HTML”区块添加测试代码，避免编辑器自动修改结构
• 查看页面渲染后的实际HTML（F12开发者工具），确认Bootstrap类名未被移除或修改
• 如果使用区块模板，检查模板文件是否强制添加了额外的容器或类，导致Bootstrap布局被破坏

4. 验证JS功能与报错 #

• 打开浏览器控制台（F12），查看是否有JavaScript报错，例如资源加载失败、jQuery冲突等
• 确认Bootstrap JS成功加载后，可以测试导航栏的折叠功能，验证交互是否正常

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