WordPress’te Satır Aralığı Nasıl Değiştirilir: Tüm Yöntemler Açıklandı

WordPress’te satır aralığı — CSS line-height özelliği tarafından kontrol edilir — bir blok öğesi içindeki metin satırları arasındaki dikey mesafeyi tanımlar. Bu değeri ayarlamak, sitenizin genelinde okunabilirliği, görsel hiyerarşiyi ve tipografik kaliteyi doğrudan etkiler. Bunu değiştirmenin dört temel yöntemi şunlardır: Gutenberg Blok Düzenleyicisi’nin yerel kontrolleri, WordPress Tema Özelleştirici, Ek CSS paneli aracılığıyla özel CSS ve tipografi eklentileri. Her yöntem, farklı bir teknik erişim düzeyine ve değişiklik kapsamına uygundur.

Bu kılavuz, çoğu öğreticinin tamamen atladığı uç durumlar, seçici özgüllük tuzakları ve eklenti değiş tokuşları dahil olmak üzere her yöntemi tam teknik derinliğiyle ele almaktadır.

Satır Yüksekliğinin Estetiğin Ötesinde Neden Önemli Olduğu

CSS spesifikasyonu line-height‘ı öğe içindeki satır kutularının minimum yüksekliği olarak tanımlar. Gövde metni için WCAG 2.1 erişilebilirlik yönergesi (Başarı Kriteri 1.4.12), minimum line-height değerinin yazı tipi boyutunun 1,5 katı olmasını önerir. Bunu göz ardı etmek yalnızca görsel tasarımı değil, aynı zamanda Core Web Vitals ve kullanıcı etkileşim metrikleriyle bağlantılı uyumluluğu ve arama motoru kalite sinyallerini de etkiler.

Kötü ayarlanmış bir line-height — özellikle gövde metninde 1.2‘ın altındaki değerler — metnin sıkışık hissettirmesine, hemen çıkma oranının artmasına ve eş zamansız olarak yüklenen web yazı tipleriyle birleştiğinde Kümülatif Düzen Kayması (CLS) sorunlarına yol açabilir.

Yöntem 1: Gutenberg Blok Düzenleyicisi Yerel Kontrolleri

Gutenberg düzenleyicisi, Paragraf, Başlık, Liste ve Alıntı blokları için line-height kontrollerini yerel olarak sunar; ancak bu özelliğin theme.json veya add_theme_support() işlevi aracılığıyla tema düzeyinde açıkça etkinleştirilmesi gerekir.

Adım 1: Satır Yüksekliği Desteğinin Etkin Olduğunu Doğrulayın

Blok ayarları panelinde Satır Yüksekliği alanını görmüyorsanız, etkin temanız bunu desteklediğini bildirmemiştir. Bunu, temanızın functions.php dosyasına aşağıdakini ekleyerek etkinleştirebilirsiniz:

add_theme_support( 'custom-line-height' );

theme.json kullanan blok temalar için, settings altında aşağıdakinin mevcut olduğundan emin olun:

{
  "settings": {
    "typography": {
      "lineHeight": true
    }
  }
}

Adım 2: Hedef Bloğu Seçin

Gönderi veya sayfa düzenleyicisinde, değiştirmek istediğiniz Paragraf veya Başlık bloğuna tıklayın. Blok araç çubuğu üstte görünür ve sağ kenar çubuğu otomatik olarak Blok sekmesine geçer.

Adım 3: Tipografi Panelini Bulun

Sağ taraftaki Blok panelinde, Tipografi bölümüne kadar aşağı kaydırın. Daraltılmışsa, genişletmek için etikete tıklayın. Bir Satır Yüksekliği giriş alanı göreceksiniz.

Birimsiz bir değer girin. WordPress bunu doğrudan bloğun satır içi stilinde CSS line-height değeri olarak iletir. Önerilen aralıklar:

• Gövde paragrafları: 1.5 ile 1.8 arası
• Başlıklar (H1–H2): 1.1 ile 1.3 arası
• Alt başlıklar (H3–H4): 1.2 ile 1.4 arası

Kritik uç durum: Birimsiz değerler (örn. 1.6), piksel veya em değerlerine (örn. 24px veya 1.6em) kıyasla kesinlikle tercih edilir; çünkü bir alt öğe özelliği miras aldığında ve kendi yazı tipi boyutunu değiştirdiğinde orantılı olarak ölçeklenir. Burada px kullanmak, iç içe geçmiş öğe aralığını bozan yaygın bir hatadır.

Adım 4: Kaydedin ve Doğrulayın

