无需插件在WordPress文章评论中添加星级评级图文教程

星级评级已成为一种广泛采用的便捷方法，用于收集各种在线平台上的用户反馈。星级评论的简单性和易用性使其在网络上广受欢迎。顺应这一趋势，我们可以通过引入我们自己的星级评级系统来增强 WordPress 评论功能。

通过将星级评级功能纳入 WordPress 评论中，网站所有者可以以简洁且用户友好的方式从用户那里收集有价值的见解和意见。星级评定系统为用户提供了一种直观且可识别的方法来表达他们对特定文章、产品或服务的满意或不满意。

在本教程中，搬主题将向您展示一种为WordPress评论功能添加星级评分系统的方法。这种方法不需要你下载其他第三方插件，无需插件在WordPress文章评论中添加星级评级图文教程。

在WordPress评论中添加星级评价系统

第1步：创建文件夹

要开始从您的计算机创建插件，您需要创建一个文件夹，其中将包含我们稍后需要的所有插件文件。文件夹名称可以是任何名称，但是为了保持其条理性，名称应与您的插件名称相关。

第2步：创建PHP主文件

创建插件文件夹后，进入该文件夹，在文本编辑器或代码编辑器中创建一个PHP文件，并将其命名为与插件文件夹相同的名称。

您刚刚创建的PHP文件将是插件的主文件，其中包含为WordPress评论功能添加星级系统所需的所有代码。

第3步：添加星级自定义代码

下一步是在刚刚创建的PHP文件中添加自定义代码。复制以下代码，粘贴到文件中，然后保存文件。

<?php
/*
Plugin Name: star-rating-comment
Plugin URI: https://www.banzhuti.com
Description: Custom Plugin for adding custom code
Version: 1.0.0
Author: WPPagebuilders
Author URI: https://www.banzhuti.com
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
//Enqueue the plugin's styles.
add_action( 'wp_enqueue_scripts', 'wpp_comment_rating_styles' );
function wpp_comment_rating_styles() {
  wp_register_style( 'wpp-comment-rating-styles', plugins_url( '/', __FILE__ ) . 'assets/style.css' );
  wp_enqueue_style( 'dashicons' );
  wp_enqueue_style( 'wpp-comment-rating-styles' );
}
//Create the rating interface.
add_action( 'comment_form_logged_in_after', 'wpp_comment_rating_rating_field' );
add_action( 'comment_form_after_fields', 'wpp_comment_rating_rating_field' );
function wpp_comment_rating_rating_field () {
  ?>
  <label for="rating">Rating<span class="required">*</span></label>
  <fieldset class="comments-rating">
    <span class="rating-container">
      <?php for ( $i = 5; $i >= 1; $i-- ) : ?>
        <input type="radio" id="rating-<?php echo esc_attr( $i ); ?>" name="rating" value="<?php echo esc_attr( $i ); ?>" /><label for="rating-<?php echo esc_attr( $i ); ?>"><?php echo esc_html( $i ); ?></label>
      <?php endfor; ?>
      <input type="radio" id="rating-0" class="star-cb-clear" name="rating" value="0" /><label for="rating-0">0</label>
    </span>
  </fieldset>
  <?php
}
//Save the rating submitted by the user.
add_action( 'comment_post', 'wpp_comment_rating_save_comment_rating' );
function wpp_comment_rating_save_comment_rating( $comment_id ) {
  if ( ( isset( $_POST['rating'] ) ) && ( '' !== $_POST['rating'] ) )
  $rating = intval( $_POST['rating'] );
  add_comment_meta( $comment_id, 'rating', $rating );
}
//Make the rating required.
add_filter( 'preprocess_comment', 'wpp_comment_rating_require_rating' );
function wpp_comment_rating_require_rating( $commentdata ) {
  if ( ! is_admin() && ( ! isset( $_POST['rating'] ) || 0 === intval( $_POST['rating'] ) ) )
  wp_die( __( 'Error: You did not add a rating. Hit the Back button on your Web browser and resubmit your comment with a rating.' ) );
  return $commentdata;
}
//Display the rating on a submitted comment.
add_filter( 'comment_text', 'wpp_comment_rating_display_rating');
function wpp_comment_rating_display_rating( $comment_text ){
  if ( $rating = get_comment_meta( get_comment_ID(), 'rating', true ) ) {
    $stars = '<p class="stars">';
    for ( $i = 1; $i <= $rating; $i++ ) {
      $stars .= '<span class="dashicons dashicons-star-filled"></span>';
    }
    $stars .= '</p>';
    $comment_text = $comment_text . $stars;
    return $comment_text;
  } else {
    return $comment_text;
  }
}

上述代码的作用是创建一个界面，在用户输入评论的同时给出评分，并加载一个CSS文件对其进行样式化，在提交评论的同时保存评分，使评分成为评论的必要条件，并在评论区显示评分和相关评论。

如果星级评分系统不是您在网站上发表评论的必要条件，您可以删除以下代码段。

• 通过删除评级标签中的以下代码段，删除评级界面中的*必填符号

<span class="required">*</span>

• 删除需要评级的过滤器和功能

//Make the rating required.
add_filter( 'preprocess_comment', 'wpp_comment_rating_require_rating' );
function wpp_comment_rating_require_rating( $commentdata ) {
  if ( ! is_admin() && ( ! isset( $_POST['rating'] ) || 0 === intval( $_POST['rating'] ) ) )
  wp_die( __( 'Error: You did not add a rating. Hit the Back button on your Web browser and resubmit your comment with a rating.' ) );
  return $commentdata;
}

第4步：在评级界面添加星星

一旦插件的主文件准备就绪，您可能需要为星级评定界面添加一些样式，因为它有点不美观且杂乱无章。

让我们用一些星星来代替等级选择，并把它排好。首先，创建一个文件夹并命名为 “assets”，与插件的主PHP文件（本例中为star-rating-comment.php）位于同一位置。

现在，打开新创建的assets文件夹，然后在其中创建 “style.css “CSS文件。style.css文件将包含所有的CSS片段，用于样式化评分界面。这些代码段如下：

.comments-rating {
  border: none;
  padding: 0;
  margin-left: 0;
}
.comments-rating label {
  display: inline-block;
}
.rating-container {
  font-size: 0;
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.rating-container * {
  font-size: 1.4rem;
}
.rating-container > input {
  display: none;
}
.rating-container > input + label {
  /* only enough room for the star */
  font-family: 'dashicons';
  display: inline-block;
  overflow: hidden;
  text-indent: 9999px;
  width: 1em;
  white-space: nowrap;
  cursor: pointer;
  margin: 0;
}
.rating-container > input + label:before {
  display: inline-block;
  text-indent: -9999px;
  content: "\f154";
  color: #888;
}
.rating-container > input:checked ~ label:before,
.rating-container > input + label:hover ~ label:before,
.rating-container > input + label:hover:before {
  content: "\f155";
  color: #e52;
  text-shadow: 0 0 1px #333;
}
.rating-container > .star-cb-clear + label {
  text-indent: -9999px;
  width: .5em;
  margin-left: -.5em;
}
.rating-container > .star-cb-clear + label:before {
  width: .5em;
}
.rating-container:hover > input + label:before {
  content: "\f154";
  color: #888;
  text-shadow: none;
}
.rating-container:hover > input + label:hover ~ label:before,
.rating-container:hover > input + label:hover:before {
  content: "\f155";
  color: #e52;
  text-shadow: 0 0 1px #333;
}
.comment-respond .rating-container > .star-cb-clear + label, .comment-respond .rating-container > input + label:before {
  text-indent: 9999px;
}
.comment-respond .rating-container > input + label {
  text-indent: -9999px;
}

