theme.json ile Özel Bir WordPress Blok Teması Nasıl Oluşturulur: Adım Adım Kılavuz

Özet

Tam Site Düzenleme (FSE) ile özel bir WordPress blok teması oluşturmak göz korkutucu olabilir, ancak theme.json süreci basitleştirir. Bu kılavuz, minimal bir blok teması kurma, theme.json'da renkler ve tipografi gibi global stilleri tanımlama ve blok işaretlemesi kullanarak özel şablonlar oluşturma adımlarında size rehberlik eder. Blok desenleri ve stil varyasyonları eklemeyi öğrenecek, PHP şablon dosyalarına ihtiyaç duymadan tamamen tasarlanabilir bir site elde edeceksiniz. Klasik ve blok teması özelliklerini karıştırma gibi yaygın hataları ele alacak ve temanızı nasıl test edeceğinizi göstereceğiz. Sonunda, üretime hazır, modern ve genişletilebilir bir blok temanız olacak. Bu yaklaşım, daha hızlı ve daha görsel geliştirme için WordPress'in en son yeteneklerinden yararlanır.

Giriş

Tam Site Düzenleme (FSE), sitenizin her bölümünü görsel olarak tasarlamanıza olanak tanıyarak WordPress tema geliştirmeyi kökten değiştirdi. Ancak birçok geliştirici hala klasik temalara güveniyor veya sıfırdan blok temaları oluşturmakta zorlanıyor. FSE'nin gücünü açığa çıkarmanın anahtarı, global stilleri, ayarları ve şablonları kontrol eden bir yapılandırma dosyası olan theme.json'dur. Bu makale, theme.json kullanarak özel bir blok teması oluşturmak için pratik, adım adım bir kılavuz sunuyor. Klasör yapısını kurmayı, renk paletleri ve tipografi ön ayarlarını tanımlamayı, blok işaretlemesiyle özel şablonlar oluşturmayı ve stil varyasyonları eklemeyi öğreneceksiniz. Sonunda, bakımı ve genişletmesi kolay, üretime hazır bir blok temanız olacak. Hadi başlayalım ve FSE geliştirmeyi gizeminden kurtaralım.

FSE'nin WordPress tasarımının geleceğini nasıl şekillendirdiğine daha geniş bir bakış için, Gutenberg FSE: 2026'da WordPress Tasarımının Geleceği sayfasına göz atın.

1. Minimal Bir Blok Teması Kurma

Bir blok teması en az iki dosya gerektirir: style.css ve index.html. Bunları oluşturalım.

Klasör Yapısı

wp-content/themes/ dizininizde my-block-theme adlı bir klasör oluşturun. İçine şunları yerleştirin:

• style.css
• index.html
• (isteğe bağlı) theme.json

style.css

Blok temaları CSS'ye daha az bağımlı olsa da, style.css tema tanımlaması için hala gereklidir:

/*
Theme Name: My Block Theme
Theme URI: https://example.com
Author: Your Name
Description: A custom block theme built with theme.json.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: my-block-theme
*/

Requires at least: 5.9 satırı, temanın FSE özelliğiyle çalışmasını sağlar.

index.html

Bu, yedek şablonunuzdur. Blok işaretlemesiyle başlamalıdır. Basit bir düzen oluşturun:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:post-title /-->
    <!-- wp:post-content /-->
</div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Bu, başlık ve altbilgi şablon parçalarını eklemek için blok sözdizimini kullanır ve yazı başlığı ile içeriğini görüntüler.

Uyarı: Blok temaları header.php veya footer.php gibi PHP şablon dosyaları içermemelidir. Klasik ve blok şablonlarını karıştırmak FSE'yi bozar.

Temayı Etkinleştirme

Klasörü FTP veya zip yükleme ile yükleyin ve etkinleştirin. Minimal yapınızla boş bir site görmelisiniz. Ardından, theme.json ile stillendireceğiz.

2. theme.json'da Uzmanlaşmak: Global Stiller ve Ayarlar

theme.json tüm tasarım kontrollerini merkezileştirir. Tema klasörünüzün kökünde bulunur. Renk ve tipografi ayarlarıyla bir tane oluşturalım.

Temel Yapı

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#007cba",
                    "name": "Primary"
                },
                {
                    "slug": "secondary",
                    "color": "#005a87",
                    "name": "Secondary"
                },
                {
                    "slug": "background",
                    "color": "#ffffff",
                    "name": "Background"
                }
            ],
            "gradients": []
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
                    "slug": "system",
                    "name": "System"
                },
                {
                    "fontFamily": "'Georgia', serif",
                    "slug": "serif",
                    "name": "Serif"
                }
            ],
            "fontSizes": [
                {
                    "slug": "small",
                    "size": "14px",
                    "name": "Small"
                },
                {
                    "slug": "medium",
                    "size": "18px",
                    "name": "Medium"
                },
                {
                    "slug": "large",
                    "size": "24px",
                    "name": "Large"
                }
            ]
        },
        "spacing": {
            "padding": true,
            "margin": true,
            "units": ["px", "em", "rem"]
        }
    },
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--background)",
            "text": "var(--wp--preset--color--primary)"
        },
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--system)",
            "fontSize": "var(--wp--preset--font-size--medium)"
        }
    }
}

