WordPress FSE ve Blok Temalarla Tam Site Duzenleme

WordPress uzun yıllar boyunca ikiye bölünmüş bir düzenleme deneyimi sundu. İçeriğinizi (yazılar ve sayfalar) editörden düzenliyordunuz ama sitenizin başlığını, altbilgisini, kenar çubuğunu ve yazı listelerinin nasıl göründüğünü değiştirmek için ya temanın ayar panelini kurcalamanız ya da doğrudan PHP şablon dosyalarına dalmanız gerekiyordu. Bir menüyü büyütmek, logo hizasını değiştirmek ya da tarih formatını tek yazının altından kaldırmak çoğu zaman header.php ve functions.php içinde kaybolmak anlamına geliyordu. Full Site Editing, yani Tam Site Düzenleme (kısaca FSE), tam olarak bu ayrımı ortadan kaldırmak için geldi.

FSE ile artık sitenizin her parçasını, tıpkı bir yazıyı düzenler gibi, blokları sürükleyip bırakarak ve ayarlarını görsel panellerden değiştirerek yönetiyorsunuz. Başlık bir blok, altbilgi bir blok, yazı döngüsü bir blok. Renk paletiniz, yazı tipi boyutlarınız ve boşluk ölçeğiniz ise theme.json adında tek bir dosyada tanımlı bir tasarım sistemi olarak yaşıyor. Bu yazıda FSE'nin klasik temalardan gerçekte nasıl ayrıldığını, Site Editörünün nasıl çalıştığını, şablon parçaları ve theme.json mantığını ve bu teknolojinin bugün ne kadar olgunlaştığını kıdemli bir sistem yöneticisinin gözünden anlatacağım.

Klasik Tema ile Blok Tema Arasındaki Fark#

Klasik bir WordPress teması PHP şablon dosyalarından oluşur. header.php, footer.php, single.php, archive.php, index.php gibi dosyalar sitenizin hangi bölümünde hangi HTML'in basılacağını belirler. Tema geliştiricisi bu dosyaların içine PHP döngüleri, get_header() çağrıları ve WordPress fonksiyonları yerleştirir. Siz bu yapıyı değiştirmek istediğinizde ya bir alt tema (child theme) oluşturup dosyayı kopyalayıp elle düzeltmeniz ya da temanın kendi sunduğu Customizer ayarlarıyla yetinmeniz gerekir. Yani kontrol büyük ölçüde temayı yazan kişinin elindedir.

Blok tema ise bambaşka bir mantıkla çalışır. Şablonlar artık PHP değil, HTML tabanlı blok işaretlemesidir ve templates/ ile parts/ klasörlerinde .html dosyaları olarak durur. Bu dosyaların içeriği, blok editörünün ürettiği yorum tabanlı işaretlemedir. Örneğin bir başlık parçası şu şekilde başlar:

<!-- wp:group {"tagName":"header","layout":{"type":"constrained"}} -->
<header class="wp-block-group">
  <!-- wp:site-title /-->
  <!-- wp:navigation /-->
</header>
<!-- /wp:group -->

Bu yapının güzel yanı, aynı işaretlemeyi elle yazmanıza gerek olmamasıdır. Site Editörünü açıp bloğu görsel olarak düzenlediğinizde WordPress bu HTML'i sizin yerinize üretir ve veritabanına kaydeder. Aşağıdaki tablo iki yaklaşımı özetliyor.

Tema seçiminin sitenizin geleceğini nasıl etkilediğini daha derinlemesine görmek isterseniz WordPress tema seçimi rehberimizi okumanızı öneririm; orada blok tema ile klasik tema arasında karar verirken bakılması gereken kriterleri ele aldık.

Site Editörüne Giriş#

FSE'nin kalbi Site Editörüdür. Bir blok temayı etkinleştirdiğinizde WordPress yönetim menüsünde Görünüm > Düzenleyici (Appearance > Editor) bağlantısı belirir. Klasik temalarda gördüğünüz "Özelleştir" (Customize) ve "Widget'lar" menüleri kaybolur, çünkü artık her şey tek bir arayüzden yönetilir. Bu bağlantıya tıkladığınızda sitenizin canlı bir önizlemesiyle karşılaşırsınız ve sol taraftan Gezinme, Stiller, Sayfalar, Şablonlar ve Kalıplar (Patterns) bölümlerine ulaşırsınız.

