WordPress’te Yazı Tipi Boyutu Nasıl Değiştirilir: Gutenberg, Eklentiler, CSS ve Tema Özelleştirici

WordPress’te yazı tipi boyutunu değiştirmek, sitenizin metin öğelerinin tipografik ölçeğini ayarlamak anlamına gelir — başlıklar, gövde metni, altyazılar ve gezinme etiketleri — blok düzeyinde, tema düzeyinde veya CSS aracılığıyla global olarak. Seçtiğiniz yöntem, değişikliğin kapsamını belirler: tek bir paragraf, tüm sayfalardaki bir içerik türü veya site genelindeki her metin öğesi.

Bu kılavuz, Gutenberg blok düzenleyici, tipografi eklentileri, yerel Tema Özelleştirici ve doğrudan CSS geçersiz kılmaları dahil olmak üzere modern bir WordPress kurulumunda mevcut olan her pratik yöntemi kapsar. Her yaklaşımın kendine özgü bir kullanım durumu vardır ve yanlış olanı seçmek zamanla birikerek teknik borç oluşturur.

Yazı Tipi Boyutu Kararları Neden Göründüğünden Daha Tekniktir

Tipografi kozmetik bir endişe değildir. Yazı tipi boyutu, Core Web Vitals puanlarını doğrudan etkiler; özellikle fontlar asenkron yüklendiğinde Cumulative Layout Shift (CLS) metriğini ve büyük başlık metni birincil görüntü alanı öğesi olduğunda Largest Contentful Paint (LCP) metriğini etkiler. Kötü kapsamlandırılmış font-size kuralları — örneğin, em tabanlı kalıtımı hesaba katmadan body öğesine font-size uygulamak — alt öğeler arasında öngörülemeyen şekilde yayılarak aralık, satır yüksekliği oranları ve bileşen düzenlerini bozar.

WordPress’i root erişimine sahip bir VPS Hosting ortamında çalıştırıyorsanız, tema dosyalarını doğrudan düzenleme ve CSS değişikliklerinin son kullanıcılara nasıl yayıldığını etkileyen önbellek katmanlarını yönetme gibi ek seçeneklere sahipsiniz. Bu düzeyde kontrol, paylaşımlı altyapıda mevcut değildir; bu da yöntem seçimini daha da önemli kılar.

Karşılaştırma: Dört Yöntemin Tamamına Genel Bakış

Herhangi bir ayara dokunmadan önce bu tabloyu bir karar matrisi olarak kullanın. Doğru yöntem, kapsama, teknik yetkinlik düzeyinize ve bir alt tema üzerinde çalışıp çalışmadığınıza bağlıdır.

Yöntem 1: Gutenberg Blok Düzenleyici

WordPress 5.0 ile tanıtılan Gutenberg blok düzenleyici, yazı tipi boyutunu bireysel blok düzeyinde yönetir. Bu, global stillere dokunmadan belirli bir paragrafın, başlığın veya öğe grubunun boyutunu ayarlamanız gerektiğinde doğru yaklaşımdır.

Adım Adım: Bir Blokta Yazı Tipi Boyutunu Ayarlama

1. WordPress kontrol panelinize giriş yapın ve düzenlemek istediğiniz gönderiyi veya sayfayı açın.
2. Değiştirmek istediğiniz metin bloğuna tıklayın — genellikle bir Paragraf, Başlık veya Liste bloğu.
3. Sağ kenar çubuğunda Blok sekmesini bulun (Belge sekmesini değil). Kenar çubuğu gizliyse, üst sağ araç çubuğundaki dişli simgesine tıklayarak görünür hale getirin.
4. Blok ayarları panelindeki Tipografi bölümüne gidin.
5. Önceden ayarlanmış boyut seçeneklerini göreceksiniz: Küçük, Orta, Büyük ve Çok Büyük. Bu değerler, etkin temanızın theme.json dosyası tarafından tanımlanır.
6. Kesin bir değer ayarlamak için Özel seçeneğine tıklayın ve piksel cinsinden bir boyut girin (örn. 18px) veya rem gibi göreli birimler kullanın (örn. 1.125rem).
7. Kaydetmek için Güncelle veya Yayımla‘ya tıklayın.

