WordPress'i 'Tek Gerçek Kaynağı' Yapmak: Blok Temalar, theme.json ve Yapay Zekâ Entegrasyonu

Modern web ekosisteminde ajanslar ve kurumsal geliştirme ekipleri uzun süredir derin bir mimari parçalanmayla mücadele ediyor. Tasarım sistemleri Figma'da yaşarken, marka kılavuzları Notion veya PDF belgelerine gömülüyor, stil tanımları harici CSS/SCSS kütüphanelerine dağılıyor ve içerik üretim süreçleri bağımsız yapay zekâ araçlarıyla yürütülüyor. Sonuç; tutarsız tasarım dilleri, şişkin DOM ağaçları, performans kaybı ve kontrol edilemeyen bir teknik borç yığınıdır.

Automattic mühendislerinden Brian Coords'un gündeme taşıdığı "WordPress as the Source of Truth" (Tek Gerçek Kaynağı Olarak WordPress) yaklaşımı, bu dağınıklığı ortadan kaldıran radikal bir paradigma değişimini temsil ediyor. Bu mimari yaklaşımda web sitesi; yalnızca veritabanındaki kayıtları derleyip tarayıcıya sunan pasif bir içerik yönetim motoru (CMS) değil; tasarım kurallarını, blok modellerini, tipografik hiyerarşiyi ve yapay zekâya kılavuzluk eden ontolojiyi barındıran merkezi otoritedir.

Dağıtık Mimarilerin Çıkmazı ve SSOT (Single Source of Truth) İhtiyacı

Yıllar boyunca WordPress projelerinde Elementor, Divi veya WPBakery gibi görsel sayfa oluşturucular (page builders) kullanıldı. Bu araçlar son kullanıcıya esneklik sağlasa da, sistemik düzeyde tasarım tutarlılığını paramparça etti. Her sayfa kendine ait inline stiller, kontrolsüz div sarmalayıcıları (wrapper hell) ve gereksiz JavaScript yükleri barındırdı.

"Bir web sitesi bağımsız araçların ürettiği çıktıların birleştirildiği bir tuval olmamalıdır; tasarımın, mantığın ve içerik kural setinin doğrudan kendisi olmalıdır."

WordPress'i "Tek Gerçek Kaynağı" (SSOT) olarak inşa etmek; tipografi ölçeklerinden renk paletlerine, şablon hiyerarşisinden içerik doğrulama modellerine kadar her bileşenin WordPress çekirdeğinin sunduğu standart API'ler ile tanımlanması anlamına gelir.

Modern Çekirdek: theme.json ile Tasarım Sistemini Merkezileştirmek

Full Site Editing (FSE) ve blok temaların kalbinde yer alan theme.json dosyası, tasarım sisteminizin yegâne veri kaynağıdır. CSS değişkenlerini manuel olarak yönetmek veya harici kütüphanelere bağımlı kalmak yerine, global stiller tek bir JSON şeması altında toplanır. Bu dosya, WordPress editöründen (Gutenberg) ön yüze (front-end) kadar tutarlı bir CSS Custom Properties çıktısı üretir.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "brand-primary",
          "color": "#0f172a",
          "name": "Derin Lacivert"
        },
        {
          "slug": "brand-accent",
          "color": "#2563eb",
          "name": "Kobalt Mavi"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "slug": "sm",
          "size": "0.875rem",
          "name": "Küçük"
        },
        {
          "slug": "base",
          "size": "1rem",
          "name": "Normal"
        }
      ]
    },
    "layout": {
      "contentSize": "720px",
      "wideSize": "1140px"
    }
  }
}

Bu yapılandırma, geliştiricinin stilleri CSS dosyalarına kodlamak yerine, sistem düzeyinde bir tasarım token hiyerarşisi oluşturmasını sağlar. Sayfada yer alan bloklar yalnızca bu token havuzundan beslenir, böylece rastgele font boyutları veya stil bozulmaları tamamen önlenir.

Blok Desenleri (Block Patterns) ve Yapay Zekâ İş Akışları

Üretken yapay zekânın (GenAI) web tasarımına entegrasyonunda karşılaşılan en büyük handikap, yapay zekânın bağlamdan yoksun çıktılar üretmesidir. Sıradan bir LLM'e (Büyük Dil Modeli) "Bize bir referanslar bölümü oluştur" dendiğinde, rastgele HTML/CSS üreterek sitenizin mevcut tasarım dilini bozar.