Site Editörü açıldığında ilk gördüğünüz şey genellikle ana sayfa şablonudur. Sol üstteki WordPress logosuna tıklayarak menüyü açar, buradan hangi şablonu ya da şablon parçasını düzenleyeceğinizi seçersiniz. Bir bölgeye tıkladığınızda o blok seçilir ve sağ tarafta ayar paneli açılır. Burada rengini, yazı tipini, boşluğunu ve hizasını değiştirebilirsiniz. Değişiklikleri yaptıktan sonra sağ üstteki Kaydet düğmesine basmadıkları sürece hiçbir şey canlıya yansımaz; WordPress size tam olarak hangi öğelerin (şablon, şablon parçası, global stiller) değişeceğini kaydetmeden önce listeler.

Site Editörünü ilk kez kullanırken en çok işinize yarayacak alışkanlık, sol üstteki liste görünümünü (List View) açık tutmaktır. Blok yapısı iç içe geçtiğinde hangi grubun içinde olduğunuzu görsel olarak kaybetmek kolaydır; liste görünümü tüm blok ağacını gösterir ve doğru katmanı seçmenizi sağlar. Bir başka pratik nokta da düzenleme modları arasında geçiş yapabilmektir: normal düzenleme modunda her şeye dokunabilirsiniz, "Yalnızca içeriği düzenle" modunda ise yapıyı bozmadan sadece metinleri değiştirebilirsiniz; bu ikincisi, siteyi bir müşteriye teslim ederken çok işe yarar.

Şablonlar ve Şablon Parçaları#

FSE'de iki temel kavramı ayırt etmek gerekir: şablonlar (templates) ve şablon parçaları (template parts). Şablon, belirli bir içerik türünün nasıl görüneceğini tanımlayan tam bir sayfa iskeletidir. WordPress'in şablon hiyerarşisi burada da geçerlidir; yani single şablonu tek yazıları, archive şablonu kategori ve etiket listelerini, page şablonu sayfaları, 404 şablonu ise bulunamayan adresleri yönetir. Blok temada bu şablonlar templates/single.html, templates/archive.html gibi dosyalar olarak gelir ama siz onları Site Editöründen değiştirdiğinizde değişiklik veritabanına yazılır ve dosya olduğu gibi kalır.

Şablon parçaları ise birden fazla şablonda tekrar kullanılan bölümlerdir. En klasik örnekleri başlık (header) ve altbilgidir (footer). Bir kez başlık parçasını düzenlediğinizde, bu parçayı içeren tüm şablonlar aynı anda güncellenir. Bu, klasik temadaki get_header() mantığının görsel karşılığıdır. Aşağıdaki komutla bir blok temanın dosya yapısını incelediğinizde bu ayrımı net görebilirsiniz:

# Blok tema klasör yapısını listele
tree wp-content/themes/twentytwentyfour -L 1

# Örnek çıktı:
# ├── theme.json        <- tasarım sistemi
# ├── templates/        <- tam sayfa şablonları
# │   ├── single.html
# │   ├── archive.html
# │   └── page.html
# ├── parts/            <- yeniden kullanılan bölümler
# │   ├── header.html
# │   └── footer.html
# ├── patterns/         <- hazır blok kalıpları
# └── style.css         <- tema meta bilgisi

Şablonları düzenlerken çok kullanacağınız bir blok, Query Loop (Sorgu Döngüsü) bloğudur. Bu blok, klasik temadaki while (have_posts()) döngüsünün görsel halidir. Bir arşiv şablonunda kaç yazı listeleneceğini, hangi sırada geleceğini, öne çıkan görselin gösterilip gösterilmeyeceğini hep bu bloğun ayarlarından belirlersiniz. WordPress'i sıfırdan kurup bu yapıyı denemek isterseniz WordPress kurulumu rehberimiz temiz bir başlangıç ortamı oluşturmanız için adım adım yol gösteriyor.

theme.json ile Tasarım Sistemini Yönetmek#

FSE'nin en güçlü ama en çok yanlış anlaşılan parçası theme.json dosyasıdır. Bu dosya, temanızın renk paletini, yazı tipi ailelerini, yazı boyutu ölçeğini, boşluk değerlerini ve hangi düzenleme özelliklerinin açık olacağını tek bir yerden tanımlayan bir tasarım sözleşmesidir. Klasik temalarda bu bilgiler CSS dosyalarına ve functions.php içindeki add_theme_support() çağrılarına dağılmışken, blok temada hepsi burada toplanır. WordPress bu dosyayı okuyup gerekli CSS değişkenlerini otomatik üretir, böylece editördeki her renk seçici ve boyut menüsü sizin tanımladığınız değerlerle beslenir.