Bu, bir renk paleti, yazı tipleri, yazı boyutları ve global stiller tanımlar. var() fonksiyonları, WordPress tarafından otomatik olarak oluşturulan CSS özel niteliklerine referans verir. Kullanıcılar daha sonra bunları Site Düzenleyici'de değiştirebilir.

İpucu: Tutarlılık için CSS özel niteliklerini kullanın. CSS dosyalarında değerleri sabit kodlamaktan kaçının; theme.json tek gerçek kaynak olsun.

3. Özel Şablonlar Oluşturma

Blok şablonları, blok işaretlemesi içeren HTML dosyalarıdır. Klasik şablon dosyalarına benzer bir hiyerarşi izlerler. Örneğin, tek yazılar için single.html oluşturun:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-navigation-link {"type":"previous"} /-->
    <!-- wp:post-navigation-link {"type":"next"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Benzer şekilde, page.html, archive.html vb. oluşturun. Ayrıca, bir sorgu döngüsü içine wp:post-template bloğu ekleyerek özel şablonlar oluşturabilirsiniz.

İleri düzey özelleştirme için özel bloklar oluşturmayı düşünün. Temel Blokların Ötesi: Gelişmiş WordPress İşlevselliği için Özel Gutenberg Blokları Oluşturma sayfasında bunu nasıl yapacağınızı öğrenin.

Şablon Parçaları

Yeniden kullanılabilir parçalar için parts/ klasörü oluşturun. Örneğin, header.html:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<header class="wp-block-group">
    <!-- wp:site-logo /-->
    <!-- wp:navigation {"themeLocation":"primary"} /-->
</header>
<!-- /wp:group -->

Ve footer.html:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">&copy; 2025 My Site</p>
<!-- /wp:paragraph -->

4. Blok Desenleri ve Stil Varyasyonları Ekleme

Blok desenleri, önceden tasarlanmış düzenlerdir. Bunları patterns/ klasöründe tanımlayın. patterns/hero.php oluşturun:

<?php
/**
 * Title: Hero
 * Slug: my-block-theme/hero
 * Categories: hero
 */
?>
<!-- wp:cover {"overlayColor":"primary","minHeight":50,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:50vh">
    <span aria-hidden="true" class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"style":{"color":{"text":"#ffffff"}}} -->
        <h1 class="has-text-align-center has-text-color" style="color:#ffffff">Welcome</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">This is a custom hero section</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Stil varyasyonları, kullanıcıların tüm görünümü değiştirmesine olanak tanır. Tema ayarlarını geçersiz kılan styles/default.json ve styles/dark.json dosyalarını oluşturun.

5. Uyarılar ve En İyi Uygulamalar

• Performans: theme.json önbelleğe alınır. Değişikliklerden sonra önbelleği temizleyin. Gerekirse wp_register_theme_json kancasını kullanın.
• Geriye Dönük Uyumluluk: Blok temaları yalnızca WordPress 5.9 ve sonrasında çalışır. Siteniz eski sürümleri desteklemek zorundaysa, hibrit bir yaklaşım düşünün ancak şablon dosyalarını karıştırmaktan kaçının.
• Alt Temalar: Blok temaları, klasik alt temalar için ana tema olarak kullanılabilir, ancak tersi geçerli değildir. Bir ana blok teması bildirmek için style.css içinde template kullanın.
• Uluslararasılaştırma: Çevrilebilir dizeler için PHP şablon parçaları içinde __() işlevini kullanın. Blok işaretlemesinde, textDomain özelliği aracılığıyla metin alanını belirtin.

Eklenti geliştirme en iyi uygulamaları hakkında daha fazla bilgi için, Sağlam WordPress Eklentileri Oluşturma: En İyi Uygulamalara Pratik Bir Kılavuz sayfasına bakın.

Sonuç

theme.json ile özel bir blok teması oluşturmak, PHP'ye dokunmadan tamamen tasarlanabilir bir site oluşturmanızı sağlar. Bu kılavuzu izleyerek minimal bir tema kurdunuz, global stiller tanımladınız, özel şablonlar oluşturdunuz ve desenler eklediniz. Arşiv sayfaları veya özel yazı tipleri gibi uç durumlar dahil olmak üzere iyice test etmeyi unutmayın. WordPress geliştikçe blok temaları standart haline gelecektir. İş akışınızı hızlandırmak ve müşterilere benzersiz esneklik sunmak için bugün FSE'den yararlanmaya başlayın.

Tema oluşturmayı daha da hızlandırmak istiyorsanız, bir açıklamadan eksiksiz bir site oluşturan bir araç kullanmayı düşünün. Örneğin, istediğiniz düzeni tarif edebilir ve dakikalar içinde kullanıma hazır bir blok temasına sahip olabilirsiniz.

Blok temanızı canlıya almaya hazır mısınız? Düz metin açıklamasıyla, tam işlevsel bir açılış sayfası veya web sitesi oluşturabilirsiniz—kodlama gerektirmez.