Alt Tema İle WordPress Blok Temalarını İçin Özelleştirme

WordPress Blok Temaları alt tema ile nasıl özelleştirilir? theme.json, özel stil varyasyonları ve CSS kullanımıyla güvenli değişiklikleri öğrenin.

Alt tema kullanmadan bir blok temasında yapılan değişiklikler, tema güncellendiğinde kaybolabilir. Özellikle theme.json, blok stilleri veya şablon dosyaları doğrudan ana tema içinde düzenlendiyse yeni sürüm eski dosyaların üzerine yazabilir. Bu durum, uzun süre emek verilen tasarım ayarlarının beklenmedik biçimde sıfırlanmasına yol açar.

WordPress Blok Temaları üzerinde güvenli biçimde değişiklik yapmak için alt tema oluşturmak bu riski azaltır. Renk paleti, genel arka plan, yazı rengi, blok görünümü ve özel stil seçenekleri ana temanın çekirdek dosyalarına dokunmadan yönetilebilir. Böylece üst tema güncellense bile kişiselleştirmeler ayrı bir klasörde korunur.

Çok dilli bir site üzerinde çalışıyorsanız tema metinlerinin ve tasarım ayarlarının birlikte ele alınması gerekir. Alt tema yapısına geçmeden önce WordPress Blok Temalarını Çok Dilli Hale Getirme içeriğini incelemek, çeviri dosyaları ile blok tabanlı tasarım arasındaki ilişkiyi daha doğru kurmanıza yardımcı olabilir. Özellikle özel blok stili adlarının farklı dillerde gösterileceği projelerde bu hazırlık ileride oluşabilecek düzenleme ihtiyacını azaltır.

WordPress Blok Temaları Alt Tema İle Nasıl Özelleştirilir?

WordPress Blok Temaları için alt tema oluştururken en az style.css ve theme.json dosyalarının hazırlanması gerekir. style.css, WordPress’in temayı ve bağlı olduğu üst temayı tanımasını sağlar. theme.json ise renk, tipografi, genel görünüm ve bloklara özel tasarım kurallarını yönetir.

Klasik temalarda alt tema kurulumunda PHP dosyaları ve stil yükleme işlemleri daha belirgin bir yere sahipti. Blok tabanlı yapıda süreç daha sade ilerler. Doğru klasör adı ve gerekli dosyalar hazır olduğunda WordPress alt temayı otomatik olarak algılar.

Alt Tema Klasörü Nasıl Hazırlanır?

İlk olarak WordPress kurulumundaki /wp-content/themes/ dizinine girin. Burada örneğin twentytwentyfive-child adında yeni bir klasör oluşturabilirsiniz.

Klasör adında boşluk, Türkçe karakter ve karmaşık semboller kullanmamak daha güvenlidir. Dosya yollarında yaşanabilecek uyumsuzlukları önlemek için küçük harflerden ve kısa çizgilerden oluşan bir isim tercih edilebilir.

Oluşturulan klasörün içine style.css dosyası eklenmelidir. Dosyanın başında WordPress’in okuyacağı tema bilgileri bulunur:

/*
Theme Name: Twenty Twenty-Five Child
Description: Twenty Twenty-Five için oluşturulan alt tema
Template: twentytwentyfive
*/

Buradaki Template değeri, üst temanın klasör adıyla birebir aynı olmalıdır. Tema görünen adı farklı olsa bile bu alana yönetim panelinde yazan başlık değil, sunucudaki gerçek klasör adı girilir.

Editör olarak yaptığım kontrollerde en sık karşılaştığım ayrıntılardan biri bu alana yanlış değer yazılması oldu. Tema klasöründe twentytwentyfive adı bulunurken Twenty Twenty-Five yazıldığında alt tema üst temayla eşleşmeyebilir. Bu nedenle klasör adını dosya yöneticisinden kontrol etmek önemlidir.

theme.json Dosyası Ne Sağlar?

Blok temalarda tasarımın büyük bölümü theme.json üzerinden yönetilir. Burada renk paleti, sayfa arka planı, varsayılan metin rengi ve tek tek blokların görünümü tanımlanabilir.

Örneğin siyah arka plan, sarı metin ve mor Buton bloğu oluşturmak için aşağıdaki yapı kullanılabilir:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Siyah",
          "slug": "black",
          "color": "#000000"
        },
        {
          "name": "Sarı",
          "slug": "yellow",
          "color": "#FFFF00"
        },
        {
          "name": "Mor",
          "slug": "purple",
          "color": "#800080"
        },
        {
          "name": "Beyaz",
          "slug": "white",
          "color": "#FFFFFF"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--black)",
      "text": "var(--wp--preset--color--yellow)"
    },
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--purple)",
          "text": "var(--wp--preset--color--white)"
        },
        "border": {
          "color": "var(--wp--preset--color--yellow)",
          "width": "2px",
          "style": "solid"
        }
      }
    }
  }
}

