Thêm User Role cạnh tên comment WordPress

Cách thêm vai trò người dùng bên cạnh tên người comment trong WordPress để phân biệt Administrator, Editor, Author, Contributor, Subscriber với những người dùng khác khi bình luận, giúp cho người dùng phần biệt được comment của các quản trị với các thành viên và người dùng khác trên website.

Cách thêm User Role cạnh tên comment

Bước 1: Hiển thị User Role

Mở file functions.php sau đó thêm đoạn mã bên dưới vào

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 mã trên vào vào file functions.php thì lúc này bên phải tên người comment của những người dùng đã đăng ký (Administrator, Editor, Author, Contributor, Subscriber) sẽ sẽ có thêm dòng chữ tương ứng với chức danh của người comment. Với người dùng chưa đăng ký thì sẽ chỉ hiện tên tác giả.

Bước 2: Thêm hiệu ứng màu sắc cho User Role

Bạn có thể thêm hiệu ứng màu sắc cho User Role để làm cho nó nổi bật hơn và tránh nhầm lẫn với các tên người dùng chưa đăng ký trùng lặp với tên người dùng của bạn. Mở file CSS (style.css) sau đó thêm đoạn mã bên dưới vào

.comment-author-label {
    padding: 4px;
    font-size: 14px;
    border-radius: 4px;
}
 
.comment-author-label-editor {  
background-color:#7afcff;
}
.comment-author-label-author {
background-color:#7aff7b;
}
 
.comment-author-label-contributor {
background-color:#faff7a;   
}
.comment-author-label-subscriber {
background-color:#d7d5fd;   
}
 
.comment-author-label-administrator { 
background-color:#ff7a7a;
}

Sau khi thêm đoạn mã trên vào file style.css và lưu lại thì thì sẽ được kết quả như hình bên dưới

Chú ý: Nếu bạn sử dụng Cloudflare thì phải xóa các tệp được lưu trong bộ nhớ cache (Purge Cache) của Cloudflare thì mới thấy kết quả trên website của bạn hiển thị chính xác.

➤ Mật khẩu giải nén (Pasword): 123
➤ Tải lại trang nếu không nhấn được vào link

Chia sẻ bài viết