WordPress自定义主题中Bootstrap 5.2模态框无法弹出求助

在开发WordPress自定义主题时使用Bootstrap 5.2，遇到#loginModal模态框无法弹出的问题，已耗时一整天排查。以下是加载Bootstrap CSS/JS的函数代码及header.php中的模态框相关代码（基于Bootstrap示例修改），请协助解决：

加载Bootstrap的PHP函数代码 #

function load_css()
{
    wp_register_style('bootstrap', get_template_directory_uri().'/assets/css/bootstrap.min.css', array(), false, 'all');
    wp_register_style('sticky_footer', get_template_directory_uri().'/assets/css/sticky-footer.css', array(), false, 'all');

    wp_enqueue_style('bootstrap-reboot');
    wp_enqueue_style('bootstrap');
    wp_enqueue_style('sticky_footer');
}

function load_js()
{
    wp_enqueue_script('jquery');
    wp_register_script('boostrap', get_template_directory_uri().'/assets/js/bootstrap.min.js', 'jquery', false, true);
    wp_enqueue_script('bootstrap');
}

function register_navwalker(){
    require_once get_template_directory() . '/bootstrap-navwalker.php';
}

header.php中的模态框相关代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>

    <?php wp_head(); ?>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <?php 
                    if ( function_exists( 'the_custom_logo' ) ) {
                        $custom_logo_id = get_theme_mod('custom_logo');
                        $logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );

                        if ( has_custom_logo() ) {
                            echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . get_bloginfo( 'name' ) . '" width="150" height"="50">';
                        } else {
                            echo '<h1>' . get_bloginfo('name') . '</h1>';
                        }
                    }
                    ?>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primary-menu" aria-controls="primary-menu" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="primary-menu">
                    <?php
                    wp_nav_menu(array(
                        'theme_location' => 'primary-menu',
                        'container' => false,
                        'menu_class' => '',
                        'fallback_cb' => '__return_false',
                        'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
                        'depth' => 2,
                        'walker' => new bootstrap_5_wp_nav_menu_walker()
                    ));
                    ?>
                </div>
                <button type="button" class="d-flex btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#loginModal">
                    Accedi all'area riservata
                </button>
            </div>
        </nav>
    </header>
    <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalTitle" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="loginModalTitle">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <main>

#loginModal是一个供用户输入用户名和密码的模态框，验证后将自动关闭并打开指定链接，但目前模态框无法正常显示。

问题排查与解决方案 #

1. 修复Bootstrap JS脚本注册的拼写错误
   在load_js函数中，注册脚本时使用了错误的handle名称boostrap（少了一个字母t），但调用wp_enqueue_script('bootstrap')时用的是正确名称，导致Bootstrap JS未被正确加载。修改代码如下：

   function load_js()
   {
       wp_enqueue_script('jquery');
       // 修正handle名称为bootstrap
       wp_register_script('bootstrap', get_template_directory_uri().'/assets/js/bootstrap.min.js', array('jquery'), false, true);
       wp_enqueue_script('bootstrap');
   }
   

2. 移除未注册的bootstrap-reboot样式
   你调用了wp_enqueue_style('bootstrap-reboot')但并未注册该样式，这会导致控制台报错。Bootstrap的bootstrap.min.css已经包含了reboot样式，无需单独加载，直接删除该行代码：

   function load_css()
   {
       wp_register_style('bootstrap', get_template_directory_uri().'/assets/css/bootstrap.min.css', array(), false, 'all');
       wp_register_style('sticky_footer', get_template_directory_uri().'/assets/css/sticky-footer.css', array(), false, 'all');
   
       // 删除此行未注册的样式调用
       // wp_enqueue_style('bootstrap-reboot');
       wp_enqueue_style('bootstrap');
       wp_enqueue_style('sticky_footer');
   }
   

3. 确保加载函数正确挂载到WordPress钩子
   需将你的加载函数绑定到对应的WordPress动作钩子上，否则函数不会被执行。在主题的functions.php中添加以下代码：

   add_action('wp_enqueue_scripts', 'load_css');
   add_action('wp_enqueue_scripts', 'load_js');
   add_action('after_setup_theme', 'register_navwalker');
   

4. 验证文件路径与完整性

   • 确认assets/css/bootstrap.min.css和assets/js/bootstrap.min.js文件存在于主题目录的对应位置，文件名无拼写错误。
   • 检查Bootstrap文件是否完整，可重新下载官方Bootstrap 5.2的CSS和JS文件替换现有文件。

5. 查看浏览器控制台错误
   打开浏览器开发者工具（F12），切换到Console标签，查看是否存在404（文件未找到）或JS语法错误，这些信息能直接定位剩余问题。

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