Özel Ön Ayarları Tanımlamak için theme.json Kullanımı (WordPress 5.8+)

Bir blok teması veya theme.json dosyasına sahip klasik bir tema yönetiyorsanız, düzenleyici kenar çubuğunda görünen tam ön ayar boyutlarını tanımlayabilirsiniz. Bu, geliştirme ortamları için en sürdürülebilir yaklaşımdır.

{
  "settings": {
    "typography": {
      "fontSizes": [
        { "name": "Small", "slug": "small", "size": "14px" },
        { "name": "Regular", "slug": "regular", "size": "16px" },
        { "name": "Large", "slug": "large", "size": "22px" },
        { "name": "Extra Large", "slug": "x-large", "size": "32px" }
      ]
    }
  }
}

Bunu alt temanızın kök dizinine yerleştirmek, ön ayarların tema güncellemelerinde kalıcı olmasını sağlar ve CSS bilgisi gerektirmeden sitedeki her düzenleyici tarafından erişilebilir olur.

Uç Durum: Blok Düzeyinde Yazı Tipi Boyutu ile Global Stiller Çakışması

Yaygın bir sorun, bir bloğun düzenleyici aracılığıyla açık bir yazı tipi boyutu ayarlanmış olması, ancak temanın global stil sayfasının da daha yüksek CSS özgüllük kuralıyla aynı öğeyi hedeflemesi durumunda ortaya çıkar. Blok düzenleyici, style="font-size:22px" gibi satır içi stiller ekler; bu genellikle çoğu stil sayfası kuralını geçersiz kılar. Ancak bir tema CSS’inde !important bildirimleri kullanıyorsa, satır içi stil kaybeder. Hangi kuralın geçerli olduğunu doğrulamak için tarayıcı DevTools’unda işlenmiş öğeyi her zaman inceleyin.

Yöntem 2: Tipografi Eklentileri

Eklentiler, CSS’i manuel olarak yazmadan site genelinde tipografik kontrol ihtiyacı duyduğunuzda doğru seçimdir. Özellikle doğrudan dosya erişiminin daha az yaygın olduğu yönetilen hosting veya cPanel ile VPS üzerinde site yöneten geliştiriciler için kullanışlıdır.

Önerilen Eklenti: Easy Google Fonts

Easy Google Fonts, doğrudan WordPress Özelleştirici ile entegre olur ve tüm site genelinde öğe başına yazı tipi boyutu kontrolü sağlar.

Kurulum ve yapılandırma:

1. WordPress kontrol panelinizde Eklentiler > Yeni Ekle‘ye gidin.
2. Easy Google Fonts‘u arayın ve Şimdi Yükle‘ye, ardından Etkinleştir‘e tıklayın.
3. Görünüm > Özelleştir‘e gidin.
4. Özelleştirici menüsünden Tipografi‘yi seçin.
5. Değiştirmek istediğiniz öğeyi seçin: Gövde, Başlıklar (H1–H6), Paragraflar veya tanımladığınız herhangi bir özel seçici.
6. Değeri ayarlamak için Yazı Tipi Boyutu kaydırıcısını veya giriş alanını kullanın.
7. Değişiklikleri canlı olarak uygulamak için Yayımla‘ya tıklayın.

Alternatif Eklenti: Fonts Plugin | Google Fonts Typography

Bu eklenti daha ayrıntılı bir arayüz sunar ve performans için optimize edilmiş sitelerde giderek daha önemli hale gelen değişken fontları destekler. Değişken fontlar, birden fazla ağırlık ve stili kapsayan tek bir font dosyası sunarak HTTP isteklerini azaltır.

Kritik Uyarı: Blok Temalarıyla Eklenti Çakışmaları

Bir Full Site Editing (FSE) blok teması (Twenty Twenty-Three veya Twenty Twenty-Four gibi) çalıştırıyorsanız, wp_enqueue_style aracılığıyla <head>‘a CSS ekleyen tipografi eklentileri, theme.json‘da tanımlanan temanın global stilleriyle çakışabilir. Sonuç, öngörülemeyen özgüllük çatışmalarıdır. FSE ortamlarında, bir eklenti yerine global tipografi değişiklikleri için Site Düzenleyici‘yi (Görünüm > Düzenleyici) kullanın.

