WordPress'in Tek Doğruluk Kaynağı Olarak Kullanımı: Blok Temalar, AI ve Ajans İş Akışları

Giriş: Modern Web Geliştirmede 'Source of Truth' Paradigması

Web geliştirme ekosisteminde uzun yıllar boyunca tasarım sistemleri, Figma dosyaları veya harici içerik yönetim araçları ana referans noktası kabul edildi. Geliştiriciler bu tasarımları WordPress gibi sistemlere uyarlarken kod fazlalıkları, tasarım kaymaları ve sürdürülebilirlik sorunlarıyla karşılaştı. Ancak Gutenberg blok editörünün olgunlaşması, Full Site Editing (FSE) vizyonu ve theme.json mimarisiyle birlikte WordPress artık yalnızca bir içerik yönetim aracı değil; tasarım, tipografi, renk hiyerarşisi ve düzen kurallarının doğrudan yönetildiği "Tek Doğruluk Kaynağı" (Single Source of Truth - SSOT) haline geldi.

Automattic mühendislerinden Brian Coords'un altını çizdiği bu yaklaşım; ajansların iş akışlarını basitleştirmeyi, blok şablonlarını (patterns) standartlaştırmayı ve en önemlisi üretken yapay zekayı (Generative AI) web sitesinin kendi kurallarına göre yönlendirmeyi mümkün kılıyor. Harici sistemlere bağımlılığı azaltarak sitenin çekirdeğindeki veriyi doğrudan tasarım diliyle birleştirmek, teknik SEO ve Core Web Vitals optimizasyonunda da benzersiz avantajlar sunar.

"WordPress'in kendi standartlarını, bloklarını ve tema kurallarını tasarımın merkezine oturttuğunuzda, harici tasarım araçlarının yarattığı teknik borcu ortadan kaldırır ve yapay zekayı sitenizin sınırları içinde doğru şekilde kontrol edebilirsiniz."

Blok Temalar ve theme.json ile Tasarım Sistemi Oluşturma

Klasik WordPress temalarında CSS dosyaları, PHP şablonları ve üçüncü taraf eklenti stilleri çatışarak aşırı büyük stil dosyalarına ve CSS render-blocking problemlerine yol açardı. Blok temalarla hayatımıza giren theme.json, tüm tasarım değişkenlerini tek bir JSON dosyası altında yapılandırır. Bu yapı, hem editörün arayüzünü hem de sitenin ön yüz çıktısını (front-end) tek bir merkezden besler.

Bu sistem kurulduğunda geliştiriciler, tasarımcılar ve yapay zeka asistanları tek bir referans şeması üzerinden çalışır. Renk paleti, tipografi boyutları, padding/margin kısıtlamaları ve blok bazlı kurallar standart hale gelir.

Örnek: Kurumsal Ölçekte Bir theme.json Yapılandırması

Aşağıdaki örnekte sitenin tipografi skalası, renk tanımları ve blok kısıtlamaları belirlenmiştir. Bu yapı, AI modeline verildiğinde oluşturacağı içeriklerin sitedeki CSS kurallarını aşmasını engeller:

{
  \"$schema\": \"https://schemas.wp.org/trunk/theme.json\",
  \"version\": 3,
  \"settings\": {
    \"appearanceTools\": false,
    \"color\": {
      \"palette\": [
        {
          \"slug\": \"primary\",
          \"color\": \"#0F172A\",
          \"name\": \"Derin Lacivert\"
        },
        {
          \"slug\": \"accent\",
          \"color\": \"#2563EB\",
          \"name\": \"Vurgu Mavisi\"
        }
      ],
      \"custom\": false
    },
    \"typography\": {
      \"fontSizes\": [
        {
          \"slug\": \"sm\",
          \"size\": \"0.875rem\",
          \"name\": \"Küçük\"
        },
        {
          \"slug\": \"base\",
          \"size\": \"1rem\",
          \"name\": \"Normal\"
        },
        {
          \"slug\": \"lg\",
          \"size\": \"1.25rem\",
          \"name\": \"Büyük\"
        }
      ],
      \"customFontSize\": false
    }
  }
}

appearanceTools: false ve custom: false yönergeleri sayesinde içerik editörlerinin ve otomatik AI araçlarının rastgele renkler veya kontrolsüz satır içi (inline) CSS kuralları üretmesi engellenir. Böylece sitenin görsel hiyerarşisi kesin bir standarda oturur.

Blok Desenleri (Block Patterns): İçerik Mimarisi ve AI Entegrasyonu

Blok şablonları (Block Patterns), sitenin tasarım dilini korurken modüler ve esnek sayfa oluşturmanın temel bileşenidir. WordPress'i tek doğruluk kaynağı yapmanın en kritik ayağı, tasarım ekiplerinin her yeni sayfa için sıfırdan layout çizmek yerine önceden tanımlanmış pattern'leri kullanmasıdır.

Yapay zeka (AI) destekli ajans iş akışlarında en büyük sorun, AI modellerinin oluşturduğu HTML'in sitenin CSS hiyerarşisini bozmasıdır. Ancak yapay zekaya "Sıfırdan sayfa tasarla" demek yerine sitenizdeki kayıtlı blok pattern şablonlarını (slug ve yapı bazında) sağlarsanız, AI yalnızca bu desenleri birleştiren düzenli bir JSON/HTML çıktısı üretir.

PHP ile Özel Pattern Kaydı

