Hướng dẫn thêm User Role Label cạnh tên người comment trong WordPress

Them user role label ben canh ten binh luan tren WordPress

User Role Label cạnh tên người comment trong WordPress

Tiếp tục với trò đổi tên thì trong bài này, Hocban.vn chia sẻ đến bạn cách để: thêm User Role Label cạnh tên người comment (bình luận) trong WordPress.

Hướng dẫn cách thêm User Role Label cạnh tên người comment trong WordPress

Sẽ rất nhanh thôi, nó bao gồm 3 bước dưới đây, bạn thực hiện cẩn thận nhé vì nó là chèn code vào theme.

  • Bước 1: Bạn copy và dán đoạn code sau vào dưới cùng của file function.php của theme đang dùng.
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;
  • Bước 2: Vào Customize >> Additional CSS >> dán đoạn CSS dưới đây vào trong đó rồi lưu lại để xem kết quả.
.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;
}

Rất nhanh và đơn giản đúng không nào ? Tuy nhiên mình nhắc lại là với những thao tác chèn code trực tiếp vào theme thì bạn phải cẩn thận, làm từ từ nếu không rành, kẻo lại hỏng theme, hỏng web thì khổ.

Rồi, bây giờ đến đoạn giao lưu, anh em nào có xài qua thủ thuật này mời comment bên dưới để giao lưu học hỏi thêm về mẹo này nhé, cảm ơn anh em !

Bài viết liên quan

guest
24 Comments
Inline Feedbacks
View all comments
Minh Trinh <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">13</span><span style="color: #2196f3;">) </span>
Guest

Còm cái comment hiện tại chữ Tác giả dưới Avatar bác dùng Plugin gì vậ hay code 😀 Share ae với :v

Minh Trinh <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">13</span><span style="color: #2196f3;">) </span>
Guest

Bác biết cài đặt theme comment như của canhme không nhỉ 🙁
comment image Mò mãi không ra.

Cường <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">124</span><span style="color: #2196f3;">) </span>
Guest

Cái label trong khung bình luận này là của plugin hay dùng đoạn code bên trên bạn?

Anh Trai Nắng <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #2196f3;">) </span>
Guest

Hello. biết Hocban đã lâu, nay mới biết là của Tịnh Nguyễn :v

Anh Trai Nắng <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #2196f3;">) </span>
Guest
Đã trả lời  Anh Trai Nắng (2) (2)

Nó lạc đâu mất tiêu, chờ lục lại hồi đăng lên nhóm Blogger xem.

Anh Trai Nắng <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #2196f3;">) </span>
Guest
Đã trả lời  Anh Trai Nắng (2) (2)

Xưa có cover theme học bàn này sang Blogger nữa nè :v

Đạt Nguyễn <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">166</span><span style="color: #2196f3;">) </span>
Thành viên

Dạo này mới viết lại bài bác nhỉ

Nguyễn Quang Cường <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #2196f3;">) </span>
Guest

Tìm mãi mới thấy, cảm ơn bạn đã chia sẻ.

Đạo Hàm <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">12</span><span style="color: #2196f3;">) </span>
Guest

Bên canhme có dùng plugin comment ntn mà xem lại được cả lịch sử thế ạ?

văn phòng phẩm vinacom <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">3</span><span style="color: #2196f3;">) </span>
Guest

Tiếc quá, mình sử dụng facebook comment nên không dùng cái này được rồi. Share cho bạn nào dùng comment wordpress

Nam Hải <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">13</span><span style="color: #2196f3;">) </span>
Guest

hay quá, đây cũng là 1 kiến thúc mà mình nên học, cảm ơn bạn đã Hướng dẫn thêm User Role Label chi tiết đến như vậy

Minh Khanh <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #2196f3;">) </span>
Guest

test xem người dùng có huy hiệu ko?