Bu dosya kaydedildikten sonra değişiklikler Görünüm, Düzenleyici ve Stiller alanları üzerinden kontrol edilebilir. Yönetim panelindeki menü isimleri kullanılan WordPress diline veya sürüme göre değişebilir.

2026 itibarıyla güncel blok tema yapısında version değeri olarak 3 kullanılabilir. Eski bir WordPress sürümüyle çalışılıyorsa bazı özelliklerin aynı şekilde işlenmemesi mümkündür. Bu nedenle alt tema hazırlanmadan önce WordPress çekirdeğinin ve üst temanın yedeklenmesi uygun olur.

WordPress Blok Temaları Ne İşe Yarar?

WordPress Blok Temaları, sitenin yalnızca yazı ve sayfa içeriğini değil; üst bilgi, alt bilgi, arşiv, şablon ve genel tasarım alanlarını da bloklarla düzenlemeye yarar. Kullanıcı, birçok değişikliği doğrudan Site Düzenleyici üzerinden yapabilir.

Alt tema ise bu düzenleme kabiliyetini daha güvenli hale getirir. Ana temanın sağladığı şablonlar kullanılmaya devam ederken projeye özel renkler, blok biçimleri ve stil varyasyonları ayrı dosyalarda tutulabilir.

Bu yapı özellikle aynı üst temayı farklı markalar veya farklı siteler için kullanan geliştiricilere kolaylık sağlar. Her proje için üst temayı kopyalamak yerine yalnızca alt tema içinde gerekli farklar tanımlanabilir.

Hazır Stil Varyasyonu Nasıl Değiştirilir?

Bir blok teması birden fazla hazır stil sunabilir. Twenty Twenty-Five temasındaki Evening gibi varyasyonlar buna örnek gösterilebilir. Alt temadaki ana theme.json dosyası genel tasarım ayarlarını belirlerken belirli bir varyasyona özel kurallar ayrı bir JSON dosyasında tutulabilir.

Evening varyasyonundaki Buton bloğunun kenarlığını değiştirmek için /styles/01-evening.json dosyası oluşturulabilir:

{
  "version": 3,
  "title": "Evening",
  "styles": {
    "blocks": {
      "core/button": {
        "border": {
          "color": "var(--wp--preset--color--white)",
          "width": "3px",
          "style": "dashed"
        }
      }
    }
  }
}

Bu dosyada arka plan ve genel metin renklerini tekrar tanımlamak gerekmez. Alt temanın ana theme.json dosyasındaki ayarlar miras alınır. Yalnızca değiştirilmek istenen bölüm yazıldığı için dosya yapısı daha okunabilir kalır.

Dosya adının üst temadaki varyasyon adıyla uyumlu olması önemlidir. Benzer başlığa sahip fakat farklı dosya adına sahip bir JSON oluşturulduğunda WordPress bunu mevcut varyasyonun üzerine yazmak yerine yeni bir seçenek gibi değerlendirebilir.

Tamamen Yeni Bir Stil Varyasyonu Eklenebilir mi?

Alt tema içinde sıfırdan yeni bir stil varyasyonu oluşturulabilir. Bunun için alt tema klasöründeki /styles/ dizinine yeni bir JSON dosyası eklenir.

Örneğin kurumsal.json adındaki dosyada özel renk paleti, sayfa arka planı, metin rengi ve Buton bloğu görünümü birlikte tanımlanabilir. Dosya geçerli bir yapıya sahipse yeni seçenek Stiller bölümünde görüntülenir.

Bu yöntemle:

• Farklı markalar için ayrı renk paletleri hazırlanabilir.
• Açık ve koyu tasarımlar oluşturulabilir.
• Kampanya dönemlerine özel görünümler eklenebilir.
• Blok kenarlıkları ve metin renkleri değiştirilebilir.

Yeni varyasyonun ana temadan bağımsız olmadığı unutulmamalıdır. Şablonlar ve desteklenen tasarım seçenekleri yine üst temanın yapısına bağlıdır. Alt tema, mevcut yapıyı güvenli biçimde genişletir.

style.css Dosyasını Yüklemek Gerekir mi?

Gerçek bir blok temasında theme.json kuralları WordPress tarafından dinamik biçimde işlenir. Bu nedenle yalnızca JSON tabanlı tasarım değişiklikleri yapılıyorsa style.css içindeki CSS kodlarını ayrıca yüklemek gerekmeyebilir.

Ancak :hover gibi theme.json tarafından doğrudan karşılanmayan bir seçici kullanılacaksa CSS dosyasının ön yüzde yüklenmesi gerekir. Bunun için alt temaya functions.php eklenebilir:

