WordPress temanızdaki gönderilere Tek ve Çift sınıfları eklemek mi istiyorsunuz?
Tek ve çift sınıfı eklemek, diğer her gönderiye farklı bir stil vermenizi sağlar.
Bu makalede, WordPress temalarında yazınıza nasıl tek/çift sınıfı ekleyeceğinizi göstereceğiz.
WordPress Temalarında Yazılarınıza Neden Tek/Çift Sınıfı Eklemelisiniz?
Birçok WordPress teması, WordPress yorumları için tek veya çift sınıf kullanır. Bu, kullanıcıların bir yorumun nerede bittiğini ve bir sonrakinin nerede başladığını görselleştirmelerine yardımcı olur.
Benzer şekilde, bu tekniği WordPress yazılarınız için de kullanabilirsiniz. Estetik açıdan hoş görünür ve kullanıcıların çok sayıda içeriğe sahip sayfaları hızla taramasına yardımcı olur. Özellikle dergi veya haber sitelerinin ana sayfaları için faydalıdır.
Bunu söyledikten sonra, WordPress temasında yazılarınıza nasıl tek ve çift sınıf ekleyeceğinizi görelim.
WordPress Temasında Yazılara Tek/Çift Sınıfı Ekleme
WordPress varsayılan CSS sınıfları oluşturur ve bunları web sitenizdeki farklı öğelere anında ekler. Bu CSS sınıfları, eklenti ve tema geliştiricilerinin farklı öğeler için kendi stillerini eklemelerine yardımcı olur.
WordPress ayrıca tema geliştiricileri tarafından yazı öğesine sınıf eklemek için kullanılan post_class
adlı bir işlevle birlikte gelir. Her bir WordPress gönderisinin nasıl farklı şekillendirileceğine ilişkin kılavuzumuza bakın.
post_class
aynı zamanda bir filtredir, yani kendi fonksiyonlarınızı ona bağlayabilirsiniz. Burada yapacağımız şey tam olarak bu.
Bu kodu temanızın functions.php dosyasına, siteye özel bir eklentiye veya bir kod parçacıkları eklentisine eklemeniz yeterlidir.
function oddeven_post_class ( $classes ) {
global $current_class;
$classes[] = $current_class;
$current_class = ($current_class == 'odd') ? 'even' : 'odd';
return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';
Bu kodu WPCode eklentisini kullanarak eklemenizi öneririz. WordPress’e özel kod eklemeyi güvenli ve kolay hale getiren en iyi kod parçacıkları eklentisidir.
Başlamak için ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Talimatlar için bir WordPress eklentisinin nasıl kurulacağına ilişkin bu kılavuza bakın.
Etkinleştirmenin ardından WordPress kontrol panelinden Kod Parçacıkları ” + Parçacık Ekle sayfasına gidin. Ardından, ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin altındaki ‘Snippet Kullan’ düğmesine tıklayın.
Buradan, kod parçacığınız için bir başlık ekleyin; bu, kodun ne için olduğunu hatırlamanıza yardımcı olacak herhangi bir şey olabilir.
Ardından, yukarıdaki kodu ‘Kod Önizleme’ kutusuna yapıştırın ve sağdaki açılır listeden kod türü olarak ‘PHP Snippet’i seçin.
Bundan sonra, geçişi ‘Etkin Değil’den ‘Etkin’e getirin ve ‘Snippet’i Kaydet’ düğmesine tıklayın.
Bu işlev basitçe ilk gönderiye tek ekler, sonra çift ekler ve bu şekilde devam eder.
Tek ve çift sınıfları sitenizin kaynak kodunda bulabilirsiniz. Fareyi bir yazı başlığına götürün ve ardından sağ tıklayarak İncele veya Öğeyi İncele’yi seçin.
Artık yazılarınıza çift ve tek sınıfları eklediğinize göre. Bir sonraki adım bunları CSS kullanarak şekillendirmektir. Özel CSS’nizi alt temanızın stil sayfasına, tema özelleştiricisine veya WPCode eklentisini kullanarak ekleyebilirsiniz.
İşte başlangıç noktası olarak kullanabileceğiniz örnek bir CSS:
.even {
background:#f0f8ff;
}
.odd {
background:#f4f4fb;
}
Test sitemizde bu şekilde görünüyordu:
CSS’yi nasıl kullanacağınızı bilmiyorsanız, WordPress sitenize nasıl kolayca özel CSS ekleyebileceğinize ilişkin kılavuzumuza göz atmak isteyebilirsiniz.
Umarız bu makale WordPress temalarındaki yazılarınıza nasıl tek/çift sınıfı ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca WordPress yorum düzeninizi nasıl şekillendireceğinize dair rehberimizi ve en iyi WordPress sayfa oluşturucularına dair uzman seçimlerimizi görmek 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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Sarmad Gardezi says
I want to use it with CPT then how i can use it ?
WPBeginner Support says
It should automatically affect custom post types
Yönetici
Vera says
Hello,
I was trying to make this work on my test site, where I work with Elementor and Astra. For some reason, once I add the code – everything colors with the “odd” color, and I don’t understand why.
Can you help me sort it out, please?
Vera
WPBeginner Support says
For that question, you would want to check with Elementor to ensure their page builder is not overriding the function and they should be able to assist
Yönetici
Oliur says
My Blog Name WayTrick. It a Blogger Blog. Now I want to my blog Tansfer to wordpress. How do it?
WPBeginner Support says
Please see our guide on how to switch from Blogger to WordPress.
Yönetici
kaluan says
This seems not working in Genesis framework? Any additional code needed to add?
onkar says
how to add odd even class in posts for particular page
Bucur says
Ok good function, but css style?
. post {
/ / Rest of the css
}
.odd { } ???
Simon says
Thanks for this. Just what I needed.
Samuel says
How could I take this a step further and target a specific post category?
I have a custom post type – testimonial, and I only want odd/even styling in that section.
Thanks!
Editorial Staff says
You would have to use WordPress conditionals:
http://codex.wordpress.org/Conditional_Tags
Yönetici
Eric says
This is by far the easiest method of creating odd and even posts for wordpress!! Thanks so much for sharing!
Christine says
As, sadly, css3 selectors are not well supported by all browsers…
I just tried your code for a new twenty eleven child theme i’m customizing, it works so fine,
Thanks a Lot for sharing this ! !
Daniele Zamboni says
What is odd/even class ? Sorry but i’m newbie
wpbeginner says
@Daniele Zamboni These are CSS classes that you can add for styling purposes.