Güncelle veya Yayımla‘ya tıklayın. Satır içi stilin line-height: 1.6 değerinin doğru öğeye uygulandığını ve daha yüksek özgüllüğe sahip bir tema stil sayfası tarafından geçersiz kılınmadığını doğrulamak için tarayıcınızın DevTools aracını (F12 > Öğeler > Hesaplanan) kullanın.

Yöntem 2: Site Genelinde Tipografi için WordPress Tema Özelleştirici

Özelleştirici (Appearance > Customize), site genelindeki değişiklikler için canlı önizleme arayüzü sağlar. Özelleştiricideki tipografi kontrolleri WordPress çekirdek özelliği değildir — tamamen etkin temanız veya bir yardımcı eklenti tarafından sağlanır.

Yerel Tipografi Panellerine Sahip Temalar

GeneratePress, Astra, Kadence veya OceanWP gibi çerçeveler üzerine inşa edilmiş temalar, gövde metni, başlıklar ve widget alanları için ayrı ayrı line-height kaydırıcılarına sahip özel Tipografi bölümleri sunar.

Adım 1: Tipografi Ayarlarına Gidin

Görünüm > Özelleştir‘e gidin. Temanıza bağlı olarak Tipografi, Yazı Tipleri veya Global Stiller etiketli bir bölüm arayın. Böyle bir bölüm yoksa, temanız Özelleştirici tabanlı tipografi kontrolünü desteklemiyor demektir — Yöntem 3 veya Yöntem 4’e geçin.

Adım 2: Öğe Başına Satır Yüksekliğini Ayarlayın

Çoğu tema özelleştiricisi şunları hedeflemenize olanak tanır:

• Gövde metni (body veya p seçicisiyle eşleşir)
• H1’den H6’ya başlıklar
• Gezinme menüleri
• Widget başlıkları

Değerlerinizi ayarlayın ve masaüstü ile mobil kesme noktalarında eş zamanlı olarak doğrulamak için canlı önizleme bölmesini kullanın.

Adım 3: Değişiklikleri Yayımlayın

Özelleştiricinin sol üst köşesindeki Yayımla‘ya tıklayın. Değişiklikler temanın depolanan seçeneklerine yazılır ve <head> içindeki temanın stil sayfası veya satır içi <style> bloğu aracılığıyla genel olarak uygulanır.

Tuzak: Özelleştirici tipografi ayarları style.css‘da değil, temanın seçeneklerinde depolanır. Tema değiştirirseniz tüm bu ayarlamalar kaybolur. Tema değiştirmeden önce değerlerinizi her zaman belgeleyin.

Yöntem 3: Özel CSS — En Hassas ve Taşınabilir Yöntem

Özel CSS, seçici hedefleme, özgüllük ve duyarlı kesme noktaları üzerinde tam kontrol sağlar. Ne blok düzenleyicisinin ne de Özelleştiricinin sağladığı ayrıntılı kontrole ihtiyaç duyduğunuzda doğru yaklaşımdır.

Adım 1: Ek CSS Paneline Erişin

Görünüm > Özelleştir > Ek CSS‘e gidin. Bu CSS veritabanında depolanır ve <head> içinde satır içi olarak çıktılanır; bu da çoğu tema stil sayfasına kıyasla özgüllük avantajı sağlar.

Alternatif olarak, kendi sunucu ortamınızı yönetiyorsanız — örneğin bir VPS Hosting planında — daha iyi önbellek kontrolü ve performans için functions.php aracılığıyla özel bir stil sayfası ekleyebilirsiniz:

