给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 rest
	    document.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;
}

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