Thêm widget Top Bình luận cho website WordPress

Bài viết này chia sẻ đến bạn cách để thêm widget Top Bình luận cho website WordPress, giao diện giống Hocban.vn đang dùng, và code đã tối ưu cho PHP 8.4 | Nếu bạn muốn khích lệ người dùng để lại bình luận trên web, blog thì đây là một cách hay đó nhen, nó tên là Widget Top Comment/ Top Bình luận.

Widget Top Bình luận cho website WordPress
Widget Top Bình luận cho website WordPress

Để thực hiện thì bạn cần làm 2 bước, đầu tiên là chèn đoạn code dài bên dưới vào phía dưới cùng trong file functions.php của theme/ child theme đang dùng. Sau đó vào phần tuỳ chỉnh giao diện, tạo một cái text widget và dán shortcode [123top_commenters] này vào và lưu lại. Xoá số 123 đi, vì trong bài viết mà mình chèn shortcode này là nó cũng hiện top comment.

//Widget Top bình luận như Hocban.vn
add_shortcode('top_commenters', function(): string {
global $wpdb;
$admins = get_users(['role' => 'Administrator', 'fields' => 'ID']);
$exclude = !empty($admins) ? implode(',', array_map('intval', $admins)) : '0';
$results = $wpdb->get_results("SELECT COUNT(comment_ID) AS count, comment_author, comment_author_email, MAX(comment_author_url) AS author_url FROM {$wpdb->comments} WHERE comment_date > DATE_SUB(NOW(), INTERVAL 30 DAY) AND comment_approved = '1' AND comment_type = 'comment' AND user_id NOT IN ($exclude) GROUP BY comment_author_email ORDER BY count DESC LIMIT 8");
$html = '<style>
.hb-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.hb-item { display: flex !important; align-items: center !important; white-space: nowrap !important; overflow: hidden !important; padding: 8px 0 !important; border-bottom: 1px solid rgba(0,0,0,0.05); margin-bottom: 0 !important; }
.hb-item:last-child { border-bottom: none !important; }
.hb-item *, .hb-thumb img { margin-bottom: 0 !important; margin-top: 0 !important; }
.hb-thumb { flex-shrink: 0; margin-right: 10px; line-height: 0; }
.hb-thumb img { border-radius: 5px !important; display: block; border: 1px solid rgba(0,0,0,0.05); }
.hb-text { overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; flex-grow: 1; }
.hb-link { color: inherit; text-decoration: none !important; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
.hb-link:hover { text-decoration: underline !important; }
.hb-count { font-weight: 500 !important; margin-left: 5px; font-size: 95%; }
</style>';
if ($results) {
$html .= '<ul class="hb-list">';
foreach ($results as $res) {
$avatar = get_avatar($res->comment_author_email, 28);
$name = esc_html($res->comment_author);
$url = esc_url(trim((string)$res->author_url));
$count = (int)$res->count;
$has_link = (!empty($url) && strlen($url) > 8);
$name_html = $has_link ? "<a class='hb-link' href='{$url}' rel='nofollow ugc noopener noreferrer' target='_blank'>{$name}</a>" : "<span class='hb-link'>{$name}</span>";
$html .= "<li class='hb-item'><div class='hb-thumb'>{$avatar}</div><div class='hb-text'>{$name_html}<span class='hb-count'>({$count})</span></div></li>";
}
$html .= '</ul>';
} else { $html .= '<p>Chưa có dữ liệu.</p>'; }
return $html;
});
//Widget Top bình luận như Hocban.vn

Mặc định code này sẽ hiển thị danh sách 8 người bình luận nhiều nhất trong 30 ngày qua. Nếu bạn muốn thay đổi thời gian hoặc danh sách dài/ ngắn hơn thì sửa lại như bên dưới:

  • Thay đổi số ngày: Tìm đến ký tự INTERVAL 30 DAY. Bạn muốn tính trong bao nhiêu ngày thì sửa số 30 thành con số đó (ví dụ: 60, 90).
  • Thay đổi số người hiển thị: Tìm đến ký tự LIMIT 8 >> Sửa số 8 thành số lượng người bạn muốn xuất hiện trong danh sách (ví dụ: 5, 10).

Cập nhật: Mẫu code đã được mình tinh chỉnh lại theo góp ý của bạn Bùi Trung Hiếu bên dưới bình luận để giải quyết các vấn đề của code cũ, cảm ơn bạn Hiếu rất nhiều. Ngoài ra, ae coder/ dev nếu có đọc qua và thấy vẫn còn vấn đề với code này thì nhờ ae góp ý thêm cho mình với ạ, cảm ơn ae !

Tịnh Nguyễn
Admin

Mình hay vọc về WordPress, HTML & CSS để cải thiện trải nghiệm duyệt web trên Hocban.vn | Bạn có thể vào mục giới thiệuliên hệ để xem thêm thông tin chi tiết hơn nè.

5 3 đánh giá
Đánh giá bài viết
guest

14 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận
Bùi Trung Hiếu
Khách

Có một vài góp ý cho code của bác như sau:
1. Bác nên bỏ link khỏi phần thống kê số lượng bình luận đi. Để link ở tên người bình luận thôi thì hay hơn.
2. Bác nên thêm ugc vào link để tránh gây ảnh hưởng tiêu cực đến SEO của web.
3. Hiệu suất gặp vấn đề rất nghiêm trọng. Cụ thể:
– Truy vấn SQL (JOIN và LIKE) rất là nặng. Nếu web có nhiều bình luận hoặc host yếu, nó sẽ là một thảm họa.
– Logic cache không hợp lý. Bất cứ khi nào Admin tải trang, cache sẽ bị xóa và câu lệnh SQL nặng nề kia sẽ chạy lại.
– Inline style mỗi lần render. Thẻ style được nhúng trực tiếp trong shortcode nên sẽ gây trùng lặp nếu chèn nhiều shortcode.

Huy
Khách
Huy

A Tịnh Gia Lai nhiêu tuổi vậy 🤣

ngayhomdo
Khách

Tính để Top Comment mà chẳng có ai bình luận nên thôi. Hỳ

TruongDevs
Khách

Trước khi anh ra bài viết này là footer bên em đang dùng cũng tham khảo từ bên anh đó hehe, chuyện giờ mới kể

TruongDevs
Khách
Trả lời  Tịnh Nguyễn

Dạ dạ, để em khắc phục chỗ đó! Thanks anh nha

TruongDevs
Khách
Trả lời  Tịnh Nguyễn

Dạ mời anh qua trải nghiệm nha, em làm xong rồi

TruongDevs
Khách
Trả lời  Tịnh Nguyễn

Dạ đúng rồi, do ban đầu yêu cầu form vào không có ô input để nhập url, nhưng kể từ bây giờ sẽ có và sẽ hiện đó anh. Còn bên cột Bình luận trước đó cũng không có, nay em làm có link rồi á

TruongDevs
Khách
Trả lời  Tịnh Nguyễn

Dạ oke anh, để em xem lại