WordPress Astra主题自定义评论表单页面Bootstrap样式失效求助

一、Bootstrap失效的核心原因 #

你在页面模板内部注册wp_enqueue_scripts钩子的时机错误——get_header()执行时已经触发过这个钩子，导致Bootstrap的CSS和JS根本没被加载，样式自然无法生效。

二、具体修复步骤 #

1. 迁移Bootstrap入队代码
   将模板里的enqueue_bootstrap函数及add_action代码，移到主题的functions.php文件中（或单独做成小插件），确保钩子在正确时机触发，加载Bootstrap资源。

   示例（粘贴到functions.php）：

   function enqueue_bootstrap() {
       wp_enqueue_script('jquery');
       wp_enqueue_style('bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
       wp_enqueue_script('bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js', array('jquery'), '4.0.0', true);
   }
   add_action('wp_enqueue_scripts', 'enqueue_bootstrap');
   

2. 修正表单布局与样式类

   • 所有输入框、文本框添加form-control类，才能应用Bootstrap表单样式
   • 后两个col-12容器必须包裹在row内，避免布局错乱
   • 提交按钮添加btn btn-primary类，匹配Bootstrap按钮样式

3. 修复数据库拼写错误
   代码里的global $wpbd;是笔误，应改为global $wpdb;，否则无法调用WordPress数据库操作类。

三、修改后的完整页面模板代码 #

<?php
/* Template Name: Custom Review Page */
get_header(); // Include header
?>

<div id="content">
    <div style="text-align: center;">
        <h2>Add A Review</h2>
        <hr style="border: 0; height: 1px; background: #000; margin: 0 auto;">
    </div>
    <div class="container my-5">
        <div class="row">
            <div class="col-12">
                <form method="POST">
                    <div class="row mb-3">
                        <div class="col-md-6 col-12">
                            <label>Full name</label>
                            <input type="text" name="fullname" class="form-control" required>
                        </div>
                        <div class="col-md-6 col-12">
                            <label>Email</label>
                            <input type="email" name="email" class="form-control" required>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6 col-12">
                            <label>Country</label>
                            <input type="text" name="Country" class="form-control" required>
                        </div>
                        <div class="col-md-6 col-12">
                            <label>Rating</label>
                            <input type="number" name="Rating" class="form-control" min="1" max="5" required>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-12">
                            <label>Your message</label>
                            <textarea name="message" class="form-control" rows="5"></textarea>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <input type="submit" value="Submit" name="submit" class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <?php
    if (isset($_POST['submit']))
    {
        $name = sanitize_text_field($_POST['fullname']);
        $email = sanitize_email($_POST['email']);
        $country = sanitize_text_field($_POST['Country']);
        $rating = intval($_POST['Rating']);
        $message = sanitize_textarea_field($_POST['message']);

        global $wpdb;

        $sql=$wpdb->insert("review_form",array("fullname"=>$name,"email"=>$email,"country"=>$country,"rating"=>$rating,"message"=>$message));

        if($sql==true){
            echo "<script> alert('数据已提交') </script>";
        }
        else{
            echo "<script> alert('提交失败，请重试') </script>";
        }
    }
    ?>
</div>

<?php
get_footer(); // Include footer
?>

额外优化建议 #

• 评分输入框改为type="number"并限制min/max，避免无效输入
• 文本框用sanitize_textarea_field()代替普通文本清理函数，更适配多行内容
• 给表单行添加mb-3类，增加间距提升美观度

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