Wordpress İle Özel Bir Sütunlu İçerik Düzeni Nasıl Yapılır?

Ön Hazırlık ve Gereksinimler

Özel sütunlu içerik düzenleri oluşturmaya başlamadan önce, çalışma ortamınızın güncel olduğundan emin olmalısınız. WordPress 6.x ve üzeri sürümler, CSS Grid ve Flexbox gibi modern düzenleme tekniklerini tam desteklemektedir. İhtiyacınız olan temel araçlar şunlardır:

• Güncel bir WordPress kurulumu (PHP 8.2 veya üzeri önerilir).
• Tema dosyalarını düzenlemek için bir kod editörü (VS Code gibi).
• FTP/SFTP erişimi veya yerel geliştirme ortamı (LocalWP gibi).
• Temel düzeyde HTML5 ve modern CSS (Flexbox/Grid) bilgisi.

Dikkat: Tema dosyalarınızda yapacağınız değişiklikleri her zaman bir "Child Theme" (Alt Tema) üzerinden gerçekleştirin. Ana temayı doğrudan düzenlemek, bir sonraki güncellemede tüm özelleştirmelerinizin silinmesine neden olur.

Gutenberg Blokları ile Özel Sütunlar Oluşturma

WordPress'in yerel blok düzenleyicisi olan Gutenberg, "Columns" (Sütunlar) bloğu ile gelir. Ancak, bu bloğun sunduğu sınırlı seçenekleri aşmak için CSS sınıfları ekleyerek kendi özel düzenlerinizi oluşturabilirsiniz. İlk adım olarak, sütunlara özel bir sınıf tanımlayıp bunları stilize etmeyi öğrenelim.

/* style.css dosyanıza ekleyin */
.ozel-sutun-yapisi {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.ozel-sutun-yapisi .wp-block-column {
    flex: 1;
    min-width: 300px;
}

Yukarıdaki kod, sütunlarınızın ekran boyutuna göre esnek davranmasını sağlar. Sütunların birbirine girmesini engellemek için min-width değerini kullanmak, mobil uyumluluk açısından en güvenli yöntemdir.

PHP ve WordPress Şablon Dosyaları ile Sütunlu Düzen

Daha karmaşık ve tekrar eden bir yapıya (örneğin hizmetler sayfası veya ekip tanıtımı) ihtiyacınız varsa, bunu doğrudan PHP şablon dosyanızda tanımlamak en performanslı yöntemdir. WordPress'in get_template_part fonksiyonunu kullanarak kodunuzu modüler hale getirebilirsiniz.

Bu yöntem, içeriği doğrudan veritabanından çekmek yerine şablon düzeyinde sabit bir yapı kurmanıza olanak tanır. wp_kses_post fonksiyonu, XSS (Cross-Site Scripting) saldırılarına karşı içeriği temizlemek için kritik bir güvenlik önlemidir.

CSS Grid Kullanarak Gelişmiş Düzenler

2026 yılı itibarıyla modern web tasarımında CSS Grid, sütunlu düzenler için en güçlü araçtır. Flexbox tek boyutlu düzenler için iyidir, ancak CSS Grid iki boyutlu (satır ve sütun) düzenlerde çok daha fazla kontrol sağlar.

.grid-container-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 30px;
}

Bu kod bloğu, ekran genişliğine göre sütun sayısını otomatik olarak ayarlar. repeat(auto-fit, minmax(250px, 1fr)) komutu, sütunların en az 250 piksel genişliğinde olmasını sağlar ve ekran genişledikçe kalan boşluğu eşit şekilde dağıtır.

Özel Kısa Kod (Shortcode) ile Sütun Yönetimi

Kullanıcıların içerik düzenleyici (Gutenberg veya Klasik Düzenleyici) içerisinden sütun oluşturmasını sağlamak için özel bir kısa kod oluşturabilirsiniz. Bu, teknik bilgisi olmayan içerik yöneticileri için en pratik çözümdür.

function ozel_sutun_kisa_kod($atts, $content = null) {
    return '
' . do_shortcode($content) . '
';
}
add_shortcode('ozel_sutun', 'ozel_sutun_kisa_kod');

Bu fonksiyonu functions.php dosyanıza eklediğinizde, içerik editöründe [ozel_sutun]İçeriğiniz buraya gelecek[/ozel_sutun] şeklinde kullanım sağlayabilirsiniz. do_shortcode fonksiyonu, sütunların içinde başka kısa kodların çalışmasına da izin verir.

Sütunlu Düzen Yöntemlerinin Karşılaştırması

Güvenlik ve Performans Uyarıları

Önemli: Kodlarınızda kullanıcıdan gelen verileri (örneğin bir formdan gelen sütun içeriği) asla doğrudan ekrana yazdırmayın. Her zaman esc_html(), esc_attr() veya wp_kses_post() gibi WordPress güvenlik fonksiyonlarını kullanarak veriyi temizleyin. Ayrıca, CSS dosyalarınızı wp_enqueue_style ile doğru bir şekilde yüklemek, sayfa yüklenme hızınızı (Core Web Vitals) olumlu etkileyecektir.

Sıkça Sorulan Sorular