WordPress tek gerçek kaynağı olduğunda, yapay zekâ kör bir kod üreticisi olmaktan çıkar; WordPress'in önceden tanımlanmış Blok Desenlerini (Block Patterns) seçen ve dolduran bir aracıya dönüşür.

Yapay Zekâ İçin Yapılandırılmış Desen Kaydı

Bir ajans iş akışında blok desenleri PHP veya JSON tabanlı olarak semantik meta verilerle kaydedilir. Ardından LLM istemleri (prompts), doğrudan sitenin blok desen kataloğuna yönlendirilir:

<?php
register_block_pattern(
    'agency/case-study-hero',
    array(
        'title'       => __( 'Başarı Hikayesi Hero Alanı', 'agency-core' ),
        'description' => _x( 'Örnek vaka incelemeleri için yapılandırılmış görsel ve istatistik alanı.', 'Block pattern description', 'agency-core' ),
        'categories'  => array( 'featured', 'heroes' ),
        'content'     => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}}} -->
                          <div class="wp-block-group alignwide"><!-- wp:heading {"level":1} --><h1>Örnek Vaka Başlığı</h1><!-- /wp:heading -->
                          <!-- wp:paragraph --><p>Vaka açıklaması ve elde edilen metrikler...</p><!-- /wp:paragraph --></div>
                          <!-- /wp:group -->',
    )
);

Bu kurgu sayesinde yapay zekâ entegrasyonları, sıfırdan CSS ve DOM düğümleri yazmaz. Bunun yerine, WordPress REST API üzerinden kayıtlı desenleri çeker, yalnızca ilgili içerik placeholder'larını zengin metinlerle doldurur. Site tasarımı hiçbir zaman dejenere olmaz.

Metodoloji Karşılaştırması

Modern blok tabanlı SSOT yaklaşımı ile geleneksel ajans yaklaşımları arasındaki farklar şunlardır:

Teknik SEO ve Core Web Vitals Etkileri

WordPress'in gerçek kaynağı olması, arama motoru optimizasyonu açısından kritik kazanımlar sağlar:

1. Optimize Edilmiş CSS Dağıtımı

WordPress çekirdeği, blok temalarda yalnızca sayfada kullanılan blokların stil dosyalarını tarayıcıya iletir. Bu, megabaytlarca CSS dosyasının yüklenmesini önler ve İlk Zengin İçerikli Boyama (FCP) metriğini doğrudan iyileştirir.

2. Semantik DOM ve CLS Kararlılığı

Sayfa oluşturucuların aksine, blok şablonları anlamsal HTML etiketlerini (<header>, <main>, <article>, <footer>) doğal olarak kullanır. Görsel boyutlandırmalar theme.json üzerinden önceden rezerve edildiği için Kümülatif Düzen Kayması (CLS) skoru sıfıra yakın seyreder.

3. Yapılandırılmış Veri Bütünlüğü

Blok şemaları, Schema.org mikro verileriyle kolayca eşleştirilebilir. Bir desen içinde yer alan ürün fiyatı, yazar biyografisi veya SSS alanı doğrudan JSON-LD çıktısına bağlanabilir.

Ajanslar İçin En İyi Uygulamalar (Best Practices)

1. Doğrudan CSS Yazımını Sınırlandırın: Özel CSS yazmak yerine, tipografi ve boşluk kararlarını theme.json içerisindeki spacing ve typography preset'lerine aktarın.
2. Küratörlü Editör Deneyimi Sunun: block_editor_settings_all filtresi ile müşterilerinizin veya içerik üreticilerinizin global renkleri rastgele değiştirmesini engelleyin; sadece kayıtlı desenleri kullanmalarına izin verin.
3. AI Pipeline'ını WordPress API'lerine Bağlayın: Yapay zekâ destekli içerik üretim araçlarınızı Gutenberg blok markup'ı üretecek şekilde wp/v2/block-patterns ve wp/v2/posts endpoint'leriyle haberleştirin.

Kaynak: WP Tavern - https://wptavern.com/podcast/236-brian-coords-on-wordpress-as-the-source-of-truth