WordPress yorumları, ziyaretçilerin içeriğinizle etkileşime geçmesinin, görüşlerini paylaşabilmesinin veya soru sorabilmesinin en etkili yollarından biridir. Gönderi yazarları daha sonra bu yorumlara yanıt vererek web sitesindeki genel kullanıcı katılımını iyileştirecek ve güvenilirliğini artıracaktır. Daha sonra gönderi yazarlarının özenli yanıtlarını gören okuyucuların yeni yorumlar bırakma ve web sitenizde daha uzun süre kalma olasılığı daha yüksektir, bu da sonuçta aboneliklerde artışa veya satış gelirinde artışa yol açabilir. Bununla birlikte tek bir gönderideki yorum sayısı arttıkça, tüm WordPress yorumları aynı şekilde görüntülendiğinden, gönderinin yazarı veya diğer web sitesi personeli tarafından hangisinin yapıldığını belirlemek giderek zorlaşır.
Bu yüzden WordPress gönderi yazarları, okuyucuların bir bakışta güvenilir bilgileri veya yararlı yanıtları seçebilmeleri için yorumlarını öne çıkarmalıdır. Bunu yapmanın en kolay yolu, yazar yorumlarını vurgulamaktır. Bunu yapmanın ek bir yararı, yorum bölümünüz için bir bütün olarak daha fazla yapı elde etmektir. Genel olarak, bu, makalelerinizi okuyan ve bazı sorulara yanıt arayan herkesin kolayca ve hızlı bir şekilde bulmasına yardımcı olacaktır. Bu da, blog topluluğunuzun önemli ölçüde artmasına yol açabilir. Bununla birlikte yorum bölümünüze nasıl ışık tutabileceğinize bir göz atalım ve:
-
Varsayılan WordPress CSS sınıflarını kullanarak yazar yorumlarını vurgulayın
-
Temaya özgü özel CSS sınıflarını kullanarak yazar yorumlarını vurgulayın
-
Tüm kullanıcı rollerinin kullanıcılarını vurgulayın
Başlamadan Önce
Bu yazıda, yorumları vurgulamanın iki olası yolunu ele alacağız. Bunlar, yalnızca yazar sonrası yorumları vurguluyor ve tüm kullanıcı rollerinden kullanıcıların yorumlarını vurguluyor. Her iki yöntemin de kendi yararları vardır ve bunları nasıl kullanabileceğinizi açıklarken tartışacağız.
Yalnızca yayın yazarı yorumları nasıl vurgulanır?
Bu bölümde, yalnızca CSS kullanarak gönderi yazarı yorumlarının nasıl vurgulanacağını göstereceğiz. Bunu yapmak için, yazar yorumlarının arka plan ve metin özelliklerini etkileyen birkaç CSS kuralı uygulayacağız. Ek olarak yorumlarınızın bir bütün olarak öne çıkmalarını sağlamak için yanına bir Gönderi yazarı etiketini nasıl ekleyeceğinizi göstereceğiz.
Bu yöntem, daha küçük bloglar için en iyisi olacaktır, çünkü yorumları yanıtlayan tek kişi muhtemelen gönderi yazarı olacaktır.
Bu bölümün doğru bir şekilde anlaşılması için biraz kodlama bilgisi gerektirse de, çoğu WordPress kullanıcısının takip edebilmesi için her şeyi ayrıntılı olarak açıklıyoruz. Bunu söyledikten sonra devam edelim.
Varsayılan WordPress CSS sınıflarını kullanarak yazar yorumlarını vurgulayın
Yazar sonrası yorumları öne çıkarmanın en kolay yolu, bu yorumların CSS sınıflarını kullanmak ve bunlara CSS kuralları uygulamaktır. Varsayılan olarak WordPress, get_comment_class() işlevi sayesinde yorumlara yorumlarla ilgili birkaç CSS sınıfı ekler. Bazıları, bu makalenin ilerleyen bölümlerinde ele alacağımız kullanıcıyla ilgilidir. Şimdilik soru, bu sınıfların nasıl bulunacağı ve yazarların yorumlarını vurgulamak için uygun bir CSS kodu oluşturmak için nasıl kullanılacağıdır.
İlk olarak gönderi yazarı tarafından oluşturulmuş en az bir yorum içeren bir gönderi bulun ve bu gönderiyi ön uçta açın. Daha sonra gönderi yazarının yorumu içinde herhangi bir yere sağ tıklayın ve beliren menüden İncele seçeneğini seçin.
Bu durum varsayılan olarak seçili Öğeler sekmesi ve sağ tıkladığınız HTML öğesinin üzerinde bir vurgu ile tarayıcınızın geliştirici araçlarını açacaktır. Daha sonra tüm yazar yorumunu saran HTML öğesini bulana kadar HTML yapısında gezinin. Fareyle üzerine geldiğiniz her öğe sayfada vurgulanacağından, ihtiyacınız olanı ararken HTML kodundaki her öğenin üzerine gelmenizi öneririz. Bu durum en uygun öğeyi bulmayı çok daha kolay hale getirecektir.
Öğeyi bulduktan sonra kimliğini ve sınıflarını inceleyin. Gönderi yazarına atıfta bulunan bir şey arayın. Aşağıdaki ekran görüntüsünde de görebileceğiniz gibi, belirli bir gönderi yazarını hedefleyen özel bir sınıf (örneğin, yorum-yazar-jenna-palmer) veya özellikle tüm gönderi yazarlarını hedefleyen bir sınıf (örneğin bypostwriter) olabilir. İkisinden ikincisini, yani .bypostauthor CSS sınıfını kullanacağız.
Eğitimin bu bölümünün başında belirttiğimiz gibi, get_comment_class() işlevi, yorumlara kullanıcıyla ilgili birkaç CSS sınıfı ekler. Bunların hepsi yukarıdaki ekran görüntüsünde görülebilir. Byuser ve yorumcu web sitesinde kayıtlı bir kullanıcıysa, yorum-yazar-$user_nice_name (bizim durumumuzda, yorum-yazar-jenna-palmer) ve yorumcu yazının yazarı ise bypostwriter şeklindedir.
Bu işlev aynı zamanda daha çok yorumla ilgili bazı sınıflar ekler, fakat bunlar bu makaleyle ilgili değildir, bu yüzden şimdilik onları atlayacağız. Fakat bu sınıflar hakkında daha fazla bilgi edinmek istiyorsanız, bağlantısını verdiğimiz sayfada, işlevi ayrıntılı olarak kapsayan tam kaynak kodunu inceleyebilirsiniz. Bununla birlikte kullanıcıyla ilgili üç CSS sınıfından, örneğimizde bypostwriter kullanacağız.
.bypostauthor CSS sınıfını kullanarak, tüm gönderilerde ilgili gönderi yazarları tarafından yapılan tüm yorumları hedefleyebileceğiz. Ek olarak yorumdan önce küçük bir etiket eklemek için ilgili öğenin ::before CSS seçicisini de hedefleyeceğiz. Bu etiket, okuyucuya yorumun gönderi yazarı tarafından yapıldığını bildirir. Hem yorum hem de etiket, aşağıda bulunan CSS koduyla stilize edilecektir.
Oluşturduğumuz kodu açıklamaya geçmeden önce, bunun doğrudan kopyala-yapıştır yapılmaması gerektiğini belirtmemiz gerekiyor. Genel olarak CSS, mevcut temanız ve tasarım gereksinimlerinizle çalışacak şekilde özel olarak hazırlanmalıdır. Bizimki, bu örnekte kullandığımız Twenty TwentyOne teması için özel olarak oluşturuldu. Hemen kopyalamak yerine, bu makalenin geri kalanını gözden geçirmeli ve kodun sizin için en uygun eşdeğer sürümünü oluşturmalısınız.
Bununla birlikte makalenin bu kısmı için oluşturduğumuz CSS kodunu ele alalım.
.bypostauthor {
background-color: #ffffff;
border: 1px solid #f55758;
padding: 5px 10px !important;
margin-left: 100px;
}
.bypostauthor::before {
content: "Post author";
background-color: #f55758;
padding: 3px 8px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
}
Açıklığa kavuşturmak için, yazarın yorumunun arka planını beyaz yapmak için kodu kullandık, bir kenarlık, dolgu ve solda bir kenar boşluğu ekledik. Yorum etiketine gelince (yorumdan önce ::önce seçici kullanılarak oluşturulur), arka plan rengini, dolgusunu, yazı tipi boyutunu, yazı tipi ağırlığını, rengini belirledik ve etiket metni olarak Gönderi yazarını ayarladık. Sonucu aşağıdaki ekran görüntüsünde görebilirsiniz.
Temaya özgü özel CSS sınıflarını kullanarak yazar yorumlarını vurgulayın
Temanız özel bir yorum şablonu kullanıyorsa, daha önce bahsettiğimiz CSS sınıfları kullanılamayabilir. Bunun yerine, mevcut temanız tarafından eklenen ve temaya özel olan eşdeğer CSS sınıflarını aramanız gerekecektir. Bu durum süreçte temaya özel özel CSS sınıflarını kullanmanın varsayılan WordPress CSS sınıflarını kullanmaktan farklı olduğu tek noktadır. Aksi takdirde, gönderi yazarı yorumlarını vurgulama adımları hemen hemen aynıdır.
Bununla birlikte tüm süreci tekrar ayrıntılı olarak açıklayacağız. Bu sefer örnek olarak QodeInteractive’den Lekker temasını kullanacağız. Tüm kilit noktaları anlayabilmek ve bunları diğer özel yapım temalara uygulayabilmek için süreci dikkatli bir şekilde takip ettiğinizden emin olun.
Daha önce açıklanan işleme benzer şekilde, ilk adım, gönderilerinizden birinde bir gönderi yazarının yorumunu incelemektir. Bu yüzden web sitenizin ön yüzünde yazar yorumu olan bir gönderiyi açın, üzerine sağ tıklayın ve açılan menüden İncele seçeneğini seçin.
Daha sonra, incelediğiniz öğe vurgulanarak tarayıcınızın geliştirici araçlarının Öğeler sekmesine yerleştirileceksiniz. Gönderi yazarı yorumunun tamamını saran HTML öğesini bulana kadar sayfanızın HTML yapısında gezinin. Her bir HTML öğesinin üzerine geldiğinizde, ön uçta vurgulanacaktır. Bu durum yorumu saran tam HTML öğesini bulma sürecini kolaylaştıracaktır. Uygun HTML öğesini bulduğunuzda, gönderi yazarını hedefleyen öğeyi bulmak için kimliğini ve CSS sınıflarını inceleyin. Aşağıdaki ekran görüntüsünde görebileceğiniz gibi, bizim durumumuz için uygun CSS sınıfı -comment–yazardır.
Unutmayın, CSS kodu oluşturma, duruma göre yapılmalıdır. Bu yüzden aşağıda bıraktığımız CSS’yi kopyalayıp yapıştırmamalı, kendi kodunuzu oluştururken rehberlik etmesi için kullanmalısınız. Son olarak mevcut web sitesi stiliniz için en uygun bulduğunuz CSS kurallarını eklemelisiniz. Lekker temasıyla kullanmaya karar verdiklerimiz aşağıda gösterilmiştir.
.-comment--author {
background-color: #FAEBD7;
border: 1px solid #f55758;
padding: 5px 10px !important;
}
.-comment--author::before {
content: "Post author";
background-color: #f55758;
padding: 3px 8px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
}
Buradaki CSS kodu, varsayılan WordPress CSS sınıflarını kullanarak yazı yazarı yorumlarını vurgulamak için bir araya getirdiğimize çok benzer. Yorum bölümü için arka plan rengini, kenarlığı ve dolguyu belirledik. Ve etiket için arka plan rengini, dolgusunu, yazı tipi boyutunu ve yazı tipi ağırlığını belirledik. Etiket rengi beyazdır ve metni Gönderi yazarıdır.
Bu CSS kodunu ekledikten sonra aşağıdaki sonucu aldık.
Tüm kullanıcı rollerinin kullanıcılarını vurgulayın
Gönderi yazarı yorumlarını vurgulamak faydalı olsa da, daha büyük blog web siteleri için yorumlar bölümünün yapılandırılmasına yardımcı olacak ek özellikler gerekebilir. Bu durum özellikle gönderileri oluşturan ve yorumları yanıtlayan çeşitli rollere sahip kullanıcılar varsa geçerlidir. Bu yüzden makalelerinizin sahip olduğu etkileşim düzeyini göstermek için tüm bu kullanıcıların yanı sıra abonelerden gelen yorumları vurgulamak son derece yararlıdır.
Bunu yapmanın en kolay yolu, web sitesinde kayıtlı herhangi bir kullanıcının yorumlarına uygun kullanıcı rolü etiketleri eklemektir. Fakat size yardımcı olabilecek herhangi bir varsayılan WordPress seçeneği olmadığından, bunu pratikte başarmak zor olabilir.
Kullanıcıları belirli rolleriyle etiketlemek için, kullanıcı rolü etiketlerini görüntüleyen özel bir kod parçacığı oluşturmanız gerekir. Yazının bu bölümünde sizlere kullanabileceğiniz bir kod parçacığı örneğini gösterecek ve detaylı bir şekilde anlatacağız. Bununla birlikte bu pasaj, nesne yönelimli programlamanın ve genel olarak WordPress’in bazı temel noktalarına, yani sırasıyla sınıf nesnelerine ve kancalara dayanır. Bu yüzden bu yöntem ileri düzey WordPress kullanıcıları için daha uygundur ve ele aldığımız tüm noktaları tam olarak anlamak için yardıma ihtiyacınız varsa ek araştırma yapmanızı öneririz.
Snippet’in çalışması için, onu temanızın functions.php dosyasına veya siteye özgü bir eklentiye yerleştirmek için FTP kullanmanız gerekir. Bu yöntem, özel kod girmenizi gerektirdiğinden, önceden web sitenizin yedeğini almak şiddetle tavsiye edilen bir güvenlik önlemidir. Bunu yaptıktan sonra, aşağıdaki adımlara ilerleyebilirsiniz.
Bu makale için, yorum bölümünde kullanıcı rol etiketlerini görüntülemek için aşağıdaki kodu oluşturduk.
if ( ! class_exists( 'CommentAuthorUserRoleLabel' ) ) {
class CommentAuthorUserRoleLabel {
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'create_comment_author_role_html' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'display_comment_author_role_html' ) );
}
function create_comment_author_role_html( $author, $comment_id, $comment ) {
// Check if the commenter is a registered user
$user = $comment->user_id ? get_userdata( $comment->user_id ) : false;
if ( $user ) {
$commenter_user_role = $user->roles[0];
// HTML output added after the comment author name
$this->user_role=" <span class="comment-author-label " . $commenter_user_role . '-label">' . ucfirst( $commenter_user_role ) . '</span>';
} else {
$this->user_role="";
}
return $author;
}
function display_comment_author_role_html( $author ) {
return $author .=...