Basit bir theme.json örneği şöyle görünür:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#0f766e", "name": "Ana Renk" },
        { "slug": "base", "color": "#ffffff", "name": "Zemin" },
        { "slug": "contrast", "color": "#1a1a1a", "name": "Metin" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "slug": "small", "size": "0.875rem", "name": "Kucuk" },
        { "slug": "medium", "size": "1rem", "name": "Orta" },
        { "slug": "large", "size": "1.5rem", "name": "Buyuk" }
      ]
    },
    "spacing": {
      "units": ["px", "rem", "%", "vw"]
    }
  }
}

Buradaki asıl kazanç tutarlılıktır. Bir renk tanımladığınızda, o renk hem editördeki renk seçicide hem de tüm bloklarda aynı --wp--preset--color--primary değişkeni üzerinden kullanılır. İleride markanızın ana rengini değiştirmeniz gerektiğinde tek bir satırı güncellemeniz yeter; site genelinde her yer otomatik uyum sağlar. Bu, dağınık CSS ile çalışan klasik temalarda saatler süren bir işi dakikalara indirir.

theme.json içinde settings bölümü nelerin mümkün olduğunu, styles bölümü ise varsayılan olarak nelerin uygulanacağını belirler. Örneğin settings.color.custom değerini false yaparsanız, editörü kullanan kişiler paletin dışına çıkıp rastgele renk giremezler; bu, bir kurumsal sitede marka tutarlılığını korumanın basit ama etkili bir yoludur. Aynı mantık yazı tipleri ve boşluklar için de geçerlidir. Yani theme.json sadece bir stil dosyası değil, aynı zamanda düzenleyicilere ne kadar özgürlük tanıyacağınızı belirleyen bir izin haritasıdır.

Global Styles ile Görünümü Değiştirmek#

theme.json dosyayı geliştiricinin tanımladığı tasarım sistemidir; Global Styles (Genel Stiller) ise bu sistemin son kullanıcı tarafından, kod yazmadan ince ayar yapılabilen görsel arayüzüdür. Site Editöründe sağ üstteki yarım daire (Stiller) simgesine tıkladığınızda açılan panel budur. Buradan sitenizin genel tipografisini, renklerini, düğme görünümünü ve tek tek blokların varsayılan stillerini değiştirebilirsiniz. Örneğin tüm başlıkların yazı tipini bir kerede değiştirmek ya da tüm bağlantıların rengini ayarlamak buradan yapılır ve değişiklik sitenin tamamına yayılır.

Global Styles panelinin en pratik özelliklerinden biri stil varyasyonlarıdır (style variations). Birçok modern blok tema, aynı yapıyı koruyup tamamen farklı renk ve tipografi kombinasyonları sunan hazır varyasyonlarla gelir. Tek bir tıklamayla siteniz aydınlık bir kurumsal görünümden koyu, kontrastı yüksek bir görünüme geçebilir. Bu varyasyonlar aslında styles/ klasöründeki ek theme.json benzeri dosyalardır ama siz onları teknik detaylarına girmeden görsel olarak deneyebilirsiniz.

Bir noktayı vurgulamakta fayda var: Global Styles'ta yaptığınız değişiklikler dosyaları değiştirmez, veritabanına yazılır. Bu, tema güncellemelerinde değişikliklerinizin kaybolmamasını sağlar ama aynı zamanda düzenli yedek almayı da önemli kılar. Site genelinde büyük stil değişiklikleri yapmadan önce mutlaka bir yedek almanızı öneririm; otomatik yedekleme çözümlerimiz bu tür durumlarda geri dönüş noktası sağlar. Ciddi bir üretim sitesinde değişiklikleri önce bir hazırlık (staging) ortamında denemek de altın kuraldır.

Twenty Twenty-Four ile Pratik Bir Örnek#

Teoriyi somutlaştırmak için WordPress'in varsayılan bloklu temalarından Twenty Twenty-Four üzerinden gidelim. Bu tema, FSE'nin ne kadar olgunlaştığını görmek için ideal bir vitrindir çünkü tek bir tema içinde kurumsal siteden portfolyoya, bloglardan küçük işletme sitelerine kadar çok farklı senaryolar için tasarlanmış kalıplar ve stil varyasyonları barındırır. Temayı etkinleştirip Site Editörünü açtığınızda, karşınıza sürükle-bırak ile yeniden düzenleyebileceğiniz zengin bir yapı çıkar.