function mytheme_custom_styles() {
    wp_enqueue_style(
        'custom-typography',
        get_stylesheet_directory_uri() . '/css/custom-typography.css',
        array(),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );

Adım 2: Hedeflenmiş CSS Kuralları Yazın

Global paragraf satır yüksekliği:

p {
    line-height: 1.6;
}

Tüm başlık seviyeleri:

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

Yalnızca Gutenberg’e özgü paragraf blokları (kenar çubuğu veya altbilgi metnini etkilemekten kaçınır):

.wp-block-paragraph {
    line-height: 1.7;
}

WordPress’in otomatik olarak çıktıladığı gövde sınıfını kullanarak belirli bir sayfa şablonu veya gönderi türüyle sınırlandırılmış:

.single-post .entry-content p {
    line-height: 1.65;
}

.page-template-landing-page p {
    line-height: 1.5;
}

Mobil için duyarlı ayarlama (daha küçük ekranlar biraz daha sıkı aralıktan yararlanır):

@media (max-width: 768px) {
    p {
        line-height: 1.5;
    }
}

Adım 3: Özgüllük Çakışmalarını Çözün

CSS’niz etkili olmuyorsa, daha yüksek özgüllüğe sahip bir tema veya eklenti kuralı onu geçersiz kılıyordur. Bunu DevTools’da öğeyi inceleyerek ve Stiller panelinde üzeri çizili olan kuralı kontrol ederek teşhis edin.

!important‘a başvurmadan özgüllüğü artırmak için seçicinizi daha hassas biçimde kapsamlandırın:

body .site-content .entry-content p {
    line-height: 1.6;
}

!important‘ı yalnızca son çare olarak kullanın; çünkü her gelecekteki CSS eklemesiyle biriken bir bakım borcu oluşturur:

p {
    line-height: 1.6 !important; /* Use only if specificity cannot be resolved otherwise */
}

Yöntem 4: Tipografi Eklentileri

Eklentiler, kodsuz bir arayüze ihtiyaç duyduğunuzda, siteyi bağımsız olarak yönetmesi gereken bir müşteri için site yönetiyorsanız veya line-height‘ın ötesinde gelişmiş OpenType tipografik özelliklerine ihtiyaç duyduğunuzda doğru seçimdir.

Eklenti Karşılaştırması

Advanced Editor Tools’u Kurma ve Yapılandırma

Advanced Editor Tools (eski adıyla TinyMCE Advanced), satır aralığı kontrollerini doğrudan blok düzenleyici araç çubuğuna eklemek için en yaygın kullanılan seçenektir.

1. Eklentiler > Yeni Ekle‘ye gidin, Advanced Editor Tools arayın ve Şimdi Kur‘a, ardından Etkinleştir‘e tıklayın.
2. Ayarlar > Advanced Editor Tools‘a gidin.
3. Blok Düzenleyici sekmesinde, Satır Yüksekliği araç çubuğu düğmesini etkin araç çubuğu satırına sürükleyerek etkinleştirin.
4. Herhangi bir gönderi veya sayfaya dönün. Bir Paragraf bloğu seçin. Satır yüksekliği kontrolü artık blok araç çubuğunda görünür.

Global Kurallar için WP Typography Kullanımı

WP Typography, tipografik kuralları PHP işleme düzeyinde uygular; yani HTML çıktısını tarayıcıya ulaşmadan önce değiştirir. Bu, tek tek blokları düzenlemeden tüm metinlerde tutarlı line-height uygulamak için kullanışlıdır.

Etkinleştirdikten sonra Ayarlar > WP Typography‘e gidin ve satır yüksekliği kurallarını belirli kapsayıcılara uygulamak için CSS Sınıfları bölümünü bulun.

Tuzak: WP Typography’nin metin işleme özelliği, tam sayfa önbellekleme etkinleştirilmişse önbellekleme eklentileriyle çakışabilir. Özellikle barındırma yığınınız FastCGI önbelleğiyle Nginx çalıştıran Dedicated Servers‘da yaygın bir yapılandırma olan sunucu düzeyinde önbellekleme içeriyorsa, bir hazırlık ortamında etkinleştirdikten sonra her zaman test edin.

Tam Site Düzenleme (FSE) ve theme.json: Modern Yaklaşım

Bir blok tema kullanan siteler için (Twenty Twenty-Three, Twenty Twenty-Four, Kadence FSE vb.), varsayılan line-height değerlerini ayarlamanın standart yöntemi theme.json‘dır. Bu dosya, tüm blok düzenleyici arayüzüne yayılan tasarım tokenlarını tanımlar.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "typography": {
      "lineHeight": true,
      "fluid": true
    }
  },
  "styles": {
    "typography": {
      "lineHeight": "1.6"
    },
    "elements": {
      "heading": {
        "typography": {
          "lineHeight": "1.25"
        }
      },
      "h1": {
        "typography": {
          "lineHeight": "1.1"
        }
      }
    }
  }
}

theme.json içindeki styles‘da ayarlanan değerler CSS özel özellikleri olarak çıktılanır ve :root seçicisi aracılığıyla uygulanır; bu da blok düzeyinde geçersiz kılınabilir kalırken geniş bir erişim sağlar. Bu, 2024 ve sonrasında üretim WordPress siteleri için en sürdürülebilir mimaridir.

Kontrol ettiğiniz bir sunucuda özel bir blok tema oluşturuyor veya yönetiyorsanız — örneğin cPanel ile VPS — tipografi tokenları için Özelleştiriciyi kullanmaktan daha hızlı ve güvenilir olan dosya yöneticisi veya SSH aracılığıyla theme.json‘ı doğrudan düzenlemek daha iyidir.

Doğru Yöntemi Seçme: Karar Matrisi

Yayına Almadan Önce Teknik Kontrol Listesi

