Làm thế nào để thêm nhãn vai trò người dùng bên cạnh nhận xét trong WordPress

Một trong những độc giả của chúng tôi đã hỏi nếu có thể làm nổi bật vai trò người dùng bên cạnh mỗi nhận xét trong WordPress? Hiển thị nhãn vai trò người dùng cho phép trọng lượng cho nhận xét của người dùng đã đăng ký trên trang web của bạn đặc biệt là tác giả, người biên tập và quản trị viên. Trong bài này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm nhãn vai trò người dùng bên cạnh các nhận xét trong WordPress.

Thêm vai trò người dùng bên cạnh nhận xét trong WordPress

Tại sao lại hiển thị Nhãn vai trò người dùng bên cạnh nhận xét Tên tác giả trong WordPress?

Nếu bạn cho phép đăng ký người dùng trên trang web của bạn hoặc chạy một trang web WordPress nhiều tác giả, sau đó nhãn người dùng có thể giới thiệu người dùng với nhau dựa trên vai trò người dùng của họ.

Ví dụ: người dùng có vai trò người dùng soạn thảo sẽ hiển thị huy hiệu bên cạnh tên của họ trong nhận xét để cho người dùng khác biết rằng nhận xét này được thực hiện bởi biên tập viên.

Nó tạo dựng lòng tin của người dùng và tăng sự cam kết của người dùng trong nhận xét trên trang web của bạn.

Nhiều chủ đề WordPress chỉ nêu bật ý kiến ​​của tác giả bài đăng. Họ không hiển thị nhãn cho bất kỳ vai trò người dùng nào khác ngay cả khi các nhận xét khác được tạo bởi người dùng đăng ký hoặc quản trị viên trang web.

Điều đó đang được nói, chúng ta hãy xem cách dễ dàng thêm nhãn vai trò người dùng bên cạnh nhận xét trong WordPress.

Thêm nhãn vai trò người dùng bên cạnh nhận xét Tên tác giả trong WordPress

Hướng dẫn này yêu cầu bạn phải thêm mã vào các tệp chủ đề WordPress của bạn. Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn của chúng tôi về cách dễ dàng sao chép và dán mã trong WordPress.

Điều đầu tiên bạn cần làm là thêm mã sau vào tệp tin functions.php của chủ đề hoặc một plugin dành riêng cho trang web.

if (! class_exists ('WPB_Comment_Author_Role_Label')):
 lớp WPB_Comment_Author_Role_Label {
 công chức __construct () {
 add_filter ('get_comment_author', mảng ($ this, 'wpb_get_comment_author_role'), 10, 3);
 add_filter ('get_comment_author_link', mảng ($ this, 'wpb_comment_author_role'));
 }

 // Nhận vai trò tác giả nhận xét
 function wpb_get_comment_author_role ($ tác giả, $ comment_id, $ comment) {
 $ authoremail = get_comment_author_email (nhận xét $);
 // Kiểm tra nếu người dùng đã đăng ký
 if (email_exists ($ authoremail)) {
 $ commet_user_role = get_user_by ('email', $ authoremail);
 $ comment_user_role = $ commet_user_role-> vai trò [0];
 / / Đầu ra HTML để thêm vào bên cạnh tên tác giả nhận xét
 $ this-> comment_user_role = ' '.  ucfirst ($ comment_user_role).  ' ';
 } else {
 $ this-> comment_user_role = '';
 }
 trở về $ tác giả;
 }

 // Hiển thị tác giả nhận xét
 chức năng wpb_comment_author_role ($ tác giả) {
 return $ author. = $ this-> comment_user_role;
 }
 }
 mới WPB_Comment_Author_Role_Label;
 endif; 

Mã chức năng này trên các móc nối vào các bộ lọc WordPress được sử dụng để hiển thị tên tác giả nhận xét để bao gồm nhãn vai trò của người dùng.

Bây giờ, bạn có thể truy cập bất kỳ bài đăng nào có bình luận để xem nó hoạt động. Nhận xét của người dùng đã đăng ký sẽ hiển thị vai trò người dùng của họ bên cạnh tên tác giả nhận xét. Mọi nhận xét của người dùng không đăng ký sẽ chỉ hiển thị tên tác giả nhận xét.

Nhãn vai trò người dùng được hiển thị bên cạnh nhận xét của họ

Bây giờ chúng tôi đã thêm vai trò người dùng, đã đến lúc để tạo kiểu và làm cho nó trở nên trong sạch.

Trong mã của chúng tôi, chúng tôi đã thêm lớp CSS cho mỗi vai trò người dùng, vì vậy chúng tôi có thể sử dụng các lớp CSS này để tuỳ chỉnh từng huy hiệu người dùng một cách khác nhau (ví dụ sử dụng các màu khác nhau, v.v …)

Bạn có thể sử dụng mẫu CSS sau đây như là một điểm khởi đầu:

.comment-author-label {
     đệm: 5px;
     kích thước phông chữ: 14px;
     bán kính biên giới: 3px;
 }

 .comment-author-label-editor {
 màu nền: #efefef;
 }
 tác giả-tác giả-nhãn-tác giả {
 màu nền: #faeeee;
 }

 cộng tác-tác giả-nhãn-cộng tác viên {
 màu nền: # f0faee;
 }
 .comment-author-label-subscriber {
 màu nền: # eef5fa;
 }

 .comment-author-label-administrator {
 màu nền: # fde9ff;
 } 

Hãy thoải mái điều chỉnh CSS theo sở thích của bạn. Đây là cách nó nhìn trên trang web demo của chúng tôi:

Biểu tượng vai trò người dùng được hiển thị với nhận xét của họ