WordPress评分系统添加

1. 想在WordPress里加个评分功能对吧？这事说简单也简单，说复杂也复杂，看你想要哪种。就像搭积木，你可以直接装个现成插件，比如"Rate my Post"或者"WP-PostRatings"，装完调调设置就行，不用写代码。但要是你想自己从头搞一个，那就有意思了，得动动手写点东西。

2. 先说说基本原理：评分系统说白了就是两个部分——前台让用户点星星（或者数字），后台把数据存起来算平均数。WordPress自带了自定义字段（Custom Fields）功能，我们可以用这个存分数，但不够灵活，所以通常会用自定义数据表或者Post Meta来存。

3. 来，我们先弄个最简单的版本：用Post Meta存评分。首先得在文章底部加个打分按钮，可以用AJAX避免刷新页面。下面是一段示例代码，放到主题的functions.php里就行：

// 添加评分脚本
function add_rating_script() {
    if (is_single()) {
        wp_enqueue_script('jquery');
        wp_register_script('rating-script', get_template_directory_uri() . '/js/rating.js', array('jquery'), '1.0', true);
        wp_localize_script('rating-script', 'rating_ajax', array('ajaxurl' => admin_url('admin-ajax.php')));
        wp_enqueue_script('rating-script');
    }
}
add_action('wp_enqueue_scripts', 'add_rating_script');

// 处理评分请求
function handle_rating() {
    $post_id = intval($_POST['post_id']);
    $rating = intval($_POST['rating']);
    $current_rating = get_post_meta($post_id, 'user_rating', true);
    $current_count = get_post_meta($post_id, 'rating_count', true);

    // 更新平均分和计数
    $new_rating = (($current_rating * $current_count) + $rating) / ($current_count + 1);
    update_post_meta($post_id, 'user_rating', round($new_rating, 1));
    update_post_meta($post_id, 'rating_count', $current_count + 1);

    echo json_encode(array('success' => true, 'new_rating' => round($new_rating, 1)));
    wp_die();
}
add_action('wp_ajax_submit_rating', 'handle_rating');
add_action('wp_ajax_nopriv_submit_rating', 'handle_rating');

4. 然后在前台文章页加个HTML结构，比如放个div显示星星，让用户能点击。这里用纯CSS和JS实现交互，代码有点长，但逻辑简单：用户点第几颗星，就传对应的分数到后台。

<div class="8831-bdf8-e6df-14ef rating-widget">
    <span>给这篇文章打分: </span>
    <div class="bdf8-e6df-14ef-0e61 stars">
        <?php for ($i = 1; $i <= 5; $i++): ?>
            <span class="e6df-14ef-0e61-ad4c star" data-rating="<?php echo $i; ?>">☆</span>
        <?php endfor; ?>
    </div>
    <div class="14ef-0e61-ad4c-e783 rating-result">当前评分: <?php echo get_post_meta(get_the_ID(), 'user_rating', true) ?: '暂无'; ?></div>
</div>

5. 别忘了写JS处理点击事件，用jQuery发AJAX请求。新建个rating.js文件放到主题的js文件夹里：

jQuery(document).ready(function($) {
    $('.star').on('click', function() {
        var rating = $(this).data('rating');
        var post_id = '<?php echo get_the_ID(); ?>';

        $.post(rating_ajax.ajaxurl, {
            action: 'submit_rating',
            post_id: post_id,
            rating: rating
        }, function(response) {
            if (response.success) {
                $('.rating-result').text('当前评分: ' + response.new_rating);
            }
        });
    });
});

6. 现在基本功能有了，但问题来了：怎么防止用户重复评分？简单做法是用Cookie或者IP记录。加段检查代码，在handle_rating函数里先判断用户是否投过票：

$user_ip = $_SERVER['REMOTE_ADDR'];
$voted_ips = get_post_meta($post_id, 'voted_ips', true) ?: array();
if (in_array($user_ip, $voted_ips)) {
    echo json_encode(array('success' => false, 'message' => '您已经投过票了'));
    wp_die();
}
array_push($voted_ips, $user_ip);
update_post_meta($post_id, 'voted_ips', $voted_ips);

7. 如果你想做得更专业，可以考虑用自定义数据表存评分数据，避免Post Meta膨胀太厉害。用$wpdb类创建个新表，存用户ID、文章ID、分数和时间戳。这样还能做更复杂的统计，比如按时间筛选评分。

8. 最后记得优化显示：用Font Awesome代替纯文本星星，加个动画效果，让用户点的时候有反馈。CSS可以这样写：

.star {
    font-size: 24px;
    cursor: pointer;
    color: #ccc;
    transition: color 0.2s;
}
.star:hover,
.star.active {
    color: #ffc107;
}

9. 完工后测试下：多点几次，换浏览器试试防重复功能，看数据库有没有正确更新。WordPress开发就这感觉——东拼西凑但最终能跑起来，像个 Frankenstein 但实用至上。

10. 当然，如果你不想折腾，还是装插件吧。但自己写的话，下次改需求时你就知道怎么下手了，比如加个半星评分、按分类显示平均分什么的。代码这玩意，写着写着就顺了，就像骑自行车，摔几次就会了。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。