WordPress Yorum Düzeninizi Nasıl Stilize Edersiniz

Geçenlerde size WordPress yorum formunu nasıl stilize edeceğinizi gösterdik ve WordPress yorum düzenini stilize etmekten bahsetmezsek eksik kalacağını düşündük. Geçmişte, tema tasarımcılarının şablonlarını stilize etmelerini kolaylaştırmak için varsayılan WordPress tarafından oluşturulan CSS sınıfları ve kimlikleri olduğunu tartıştık. Bu makalede, WordPress yorum düzeninizi ve bununla yapabileceğiniz harika şeyleri nasıl stilize edeceğinizi 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 hakkında iyi bir anlayışa sahip başlangıç seviyesi tema tasarımcıları ve kendi kendine yapan kullanıcılar içindir.

Varsayılan WordPress Yorum Sınıfları

Varsayılan olarak WordPress, yorumlar şablonundaki öğeler için şu 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 Bulma

WordPress yorum düzenini stilize etmeye 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 araca Öğeyi Denetle denir. Fareyi bir web sayfasındaki bir öğenin üzerine getirin, sağ tıklayın ve öğeyi denetle'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 stilize edildiklerini görebileceksiniz. Test amacıyla CSS'yi orada düzenleyebilirsiniz. Inspect Element kullanarak yaptığınız herhangi bir değişikliğin yalnızca size görüneceğini unutmamak önemlidir. Sayfayı yenilediğiniz anda bu değişiklikler kaybolacaktır. Değişiklikleri kalıcı hale getirmek için stil.css dosyanızı veya temalarınızdaki diğer uygun dosyaları kullanmanız gerekir.

Yorumlar İç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ği artırır. Ayrıca belirli tema renkleriyle gerçekten iyi göründüğü için birçok tasarımcı bu işlevsellikten yararlanmak ister. Tasarımcıların bu hedefe ulaşmalarına yardımcı olmak için WordPress, her yoruma sırasıyla tek ve çift bir sınıf ekler.

Tema stil.css dosyanıza aşağıdaki kodu yapıştırarak yorumlar için tek/çift sayı stillerini kolayca ekleyebilirsiniz.

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

Sonuç şuna benzer bir şey olacaktır:

Yorum Yazarı ve Meta Bilgilerini Stilize Etme

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 meta verilerinin görüntülenmesini özelleştirmesine olanak tanır. Bu öğeleri farklı şekilde stilize etmek için tema style.css dosyanıza yapıştırabileceğiniz örnek bir kod aşağıdadır. Bu örnekte, yorum meta verilerine arka plan rengi ve bazı boşluklar ekledik.

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

Şöyle görünmelidir:

Yazı Yazarı Yorumlarını Farklı Şekilde Biçimlendirme

Çoğu zaman, gönderi yazarı yorumlarının farklı bir arka plan rengi veya ek bir rozet ile vurgulandığını görebilirsiniz. WordPress, gönderinin yazarının yaptığı tüm yorumlara bypostauthor varsayılan sınıfını ekler. WordPress tema tasarımcıları, gönderi yazarı yorumlarını farklı şekilde stilize etmek için bu sınıfı kullanabilir.

Bazı temalar, yorumları görüntülemek için kendi geri çağırma işlevlerini kullanır. Geri çağırma işlevini kullanarak, bu temalar bir gönderi yazarı tarafından bir yoruma ek bilgi ekleyebilir. Örneğin, Twenty Twelve, yorum geri çağırma işlevinde twentytwelve_comment() (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>Gönderi Yazarı</span> ekler. WordPress temanızın gönderi yazarı tarafından yapılan yorumları nasıl işlediğine bağlı olarak, bunu istediğiniz herhangi bir şeye değiştirebilirsiniz.

Yirmi On İki'den farklı bir tema kullanıyorsanız, temanızın yorumları nasıl işlediğini bulmanız gerekir. Sadece temanızın comments.php dosyasını açın. Temanız kendi geri çağırma fonksiyonunu kullanıyorsa, bunu wp_list_comments fonksiyonu içinde şöyle göreceksiniz:

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

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

Bu örnekte, Gönderi Yazarı yerine Editör göstermek için bu fonksiyonu 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, temanızın style.css dosyasına aşağıdaki kodu ekleyerek görünümünü 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;
}

Şöyle görünecektir:

WordPress Yorumlarında Yorum Yanıtlama Bağlantısını Stilize Etme

Çoğu WordPress teması, her yorumun altında bir yanıt bağlantısına sahiptir. Bu işlevsellik yalnızca iş parçacıklı yorumlar etkinleştirilmişse görüntülenir. İş parçacıklı yorumları etkinleştirmek için WordPress yöneticinize gidin (Ayarlar » Tartışma). Diğer yorum ayarları bölümüne bakın ve iş parçacıklı (iç içe) yorumları etkinleştir kutusunu işaretleyin.

Yanıt bağlantısı için WordPress tarafından 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;
}

Şöyle görünecektir:

Yorum Düzenleme Düğmesini Biçimlendirme

Çoğu WordPress temasında, yorumları düzenleme yeteneğine sahip oturum açmış kullanıcılar her yorumun altında bir yorum düzenleme bağlantısı görebilir. İşte 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.

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

Nasıl görüneceği aşağıdadır:

Yorum Yanıtlama Bağlantısını İptal Etme Stilini Ayarlama

Çoğu iyi WordPress temasında, Yanıt bağlantısına tıklamak, yanıtladığınız yorumun hemen altına, yorum yanıtını iptal etme bağlantısıyla birlikte yorum formunu açar. Bu yorum yanıtını iptal et bağlantısını varsayılan CSS kimliği cancel-comment-reply'yi kullanarak 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;
}

Nasıl görüneceği aşağıdadır:

WordPress Yorum Formunu Stilize Etme

Kullanılabilir, estetik olarak hoş ve şık yorum formları, kullanıcıları blogunuza yorum bırakmaya teşvik eder. Daha önce WordPress yorum formunu nasıl stilize edeceğiniz hakkında ayrıntılı bir makale yazdık. WordPress yorum formunuzu bir sonraki seviyeye nasıl taşıyabileceğinizi görmek için mutlaka göz atmanızı öneririz.

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