WordPress altyapısı kullanan birden fazla web siteniz olduğunda, blog sayfalarındaki yerleşim düzenlerinin birbirinden farklı görünmesi sıkça karşılaşılan bir durumdur. Özellikle aynı veya benzer temaların farklı sürümlerinde ya da bağımsız şablonlarda; bazı siteler blog yazılarını yan yana 2 sütun halinde listelerken, bazıları varsayılan olarak 3 sütun şeklinde dizebilir.
Siteleriniz arasında görsel bir standart yakalamak ve blog akışında her satırda tam 2 yazı göstermek istiyorsanız, bu işlemi temanın çekirdek dosyalarını bozmadan birkaç adımda çözebilirsiniz.
Sorun: Tema Ayarlarının Yetersiz Kaldığı Durumlar
Birçok WordPress kullanıcısı ilk olarak Ayarlar > Okuma menüsüne gider. Ancak buradaki ayar sütun adedini değil, sayfada listelenecek toplam yazı adedini (sayfalama sınırını) belirler.
Temanın kendi Özelleştir panelinde sütun sayısını 2’ye düşüren hazır bir seçenek bulunmadığında ise en temiz ve kalıcı yöntem, stil dosyasını doğrudan ezmeden Ek CSS alanından stil müdahalesi yapmaktır.
Çözüm Adımı: Ek CSS ile Blog Düzenini 2 Kolona Zorlama
WordPress temasının style.css dosyasında yer alan genel tipografi ve şablon hiyerarşisi incelendiğinde, blog kartlarının kapsayıcıları genellikle <article> etiketleri veya grid yapılarıyla sınırlandırılır. Bu sınıflara masaüstü ve tablet ekranlarında %50 genişlik tanımlayarak her satırda ikişer adet kart görünmesini sağlayabiliriz.
Uygulama Adımları:
-
WordPress yönetim panelinize giriş yapın.
-
Sol menüden Görünüm > Özelleştir yolunu izleyin.
-
Açılan sol menünün en altında yer alan Ek CSS (Additional CSS) sekmesine tıklayın.
-
Aşağıdaki CSS kod bloğunu alana yapıştırın:
CSS
@media (min-width: 768px) {
/* Yalnızca ana sayfa, blog listesi ve arşivlerde 2 kolon yapar */
:is(.home, .blog, .archive) .site-main article,
:is(.home, .blog, .archive) .main-content article,
:is(.home, .blog, .archive) .blog-posts-wrap article,
:is(.home, .blog, .archive) .posts-layout article,
:is(.home, .blog, .archive) article.post {
width: 50% !important;
max-width: 50% !important;
flex: 0 0 50% !important;
box-sizing: border-box !important;
float: left !important;
}
} -
Üst kısımdaki Yayımla butonuna basarak değişiklikleri kaydedin.
Neden @media (min-width: 768px) Kullandık?
Bu sorgu, yaptığımız 2 sütunlu düzenlemenin sadece tablet ve masaüstü gibi geniş ekranlarda geçerli olmasını sağlar. Mobil cihazlarda ekran genişliği yetersiz olduğundan kartlar otomatik olarak tek sütun (tam genişlik) kalmaya devam eder ve mobil kullanıcı deneyimi (UX) bozulmaz.
İşlemi tamamladıktan sonra sitenizde aktif bir önbellek (Cache) eklentisi varsa önbelleği temizleyip sayfayı gizli sekmede yenileyerek 2’li grid düzenini kontrol edebilirsiniz.