Yöntem 3: Tema Özelleştirici

WordPress Tema Özelleştirici (Appearance > Customize), tema düzeyinde ayarlamalar yapmak için yerleşik arayüzdür. Tüm temalar burada tipografi kontrollerini göstermez — bu tamamen tema geliştiricisinin WordPress Özelleştirici API’sini kullanarak kaydettiği şeye bağlıdır.

Adım Adım: Özelleştirici Aracılığıyla Yazı Tipi Boyutunu Ayarlama

1. WordPress kontrol panelinizde Görünüm > Özelleştir‘e gidin.
2. Sol panelde bir Tipografi, Fontlar veya Metin bölümü arayın. Böyle bir bölüm yoksa, temanız bunu yerel olarak desteklemiyor demektir.
3. Öğe türünü seçin: gövde metni, H1, H2, gezinme, alt bilgi vb.
4. Sağlanan kaydırıcı veya sayısal giriş kullanarak yazı tipi boyutunu ayarlayın.
5. Sağdaki canlı önizleme gerçek zamanlı olarak güncellenir.
6. Değişiklikleri kaydetmek için Yayımla‘ya tıklayın.

Önemli Sınırlama: Tema Özelleştirici Ayarları Taşınabilir Değildir

Özelleştirici ayarları, WordPress veritabanında tema değişiklikleri (theme_mods) olarak saklanır. Tema değiştirirseniz, Özelleştirici tabanlı tüm yazı tipi boyutu değişiklikleri kaybolur. Ayrıca, Özelleştirici veri geçişi için özel olarak tasarlanmış bir eklenti kullanmadığınız sürece standart dışa aktarma araçlarıyla aktarılamazlar. Bu, üretim sitelerinde tema geçişi planlarken kritik bir husustur.

Yöntem 4: Özel CSS

Özel CSS, en hassas ve esnek yöntemdir. Diğer üç yöntem ihtiyaç duyduğunuz belirli öğeyi hedefleyemediğinde veya medya sorguları kullanarak duyarlı yazı tipi boyutlandırması uygulamanız gerektiğinde uygundur.

Özelleştirici Aracılığıyla CSS Ekleme (Dosya Düzenleme Gerektirmez)

1. Görünüm > Özelleştir > Ek CSS‘e gidin.
2. CSS kurallarınızı doğrudan düzenleyiciye girin.
3. Yayımla‘ya tıklayın.

Bu yaklaşım CSS’i veritabanında saklar ve geliştiriciler için güvenlidir. Ancak boyut sınırı vardır ve Sass gibi ön işlemcileri desteklemez.

CSS ile Belirli Öğeleri Hedefleme

/* Set base body font size */
body {
  font-size: 17px;
  line-height: 1.7;
}

/* Override heading sizes */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Target a specific Gutenberg block class */
.wp-block-paragraph.is-style-lead {
  font-size: 1.25rem;
}

clamp() ile Duyarlı Yazı Tipi Boyutlandırma

Modern CSS, birden fazla medya sorgusu kesme noktasına olan ihtiyacı ortadan kaldıran clamp() işlevini kullanarak akışkan tipografiyi destekler:

body {
  font-size: clamp(15px, 1.5vw, 18px);
}

h1 {
  font-size: clamp(28px, 5vw, 56px);
}

Bu yaklaşım, yazı tipi boyutunu görüntü alanı genişliğine göre minimum ve maksimum değer arasında sorunsuz bir şekilde ölçeklendirir. Duyarlı tipografi için mevcut en iyi uygulamadır ve tüm modern tarayıcılar tarafından desteklenir.

Tema Dosyalarını Doğrudan Düzenleme (Alt Tema Gerektirir)

CSS’i temanın stil sayfasına kalıcı olarak eklemek ve Ek CSS alanının veritabanı yükünden kaçınmak istiyorsanız, kuralları alt temanızın style.css dosyasına ekleyin. Ana temanın dosyalarını asla doğrudan düzenlemeyin — güncellemeler değişikliklerinizin üzerine yazar.