<?php

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );

    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array('parent-style')
    );
});

Bu işlem üst ve alt temanın stil dosyalarını ön yüzde yükler. Bununla birlikte yöntem üst temanın CSS dosyalarını nasıl yönettiğine göre değişebilir. Her blok temasında aynı kodu kontrol etmeden kullanmak doğru değildir.

Örneğin tüm Buton bloklarına fareyle üzerine gelindiğinde farklı renk vermek için şu CSS eklenebilir:

.wp-block-button a:hover {
  background: #ffffff;
  color: #0000ff;
}

Bu değişiklik ön yüzde görünür. Site Düzenleyici içindeki ön izleme aynı görünümü göstermeyebilir çünkü editör tarafındaki stiller theme.json ve editör varlıkları üzerinden yönetilir.

Buton Bloğuna Özel Stil Seçeneği Ekleme

Buton bloğunda bulunan Dolgu ve Çerçeve seçeneklerinin yanına yeni bir görünüm eklemek için register_block_style() kullanılabilir.

functions.php dosyasına aşağıdaki kod eklenebilir:

add_action('init', function() {
    register_block_style(
        'core/button',
        [
            'name'  => 'alternative-outline',
            'label' => __('Alternatif Çerçeve', 'twenty-twenty-five-child'),
        ]
    );
});

Ardından ilgili görünüm style.css içinde tanımlanır:

.wp-block-button.is-style-alternative-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--yellow);
  border: 2px dotted var(--wp--preset--color--yellow);
  transition: all 0.7s ease-in-out;
}

.wp-block-button.is-style-alternative-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--black);
}

Renklerin doğrudan tekrar yazılması yerine theme.json içinde tanımlanan değişkenlerin kullanılması tutarlılık sağlar. Palet rengi ileride değiştirildiğinde CSS içindeki ilgili alanlar da yeni değeri kullanır.

Blok Stili PHP Olmadan Oluşturulabilir mi?

WordPress 6.6 ve daha yeni sürümlerde bazı çekirdek bloklar için stil varyasyonları JSON ile kaydedilebilir. Örneğin Grup bloğuna mor arka plan, açık renkli metin, iç boşluk ve yuvarlak köşe eklemek mümkündür.

Dosya yolu şu şekilde hazırlanabilir:

/styles/purple-background/block.json

Dosya içeriğinde blockTypes alanına core/group yazıldığında tanım Grup bloğuna bağlanır. Bu yöntem PHP ihtiyacını azaltır ve ilgili stilin yalnızca gerektiğinde işlenmesine yardımcı olur.

Yine de tüm blokların her tasarım özelliğini aynı ölçüde desteklediği düşünülmemelidir. Kullanılan WordPress sürümü, blok türü ve üst temanın ayarları sonucu etkileyebilir. Geriye dönük uyumluluk gereken projelerde PHP tabanlı kayıt yöntemi alternatif olarak korunabilir.

Dosya düzenleme, tema klasörleri veya WordPress yönetim paneli üzerinde çalışırken teknik bir sorun yaşanması halinde profesyonel destek almak sürecin uzamasını engelleyebilir. 2011 yılından bu yana Türkiye genelinde milyonlarca kullanıcıya 7/24 teknik destek sunan 11858, bilgisayar, akıllı TV, sosyal medya ve modem kurulumu gibi farklı alanlarda çözüm sağlar. Güvenliği ön planda tutan ekip, TeamViewer ve AnyDesk gibi lisanslı araçlarla uzaktan bağlantı desteği verir. Dakika bazlı şeffaf ücretlendirme sistemiyle çalışan hizmet, yüzde 95 memnuniyet oranına ve 500.000’den fazla başarılı işlem deneyimine sahiptir.

Alt tema içinde koyu renkli bir varyasyon hazırlamak, WordPress’in tamamında karanlık görünüm kurmakla aynı işlem değildir. Yönetim paneli, tema görünümü ve ziyaretçi tarafı için farklı yöntemler gerekebilir. Bu ayrımı daha net görmek için WordPress Karanlık Mod Nasıl Kurulur içeriğine göz atabilir, alt tema ayarlarını sitenin genel görünüm tercihleriyle birlikte planlayabilirsiniz.

WordPress Blok Temaları, yalnızca Site Düzenleyici üzerinden yapılan görsel ayarlardan ibaret değildir. Dosya yapısı doğru kurulduğunda aynı tema üzerinde farklı markalara, kullanım senaryolarına ve tasarım tercihlerine uygun seçenekler üretilebilir. Siz de alt tema kullanırken karşılaştığınız bir dosya, varyasyon veya görünüm sorununu yorumlarda paylaşarak farklı çözüm yollarının değerlendirilmesine katkıda bulunabilirsiniz.