Hiển thị quyền người dùng bên cạnh tên trong comment wordpress

Trong 1 số Blog lớn bạn sẽ thấy họ hiển thị quyền người dùng bên cạnh tên trong comment wordpress, nhìn rất chuyên nghiệp phải không, nay mình hướng dẫn bạn làm tương tự với họ mà có thể không cần sử dụng tới plugin

Đã có một vài người dùng hỏi rằng liệu có thể tô đậm hoặc hiển thị User Role bên cạnh comment trong WordPress không? Hiện user role giúp tăng độ uy tín của comment được đăng bởi người dùng đó, ví dụ như: Author, Editor, Admin… Trong bài viết này, Motnoi.com sẽ hướng dẫn cách thêm user role cạnh comment trong WordPress.

Mục lục bài viết

1 Tại sao nên thêm User Role bên cạnh comment trong WordPress?
2 Cách thêm user role bên cạnh tên người viết trong comment

Tại sao nên thêm User Role bên cạnh comment trong WordPress?

Nếu bạn cho phép người dùng đăng kí tài khoản trên website hoặc website có nhiều tác giả, thì user role có thể giới thiệu vị trí của họ trên website.

Ví dụ: Một Editor khi bình luận 1 điều gì đó trên website, bên cạnh comment của họ sẽ xuất hiện 1 cái label nho nhỏ, giúp mọi người biết rằng lời bình luận này được viết bởi một biên tập viên. Việc này giúp xây dựng uy tín và tăng tương tác của website.

Có nhiều theme WordPress chỉ cho phép highlight bình luận được viết bởi tác giả. Do đó các vị trí khác đều sẽ không hiện lên được label, thậm chí cả các bình luận được viết bởi người dùng đã đăng kí và admin cũng vậy.

Cách thêm user role bên cạnh tên người viết trong comment

Thao tác này têu cầu người dùng phải thêm 1 đoạn code vào file theme WordPress.

Điều đầu tiên bạn cần làm là thêm đoạn code sau vào file functions.php

<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>if ( ! class_exists( 'WPB_Comment_Author_Role_Label' ) ) :
class WPB_Comment_Author_Role_Label {
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'wpb_get_comment_author_role' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'wpb_comment_author_role' ) );
}
 
// Get comment author role 
function wpb_get_comment_author_role($author, $comment_id, $comment) { 
$authoremail = get_comment_author_email( $comment); 
// Check if user is registered
if (email_exists($authoremail)) {
$commet_user_role = get_user_by( 'email', $authoremail );
$comment_user_role = $commet_user_role->roles[0];
// HTML output to add next to comment author name
$this->comment_user_role = ' <span class="comment-author-label comment-author-label-'.$comment_user_role.'">' . ucfirst($comment_user_role) . '</span>';
} else { 
$this->comment_user_role = '';
} 
return $author;
} 
 
// Display comment author                   
function wpb_comment_author_role($author) { 
return $author .= $this->comment_user_role; 
} 
}
new WPB_Comment_Author_Role_Label;
endif;

Sau khi thêm đoạn code trên, bô lọc của WordPress sẽ bắt đầu hiển thị user role bên cạnh comment của họ.

Bạn có thể kiểm tra các post hoặc comment trong từng bài viết để thấy sự thay đổi. Bình luận được viết bởi người dùng có đăng kí sẽ có thêm biểu tượng. Những bình luận được viết bởi người dùng không đăng kí sẽ chỉ hiển thị tên tác giả.

Hiển thị quyền người dùng bên cạnh tên trong comment wordpress

Trong đoạn code sau chứa 1 class CSS cho từng user role, do đó chúng ta có thể dùng từng class CSS để tùy chỉnh thêm như hiển thị màu sắc chẳng hạn.

Bạn có thể bắt đầu tùy chỉnh từ đoạn code CSS mẫu dưới đây:

.comment-author-label {
    padding: 5px;
    font-size: 14px;
    border-radius: 3px;
}
 
.comment-author-label-editor {  
background-color:#efefef;
}
.comment-author-label-author {
background-color:#faeeee;
}
 
.comment-author-label-contributor {
background-color:#f0faee;   
}
.comment-author-label-subscriber {
background-color:#eef5fa;   
}
 
.comment-author-label-administrator { 
background-color:#fde9ff;
}

Những thay đổi sau khi bạn đã thêm function mới