Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress Temalarında Yazınıza Tek/Çift Sınıfı Nasıl Eklenir?

Editoryal Not: WPBeginner üzerindeki ortak bağlantılardan komisyon kazanıyoruz. Komisyonlar, editörlerimizin görüşlerini veya değerlendirmelerini etkilemez. Editoryal Süreç hakkında daha fazla bilgi edinin.

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.

Adding Odd/Even class to your posts in WordPress themes

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.

WPCode

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.

Add a new custom code snippet in WPCode

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.

Paste code snippet into WPCode plugin

Bundan sonra, geçişi ‘Etkin Değil’den ‘Etkin’e getirin ve ‘Snippet’i Kaydet’ düğmesine tıklayın.

Activate and save your custom code snippet

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.

Odd and Even classes in source code

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:

Posts using alternate background colors with even/odd css classes in WordPress

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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

17 yorumBir Cevap Bırakın

  1. 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!

  2. 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

  3. 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!

  4. 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 ! !

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.