Aşağıdaki kod bloğunda, sitenin yerel stillerine tam entegre olan ve schema standartlarını destekleyen bir kurumsal hizmet tanıtım deseni tanımlanmaktadır:

<?php
/**
 * Kurumsal Hizmet Tanıtım Deseni Kaydı
 */
function agency_register_core_patterns() {
    register_block_pattern(
        'agency-core/feature-grid',
        array(
            'title'       => __( 'Kurumsal Hizmet Izgarası', 'agency-domain' ),
            'description' => __( 'AI ve editörler için standart 2 sütunlu hizmet yapısı', 'agency-domain' ),
            'categories'  => array( 'featured', 'services' ),
            'content'     => '<!-- wp:columns {\"className\":\"is-style-agency-grid\"} -->
                              <div class=\"wp-block-columns is-style-agency-grid\">
                                <!-- wp:column -->
                                <div class=\"wp-block-column\">
                                  <!-- wp:heading {\"level\":3} -->
                                  <h3 class=\"wp-block-heading\">Performans Odaklı Mimari</h3>
                                  <!-- /wp:heading -->
                                  <!-- wp:paragraph -->
                                  <p>Blok temalar sayesinde sıfır JS kütüphanesi yükü ile Core Web Vitals skorlarını optimize edin.</p>
                                  <!-- /wp:paragraph -->
                                </div>
                                <!-- /wp:column -->
                                <!-- wp:column -->
                                <div class=\"wp-block-column\">
                                  <!-- wp:heading {\"level\":3} -->
                                  <h3 class=\"wp-block-heading\">SEO ve Semantik Yapı</h3>
                                  <!-- /wp:heading -->
                                  <!-- wp:paragraph -->
                                  <p>Dahili yapısal veri şemasıyla uyumlu içerik blokları üretin.</p>
                                  <!-- /wp:paragraph -->
                                </div>
                                <!-- /wp:column -->
                              </div>
                              <!-- /wp:columns -->',
        )
    );
}
add_action( 'init', 'agency_register_core_patterns' );

Karşılaştırma Analizi: Klasik Tasarım Süreçleri ve 'WordPress as SSOT'

Aşağıdaki tablo, geleneksel sayfa geliştirme yöntemleriyle sitenin doğrudan doğruluk kaynağı olarak kullanıldığı modern WordPress mimarisinin farklarını özetlemektedir:

Nginx ve Sunucu Seviyesinde Modern FSE Önbellekleme Optimizasyonu

WordPress blok temaları, dinamik PHP sorgu yükünü optimize etmek için güçlü bir önbellek (cache) mimarisine ihtiyaç duyar. Full Site Editing yapısında oluşturulan statik desenlerin sunucu seviyesinde minimum gecikmeyle (TTFB) yanıt vermesi gerekir. Bunun için Nginx tarafında FastCGI önbellekleme ve stale-while-revalidate politikası uygulanmalıdır.

# Nginx FastCGI Cache Yapılandırması
fastcgi_cache_path /var/run/nginx-cache levels=1:2 keys_zone=WORDPRESS:100m inactive=60m;
fastcgi_cache_key \"$scheme$request_method$host$request_uri\";
fastcgi_cache_use_stale error timeout updating invalid_header http_500 http_503;

server {
    listen 443 ssl http2;
    server_name example.com;

    set $skip_cache 0;

    # POST istekleri ve URL parametreleri önbelleğe alınmaz
    if ($request_method = POST) {
        set $skip_cache 1;
    }
    if ($query_string != \"\") {
        set $skip_cache 1;
    }

    # Giriş yapmış kullanıcılar ve WordPress admin paneli atlanır
    if ($http_cookie ~* \"comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_no_cache|wordpress_logged_in\") {
        set $skip_cache 1;
    }

    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    location ~ \\.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
        fastcgi_cache WORDPRESS;
        fastcgi_cache_valid 200 301 302 60m;
        fastcgi_cache_bypass $skip_cache;
        fastcgi_no_cache $skip_cache;
        add_header X-FastCGI-Cache $upstream_cache_status;
    }
}

Teknik SEO Perspektifinden Değerlendirme

WordPress'in 'Source of Truth' olarak yapılandırılması, arama motoru optimizasyonu açısından kritik faydalar sunar:

1. Temiz DOM Hiyerarşisi: Görsel sayfa oluşturucuların (Elementor, Divi vb.) yarattığı 15-20 katmanlı div yapıları yerine Gutenberg blokları semantik HTML elemanları (<header>, <main>, <article>, <section>, <footer>) üretir. Bu durum Googlebot tarama bütçesini ve DOM derinliği kaynaklı INP (Interaction to Next Paint) sorunlarını doğrudan çözer.
2. Kritik CSS Tasarrufu: WordPress 6.x sürümleriyle birlikte blok temalar, sayfada bulunmayan blokların CSS kurallarını yüklemez. Klasik temalardaki 300-500 KB'lık devasa CSS dosyaları yerine yalnızca 15-30 KB aralığında optimize edilmiş inline stiller kullanılır.
3. Yapısal Veri (Schema) Uyumluğu: Blok desenlerinin içerisine JSON-LD veya semantik mikro veriler doğrudan gömülebilir. AI destekli içerik üretiminde şablonlar schema kurallarına uymak zorunda kaldığı için zengin sonuç (Rich Snippet) hataları minimize edilir.

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