SSH erişimine sahip bir sunucuda dosyayı doğrudan düzenleyebilirsiniz:

nano /var/www/html/wp-content/themes/your-child-theme/style.css

Kaydettikten sonra, güncellenmiş stillerin ziyaretçilere sunulduğundan emin olmak için sunucu tarafı önbelleğinizi ve CDN önbelleğinizi temizleyin. Bir VPS Hosting ortamında bu, genellikle önbellek eklentiniz veya ters proxy’niz (Nginx, Varnish vb.) için bir önbellek temizleme komutu çalıştırmak anlamına gelir.

Kaçınılması Gereken Özgüllük Tuzakları

• Varsayılan düzeltme olarak !important kullanmaktan kaçının. Gelecekteki bakımı son derece zorlaştıran bir özgüllük yarışı yaratır.
• Temanız em tabanlı boyutlandırma kullanıyorsa html öğesinde piksel cinsinden yazı tipi boyutu ayarlamayın. html { font-size: 20px; }‘i değiştirmek, tüm site genelindeki her em tabanlı değeri ölçeklendirir ve genellikle aralık ile düzeni bozar.
• Ölçeklenebilirlik için rem birimleri kullanın. rem değerleri kök html öğesine görelidir, bu da onları öngörülebilir ve erişilebilir kılar. Tarayıcının varsayılan yazı tipi boyutunu artıran kullanıcılar, rem tabanlı düzenlerden yararlanır; bu bir WCAG erişilebilirlik gereksinimidir.

Erişilebilirlik ve Yazı Tipi Boyutu: Google’ın Değerlendirdiği Şeyler

Google’ın Lighthouse denetimi, okunması çok küçük olan metni bir kullanılabilirlik sorunu olarak işaretler. Önerilen minimum gövde yazı tipi boyutu masaüstü için 16px, mobil için 14px‘dir; ancak tüm görüntü alanlarında 16px daha güvenli bir temel çizgidir. WCAG 2.1 Başarı Kriteri 1.4.4, metnin içerik veya işlevsellik kaybı olmaksızın %200’e kadar yeniden boyutlandırılabilmesini gerektirir — rem ve em birimlerin varsayılan olarak karşıladığı, ancak yalnızca px kullanan düzenlerin çoğunlukla başarısız olduğu bir gereksinim.

Global bir kitleye hizmet eden veya erişilebilirlik uyumluluğu gerektiren bir site barındırıyorsanız, bu hususlar yazı tipi boyutu uygulama kararlarınızı yalnızca görsel tercihten değil, bu değerlendirmelerden yönlendirmelidir.

VPS’te Önbellek ve Dağıtım Konuları

Bir VPS Hosting veya Dedicated Servers ortamında barındırılan bir WordPress sitesinde CSS’i değiştirdiğinizde, birden fazla önbellek katmanı nedeniyle değişiklikler hemen görünmeyebilir:

• WordPress nesne önbelleği (Redis, Memcached)
• Sayfa önbelleği eklentileri (WP Rocket, W3 Total Cache, LiteSpeed Cache)
• Nginx FastCGI önbelleği
• CDN kenar önbelleği (Cloudflare, BunnyCDN)

Herhangi bir yazı tipi boyutu değişikliği yaptıktan sonra, tüm etkin önbellekleri sırayla temizleyin — önce eklenti önbelleği, ardından sunucu düzeyinde önbellek, sonra CDN. Bunu yapmamak, geliştiricilerin CSS değişikliklerinin “çalışmadığını” bildirmesinin en yaygın nedenidir.

Linux VPS’te Nginx FastCGI önbelleğini manuel olarak temizlemek için:

