Apakah Anda ingin menyoroti komentar penulis di postingan WordPress di situs Anda?

Menyoroti komentar penulis di blog WordPress Anda dapat membantu Anda membangun keterlibatan. Pengguna lebih cenderung meninggalkan komentar ketika mereka melihat penulisnya secara aktif berpartisipasi dalam diskusi.

Pada artikel ini, kami akan menunjukkan kepada Anda cara menyorot komentar penulis dengan mudah di WordPress untuk meningkatkan keterlibatan.

Highting komentar oleh seorang penulis di posting blog WordPress

Mengapa Sorot Komentar Penulis di WordPress?

Komentar adalah cara terbaik untuk membangun keterlibatan pengguna di situs web Anda. Jika Anda ingin mendapatkan lebih banyak komentar tentang artikel Anda, Anda dapat mendorongnya dengan berpartisipasi secara aktif dalam diskusi.

Untuk blog WordPress baru, Anda dapat dengan mudah membalas komentar selama moderasi komentar. Jika Anda menjalankan blog dengan banyak penulis, Anda juga dapat mendorong penulis untuk ikut serta dalam diskusi.

Namun, sebagian besar tema WordPress tidak membedakan antara komentar dan mencantumkannya menggunakan gaya yang sama.

Tata letak komentar biasa tanpa penyorotan penulis

Pembaca biasa dapat menelusuri komentar, tidak menyadari konten tambahan yang dikontribusikan oleh penulis dalam diskusi.

Menyoroti komentar penulis membantu Anda memperbaikinya dan membuat komentar penulis menonjol dan lebih terlihat.

Tujuan utamanya di sini adalah untuk mendorong pengguna baru untuk bergabung dalam komentar dan akhirnya berlangganan buletin Anda atau menjadi pelanggan.

Karena itu, mari kita lihat cara menyorot komentar penulis dengan mudah di WordPress.

Menyoroti Penulis Komentar di WordPress

Cara termudah untuk menyorot komentar oleh penulis posting adalah dengan menambahkan CSS khusus ke tema WordPress Anda. Ini memungkinkan Anda dengan mudah menambahkan kode yang diperlukan dan melihat pratinjau langsung bagaimana tampilannya di situs web Anda tanpa menyimpannya.

Pertama, Anda perlu berkunjung Penampilan ┬╗Sesuaikan di area admin WordPress. Ini akan meluncurkan antarmuka penyesuai tema WordPress. Anda akan melihat banyak opsi di kolom di sebelah kiri Anda dan pratinjau langsung situs web Anda.

Penyesuai tema di WordPress

Dari sini, Anda perlu mengklik tab CSS Tambahan. Ini akan membuka area teks tempat Anda akan menambahkan CSS Kustom.

Tab CSS tambahan

Namun, Anda ingin melihat bagaimana CSS khusus akan terlihat saat diterapkan. Untuk melakukannya, Anda perlu membuka postingan blog yang berisi komentar dari penulis postingan.

Melihat komentar di Penyesuai Tema

Gulir ke bawah ke bagian komentar lalu tambahkan CSS khusus berikut di kotak CSS Khusus di sebelah kiri.

.bypostauthor { 
background-color: #e7f8fb;
}

Anda akan segera melihat perubahan komentar penulis yang cocok dengan CSS Kustom yang Anda masukkan.

Komentar penulis disorot dengan warna latar berbeda

Jadi bagaimana semua ini bekerja?

Anda melihat WordPress menambahkan beberapa kelas CSS default ke berbagai area di situs Anda. Kelas CSS ini ada di sana terlepas dari tema WordPress mana yang Anda gunakan.

Dalam kode contoh ini, kami telah menggunakan .bypostauthor Kelas CSS yang ditambahkan ke semua komentar yang ditambahkan oleh penulis posting.

Mari tambahkan beberapa gaya CSS untuk membuatnya lebih menonjol. Berikut adalah contoh kode yang menambahkan label ‘Penulis’ kecil ke komentar oleh penulis posting dan batas di sekitar gambar avatar penulis.

.bypostauthor:before { 
content:"Author";
float:right;
background-color:#FF1100;
padding:5px;
font-size:small;
font-weight:bold;
color:#FFFFFF;
}
.bypostauthor .avatar {
border:1px dotted #FF1100;
}

Ini adalah tampilannya di situs pengujian kami.

Penulis komentar disorot dengan label Penulis

Menyoroti Komentar menurut Peran Pengguna di WordPress

Sekarang, banyak blog WordPress memiliki anggota tim yang bertanggung jawab menjawab komentar. Situs web populer mungkin memiliki penulis posting, administrator, dan moderator yang semuanya menjawab komentar untuk meningkatkan keterlibatan pengguna.

Bagaimana Anda menyorot komentar yang ditambahkan oleh anggota staf yang bukan penulis postingan sebenarnya?

Ada peretasan mudah untuk mencapai itu. Namun, Anda harus menambahkan kode khusus ke situs WordPress Anda. Jika Anda belum pernah melakukan ini sebelumnya, lihat artikel kami tentang cara mudah menambahkan kode kustom di WordPress.

Pertama, Anda perlu menambahkan kode berikut ke plugin cuplikan kode atau file functions.php tema Anda.

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;

Kode ini hanya menambahkan label peran pengguna di sebelah nama penulis komentar. Beginilah tampilannya tanpa gaya khusus apa pun.

Label peran pengguna ditambahkan ke komentar

Mari membuatnya sedikit lebih cantik dengan menambahkan beberapa CSS khusus. Pergi ke Penampilan ┬╗Sesuaikan halaman dan beralih ke tab CSS Tambahan.

Setelah itu, Anda dapat menggunakan CSS berikut untuk memberi gaya pada label peran pengguna di komentar.

.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;
}

Ini adalah tampilannya di situs pengujian kami. Jangan ragu untuk mengubah kode agar sesuai dengan warna dan gaya tema Anda.

Peran pengguna disorot

Untuk lebih jelasnya, Anda mungkin ingin membaca artikel kami tentang cara menambahkan label peran pengguna ke komentar WordPress.

Kami harap artikel ini membantu Anda mempelajari cara menyorot komentar penulis di WordPress. Ingin melihat bagaimana pengguna berinteraksi dengan situs web Anda? Lihat tutorial kami tentang cara melacak keterlibatan pengguna di WordPress, dan cara menambahkan pemberitahuan push web di situs WordPress Anda untuk meningkatkan lalu lintas Anda.

Jika Anda menyukai artikel ini, silakan berlangganan kami Saluran Youtube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Indonesia dan Facebook.

Posting Cara Menyorot Komentar Penulis di WordPress muncul pertama kali di WPPemula.



Author

Write A Comment