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

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

评分功能效果图

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

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

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

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

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

// 添加打分脚本到评论表单 
// code by yangjiyong VX：uu0216
function add_rating_to_comments($comment_field) {
?>
             
    

	  
	  来给本篇内容打个分吧：	    
	  

	    
★
	    
★
	    
★
	    
★
	    
★
	    
★
	    
★
	    
★
	    
★
	    
★
	  
    



 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= '
'.$comment_text.' 
';
    }
    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 '目前站内评价: ' . number_format($average, 1).'';
}
/// 在评论列表页 comment页 增加了一段js ，用于处理获取数据。

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

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

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

增加评分样式（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;
}

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

完成

这下是真的做完了。由于我个人的PHP水平也很有限，代码仅供参考。如果您有更好的建议或者有任何的问题，欢迎在下面评论区留言。我会认真的在下面等你的。