Hiển thị top commenters sidebar WordPress

3 ngày ago, WordPress Plugin, Views

Giới thiệu về Sidebar Top Commenters trong WordPress

Một trong những cách tuyệt vời để tăng tương tác và xây dựng cộng đồng trên website WordPress của bạn là khuyến khích người đọc bình luận. Việc hiển thị danh sách những người bình luận nhiều nhất (Top Commenters) trong sidebar không chỉ ghi nhận đóng góp của họ mà còn tạo động lực cho những người khác tham gia vào cuộc trò chuyện. Bài viết này sẽ hướng dẫn bạn cách triển khai sidebar Top Commenters một cách hiệu quả.

Sidebar Top Commenters giúp:

Tăng cường sự tham gia của người đọc.
Ghi nhận những người đóng góp tích cực.
Xây dựng cộng đồng xung quanh website của bạn.
Tăng thời gian người dùng ở lại trang web.

Các phương pháp hiển thị Top Commenters

Có nhiều cách để hiển thị sidebar Top Commenters trong WordPress. Chúng ta sẽ xem xét ba phương pháp chính:

Sử dụng plugin.
Chỉnh sửa theme bằng code (thông qua functions.php).
Sử dụng widget tùy chỉnh.

Mỗi phương pháp đều có ưu và nhược điểm riêng. Sử dụng plugin là cách đơn giản nhất, nhưng có thể ảnh hưởng đến hiệu suất nếu bạn cài đặt quá nhiều plugin. Chỉnh sửa theme bằng code cho phép bạn tùy chỉnh sâu hơn, nhưng đòi hỏi kiến thức về lập trình PHP. Widget tùy chỉnh là sự kết hợp giữa hai phương pháp trên.

Sử dụng plugin WordPress để hiển thị Top Commenters

Đây là phương pháp đơn giản và phổ biến nhất. Có rất nhiều plugin miễn phí và trả phí có thể giúp bạn thực hiện điều này. Một số plugin phổ biến bao gồm:

Top 10 – Popular posts plugin for WordPress
Simple Recent Comments
Comment Approved

Ví dụ: Sử dụng plugin “Top 10 – Popular posts plugin for WordPress”

Mặc dù tên là “Top 10 – Popular posts plugin for WordPress,” plugin này cũng cung cấp tính năng hiển thị Top Commenters. Các bước thực hiện như sau:

Cài đặt và kích hoạt plugin “Top 10 – Popular posts plugin for WordPress” từ kho plugin của WordPress.
Vào Appearance > Widgets.
Tìm widget “Top 10 – Popular Posts” hoặc tương tự (tùy thuộc vào phiên bản plugin).
Kéo widget vào sidebar bạn muốn hiển thị Top Commenters.
Trong cài đặt widget, bạn có thể tùy chỉnh số lượng người hiển thị, tiêu đề, và các tùy chọn khác. Chọn “Comments” trong phần “Display based on” để hiển thị top commenters.
Lưu lại và kiểm tra website của bạn.

Ưu điểm của phương pháp này là dễ dàng cài đặt và sử dụng, không đòi hỏi kiến thức về code. Tuy nhiên, nhược điểm là bạn bị giới hạn trong các tùy chọn mà plugin cung cấp.

Chỉnh sửa theme bằng code (functions.php)

Nếu bạn muốn tùy chỉnh sâu hơn, bạn có thể chỉnh sửa theme của mình bằng code. Phương pháp này đòi hỏi bạn phải quen thuộc với PHP và cấu trúc của theme WordPress.

Các bước thực hiện:

Tạo một bản sao lưu (backup) của theme của bạn trước khi thực hiện bất kỳ thay đổi nào.
Mở file functions.php của theme (hoặc child theme) của bạn.
Thêm đoạn code sau vào file functions.php:



