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

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

Không biết bạn đã từng đọc qua các nội dung dưới đây chưa nhỉ ?

guest
20 Comments
Inline Feedbacks
View all comments
Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend

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: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend

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: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Anh Trai Nắng

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: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Anh Trai Nắng

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

Đạt Nguyễn <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">160</span><span style="color: #e91e63;">) </span>
Member

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

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

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

Đạo Hàm <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">11</span><span style="color: #e91e63;">) </span>
Friend

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: #e91e63;">(</span><span class="wpdiscuz-comment-count">3</span><span style="color: #e91e63;">) </span>
Friend

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: #e91e63;">(</span><span class="wpdiscuz-comment-count">13</span><span style="color: #e91e63;">) </span>
Friend

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: #e91e63;">(</span><span class="wpdiscuz-comment-count">37</span><span style="color: #e91e63;">) </span>
Friend

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