sudo rm -rf /var/cache/nginx/*
sudo systemctl reload nginx

WP-CLI aracılığıyla LiteSpeed Cache için:

wp litespeed-purge all

Pratik Karar Kontrol Listesi

Durumunuz için doğru yöntemi seçmek üzere bu kontrol listesini kullanın:

• Tek bir sayfadaki bir paragrafı veya başlığı değiştirme — Gutenberg blok düzenleyici Tipografi panelini kullanın.
• Tüm gövde metni veya tüm başlıklar için site genelinde yazı tipi boyutunu değiştirme — Temanız destekliyorsa bir tipografi eklentisi veya Tema Özelleştirici kullanın.
• Full Site Editing blok teması çalıştırma — Global tipografi değişiklikleri için Site Düzenleyici’yi (Görünüm > Düzenleyici > Stiller) ve theme.json ön ayarlarını kullanın.
• Duyarlı, akışkan tipografi ihtiyacı — Alt tema stil sayfasında veya Ek CSS’de clamp() kullanarak özel CSS yazın.
• Değişikliklerin tema güncellemelerinden sonra da geçerli olması gerekiyor — Bir alt tema, eklenti veya özel blok temasında theme.json kullanın.
• Erişilebilirlik uyumluluğu gerekiyor — rem veya em birimleri kullanın; gövde metninde yalnızca px bildirimlerinden kaçının.
• Düzenlemeden sonra değişiklikler görünmüyor — Tüm önbellek katmanlarını temizleyin: eklenti, sunucu ve CDN.
• Blok düzenleyici ile tema stilleri arasında çakışma — Tarayıcı DevTools’unda öğeyi inceleyin, kazanan CSS kuralını belirleyin ve özgüllüğü buna göre ayarlayın.

SSS

WordPress yazı tipi boyutları için en iyi birim hangisidir: px, em veya rem?

rem, WordPress’te yazı tipi boyutları için önerilen birimdir. Kök html öğesine görelidir, bu da onu iç içe geçmiş bileşenler arasında öngörülebilir ve doğası gereği erişilebilir kılar — kullanıcı tarafından ayarlanan tarayıcı düzeyinde yazı tipi boyutu tercihleri otomatik olarak dikkate alınır. px‘i yalnızca ölçeklemenin istenmeyen olduğu sabit dekoratif öğeler için kullanın.

Gutenberg düzenleyicideki yazı tipi boyutu değişikliğim neden ön yüzde görünmüyor?

En yaygın nedenler şunlardır: sayfanın eski bir sürümünü sunan bir önbellek katmanı, bloğun satır içi stilini geçersiz kılan daha yüksek CSS özgüllüğüne sahip bir tema stil sayfası kuralı veya yazı tipi boyutlarını global olarak sıfırlayan bir tipografi eklentisi. Nedeni tespit etmek için sayfayı gizli pencerede açın ve DevTools’da öğeyi inceleyin.

WordPress’te yazı tipi boyutlarını eklenti veya kodlama olmadan değiştirebilir miyim?

Evet. Gutenberg blok düzenleyicinin Tipografi paneli, kodlama gerektirmeden blok başına yazı tipi boyutu değişikliklerine olanak tanır. Etkin temanız bunları kaydetmişse Tema Özelleştirici de yazı tipi boyutu kontrolleri sağlar. Her iki yaklaşım da eklenti kurulumu veya CSS bilgisi gerektirmez.

Tema Özelleştirici’deki yazı tipi boyutlarını değiştirmek, tema güncellemesinden sonra siteimi etkiler mi?

Ayarların kendisi WordPress veritabanında saklanır ve bir tema güncellemesiyle silinmez. Ancak tema güncellemesi temel CSS yapısını değiştirirse veya yazı tipi boyutunu kontrol eden Özelleştirici seçeneğini kaldırırsa, görsel çıktı değişebilir. Alt tema ve özel CSS kullanmak, yukarı akış tema değişikliklerine karşı daha dayanıklıdır.

WordPress’te mobil ve masaüstü için farklı yazı tipi boyutlarını nasıl ayarlarım?

Ek CSS panelinde veya alt tema stil sayfasında CSS medya sorguları kullanın ya da akışkan ölçekleme için clamp() işlevini kullanın. Gutenberg blok düzenleyici, bazı temalarda theme.json layout yapılandırması aracılığıyla kesme noktası başına tipografi ayarlarını da destekler; ancak bu özellik temanın uygulama düzeyine bağlıdır.