Diyelim ki başlıktaki gezinme menüsünün yanına bir "Teklif Al" düğmesi eklemek istiyorsunuz. Klasik bir temada bu, header.php düzenlemek ya da bir eklenti aramak anlamına gelirdi. Twenty Twenty-Four'de ise şu adımları izlersiniz: Site Editörünü açar, başlık şablon parçasını seçer, gezinme bloğunun yanına bir Buton bloğu ekler, metnini ve bağlantısını yazar, rengini theme.json'daki paletten seçer ve kaydedersiniz. Toplam süre birkaç dakikadır ve tek satır kod yazmazsınız. Aynı düğme, başlık bir şablon parçası olduğu için, sitenizin her sayfasında anında belirir.

WP-CLI kullanıyorsanız temayı komut satırından da yönetebilirsiniz; bu, birden fazla siteyi yöneten sistem yöneticileri için hız kazandırır:

# Twenty Twenty-Four'ü kur ve etkinleştir
wp theme install twentytwentyfour --activate

# Mevcut blok temaları ve durumlarını listele
wp theme list --status=active --fields=name,version,update

# theme.json değişikliği sonrası önbelleği temizle
wp cache flush

FSE ile üretilen sayfalar çoğu zaman daha az eklentiye ihtiyaç duyar, çünkü sayfa oluşturucu (page builder) eklentilerinin işini büyük ölçüde çekirdek editör devralır. Bu da daha az kod yükü, daha hızlı sayfa ve daha az güvenlik yüzeyi demektir. Yine de yoğun trafikli bir sitede FSE çıktısını bir tam sayfa önbelleğiyle desteklemek performansı belirgin biçimde artırır. Nginx tarafında basit bir statik önbellek kuralı şöyle görünebilir:

# WordPress sayfa önbelleği için basit örnek
location / {
    try_files /wp-content/cache/page/$host$request_uri/index.html $uri $uri/ /index.php?$args;
}

Böyle bir yapı için altyapının da yeterli olması gerekir; PHP 8.x ve OPcache destekli, SSD tabanlı bir WordPress hosting paketi ya da daha fazla kaynak isteyen projelerde bir sanal sunucu FSE deneyimini akıcı tutar.

FSE Ne Zaman Tercih Edilmeli ve Olgunluk Durumu#

FSE'nin ilk sürümleri, dürüst olmak gerekirse, üretim için biraz erkendi. Menü yönetimi kısıtlıydı, bazı bloklar beklenmedik davranıyordu ve çok sayıda popüler eklenti henüz blok temalarla tam uyumlu değildi. Ancak son sürümlerle birlikte tablo epeyce değişti. Bugün gezinme menüsü yönetimi kararlı, şablon geçersiz kılmaları güvenilir, kalıp (pattern) sistemi olgun ve büyük eklenti ekosisteminin önemli bir kısmı blok temalarla sorunsuz çalışıyor. Artık FSE'yi "deneysel" değil, yeni WordPress projeleri için makul bir varsayılan olarak görebiliriz.

Yine de her senaryo için mutlak en iyi seçim olduğunu söylemek yanlış olur. Karar verirken şu ölçütlere bakmanızı öneririm:

• Yeni bir site kuruyorsanız ve ekip içeriği kendisi yönetecekse, FSE öğrenme eğrisini düşürür; blok temayla başlamak mantıklıdır.
• Sitenizin ağırlıklı olarak belirli bir sayfa oluşturucu eklentiye (Elementor, Divi gibi) bağlı karmaşık düzenleri varsa, o ekosistemde kalmak kısa vadede daha az sürtünme yaratabilir.
• WooCommerce gibi ağır bir eklenti kullanıyorsanız, kullandığınız sürümün blok tema uyumunu önceden test edin; çoğu artık uyumlu olsa da mağaza şablonlarını canlıya almadan denemek gerekir.
• Çok sayıda özel PHP şablonu ve derin tema özelleştirmesi olan eski bir siteyi taşıyorsanız, geçişi aşamalı planlayın; her şeyi bir gecede dönüştürmeye çalışmayın.

Mevcut bir klasik temadan blok temaya geçişte en sık yapılan hata, canlı sitede doğrudan çalışmaktır. Bunun yerine önce bir kopya oluşturun, blok temayı orada kurun, tüm önemli sayfa türlerini (ana sayfa, tek yazı, arşiv, iletişim, 404) tek tek kontrol edin. Geçiş sürecini kendiniz yönetmek istemiyorsanız site taşıma hizmetimiz bu dönüşümü kesintisiz yürütmenize yardımcı olur. Güvenlik tarafında da bir SSL sertifikası ve önünde bir WAF katmanı ile siteyi yayına almadan sağlamlaştırmayı ihmal etmeyin.

