WordPress’te yazar yorumlarını vurgulamak, blogunuzdaki etkileşimi artırmanın güçlü bir yoludur. Okuyucular bir yazarın tartışmaya aktif olarak katıldığını gördüklerinde, sohbete kendilerinin de katılma olasılığı artar.
WPBeginner’da, bunun nasıl bir topluluk duygusu yarattığını ve etkileşimi teşvik ettiğini, sonuçta daha canlı ve ilgili bir okuyucu kitlesine yol açtığını ilk elden gördük.
Bu makalede, etkileşimi artırmak için WordPress’te yazarın yorumlarını nasıl kolayca vurgulayacağınızı göstereceğiz.
WordPress’te Yazar Yorumlarını Neden Vurgulayalım?
Yorumlar, web sitenizde kullanıcı etkileşimi oluşturmanın harika bir yoludur. Makaleleriniz hakkında daha fazla yorum almak istiyorsanız, tartışmalara aktif olarak katılarak bunu teşvik edebilirsiniz.
Yeni bir WordPress blogu için yorumları kolayca yanıtlayabilir ve okuyucularınızla tartışmalara katılabilirsiniz. Çok yazarlı bir blog işletiyorsanız, yazarları da yorum moderasyonuna yardımcı olmaya teşvik edebilirsiniz.
Ancak, çoğu WordPress teması yorumlar arasında ayrım yapmaz ve aynı stil kullanılarak listelenir.
Sıradan bir okuyucu, yazarın tartışmaya kattığı ek içeriğin farkına varmadan yorumlar arasında gezinebilir.
Yazarın yorumlarını vurgulamak bu sorunu çözmenize yardımcı olur ve yazarın yorumlarının öne çıkmasını ve daha dikkat çekici olmasını sağlar.
Buradaki nihai amaç, yeni kullanıcıları yorumlara katılmaya ve nihayetinde bülteninize abone olmaya veya müşteri olmaya teşvik etmektir.
Bununla birlikte, WordPress’te yazar yorumlarını nasıl kolayca vurgulayabileceğimize bir göz atalım.
WordPress’te Yorum Yazarını Vurgulama
Yorumları yazı yazarına göre vurgulamanın en kolay yolu WordPress temanıza özel CSS eklemektir. Bu, gereken kodu kolayca eklemenize ve kaydetmeden web sitenizde nasıl görüneceğine dair canlı bir önizleme görmenize olanak tanır.
İlk olarak, WordPress yönetici alanında Görünüm ” Özelleştir ‘i ziyaret etmeniz gerekir. Bu, WordPress tema özelleştirici arayüzünü başlatacaktır. Sol tarafınızdaki bir sütunda bir dizi seçenek ve web sitenizin canlı bir önizlemesini göreceksiniz.
Buradan, ‘Ek CSS’ sekmesine tıklamanız gerekir. Bu, özel CSS’yi ekleyeceğiniz bir metin alanı açacaktır.
Ancak, özel CSS uygulandığında nasıl görüneceğini görmek istersiniz. Bunu yapmak için, bir gönderi yazarının yorumlarını içeren bir blog gönderisine gitmeniz gerekir.
Yorumlar bölümüne ilerleyin ve ardından soldaki Özel CSS kutusuna aşağıdaki özel CSS’yi ekleyin.
.bypostauthor {
background-color: #e7f8fb;
}
Girdiğiniz özel CSS ile eşleşen yazar yorumunun değiştiğini hemen fark edeceksiniz.
Peki tüm bunlar nasıl işliyor?
WordPress, web sitenizin farklı alanlarına bazı varsayılan CSS sınıfları ekler. Bu CSS sınıfları, hangi WordPress temasını kullandığınızdan bağımsız olarak vardır.
Bu örnek kodda, bir gönderi yazarı tarafından eklenen tüm yorumlara eklenen .bypostauthor
CSS sınıfını kullandık.
Bunu daha da belirgin hale getirmek için biraz daha CSS stili ekleyelim. İşte gönderi yazarının yorumlarına küçük bir ‘Yazar’ etiketi ve yazarın avatar görüntüsünün etrafına bir kenarlık ekleyen örnek bir kod.
.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;
}
Test web sitemizde bu şekilde görünüyordu.
WordPress’te Yorumları Kullanıcı Rolüne Göre Vurgulama
Artık birçok WordPress blogunda yorumları yanıtlamaktan sorumlu ekip üyeleri bulunuyor. Popüler web sitelerinde, kullanıcı etkileşimini artırmak için yorumları yanıtlayan yazı yazarı, yönetici ve moderatörler olabilir.
Gönderinin asıl yazarı olmayan bir personel tarafından eklenen bir yorumu nasıl vurgularsınız?
Bunu başarmak için kolay bir yöntem var. Ancak, WordPress web sitenize özel kod eklemenizi gerektirir. Bunu daha önce yapmadıysanız, web’den parçacıkların WordPress’e nasıl yapıştırılacağına ilişkin makalemize bakın.
Öncelikle, aşağıdaki kodu temanızın functions.php dosyasına veya bir kod parçacıkları eklentisine eklemeniz gerekir:
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;
Temanızın functions.php dosyasını düzenlemek yerine, bu kodu WPCode ile eklemenizi öneririz. Bu kod parçacıkları eklentisi, WordPress’e özel kod eklemeyi güvenli ve kolay hale getirir.
Başlamak için ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Yardıma ihtiyacınız varsa, WordPress eklentisi yükleme kılavuzumuza bakın.
Eklenti etkinleştirildikten sonra, WordPress panonuzdan Code Snippets ” Snippet Ekle bölümüne gidin.
Ardından, farenizi ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin üzerine getirin ve ‘Özel Snippet Ekle’ düğmesine tıklayın.
Ardından, ekranda beliren seçeneklerden kod türü olarak ‘PHP Snippet’i seçin.
Şimdi, snippet’iniz için bir başlık ekleyebilir ve yukarıdaki kodu ‘Kod Önizleme’ kutusuna yapıştırabilirsiniz.
Bundan sonra, anahtarı ‘Etkin Değil’den ‘Etkin’e getirin ve sayfanın üst kısmındaki ‘Snippet’i Kaydet’ düğmesine tıklayın.
Bu kod basitçe yorum yazarının adının yanına kullanıcı rolü etiketini ekler. Herhangi bir özel stil olmadan bu şekilde görünecektir.
Biraz özel CSS ekleyerek biraz daha güzel hale getirelim. Görünüm ” Özelleştir sayfasına gidin ve Ek CSS sekmesine geçin.
Yorumlardaki kullanıcı rolü etiketini şekillendirmek için aşağıdaki CSS’yi kullanabilirsiniz.
.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;
}
Test sitemizde bu şekilde görünüyordu. Temanızın renklerine ve stiline uyması için kodu değiştirmekten çekinmeyin.
Daha fazla ayrıntı için WordPress yorumlarına kullanıcı rolü etiketlerinin nasıl ekleneceğine ilişkin makalemizi okumak isteyebilirsiniz.
Umarız bu makale WordPress’te yazar yorumlarını nasıl vurgulayacağınızı öğrenmenize yardımcı olmuştur. WordPress’te geri dönen ziyaretçiler için yeni yazıların nasıl vurgulanacağına ilişkin eğitimimize ve WordPress için en iyi yazar biyografi kutusu eklentileri uzman seçimlerimize de göz atmak isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Rafael
Not work for me
I use custom theme with comments.php from twenty Twenty Thirteen.
Where can I add more CSS classes ?
WPBeginner Support
Hi Rafael,
Please see our guide on how to add custom CSS in WordPress.
Yönetici
Irfan Ali
Thank you very much.
Haina
Hi! Whenever somenone leaves a comment on my website, the author name appears in gray. How can I change that do black? Also, a “permalink” word is always bellow the date and time of the comment . How can I get rid of that? Any help will be much appreciated. Thanks.
WPBeginner Support
Hi Haina,
Please take a look at our guide on how to style WordPress comments.
Yönetici
Haina
Thanks for the quick reply. However, my understanding of CSS is less than “fair”. If you could give me direct instructions on how to get the comment author name in black, it would be great. If not, I understand also. Thanks.
Martin
How is it possible to exclude any replies to the authors comment from the styling?
Peter Huan
I tried to it but i could not. I was added to my theme opition by myself.
May be i was changed “div”…
Thank you for topic.
Fahad
There is a problem with changing the background if the auther is the creator of the comment and someone else replied, since the nested reply will also have the same highlighted background!
deven
Nice post … but is there any plugin for doing the same ( there are some but 2-3 yers old ) looking for a new one with more customize options.
char
Is there a way to give each author (the main ones) different color comments?
Editorial Staff
Yes, it is possible to assign different color comments for registered users. The class would look like .comment-author-username. Replace username with the author’s username.
Yönetici
Ahmad Raza
I followed the way you described but i have not found <li id=”comment-“> template in my comments.php
Any solution?
Editorial Staff
Just updated the article, so it is more current.
Yönetici
Gretchen Louise
I’d love to see this tutorial updated to apply to Genesis and multi-author blogs!
Keith Davis
Useful tip.
When I read post comments, I tend to read the author’s comments on the assumption that what he says carries more authority.
I’m OK with the CSS but never sure about the php.
You may have enticed me to start messing with the php!
joyoge bookmark
nice tutorial, thank you
janghuan
In my wordpress version,I just need to add a exist class that the wordpress generates.It’s “comment-author-admin”.Maybe the class “bypostauthor” that wordpress generates also does work.
Blake Imeson
This method would fail for multi-author blogs right?
Editorial Staff
You can probably add a comma and add more user IDs, but it will show all editor’s comment in highlighted version, so yes it will be a fail if you look at it that way.
Yönetici