将CSS片段添加到文件后，保存文件并继续下一步。

第5步：准备好插件文件并安装

现在您需要做的就是将插件文件夹压缩成ZIP文件。您可以使用任何归档器，只要它能将文件归档为ZIP文件，如下所示。

压缩后，将插件上传到您的WordPress网站。在 “添加插件”页面，点击 “上传插件 “按钮，然后点击 “选择文件 “按钮或将文件拖到上传框中。

上传文件后，点击 “立即安装 “按钮安装插件，然后继续激活插件。现在，您的评论功能中将包含星级系统。您可以通过发表评论查看结果。

并在评论区看到您的星级评论。

其他选项

显示文章的平均评分

作为扩展插件功能的额外选项，本步骤将指导您通过在插件的主PHP文件中添加更多自定义代码来显示文章的平均评分。平均评分将显示在您的单篇文章和主博文中的每篇文章上（星级显示取决于您的主题），就在内容之前。

在插件的主PHP文件（本例中为star-rating-comment.php）底部添加以下自定义代码。

//Get the average rating of a post.
function wpp_comment_rating_get_average_ratings( $id ) {
  $comments = get_approved_comments( $id );
  if ( $comments ) {
    $i = 0;
    $total = 0;
    foreach( $comments as $comment ){
      $rate = get_comment_meta( $comment->comment_ID, 'rating', true );
      if( isset( $rate ) && '' !== $rate ) {
        $i++;
        $total += $rate;
      }
    }
    if ( 0 === $i ) {
      return false;
    } else {
      return round( $total / $i, 1 );
    }
  } else {
    return false;
  }
}
//Display the average rating above the content.
add_filter( 'the_content', 'wpp_comment_rating_display_average_rating' );
function wpp_comment_rating_display_average_rating( $content ) {
  global $post;
  if ( false === wpp_comment_rating_get_average_ratings( $post->ID ) ) {
    return $content;
  }
  
  $stars   = '';
  $average = wpp_comment_rating_get_average_ratings( $post->ID );
  for ( $i = 1; $i <= $average + 1; $i++ ) {
    
    $width = intval( $i - $average > 0 ? 20 - ( ( $i - $average ) * 20 ) : 20 );
    if ( 0 === $width ) {
      continue;
    }
    $stars .= '<span style="overflow:hidden; width:' . $width . 'px" class="dashicons dashicons-star-filled"></span>';
    if ( $i - $average > 0 ) {
      $stars .= '<span style="overflow:hidden; position:relative; left:-' . $width .'px;" class="dashicons dashicons-star-empty"></span>';
    }
  }
  
  $custom_content  = '<p class="average-rating">Post\'s average rating is: ' . $average .' ' . $stars .'</p>';
  $custom_content .= $content;
  return $custom_content;
}

以下是单个文章的平均评分截图。

最后总结

在WordPress评论中加入星级评级系统提供了一种简单而有效的收集用户反馈的方法。这种方法可以提高用户参与度，鼓励有意义的互动，并为网站所有者提供有价值的见解。通过实施这一功能，网站所有者可以利用用户评级来改善他们的服务以及WordPress网站的整体用户体验。