Blocksy子主题评论星级评分问题求助：显示与隐藏异常

1. 让星级评分显示在评论表单上方 #

用WordPress原生的comment_form_top钩子实现，同时加入访客判断逻辑，确保只在目标位置加载评分组件：

add_action('comment_form_top', 'display_visitor_star_rating');
function display_visitor_star_rating() {
    // 仅对未登录访客显示
    if (!is_user_logged_in()) {
        $post_id = get_the_ID();
        $user_ip = $_SERVER['REMOTE_ADDR'];
        // 标记当前IP是否已提交过评分
        $has_rated = get_post_meta($post_id, 'rated_ip_' . $user_ip, true);

        if (!$has_rated) {
            // 替换为你已有的星级评分HTML结构
            echo '<div class="star-rating-container">
                    <h4>为文章评分</h4>
                    <div class="stars" data-post-id="' . $post_id . '">
                        <span class="star" data-rating="1">★</span>
                        <span class="star" data-rating="2">★</span>
                        <span class="star" data-rating="3">★</span>
                        <span class="star" data-rating="4">★</span>
                        <span class="star" data-rating="5">★</span>
                    </div>
                    <input type="hidden" id="selected-rating" name="star_rating" value="">
                  </div>';
        }
    }
}

2. 提交评分后隐藏星级，不限制评论次数 #

通过AJAX提交评分并记录访客IP，避免重复显示评分组件，同时不影响评论功能：

PHP 处理AJAX请求（放入子主题functions.php） #

// 处理访客AJAX请求
add_action('wp_ajax_nopriv_submit_star_rating', 'submit_star_rating');
// 处理登录用户AJAX请求（这里实际用不到，仅为钩子完整性保留）
add_action('wp_ajax_submit_star_rating', 'submit_star_rating');

function submit_star_rating() {
    if (isset($_POST['post_id']) && isset($_POST['rating']) && !is_user_logged_in()) {
        $post_id = intval($_POST['post_id']);
        $rating = intval($_POST['rating']);
        $user_ip = $_SERVER['REMOTE_ADDR'];

        // 标记当前IP已评分，防止重复显示组件
        update_post_meta($post_id, 'rated_ip_' . $user_ip, '1');

        // 可在这里处理评分统计逻辑（比如更新文章平均评分）
        $current_avg = get_post_meta($post_id, 'avg_rating', true);
        $rating_count = get_post_meta($post_id, 'rating_count', true);
        $new_count = $rating_count ? $rating_count + 1 : 1;
        $new_avg = $current_avg ? (($current_avg * $rating_count) + $rating) / $new_count : $rating;

        update_post_meta($post_id, 'avg_rating', $new_avg);
        update_post_meta($post_id, 'rating_count', $new_count);

        wp_send_json_success();
    }
    wp_send_json_error();
}

JavaScript 处理提交与隐藏（放入子主题JS文件或通过wp_enqueue_script加载） #

document.addEventListener('DOMContentLoaded', function() {
    const ratingContainer = document.querySelector('.star-rating-container');
    if (!ratingContainer) return;

    const stars = ratingContainer.querySelectorAll('.star');
    const ratingInput = document.getElementById('selected-rating');
    // 确保AJAX地址和nonce正确传递（需在PHP中通过wp_localize_script初始化ajax_object）
    const ajaxUrl = ajax_object.ajax_url;
    const nonce = ajax_object.nonce;

    stars.forEach(star => {
        star.addEventListener('click', function() {
            const rating = this.getAttribute('data-rating');
            const postId = this.parentElement.getAttribute('data-post-id');
            ratingInput.value = rating;

            fetch(ajaxUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `action=submit_star_rating&post_id=${postId}&rating=${rating}&_wpnonce=${nonce}`
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    // 提交成功后隐藏评分容器
                    ratingContainer.style.display = 'none';
                }
            });
        });
    });
});

补充AJAX参数传递（PHP） #

在子主题functions.php中添加脚本初始化代码，确保JS能获取AJAX地址和验证nonce：

add_action('wp_enqueue_scripts', 'enqueue_star_rating_scripts');
function enqueue_star_rating_scripts() {
    wp_enqueue_script('star-rating-script', get_stylesheet_directory_uri() . '/js/star-rating.js', ['jquery'], '1.0', true);
    wp_localize_script('star-rating-script', 'ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('star-rating-nonce')
    ]);
}

3. 确保登录用户完全看不到星级 #

除了PHP中的!is_user_logged_in()判断，添加CSS强制隐藏登录用户的评分容器，避免前端渲染漏洞：

.logged-in .star-rating-container {
    display: none !important;
}

关键排查点 #

• 验证comment_form_top钩子在Blocksy主题中是否正常触发：可临时在钩子函数中输出测试文本，查看评论表单上方是否显示。
• 检查post meta存储：在文章编辑页的「自定义字段」中，查看是否生成了rated_ip_xxx格式的记录，确认评分标记逻辑生效。
• 排查AJAX请求错误：打开浏览器控制台，查看AJAX请求的响应状态，确认nonce验证、参数传递是否正确。

内容的提问来源于stack exchange，提问作者Heart Of Chindianapolis