• line-height değerlerinin birimsiz veya em kullandığını doğrulayın — miras alınan özellikler için px‘dan kaçının.
• WCAG 2.1 SC 1.4.12’yi doğrulayın: gövde metni line-height en az 1.5 olmalıdır.
• Daha yüksek özgüllüğe sahip bir kuralın değerlerinizi geçersiz kılmadığını doğrulamak için DevTools’da hesaplanan stilleri inceleyin.
• En az iki mobil kesme noktasında test edin — 1440px’de işe yarayan line-height 375px’de aşırı gelebilir.
• Önbellekleme eklentisi kullanıyorsanız (WP Rocket, W3 Total Cache), herhangi bir CSS değişikliğinden sonra önbelleği temizleyin.
• Shared Web Hosting‘de barındırılan siteler için, tema güncellemelerinde değişikliklerin üzerine yazılmasını önlemek amacıyla tema dosyalarını doğrudan düzenlemek yerine Ek CSS panelini kullanın.
• Tüm özel line-height değerlerini bir stil kılavuzunda veya CSS dosyanızdaki yorum bloğunda belgeleyin.
• Yönetilen bir sunucuda özel bir alt tema veya theme.json dağıtıyorsanız, WordPress dosya düzenleyicisinden kaynaklanan yazma hatalarını önlemek için theme.json üzerindeki dosya izinlerinin 644 olarak ayarlandığından emin olun.

SSS

Gutenberg düzenleyicisinde satır yüksekliğini değiştirmek mobil cihazları etkiler mi?

Evet. Blok Düzenleyicisi’nin Satır Yüksekliği alanı aracılığıyla ayarlanan değerler, medya sorgusu olmaksızın satır içi stiller olarak uygulanır; dolayısıyla tüm görüntü alanı genişliklerinde geçerlidir. Duyarlı kontrol için — mobil ve masaüstünde farklı değerler — @media sorguları içeren özel CSS veya kesme noktası başına tipografi kontrolleri sunan Kadence Blocks gibi bir blok eklentisi kullanmanız gerekir.

Ek CSS’e eklediğim halde özel CSS line-height‘ım neden uygulanmıyor?

En yaygın neden, aynı öğeyi hedefleyen daha yüksek CSS özgüllüğüne sahip bir tema veya eklenti stil sayfası kuralıdır. DevTools’u açın, paragraf öğesini inceleyin ve Stiller panelinde üzeri çizili kuralları arayın. Seçicinizin özgüllüğünü artırın (örn. .entry-content p yerine p) veya son çare olarak !important ekleyin.

line-height: 1.6 ile line-height: 1.6em arasındaki fark nedir?

1.6 gibi birimsiz bir değer oran olarak miras alınır — alt öğeler kendi yazı tipi boyutlarını 1.6 ile çarpar. 1.6em değeri üst öğenin yazı tipi boyutuna göre hesaplanır ve ardından sabit piksel değeri olarak miras alınır; bu da farklı yazı tipi boyutlarına sahip iç içe geçmiş öğelerde hizalanmamış aralığa neden olabilir. Gövde metninde line-height için her zaman birimsiz değerler kullanın.

Düzenleyici görünümü ve ön yüz için farklı satır yükseklikleri ayarlayabilir miyim?

Evet. WordPress, düzenleyici stillerini ön yüz stillerinden ayrı olarak uygular. Blok düzenleyici tuvalini hedeflemek için enqueue_block_editor_assets kancasını kullanarak bir stil sayfası ekleyin ve kurallarınızı .editor-styles-wrapper p ile kapsamlandırın. Bu, düzenleme deneyiminin yayımlanan çıktıyla görsel olarak eşleşmesini sağlar.

Satır yüksekliğini ayarlamak sitemin düzenini bozar mı veya Kümülatif Düzen Kaymasına neden olur mu?

Statik metin öğelerinde line-height‘ı değiştirmek kendi başına CLS’ye neden olmaz. CLS, öğelerin ilk işlemeden sonra konum değiştirmesiyle tetiklenir — genellikle web yazı tiplerinin yüklenip değişmesinden kaynaklanır. Google Fonts veya özel bir web yazı tipi kullanıyorsanız, yazı tipi yüklemesi sırasında düzen kararsızlığını en aza indirmek için line-height ayarlamalarınızı font-display: swap ve ön yükleme ipuçlarıyla eşleştirin. Yazı tiplerini yerel olarak barındırmak — VPS Hosting ortamında basit bir işlem — tipografi değişiklikleriyle birlikte CLS’yi en sık tetikleyen üçüncü taraf yazı tipi gecikmesini ortadan kaldırır.