Sıkça Sorulan Sorular#

FSE için hangi WordPress sürümü gerekir?#

Full Site Editing özellikleri WordPress 5.9 ile stabil olarak geldi ve her sürümde belirgin biçimde olgunlaştı. Bugün için en iyi deneyim için WordPress'in güncel ana sürümünü ve PHP 8.1 veya üzerini kullanmanızı öneririm. Ayrıca sadece sürüm yeterli değildir; sitenizde etkin bir blok temanın (Twenty Twenty-Four gibi) yüklü olması gerekir, çünkü klasik bir tema etkinken Site Editörü menüde görünmez.

Blok temaya geçince mevcut yazılarım ve sayfalarım kaybolur mu?#

Hayır, içerikleriniz güvendedir. Tema değişikliği yalnızca sitenizin görsel yapısını ve şablonlarını etkiler; yazılarınız, sayfalarınız, medya dosyalarınız ve ayarlarınız veritabanında olduğu gibi kalır. Ancak klasik editörle özel HTML veya kısa kodlarla oluşturulmuş bazı karmaşık düzenler yeni temada farklı görünebilir, bu yüzden geçişi bir hazırlık ortamında denemek ve önceden yedek almak en doğrusudur.

theme.json dosyasını elle düzenlemek zorunda mıyım?#

Zorunda değilsiniz. Günlük kullanımda renk, yazı tipi ve boşluk değişikliklerinin neredeyse tamamını Global Styles paneli üzerinden, kod yazmadan yapabilirsiniz. theme.json dosyasını doğrudan düzenlemek daha çok geliştiricilerin işine yarar; örneğin bir alt tema oluşturup markanıza özel bir tasarım sistemi kurgulamak ya da bazı düzenleme özelliklerini kısıtlamak istediğinizde bu dosyaya dokunursunuz.

Sayfa oluşturucu eklentilere hâlâ ihtiyacım var mı?#

Çoğu durumda ihtiyacınız azalır. FSE, sayfa oluşturucuların sunduğu birçok yeteneği (sütun düzenleri, hazır kalıplar, görsel düzenleme) çekirdek editöre taşıdı. Bu sayede daha hafif, daha hızlı ve daha az bağımlılığı olan siteler kurabilirsiniz. Yine de çok özel animasyonlar veya belirli bir eklentiye özgü gelişmiş widget'lar istiyorsanız, o eklentiyi kullanmaya devam edebilirsiniz; ancak yeni bir projede önce çekirdek bloklarla neyin mümkün olduğunu görmenizi tavsiye ederim.

FSE performansı olumlu mu etkiler?#

Genellikle evet. Blok temalar, ağır sayfa oluşturucu eklentilere göre daha az CSS ve JavaScript üretir; WordPress ayrıca yalnızca sayfada kullanılan blokların stillerini yükleyecek şekilde optimize edilmiştir. Bu, daha küçük sayfa boyutu ve daha hızlı yükleme demektir. Yine de gerçek performans için altyapı belirleyicidir; hızlı disk, güncel PHP, OPcache ve bir tam sayfa önbelleği katmanı olmadan tek başına tema sizi zirveye taşımaz.

Kapanış#

Full Site Editing, WordPress'i "içerik editörü artı gizemli PHP dosyaları" ikiliğinden çıkarıp, sitenin her parçasının aynı görsel dille yönetildiği bütünleşik bir platforma dönüştürdü. Blok temalar ve theme.json ile artık başlığı, altbilgiyi, şablonları ve tüm tasarım sistemini kod yazmadan, tutarlı ve güncelleme dostu bir şekilde yönetebiliyorsunuz. Doğru altyapı ve düzenli yedeklerle birlikte kullanıldığında FSE, hem küçük işletmeler hem de kurumsal projeler için sağlam ve geleceğe dönük bir temel sunuyor.

Bu yapıyı denemek için hızlı ve güncel bir zemine ihtiyacınız var. PHP 8.x ve SSD tabanlı WordPress uyumlu hosting paketlerimiz ile FSE deneyimini akıcı yaşayabilir, daha fazla kaynak isteyen projeleriniz için sanal sunucu çözümlerimize geçebilirsiniz. Yeni bir alan adıyla başlamak isterseniz alan adı kaydı ve mevcut sitenizi taşımak için site taşıma hizmetimiz yanınızda. Sorularınız için ekibimize her zaman ulaşabilir, sitenizi güvenle blok temalar dünyasına taşıyabilirsiniz.