function my_top_commenters($amount = 5) {

  global $wpdb;
  $results = $wpdb->get_results("

    SELECT

      COUNT(comment_author_email) AS comments_count,

      comment_author_email,

      comment_author,

      comment_author_url

    FROM

      {$wpdb->comments}

    WHERE

      comment_approved = '1'

    AND

      comment_type = ''

    GROUP BY

      comment_author_email

    ORDER BY

      comments_count DESC

    LIMIT {$amount}

  ");
  if ($results) {

    echo "
";

    foreach ($results as $result) {

      $author_url = $result->comment_author_url ? $result->comment_author_url : '#';

      echo '
' . esc_html($result->comment_author) . ' (' . $result->comments_count . ')
';

    }

    echo "
";

  } else {

    echo "
Chưa có ai bình luận!

"; } }

Đoạn code trên sẽ tạo một hàm tên là my_top_commenters(). Hàm này sẽ truy vấn cơ sở dữ liệu WordPress để lấy danh sách những người bình luận nhiều nhất, và hiển thị danh sách này dưới dạng một danh sách không có thứ tự (<ul>).
Tiếp theo, bạn cần thêm hàm này vào sidebar của bạn. Mở file sidebar.php của theme của bạn.
Tìm vị trí bạn muốn hiển thị Top Commenters, và thêm đoạn code sau:

<h3>Top Commenters</h3>

<?php my_top_commenters(); ?>

Lưu lại các file và kiểm tra website của bạn.

Ưu điểm của phương pháp này là bạn có thể tùy chỉnh hoàn toàn giao diện và chức năng của sidebar Top Commenters. Nhược điểm là đòi hỏi kiến thức về PHP và có thể gây lỗi nếu bạn không cẩn thận.

Lưu ý quan trọng:

Luôn sao lưu theme của bạn trước khi chỉnh sửa.
Sử dụng child theme để tránh mất các thay đổi khi theme được cập nhật.
Kiểm tra kỹ code của bạn để tránh lỗi.

Sử dụng Widget Tùy Chỉnh

Một cách tiếp cận khác là tạo một widget tùy chỉnh. Điều này cho phép bạn đóng gói code hiển thị Top Commenters vào một widget có thể tái sử dụng, giúp bạn dễ dàng quản lý và di chuyển nó giữa các sidebar khác nhau.

Các bước thực hiện:

Tạo một file PHP mới, ví dụ: top-commenters-widget.php.
Thêm đoạn code sau vào file top-commenters-widget.php:



<?php

/**

 * Plugin Name: Top Commenters Widget

 * Plugin URI: https://example.com/top-commenters-widget

 * Description: Displays a list of top commenters in a widget.

 * Version: 1.0

 * Author: Your Name

 * Author URI: https://example.com

 */
class Top_Commenters_Widget extends WP_Widget {
  function __construct() {

    parent::__construct(

      'top_commenters_widget',

      __( 'Top Commenters', 'top_commenters_widget' ),

      array( 'description' => __( 'Displays a list of top commenters.', 'top_commenters_widget' ), )

    );

  }
  public function widget( $args, $instance ) {

    $title = apply_filters( 'widget_title', $instance['title'] );

    $amount = isset( $instance['amount'] ) ? absint( $instance['amount'] ) : 5;
    echo $args['before_widget'];

    if ( ! empty( $title ) )

      echo $args['before_title'] . $title . $args['after_title'];
    my_top_commenters($amount); // Sử dụng hàm my_top_commenters() từ phần trước
    echo $args['after_widget'];

  }
  public function form( $instance ) {

    $title = isset( $instance[ 'title' ] ) ? $instance[ 'title' ] : __( 'Top Commenters', 'top_commenters_widget' );

    $amount = isset( $instance[ 'amount' ] ) ? absint( $instance[ 'amount' ] ) : 5;

    ?>

    <p>

      <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>

      <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />

    </p>

    <p>

      <label for="<?php echo $this->get_field_id( 'amount' ); ?>"><?php _e( 'Number of commenters to display:' ); ?></label>

      <input class="widefat" id="<?php echo $this->get_field_id( 'amount' ); ?>" name="<?php echo $this->get_field_name( 'amount' ); ?>" type="number" value="<?php echo esc_attr( $amount ); ?>" />

    </p>

    <?php

  }
  public function update( $new_instance, $old_instance ) {

    $instance = array();

    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

    $instance['amount'] = ( ! empty( $new_instance['amount'] ) ) ? absint( $new_instance['amount'] ) : 5;

    return $instance;

  }

}
function register_top_commenters_widget() {

    register_widget( 'Top_Commenters_Widget' );

}

add_action( 'widgets_init', 'register_top_commenters_widget' );

?>

Lưu file top-commenters-widget.php vào thư mục /wp-content/plugins/.
Kích hoạt plugin “Top Commenters Widget” từ trang Plugins trong WordPress.
Vào Appearance > Widgets.
Bạn sẽ thấy widget “Top Commenters” trong danh sách widget. Kéo widget vào sidebar bạn muốn hiển thị Top Commenters.
Tùy chỉnh tiêu đề và số lượng người bình luận hiển thị trong cài đặt widget.
Lưu lại và kiểm tra website của bạn.

Ưu điểm của phương pháp này là bạn có thể dễ dàng thêm và xóa widget, và tùy chỉnh nó thông qua giao diện WordPress. Nhược điểm là đòi hỏi kiến thức về PHP và cách tạo widget trong WordPress.

Tùy chỉnh giao diện của Top Commenters

Bất kể bạn sử dụng phương pháp nào, bạn đều có thể tùy chỉnh giao diện của Top Commenters bằng CSS. Bạn có thể chỉnh sửa file style.css của theme của bạn, hoặc sử dụng custom CSS thông qua plugin hoặc theme options. Ví dụ:



.top-commenters ul {

  list-style: none;

  padding: 0;

}
.top-commenters li {

  margin-bottom: 5px;

  border-bottom: 1px solid #eee;

}
.top-commenters a {

  color: #333;

  text-decoration: none;

}

.top-commenters a:hover { text-decoration: underline; }

Đoạn CSS trên sẽ loại bỏ dấu chấm đầu dòng, thêm đường kẻ dưới cho mỗi người bình luận, và thay đổi màu sắc của liên kết.

Kết luận

Hiển thị sidebar Top Commenters là một cách tuyệt vời để tăng tương tác và xây dựng cộng đồng trên website WordPress của bạn. Bạn có thể sử dụng plugin, chỉnh sửa theme bằng code, hoặc tạo widget tùy chỉnh để thực hiện điều này. Hãy chọn phương pháp phù hợp với trình độ kỹ năng và nhu cầu của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa

Hiển thị top commenters sidebar WordPress

Giới thiệu về Sidebar Top Commenters trong WordPress

Các phương pháp hiển thị Top Commenters

Sử dụng plugin WordPress để hiển thị Top Commenters

Ví dụ: Sử dụng plugin “Top 10 – Popular posts plugin for WordPress”

Chỉnh sửa theme bằng code (functions.php)

Các bước thực hiện:

Lưu ý quan trọng:

Sử dụng Widget Tùy Chỉnh

Các bước thực hiện:

Tùy chỉnh giao diện của Top Commenters

Kết luận

aa