WordPress kullanırken çoğu zaman gönderi özetlerini (WordPress excerpt) liste sayfalarında, blog arşivlerinde veya ana sayfa düzenlerinde kullanıyorsun. Ancak fark etmişsindir ki, WordPress’in varsayılan the_excerpt() fonksiyonu özetleri yalnızca bir <p> etiketi içine alır. Bu etiketin herhangi bir class ya da ID değeri olmadığı için tasarım tarafında özelleştirme yapmak zorlaşır.
Belki sen de şu sorunu yaşıyorsun:
- “Sadece excerpt metinlerini farklı bir arka planla göstermek istiyorum ama diğer paragraflar da etkileniyor.”
- “Tema tasarımımda excerpt için özel bir stil gerekli ama ayırt edemiyorum.”
İşte tam bu noktada WordPress’in sunduğu filter (filtre) yapısından yararlanabilirsin.
WordPress Excerpt Nedir?
WordPress excerpt, yani özet; bir yazının kısa bir tanıtımıdır. Genellikle:
- Ana sayfada blog yazılarını listelerken,
- Arşiv sayfalarında içerikleri tanıtırken,
- RSS beslemelerinde veya özel şablonlarda kullanılır.
Varsayılan olarak the_excerpt() fonksiyonu bu özeti <p> etiketiyle sarar. Ancak bu etiketin ayırt edici bir niteliği olmadığından, CSS tarafında karışıklık çıkarabilir.
WordPress Excerpt Alanına Class Eklemenin Faydaları
WordPress excerpt’e class ekleyerek:
- Sadece özet alanlarını hedefleyen özel CSS yazabilirsin.
- Arka plan rengi, kenarlık veya tipografi gibi farklı bir tasarım uygulayabilirsin.
- Kullanıcı deneyimini artıracak okunabilirlik ve görsel düzen sağlayabilirsin.
Ayrıca CSS sayesinde hover efektleri veya responsive uyumlu tipografi gibi daha gelişmiş tasarımlar da oluşturabilirsin.
Örneğin, haber sitesi tasarlıyorsan özetlerin gri kutu içinde, blog tasarlıyorsan pastel arka plan üzerinde görünmesini sağlayabilirsin.
Adım Adım: WordPress Excerpt’a Class Ekleme
Şimdi gelelim uygulamaya. Bunun için küçük bir PHP fonksiyonu yazıp functions.php dosyana eklemen yeterli.
1. Excerpt Filtresine Hook Ekle
WordPress’in the_excerpt filtresine bağlanarak özetin çıktısını değiştirebilirsin.
function add_class_to_excerpt( $excerpt ) {
return str_replace('<p', '<p class="excerpt"', $excerpt);
}
add_filter( "the_excerpt", "add_class_to_excerpt" );Yukarıdaki kod, excerpt çıktısındaki <p> etiketini <p class="excerpt"> ile değiştirir.
2. CSS ile Excerpt Alanını Tasarla
Artık özet alanına bir class ekledik. Şimdi sıra CSS ile özelleştirmede.
.excerpt {
font-size: 14px;
line-height: 20px;
background: #eee;
padding: 10px;
border: 1px solid #e2e2e2;
text-shadow: 1px 1px 0 #fff;
color: #444;
}Bu örnekte:
- Yazı boyutu ve satır yüksekliği ayarlandı.
- Arka plan rengi açık gri yapıldı.
- Kenarlık ve padding ile özet alanı kutu haline getirildi.
- Daha hoş bir görünüm için hafif bir gölge eklendi.
Sen kendi tasarımına göre farklı fontlar, renkler veya efektler ekleyebilirsin.
Alternatif Yöntem: Farklı Class’lar Kullanmak
Eğer farklı şablonlarda farklı class kullanmak istiyorsan, koşullu etiketleri (is_home(), is_archive(), is_single() gibi) kullanarak class’ı değiştirebilirsin.
function custom_excerpt_class( $excerpt ) {
if ( is_home() ) {
return str_replace('<p', '<p class="home-excerpt"', $excerpt);
} elseif ( is_archive() ) {
return str_replace('<p', '<p class="archive-excerpt"', $excerpt);
}
return $excerpt;
}
add_filter( "the_excerpt", "custom_excerpt_class" );Bu sayede her sayfa türü için farklı bir tasarım uygulaman mümkün olur.
Sonuç: Daha Esnek ve Şık Excerpt Alanları
Artık WordPress excerpt alanlarına class eklemeyi öğrendin. Bu basit ama etkili yöntem sayesinde tasarımda daha fazla esneklik kazanacaksın. Özetler, içeriklerine uygun şekilde vurgulanabilir ve ziyaretçilerin dikkatini çekebilir.
Eğer WordPress’te CSS ve tema özelleştirmesi konusunda daha fazla bilgi almak istersen, şu sayfaya da göz atabilirsin: WordPress Kodları.
Kendi Excerpt Tasarımını Dene!
Peki sen WordPress’te excerpt alanlarını nasıl süslemek isterdin? Belki arka planını rengarenk yapmayı düşünüyorsundur, belki de kenarlıklarla öne çıkarmayı. Kendi sitende bu yöntemi uyguladığında farklı ihtimaller ortaya çıkabilir ve zamanla sınırsız tasarım seçenekleri keşfedilebilir.
Yorumlarda deneyimlerini ya da kafana takılan soruları yazabilirsin, ben de fikirlerimi paylaşırım. Ayrıca daha özel soruların olursa iletişim sayfamızdan üzerinden bana ulaşabilirsin. Böylece bu süreci birlikte daha eğlenceli ve kolay bir hale getirmiş oluruz.
