给Wordpress添加评分功能到评论表单

今天要给你的 Wordpress 添加评分功能到评论表单吗？

评分功能效果图

什么类型的网站需要评分？

资源站
教程站
其他，我也没想到。。。

但我这个网站，因为是电影类的网站，好像还是有点需要的，所以，我就给它加上。

修改后台代码(functions.php )添加评分代码

首先，你需要将下面代码复制到 functions.php 中：

// 添加打分脚本到评论表单 
// code by yangjiyong VX：uu0216
function add_rating_to_comments($comment_field) {
?>
<div id="comment_rating_wrap">             <div class="rating"><input type="hidden" name="comment_rating" value="0" id="ratingValue" ><label for="comment_rating" class="rating_title">来给本篇内容打个分吧：</label>	    <ul><li><a href="#" data-value="1">★</a></li><li><a href="#" data-value="2">★</a></li><li><a href="#" data-value="3">★</a></li><li><a href="#" data-value="4">★</a></li><li><a href="#" data-value="5">★</a></li><li><a href="#" data-value="6">★</a></li><li><a href="#" data-value="7">★</a></li><li><a href="#" data-value="8">★</a></li><li><a href="#" data-value="9">★</a></li><li><a href="#" data-value="10">★</a></li></ul></div>
<div >
<?php display_average_rating() ?></div><!-- 显示当前平均分 -->
</div>
<?php
return $comment_field;
}
add_action('comment_form_top', 'add_rating_to_comments'); // 在评论表单字段之前添加评分表单// 保存评分到评论元数据
function save_rating_to_comment($comment_id) {if (isset($_POST['comment_rating'])) {$rating = intval($_POST['comment_rating']);if ($rating > 0 && $rating <= 10) {add_comment_meta($comment_id, 'rating', $rating);}}
}
add_action('comment_post', 'save_rating_to_comment');// 在评论列表中显示评分
add_filter( 'comment_text', function( $comment_text, $comment ) {$rating = get_comment_meta( $comment->comment_ID, 'rating', true );if ( $rating ) {$comment_text= '<div class="star-rating" data-star="' . $rating . '"></div><p class="commnet_show">'.$comment_text.' </p>';}return $comment_text;
}, 10, 2 );// 计算和显示所有评论的平均分
function display_average_rating() {global $post;$comments = get_comments('post_id=' . $post->ID);$ratings = array_map(function($comment) {return get_comment_meta($comment->comment_ID, 'rating', true);}, $comments);$ratings = array_filter($ratings); // 移除空值$average = count($ratings) ? array_sum($ratings) / count($ratings) : 0;echo '目前站内评价: <span class="average_rate">' . number_format($average, 1).'</span>';
}
/// 在评论列表页 comment页 增加了一段js ，用于处理获取数据。

这句话是调用平均分的方法，加到你觉得合适的地方吧。

<?php display_average_rating() ?>

在评论页（comment.php）增加评分处理程序

添加完了后台功能，你还需要处理前端页面的评分，下面这段程序实现前端页面的评分功能。将下面代码复制到 comment.php 中。

    <!-- 获取评分值，并修改点击颜色 ---><script>document.querySelectorAll('.rating a').forEach(function(link) {link.onclick = function() {var val = link.getAttribute('data-value');document.getElementById('ratingValue').value = val;// Highlight the clicked item and remove highlight from the restdocument.querySelectorAll('.rating a').forEach(function(a) {a.style.color = '#cccccc';});for(var i = 1; i <= val; i++) {document.querySelector('.rating a[data-value="' + i + '"]').style.color = '#ffb300';}return false;};});</script>

增加评分样式（style.css）

本例亮点：用CSS实现读取数据并转换成对应的星星数量

在前端页面展示分值时，从后台获取的是一个数值。但并不是小星星。通常做法是使用js获取用户的评分数值，然后使用js+CSS实现输出与分值相等的五角星数量。但是：能用CSS解决的问题就不要用JS。所以，在这里我使用了 css 的自定义属性 data-* 直接获取了每个评价的评分。然后利用CSS的伪类，对应输出不同数量的五角星。完美躲过了js。

把下面的样式表内容添加到你网站的样式表中：

/*************************************** 评论打分 */
.rating {unicode-bidi: bidi-override;  
}.rating_title{float: left;font-size: 0.8rem;
}.rating ul {list-style: none;display: inline-block;margin: 0;padding: 0;margin-left: 5px;
}.rating li {float: left;display: inline-block;font-family: "黑体";font-size:1.2rem;font-weight: bold;margin-right: 2px;
}.rating a {color: #cccccc;text-decoration: none;cursor: pointer;
}.rating a:hover{color: #FFB300 !important;text-decoration: none;
}.star-rating {display: inline-block;  
}
.star-rating:before {content: attr(data-star);color: #FFD700;display: inline-block;font-size: 16px;height: 20px;line-height: 20px;width: 100%;overflow: hidden;font-family: "黑体";
}.star-rating[data-star="1"]:before { content: '★';}
.star-rating[data-star="2"]:before { content: '★★';}
.star-rating[data-star="3"]:before { content: '★★★';}
.star-rating[data-star="4"]:before { content: '★★★★';}
.star-rating[data-star="5"]:before { content: '★★★★★';}
.star-rating[data-star="6"]:before { content: '★★★★★★';}
.star-rating[data-star="7"]:before { content: '★★★★★★★';}
.star-rating[data-star="8"]:before { content: '★★★★★★★★';}
.star-rating[data-star="9"]:before { content: '★★★★★★★★★';}
.star-rating[data-star="10"]:before { content: '★★★★★★★★★★';}.commnet_show{margin-left: 5px;height: 20px;line-height: 20px;
}
.average_rate{font-size: 16px;font-weight: bold;color: gold;
}

这样，漂亮的评分功能就这样实现了。当然，样式表你可以根据使用自己调整。