WordPress Yorum Düzeninizi Nasıl Şekillendirirsiniz?

Geçtiğimiz günlerde WordPress yorum formunu nasıl şekillendireceğinizi gösterdik ve WordPress yorum düzenini şekillendirme hakkında yazmazsak eksik kalacağını düşündük. Geçmişte, tema tasarımcılarının şablonlarını şekillendirmelerini kolaylaştırmaya yardımcı olmak için varsayılan WordPress tarafından oluşturulan CSS sınıfları ve kimlikleri olduğundan bahsetmiştik. Bu makalede, WordPress yorumlar düzeninizi nasıl şekillendireceğinizi ve bununla yapabileceğiniz bazı harika şeyleri göstermek için bu varsayılan sınıfları kullanacağız.

Bu örnek için, bu makalede varsayılan Twenty Twelve WordPress temasını değiştireceğiz. Not: Bu makale, HTML ve CSS’yi makul düzeyde anlayan yeni başlayan tema tasarımcıları ve DIY kullanıcıları içindir.

Varsayılan WordPress Yorum Sınıfları

WordPress varsayılan olarak yorumlar şablonundaki öğeler için bu sınıfları oluşturur:

/*Comment Output*/

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

Hangi CSS Sınıflarını Düzenlemeniz Gerektiğini Nasıl Bulursunuz?

WordPress yorum düzenini şekillendirmeye geçmeden önce, yeni kullanıcılarımız için küçük bir ipucu. Google Chrome ve Mozilla Firefox web tarayıcıları, WordPress tema geliştirme becerilerinizi geliştirmek için kullanabileceğiniz kullanışlı bir araçla birlikte gelir. Bu aracın adı Inspect Element. Farenizi web sayfasındaki bir öğenin üzerine getirin, sağ tıklayın ve öğeyi incele’yi seçin. Tarayıcı pencereniz iki satıra bölünecek ve alt pencerede o öğenin kaynak kodunu göreceksiniz. Ayrıca alt pencerede CSS öğelerini ve nasıl şekillendirildiklerini de görebileceksiniz. Hatta test amacıyla CSS’yi orada düzenleyebilirsiniz. Şunu unutmamak önemlidir: Inspect Element’i kullanarak değiştirdiğiniz her şey yalnızca sizin tarafınızdan görülebilir. Sayfayı yenilediğiniz anda bu değişiklikler kaybolacaktır. Değişiklikleri kalıcı hale getirmek için style.css dosyanızı veya temalarınızdaki diğer uygun dosyaları kullanmanız gerekir.

Yorumlar için Tek ve Çift Arka Plan Renkleri Ekleme

Tek ve çift yorumlar için farklı bir arka plan rengine sahip olmak, birkaç yıldır var olan bir tasarım trendidir. Özellikle çok sayıda yorumunuz varsa okunabilirliğe yardımcı olur. Ayrıca belirli tema renkleriyle gerçekten iyi görünüyor, bu yüzden birçok tasarımcı bu işlevi kullanmak istiyor. Tasarımcıların bu hedefe ulaşmasına yardımcı olmak için WordPress her yoruma sırasıyla tek ve çift sınıfı ekler.

Aşağıdaki kodu yapıştırarak temanızın style.css dosyasına yorumlar için tek/çift stilini kolayca ekleyebilirsiniz.

.commentlist .even .comment { 
background-color:#ccddf2; 
} 
.commentlist .odd .comment {
background-color:#CCCCCC;
}

Sonuç şöyle bir şeye benzeyecektir:

Yorum Yazarı ve Meta Bilgilerini Şekillendirme

WordPress ayrıca her yorum başlığında görüntülenen öğelere sınıflar ekler. Bu, tema tasarımcılarının yazar bilgilerinin ve yorum tarihi ve saati gibi diğer yorum metalarının görüntülenmesini özelleştirmesine olanak tanır. İşte bu öğeleri farklı şekilde biçimlendirmek için temanızın style.css dosyasına yapıştırabileceğiniz örnek bir kod. Bu örnekte yorum metasına arka plan renginin yanı sıra biraz boşluk ekledik.

.comments-area article header {
	margin: 0 0 48px;
	overflow: hidden;
	position: relative;
	background-color:#55737D;
	color:#FFFFFF;
	padding: 10px;
}

İşte böyle görünmeli:

Gönderi Yazar Yorumlarını Farklı Şekillendirme

Çoğu zaman yazı yazarı yorumlarının farklı bir arka plan rengi ya da ek bir rozet ile vurgulandığını görebilirsiniz. WordPress, yazının yazarı tarafından yapılan tüm yorumlara varsayılan bir bypostauthor sınıfı ekler. WordPress tema tasarımcıları bu sınıfı kullanarak yazı yazarı yorumlarını farklı bir şekilde şekillendirebilir.