Sütunlarım mobilde neden yan yana kalıyor?

Bunun sebebi CSS içerisinde flex-wrap özelliğinin kullanılmaması veya media query ile mobil cihazlar için bir genişlik tanımlanmamış olmasıdır. @media (max-width: 768px) kullanarak mobil görünümü tek sütuna düşürmelisiniz.

Gutenberg blokları ile özel sınıfları nasıl eklerim?

Gutenberg bloğuna tıkladıktan sonra sağ taraftaki "Blok" sekmesinde "Gelişmiş" (Advanced) bölümünü bulun. Buradaki "Ek CSS Sınıfı" alanına kendi sınıf adınızı yazabilirsiniz.

Bu yöntemler SEO'yu etkiler mi?

Evet, olumlu etkiler. Temiz ve anlamsal (semantic) HTML kullanımı, arama motorlarının içeriğinizi daha iyi anlamasını sağlar. Gereksiz div kalabalığından kaçınmak ise sayfa hızını artırır.

Shortcode kullanmak yerine neden blokları tercih etmeliyim?

Bloklar, görsel düzenleyici ile entegre olduğu için içerik yöneticisi neyin nerede duracağını canlı olarak görür. Shortcode ise sadece bir kod parçasıdır ve görsel önizleme sunmaz.

CSS Grid her tarayıcıda çalışır mı?

Modern tarayıcıların %98'i CSS Grid'i desteklemektedir. Çok eski tarayıcılar için @supports kuralı ile bir yedek (fallback) düzen oluşturabilirsiniz.

Dinamik İçerik Yönetimi İçin Özel Alanlar (ACF) Entegrasyonu

Sütunlu düzenlerinizi statik birer blok olmaktan çıkarıp, her sayfa için farklı verilerle dolan dinamik yapılara dönüştürmek istiyorsanız, Advanced Custom Fields (ACF) eklentisi en güçlü yardımcınızdır. Bu yöntemle içerik editörleri, kod bilmeden sütunların içine görsel, metin veya buton bağlantılarını kolayca yerleştirebilir.

Öncelikle ACF üzerinden "Sütun İçeriği" adında bir grup oluşturduğunuzu ve içine "Sol Sütun Metni" ve "Sağ Sütun Görseli" gibi alanlar eklediğinizi varsayalım. Bu verileri şablon dosyanızda şu şekilde çağırabilirsiniz:

Sütunlu Düzenlerde Hata Ayıklama ve Tarayıcı Testleri

Özel sütun düzenleri oluştururken en sık karşılaşılan sorun, "float" veya "flex" öğelerinin kapsayıcıdan taşması ya da mobil cihazlarda metinlerin ekran dışına çıkmasıdır. Bu tür sorunları gidermek için geliştirici araçlarını (F12) aktif bir şekilde kullanmalısınız.

Yaygın Hata Senaryoları ve Çözümleri

• Taşan İçerikler: Eğer sütunlarınız kapsayıcıyı taşıyorsa, CSS dosyanıza box-sizing: border-box; kuralını eklediğinizden emin olun. Bu, padding ve border değerlerinin genişliğe dahil edilmesini sağlar.
• Dikey Hizalama Sorunları: Flexbox kullanırken öğelerin dikey olarak ortalanmaması durumunda align-items: center; kuralını kapsayıcıya (container) uygulayın.
• Görsel Boyutlandırma: Sütun içindeki görsellerin esnek kalması için img { max-width: 100%; height: auto; } kuralını global CSS dosyanıza eklemek, mobil uyumluluk için kritik bir adımdır.

Performans Optimizasyonu İçin İleri İpuçları

Sütunlu düzenlerinizde çok sayıda görsel kullanıyorsanız, sayfa yüklenme süresini korumak adına "Lazy Loading" (tembel yükleme) özelliğini mutlaka aktif edin. WordPress 5.5 ve sonrası sürümlerde görsellere otomatik olarak loading="lazy" niteliği eklenmektedir. Ancak özel kodladığınız yapılarda bunu manuel olarak kontrol etmeniz önerilir:

Ayrıca, sütun yapınız için harici bir CSS kütüphanesi (Bootstrap veya Tailwind gibi) kullanıyorsanız, sadece ihtiyacınız olan sınıfları içeren minified (sıkıştırılmış) dosyaları yükleyerek HTTP isteklerini azaltabilir ve sitenizin hız skorunu (Core Web Vitals) iyileştirebilirsiniz.

Sonuç

WordPress ile özel sütunlu içerik düzenleri oluşturmak, sitenizin profesyonel görünümü ve kullanıcı deneyimi için temel bir adımdır. İster Gutenberg bloklarını CSS ile özelleştirerek, ister PHP şablonları ile tamamen kontrollü yapılar kurarak ilerleyin; önemli olan temiz, güvenli ve mobil uyumlu bir kod yapısı oluşturmaktır. Bir sonraki adım olarak, oluşturduğunuz bu sütunları dinamik hale getirmek için "Custom Fields" (Özel Alanlar) eklentilerini inceleyebilir ve içeriğinizi veritabanından daha esnek bir şekilde çekebilirsiniz.