WordPress如何添加评分系统

1. 首先咱得明白，WordPress本身没自带评分功能，但咱能通过插件或自己写代码实现。推荐用插件，比如"Rate my Post"或者"WP-PostRatings"，安装完配置几下就行，适合新手。要是想折腾代码，那就往下看，我带你手撸一个简单的五星评分。

2. 先在主题的functions.php文件里加代码，注册评分字段。下面这段代码放进去，它会给文章添加一个自定义元字段（meta field）来存分数：

function add_rating_field() {
    register_meta('post', 'post_rating', array(
        'type' => 'number',
        'description' => '存储文章评分',
        'single' => true,
        'show_in_rest' => true
    ));
}
add_action('init', 'add_rating_field');

3. 接下来，在前端显示评分UI。咱用HTML和CSS弄个五星打分，用户点星星就能评分。把这段代码放到single.php或者你想显示的地方：

<div class="f442-c8a2-6e68-8885 rating-system">
    <span>给这篇文章打分: </span>
    <?php for ($i = 1; $i <= 5; $i++): ?>
        <span class="c8a2-6e68-8885-bbc2 star" data-rating="<?php echo $i; ?>">★</span>
    <?php endfor; ?>
    <p>当前评分: <span id="current-rating"><?php echo get_post_meta(get_the_ID(), 'post_rating', true) ?: '暂无'; ?></span></p>
</div>

4. 然后加点儿CSS让星星好看点，扔到主题的style.css里：

.star {
    cursor: pointer;
    color: gray;
    font-size: 24px;
}
.star:hover,
.star.active {
    color: gold;
}

5. 现在搞JavaScript处理用户点击，用Ajax把评分存到数据库。在主题里新建个JS文件，或者直接写到footer.php：

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

        $.post('/wp-admin/admin-ajax.php', {
            action: 'save_rating',
            post_id: post_id,
            rating: rating
        }, function(response) {
            if (response.success) {
                $('#current-rating').text(rating);
                $('.star').removeClass('active');
                $('.star[data-rating="' + rating + '"]').addClass('active');
            }
        });
    });
});

6. 最后，在functions.php里加Ajax处理函数：

function save_rating() {
    $post_id = intval($_POST['post_id']);
    $rating = intval($_POST['rating']);
    if ($rating < 1 || $rating > 5) {
        wp_die('无效评分');
    }
    update_post_meta($post_id, 'post_rating', $rating);
    wp_die();
}
add_action('wp_ajax_save_rating', 'save_rating');
add_action('wp_ajax_nopriv_save_rating', 'save_rating');

7. 搞定后，刷新文章页就能看到评分系统了。用户点星星，分数会自动存起来，还能显示当前分。记得测试下，有时候缓存会捣乱，清空缓存再试。

8. 扩展思路：如果想搞更复杂的，比如平均分、评论整合，可以用WordPress的hook系统，比如在评论提交时触发评分更新。或者用REST API做前端分离，但那就是另一个故事了。总之，评分系统核心就是存数据和显示数据，别想太复杂。

Tags：

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