Bazı temalar, yorumları görüntülemek için kendi geri arama işlevlerini kullanır. Bu temalar, geri arama işlevini kullanarak bir yoruma gönderi yazarına göre ek bilgiler ekleyebilir. Örneğin Twenty Twelve, twentytwelve_comment() yorum geri arama işlevinde (temanın functions.php dosyasında bulunur) aşağıdaki satırı kullanır.

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : '' );

Bu kod, yorum meta bilgilerine <span>Yazı Yazarı</span> ekler. WordPress temanızın yorumları yazı yazarına göre nasıl işlediğine bağlı olarak, bunu istediğiniz herhangi bir şekilde değiştirebilirsiniz.

Twenty Twelve’den farklı bir tema kullanıyorsanız, temanızın yorumları nasıl işlediğini öğrenmeniz gerekir. Basitçe temanızın comments.php dosyasını açın. Temanız kendi geri arama işlevini kullanıyorsa, bunu wp_list_comments işlevinin içinde aşağıdaki gibi görürsünüz:

<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

Yukarıdaki örnekte, temanın geri arama işlevi olarak twentytwelve_comment kullandığını görebilirsiniz. Bir geri arama işlevi belirtilmişse, bu işlevi bulmak için en olası konum temanızın functions.php dosyasıdır.

Bu örnekte, bu işlevi Yazı Yazarı yerine Editör’ü görüntüleyecek şekilde değiştiriyoruz. Bunu yapmak için yorum geri çağırma fonksiyonunu şu şekilde değiştirdik:

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Editor', 'twentytwelve' ) . '</span>' : '');

Ayrıca temamızın style.css dosyasına aşağıdakileri ekleyerek görünüm şeklini değiştireceğiz:

li.bypostauthor cite span {
	color: #21759b;
	background-color: #f8f0cb;
	background-image: none;
	border: 1px solid #f8f0cb;
	border-radius: 3px;
	box-shadow: none;
	padding: 3px;
	font-weight:bold;
}

İşte böyle görünecek:

WordPress Yorumlarında Yorum Yanıt Bağlantısını Şekillendirme

Çoğu WordPress temasında her yorumun altında bir yanıt bağlantısı bulunur. Bu işlev yalnızca zincirleme yorumları etkinleştirdiyseniz görüntülenir. Zincirleme yorumları etkinleştirmek için WordPress yöneticinize gidin(Ayarlar ” Tartışma). Diğer yorum ayarları yazan bölüme bakın ve iş parçacıklı (iç içe) yorumları etkinleştir kutusunu işaretleyin.

WordPress tarafından yanıt bağlantısı için oluşturulan varsayılan CSS sınıfları reply ve comment-reply-link‘tir. Yanıt bağlantısını değiştirmek ve bir CSS düğmesine dönüştürmek için bu sınıfları kullanacağız.

.reply { 
	float:right;
	margin:0 10px 10px 0;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
	padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
	color: #FFFFFF;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #f6e7d7;
}

İşte böyle görünecek:

Yorum Düzenleme Düğmesini Şekillendirme

Çoğu WordPress temasında, yorumları düzenleme özelliğine sahip oturum açmış kullanıcılar her yorumun altında bir yorum düzenleme bağlantısı görebilir. Burada, bağlantının görünümünü değiştirmek için varsayılan comment-edit-link sınıfını kullanan küçük bir CSS bulunmaktadır.

a.comment-edit-link {
	float:left;
	margin:0 0 10px 10px;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

İşte nasıl görüneceği:

Styling İptal Yorum Cevap Bağlantı

Çoğu iyi WordPress temasında, Yanıtla bağlantısına tıklamak, yanıtladığınız yorumun hemen altında yorum yanıtını iptal etmek için bir bağlantıyla birlikte yorum formunu açar. Varsayılan CSS kimliğini cancel-comment-reply kullanarak bu yorum yanıtını iptal bağlantısını değiştirelim.

#cancel-comment-reply-link  { 
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	color:#FFFFFF;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
	text-decoration:none;
}

İşte nasıl görüneceği:

WordPress Yorum Formunu Şekillendirme

Kullanışlı, estetik açıdan hoş ve şık yorum formları, kullanıcıları blogunuza yorum bırakmaya teşvik eder. Daha önce WordPress yorum formunun nasıl şekillendirileceği hakkında ayrıntılı bir makale yazmıştık. WordPress yorum formunuzu nasıl bir üst seviyeye taşıyabileceğinizi görmek için bu yazımıza göz atmanızı şiddetle tavsiye ederiz.

Bu makalenin WordPress yorum düzeninizi şekillendirmenize yardımcı olacağını umuyoruz. Herhangi bir sorunuz veya öneriniz varsa, lütfen aşağıya bir yorum bırakarak bize bildirmekten çekinmeyin.