Statik Sitelerden WordPress'e Geçiş: Static Site Importer ve Data Liberation İncelemesi

Web Ekosisteminde Veri Özgürlüğü ve Statik Sitelerin Dönüşümü

Web geliştirme dünyasında son yıllarda Jamstack, SSG (Static Site Generator) mimarileri ve özel HTML şablonları büyük bir popülerlik kazandı. Ancak içerik hacmi büyüdükçe, pazarlama ekiplerinin bağımsız içerik üretme ihtiyacı arttıkça ve dinamik e-ticaret gereksinimleri doğdukça, statik altyapıların yönetimi karmaşık hale gelebilmektedir. Automattic'in öncülüğünü yaptığı Data Liberation (Veri Özgürleştirme) inisiyatifi, web sitelerinin kapalı ekosistemlerden veya kod bağımlı statik yapılardan açık kaynaklı WordPress altyapısına geçişini radikal biçimde kolaylaştırmayı hedefliyor.

Bu vizyonun en somut araçlarından biri olan Static Site Importer, herhangi bir platform bağımsız HTML/CSS/JS tabanlı web sitesini tarayarak doğrudan WordPress bloklarına (Gutenberg Blocks) ve Site Düzenleyici (Full Site Editing - FSE) uyumlu blok temalara dönüştürme yeteneği sunuyor.

Data Liberation Felsefesi: Web üzerindeki içerik sahibine aittir. Bir platformdan diğerine geçiş süreci; veri kaybı, karmaşık veritabanı eşleştirmeleri veya haftalar süren manuel kodlama gerektirmemelidir.

Static Site Importer Mimarisi Nasıl Çalışır?

Geleneksel geçiş araçları genellikle RSS beslemelerine, JSON API uçlarına veya SQL dökümlerine bağımlıdır. Oysa Statik Site İçe Aktarıcı, doğrudan istemci tarafında render edilmiş HTML çıktısını girdi olarak kabul eder. Bu yaklaşım, sitenin arkasında yatan teknolojiden (Hugo, Jekyll, Gatsby, Webflow veya saf HTML) bağımsız çalışabilmesini sağlar.

İşlem adımları genel olarak şu teknik safhalardan oluşur:

1. DOM Ayrıştırma (DOM Parsing): Hedef sitenin HTML yapısı taranır, anlamsal (semantic) etiketler (<header>, <nav>, <main>, <article>, <footer>) ayrıştırılır.
2. Blok Eşleme (Block Mapping): Tipografik öğeler, ızgara (grid) sistemleri ve medya bileşenleri yerel Gutenberg bloklarına (core/paragraph, core/columns, core/image vb.) dönüştürülür.
3. Varlık Yönetimi (Asset Ingestion): Harici görseller, SVG ikonlar ve stil dosyaları WordPress Medya Kütüphanesine çekilir ve dosya yolları göreceli/yerel URL'lerle güncellenir.
4. Şablon Hiyerarşisi Oluşturma: Header, Footer ve Tekil Sayfa düzenleri ayrıştırılarak modern theme.json ve templates/index.html yapılarına dönüştürülür.

// Static Site Importer arkasındaki mantığı simüle eden blok dönüştürme filtresi örneği
add_filter('content_save_pre', function ($content) {
    if (empty($content)) {
        return $content;
    }
    
    // Ham HTML konteynerlerini WordPress Grup Bloklarına sarma
    if (strpos($content, '<div class="hero-section">') !== false) {
        $content = preg_replace(
            '/<div class="hero-section">(.*?)<\/div>/is',
            '<!-- wp:group {"className":"hero-section","layout":{"type":"constrained"}} -->
            <div class="wp-block-group hero-section">$1</div>
            <!-- /wp:group -->',
            $content
        );
    }
    return $content;
});

Geçiş Yöntemlerinin Karşılaştırmalı Analizi

Farklı platformlardan WordPress ekosistemine geçiş yaparken kullanılan yöntemlerin operasyonel maliyeti ve teknik esnekliği büyük farklılıklar gösterir:

Modern Blok Temaya Dönüşüm Süreci ve theme.json Entegrasyonu

Statik bir sitenin WordPress'e başarılı bir şekilde aktarılmasının anahtarı, sitenin CSS değişkenlerini (CSS variables) ve tipografi kurallarını modern WordPress theme.json standardına aktarmaktır. Bu sayede içe aktarılan içerik hem Gutenberg panelinden düzenlenebilir hem de sitenin orijinal tasarım dili korunur.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#0d6efd",
          "name": "Primary Brand"
        },
        {
          "slug": "dark",
          "color": "#212529",
          "name": "Dark Text"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "system-ui, -apple-system, sans-serif",
          "slug": "system-sans",
          "name": "System Sans"
        }
      ]
    }
  }
}

Bu yapılandırma sayesinde, statik HTML'deki renk paletleri ve font hiyerarşisi Site Düzenleyici içine entegre edilerek son kullanıcıya kod yazmadan tasarım üzerinde tam kontrol imkanı tanınır.

Geçiş Sürecinde Kritik Teknik SEO ve Performans Parametreleri

Statik siteler genellikle sunucu seviyesinde hız açısından çok başarılıdır (TTFB < 100ms). WordPress'e geçiş yaparken bu performans avantajını kaybetmemek ve organik arama sıralamalarını korumak için aşağıdaki adımlar eksiksiz uygulanmalıdır:

1. 301 Kalıcı Yönlendirme Haritalaması

Statik sitelerde uzantılar çoğunlukla .html ile biterken veya farklı bir dizin yapısındayken (/blog/post-name.html), WordPress varsayılan olarak /blog/post-name/ yapısını tercih eder. Nginx seviyesinde yönlendirmeler yapılarak tarama bütçesi korunmalıdır:

# Nginx .html uzantılarını temizleyen ve yönlendiren blok
location / {
    if ($request_uri ~ ^/(.*)\.html$) {
        return 301 /$1/;
    }
    try_files $uri $uri/ /index.php?$args;
}

2. Görsel Optimizasyonu ve WebP/AVIF Dönüşümü

Statik tarafta optimize edilmiş görseller Medya Kütüphanesine aktarılırken srcset ve responsive boyut tanımlarının eksiksiz oluşturulması sağlanmalıdır. Ayrıca WordPress 6.5+ ile gelen yerel AVIF desteği aktif kullanılmalıdır.

3. Core Web Vitals ve Önbellekleme Katmanı

Statik mimarinin sağladığı TTFB avantajını korumak için WordPress önünde güçlü bir Page Cache (FastCGI Cache, Redis Cache veya Cloudflare Edge Cache) mekanizması konumlandırılmalıdır.

Kaynak: WP Tavern - https://wptavern.com/podcast/238-chris-huber-on-how-static-site-importer-makes-migrating-any-website-to-wordpress-easier-than-ever/