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

WordPress blog yazılarınıza görsel ilgi çekici bir dokunuş eklemek ister misiniz? Tek ve çift sınıflar eklemek, diğer her gönderiyi farklı şekillendirerek benzersiz ve ilgi çekici bir tasarım elde etmenize yardımcı olabilir.

Okurlarımızdan sık sık bu tekniğin nasıl uygulanacağına ilişkin sorular alıyoruz. Birçok WordPress teması tek ve çift yazı sınıfları için yerleşik bir seçenek sunmasa da, bunları kendiniz eklemek nispeten basit bir işlemdir.

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.