Salah satu pembaca kami bertanya apakah mungkin untuk menyoroti peran pengguna di samping setiap komentar WordPress? Menampilkan label peran pengguna memberi bobot pada komentar yang dibuat oleh pengguna terdaftar di . Anda situs jaringan, terutama penulis, penerbit, dan administrator. Dalam tutorial ini, kami akan menunjukkan cara mudah menambahkan label dengan peran pengguna di sebelah komentar di WordPress.

tambahkan label pada peran user.png

Mengapa menampilkan label peran pengguna di samping komentar di WordPress?

Jika Anda mengizinkan pendaftaran pengguna di situs jaringan atau jika Anda menjalankan a situs jaringan WordPress multi-penulis, label pengguna dapat memperkenalkan pengguna satu sama lain berdasarkan peran pengguna mereka.

Misalnya, pengguna dengan peran pengguna “Editor” akan memiliki lencana di samping namanya di komentar, yang akan memberi tahu pengguna lain bahwa komentar ini dibuat oleh editor.

Itu membangun kepercayaan pengguna dan meningkatkan keterlibatan pengguna dalam komentar di situs web Anda.

banyak Tema WordPress hanya sorot komentar yang dibuat oleh penulis postingan. Mereka tidak memperlihatkan label untuk peran pengguna lain, bahkan jika komentar lain dibuat oleh pengguna terdaftar atau administrator situs.

Karena itu, mari kita lihat cara mudah menambahkan tag peran pengguna di sebelah komentar di WordPress.

Menambahkan label peran pengguna di samping komentar

Tutorial ini mengharuskan Anda untuk menambahkan kode ke file Anda. tema WordPress. Jika Anda belum pernah melakukan ini sebelumnya, lihat cara menyesuaikan tema WordPress .

Hal pertama yang harus dilakukan adalah menambahkan kode berikut ke file functions.php tema Anda atau ke plugin aktif di situs.

if (! class_exists ('BPC_Comment_Author_Role_Label')): class BPC_Comment_Author_Role_Label {public function __construct () {add_filter ('get_comment_author', array ($ this, 'bpc_get_comment_author_role);), 10, add_filter ('get_comment_author_link', array ($ this, 'bpc_comment_author_role')); } // Dapatkan fungsi peran penulis komentar bpc_get_comment_author_role ($ author, $ comment_id, $ comment) {$ authoremail = get_comment_author_email ($ comment); // Jika pengguna terdaftar if (email_exists ($ authoremail)) {$ commet_user_role = get_user_by ('email', $ authoremail); $ comment_user_role = $ commet_user_role-> peran [3]; // Konten untuk ditambahkan di sebelah nama $ this-> comment_user_role = ' '. ucfirst ($ comment_user_role). ' '; } lain {$ this-> comment_user_role = ''; } kembalikan $ author; } // Tampilkan penulis fungsi komentar bpc_comment_author_role ($ author) {return $ author. = $ This-> comment_user_role; }} BPC_Comment_Author_Role_Label baru; berakhir jika;

Kode singkat di atas ini terhubung ke filter WordPress yang digunakan untuk menampilkan nama penulis komentar untuk menyertakan label peran pengguna.

Sekarang Anda dapat mengunjungi postingan apa pun dengan komentar untuk melihatnya beraksi. Komentar yang dibuat oleh pengguna terdaftar akan menampilkan peran pengguna mereka di sebelah nama penulis komentar. Setiap komentar yang dibuat oleh pengguna yang tidak terdaftar hanya akan menampilkan nama penulis komentar.

contoh komentar dengan role.png pengguna

Sekarang kita telah menambahkan peran pengguna, saatnya untuk menatanya dan membuatnya bersih.

Dalam kode kami, kami menambahkan kelas CSS untuk setiap peran pengguna, sehingga kami dapat menggunakan kelas CSS ini untuk menyesuaikan setiap lencana pengguna secara berbeda (yaitu menggunakan warna yang berbeda, dll.)

Anda dapat menggunakan contoh CSS berikut sebagai titik awal:

.comment-author-label {padding: 5px; ukuran huruf: 14px; border-radius: 3px; } .com-author-label-editor {background-color: #efefef; } .com-author-label-author {background-color: #faeeee; } .com-author-label-kontributor {background-color: #f0faee; } .comment-author-label-subscriber {background-color: #eef5fa; } .com-author-label-administrator {background-color: #fde9ff; }

Jangan ragu untuk menyesuaikan CSS sesuai keinginan Anda. Inilah tampilan situs demo kami:

situs demonstrasi hasil css.png

Itu saja untuk tutorial ini, saya harap ini memungkinkan Anda untuk menambahkan lencana di sebelah teks anggota staf Anda.