Theme.json Dosyası

Teheme.json Dosyası Nedir?

Theme.json dosyası, blok tabanlı temaların konfigürasyon (ayar) dosyasıdır. Bu dosya ile blokların ayarları ve temanın stilleri düzenlenir.

Bu özellik WordPress 5.8 ile birlikte gelmiştir ve daha eski sürümlerde çalışması için Gutenberg Eklentisinin kullanılması gerekmektedir.

WordPress 5.8 ile birlikte gelen theme.json dosyası versiyon 1‘dir. Fakat WordPress 5.9 ile birlikte theme.json versiyon 2 kullanılmaktadır. Biz bu yazımızda versiyon 2‘yi ele alacağız.

Theme.json dosyası ile yapılabileceklerden bazıları şunlardır:

Büyük küçük harf seçimi, padding, margin, özel line-height gibi özelliklerin eklenmesi ya da kaldırılması
Birden çok renk paleti, gradyan ve çift ton ekleme
Font büyüklükleri ekleme
İçerik ve geniş içerikler için varsayılan genişlikler ekleme
Özel CSS kodları ekleme
Şablon parçaları ekleme

Temaya bir theme.json dosyası eklendiğin Şablon Editörü özelliği gelir.

WordPress-Blok-block-tabanlı-tema-tasarımı-site-düzenleyici-yeni-şablon-editörü-ile-şablon-ekle-düzenle-

Bir Theme.json Dosyası Nasıl Oluşturulur?

İpucu: Theme.json dosyası ile çalışırken yaptığınız ayarların etkilerini daha çabuk görmek için cache (belleğe alma) özelliğini devre dışı bırakabilirsiniz. Ayrıca aldığınız hataları görmek isterseniz, wp-config.php dosyasını açarak, WP_DEBUG veya SCRIPT_DEBUG değerlerini “true” yapabilirsiniz.

Blok temanızın ana dizininde theme.json adında bir dosya oluşturun.

Dosyanın içine bir süslü parantez açın ve kapatın (Bu dosya bir json dosyasıdır ve dosya içeriği bir json nesnesi olmak zorundadır.). Parantezlerin arasına önce bu dosyanın şemasını ve versiyonunu girelim:

{
 "$schema": "https://schemas.wp.org/trunk/theme.json",
 "version": 2
}

Bunların dışında bu dosyanın iki temel bölümü vardır:

settings: Hem bloklar hem de temanın ayarları için kullanılabilir.
styles: Hem bloklar hem de temanın stilleri için kullanılabilir.

Bu iki bölüm şöyle yer alır:

{
 "$schema": "https://schemas.wp.org/trunk/theme.json",
 "version": 2,
 "settings": {},
 "styles": {}
}

Yapacağınız ayar temayı ilgilendiren bir ayarsa (global ayarlar), ilgili bölümün doğrudan elemanı olarak girilir. Mesela temanın renk ayarı şöyle yapılır:

{
	"settings": {
		"color": { ... }, // Global ayarlar
	}
}

Bloklar ile ilgili bir ayar yapacaksanız, settings bölümüne bir blocks elemanı girip bunu elemanın içini kullanmalısınız. Blocks elemanında hangi bloğun ayarlarını yapacaksanız o bloğun adı ile bir eleman oluşturup o elemanın içinde dilediğiniz ayarları yapabilirsiniz:

{
	"settings": {
		"color": { ... }, // Global ayarlar
		"blocks": {
			"core/group": { 
				"color": { ... }, // Grup bloğunun renk ayarları
				"typography": { ... } // Grup bloğunun tipografi ayarları
			}
		}
	}
}

Önceden Ayarlanmış Değerler (Preset Values)

Theme.json dosyası ile, bir takım ön tanımlı ve varsayılan bir değeri olan değişkenler oluşturabiliriz. Bu değişkenler; WordPress blok editöründe gördüğümü blok ayarlarında veya temamızın CSS kodlarında kullanılır. Mesela, blokların renk seçimlerini yaparken kullandığımız renk paleti (color palette) buna bir örnektir. Bu paletteki gördüğümüz renk değerleri, theme.json dosyasından gelir.

Aşağıdaki örnekte, renk paletinde (palette) sunulmak üzere ayarlanmış bir siyah renk görüyorosunuz:

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "Black",
                    "slug": "black",
                    "color": "#000000"
                }
            ]
        }
    }
}

Yukarıdaki kod ile temamızın body elemanında şöyle CSS değişkeni yaratılır:

--wp--preset--color--black: #000000;

Temamızın HTML <body> elemanında oluşan değişken:

Aşağıdaki kod, WordPress’in paragraf bloğunun renk paletinde bir mavi renk oluşturur:

{
    "version": 2,
    "settings": {
            "blocks": {
                "core/paragraph": {
                    "color": {
                        "palette": [
                            {
                                "name": "Blue",
                                "slug": "blue",
                                "color": "#0000FF"
                            }
                        ]
                    }
                }
            }
        }
    }        
}

Bu koda, ilgili paragraf bloğunda kullanılmak üzere şu CSS değişkenini oluşturacaktır:

--wp--preset--color--blue: #0000FF;

Özel Değerler (Custom Values)

CSS değişkenlerinde kullanılmak üzere özel değişkenler oluşturabiliriz. Bu değişkenler settings.custom bölümünde (veya settings.blocks.BLOCKNAME.custom bölümünde) oluşturulur. Oluşurulan bu değerler theme.json dosyasının veya temanın CSS’nin istenilen yerinde kullanılabilir.

{
    "version": 2,
    "settings": {
            "custom": {
                "rengim": "red"
            },
            "blocks": {
                "core/paragraph": {
                    "custom": {
                        "rengim": "green"
                    }
                }
            }
        }
    }        
}

Yukarıdaki kod, --wp--custom--rengim adında bir CSS değişkeni oluşturur. Bu değişkenin değeri de “red” olarak ayarlanır. Fakat “core/paragraph” bloklarına değişken “green” değerini alır.

Bütün Temalara Bir theme.json Dosyası Eklenebilir

Theme.json dosyası, blok temalarda olduğu gibi klasik temalarda da çalışır fakat klasik editör ile çalışmaz.

Eğer var olan temanıza bir theme.json dosyası eklerseniz; temanızdaki ve theme.json dosyasındaki CSS kodlarının birbirinin tekrarı olmaması için bir temizlik yapmalısınız.

Ek olarak, “full” ve “wide” bloklar için hizalama mekanizması, bir theme.json mevcut olduğunda farklı çalışır ve dikkate alınmalıdır.

Theme.json ve Add_theme_support Rekabeti

Theme.json dosyasında yapılan ayarlar add_theme_support() fonksiyonu ile de yapılabilir. Mesela, renk paletini functions.php dosyasına ekleyeceğimiz şu kod ile de ayarlayabiliriz:

function benimtemam_setup_theme_supported_features() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name'  => esc_attr__( 'strong magenta', 'themeLangDomain' ),
            'slug'  => 'strong-magenta',
            'color' => '#a156b4',
        ),
        array(
            'name'  => esc_attr__( 'light grayish magenta', 'themeLangDomain' ),
            'slug'  => 'light-grayish-magenta',
            'color' => '#d0a5db',
        ),
        array(
            'name'  => esc_attr__( 'very light gray', 'themeLangDomain' ),
            'slug'  => 'very-light-gray',
            'color' => '#eee',
        ),
        array(
            'name'  => esc_attr__( 'very dark gray', 'themeLangDomain' ),
            'slug'  => 'very-dark-gray',
            'color' => '#444',
        ),
    ) );
}

add_action( 'after_setup_theme', 'benimtemam_setup_theme_supported_features' );

Eğer aynı ayarı theme.json dosyası ile de yapmışsak, öncelik bu json dosyasının ayarlarında olacaktır.

Settings

Theme.json dosyasının iki temel bölümünden biri settings bölümüdür. Bu bölüm ile yapılabilecek bazı ayarlar şunlardır.

Renk Ayarları

WordPress-Blok-block-tabanlı-tema-tasarımı-theme-json-palette-color-renk-paleti-ayarları

3 çeşit renk ayarı vardır. Bu ayarlar, blok editörde, blokların renklerini ayarlamak istediğimizde karşımıza çıkar. Bunlar şunlardır:

palette: “Solid” sekmesinde “TEMA” adında bir renk paleti oluşturmaya yarar.
gradients: “Gradient” sekmesinde “TEMA” adında bir renk paleti oluşturmaya yarar.
duotone: Aşağıdaki resimde görüldüğü gibi bazı bloklarda “Çift ton filtresini uygula” penceresindeki “ÇİFT TON” paletine renk eklemeye yarar.

Aşağıdaki kod, theme.json dosyası ile bütün bu renk ayarlarını global olarak nasıl yapacağımıza bir örnektir:

{
    "version": 2,
        "settings": {
            "color": {
                "palette": [
                    {
                        "slug": "purple",
                        "color": "#D1D1E4",
                        "name": "Purple"
                    },
                    {
                        "slug": "yellow",
                        "color": "#EEEADD",
                        "name": "Yellow"
                    }
                ],
                "gradients": [
                    {
                        "slug": "purple-to-yellow",
                        "gradient": "linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--yellow))",
                        "name": "Purple to Yellow"
                    }
                ],
                "duotone": [
                    {
                        "slug": "purple-and-yellow",					
                        "colors": [ "#D1D1E4", "#EEEADD" ],
                        "name": "Purple and yellow"
                    }
                ]
            }
        }
    }
}

Tipografi (Yazı Düzeni) Ayarları

WordPress-Blok-block-tabanlı-tema-tasarımı-theme-json-tipografi-ayarları

Theme.json dosyası ile metin girebildiğimiz blokların “Tipografi” ayarları oluşturabiliriz.

Aşağıdaki kod, “Tipografi” ayarlarından “BOYUT” kısmı için global ayarlar oluşturur:

{
	"version": 2,
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"slug": "small",
					"size": "1rem",
					"name": "Small"
				},
				{
					"slug": "medium",
					"size": "1.5rem",
					"name": "Medium"
				}
			]
		}
	}
}

Yerleşim (Layout)

Bu ayar klasik temalardaki add_theme_support( 'align-wide' ) ayarının karşılığıdır.

Layout ayarı, aşağıda verildiği gibi, iki key: value çiftinden oluşur:

{
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "650px",
			"wideSize": "1200px"
		}
	}
}

Layout ayarlarına verdiğimiz değerler, temamızın <body> tagında 2 adet CSS değişkeni oluşturur:

--wp--style--global--content-size
--wp--style--global--wide-size

WordPress-Blok-block-tabanlı-tema-tasarımı-theme-json-genişlik-width-ayarları-içerik-geniş-

Yerleşim (layout) ayarı, editörde çalışırken şu 2 yerde karşımıza çıkar:

“Grup” bloğu “grup” varyasyonunda, “İç bloklar içerik genişliğini kullanır” ayarı seçili iken, “İÇERİK” ve “GENİŞ” ayarları şeklinde (aşağıdaki şekilde çerçeve içinde gösterilmiştir):
- “İÇERİK” ve “GENİŞ” değerleri, “Grup” bloğunun içine eklediğimiz bloklara verilecek maksimum genişlik (max-width) değerlerinde kullanılır.
  - “İÇERİK” değeri: Burayı boş bırakırsak, theme.json dosyasında, "layout" ayarlarında belirlediğimiz "contentSize" değeri kullanılır.
  - “GENİŞ” değeri: Burayı boş bırakırsak, theme.json dosyasında, "layout" ayarlarında belirlediğimiz "wideSize" değeri kullanılır.

“Grup” bloğu grup varyasyonunda ise ve “İÇERİK” ve “GENİŞ” ayarlarından en az biri belli ise, grup bloğunun içine eklediğimiz blokların “Toolbar” menülerinin “Hizala” ayarlarında:
- “Hizala” ayarı ile bir bloğun içinde bulunduğu “Grup” bloğuna bağlı olarak genişliğini (max-width değerlerini) ayarlarız.
- “Hizala” menüsünde karşımıza çıkan genişlik seçenekleri, “İÇERİK” ve “GENİŞ” değerlerini kullanır. Şöyle:
  - Hiçbiri: Bu seçenek “İÇERİK” olarak verdiğimiz genişlik değerini kullanır.
    - Bloğum maksimum genişliği “İÇERİK” değeri kadar olacaktır.
      - Eğer temanın bir "contentSize" ayarı yaksa, onun yerine "wideSize" ayarı kullanılacaktır.
    - Bu seçeneğin varsayılan değeri “layout” ayarlarındaki “contentSize": "650px" değeridir.
    - Dilersek, içinde bulunduğumuz “Grup” bloğunun blok ayarlarından özel bir “İÇERİK” değeri de belirleyebilir.
    - Bu ayar temamızda şöyle bir CSS kodu oluşturur:
  - Büyük genişlik: Bu seçenek “GENİŞ” olarak verdiğimiz genişlik değeri kullanır.
    - Bloğum maksimum genişliği “GENİŞ” değeri kadar olacaktır.
    - Bu seçeneğin varsayılan değeri “layout” ayarlarındaki "wideSize": "1200px" değeridir.
    - Eğer temanın bir "wideSize" ayarı yoksa bu seçenek görünmeyecektir.
    - Dilersek, içinde bulunduğumuz “Grup” bloğunun blok ayarlarından özel bir “GENİŞ” değeri de belirleyebilir.
    - Bu ayar bloğa "alignwide" CSS sınıfını ekler ve temamızda şöyle bir CSS kodunu oluşturur:
  - Tam genişlik: Bu seçenek, genişlik değerini otomatik yapar. Yani blok, içinde bulunduğu bloğun tamamını kaplar.
    - Bu ayar, bloğa "alignfull" CSS sınıfını ekler.
    - Temamızda bir CSS kodu oluşturmaz.

Bu ayarı yapmazsak, web sitemizin sayfalarında bulunan ana bloklar, tam genişlikte ve sola dayalı şekilde görünecektir.

Boyutlar (Spacing)

Bloklara “DOLGU” boşluğu (padding), “KENAR” boşluğu (margin) ve bu boşluklar için kullanacağımız birimleri ayarlamaya yarar. “Boyutlar” ayarları, theme.json dosasında bir kodlama yapılmasa da varsayılan olarak zaten çalışır.

Aşağıdaki kodlar, “DOLGU” ve “KENAR” boşlukları ayarlarını açar ve bu boşluklara özel değerler verirken kullanabileceğimiz birimler belirler:

{
	"version": 2,
	"settings": {
		"spacing": {
			"padding": true,
			"margin": true,
			"units": [ "px", "em", "rem", "vh", "vw", "%" ]
		}
	}
}

Biz hiç bir ayar yapmasak da WordPress aşağıdaki tabloda verilen boyut/boşluk ayarları ile birlikte gelir:

Özel CSS Yapısı	CSS Değeri	Etiketi
`–--wp--preset--spacing--20`	`0.44rem`	2X-Small
`--wp--preset--spacing--30`	`0.67rem`	X-Small
`--wp--preset--spacing--40`	`1rem`	Small
`--wp--preset--spacing--50`	`1.5rem`	Medium
`--wp--preset--spacing--60`	`2.25rem`	Large
`--wp--preset--spacing--70`	`3.38rem`	X-Large
`--wp--preset--spacing--80`	`5.06rem`	2X-Large

Dilersek, temamızın bazı bloklarında bu değerleri kullanabiliriz:

{
    "version": 2,
    "styles": {
        "blocks": {
            "core/heading": {
                "spacing": {
                    "margin": {
                        "top": "var( --wp--preset--spacing--60 )",
                        "bottom": "var( --wp--preset--spacing--40 )"
                    }
                }
            }
        }
    }
}

Bize Özel Boyut Skalası

WordPress, tema tasarımcılarına, yukarıdaki tabloda verilen --wp--preset--spacing--{int} değerlerini özelleştirmemize izin verir. Bunun için “spacing” ayarına bir “spacingScale” objesi eklememiz gerekmektedir. Aşağıdaki kod, buna bir örnektir:

{
    "version": 2,
    "settings": {
        "spacing": {
            "spacingScale": {
                "operator": "+",
                "increment": 0.25,
                "steps": 5,
                "mediumStep": 0.75,
                "unit": "rem"
            }
        }
    }
}

Özel bir “spacingScale” objesi kodlarken kullandığımız alt-ayarlar ve anlamları şöyledir:

operator: Skalayı arttırmak için kullanılan operatördür.
- Varsayılan değeri * (çarpma) dır.
- Çarpma dışında + (toplama) değerini de alabilir.
increment: Arttırma miktarıdır.
- Operatörde belirtilen işlemde yer alır.
- Varsayılan değeri 1.5’dr.
steps: Skaladaki adım sayısıdır.
- Varsayılan değeri 7’dir.
mediumStep: Skalanın ortasındaki değerdir.
- Varsayılan değeri 1.5’dir.
unit: Arttırmada kullanılan birimdir.
- Alabileceği değerler şunlardır: px, em, rem, vh, vw, ve %.
- Varsayılan değeri rem dir.

Yukarıdaki kodda:

mediumStep değeri her zaman --wp--preset--spacing--50 değişkenine verilir.
Buna bağlı olarak diğer değerlere karşılık gelen değişkenler, bu değişkenin sonundaki sayı 10’ar arttırılarak/azaltılarak oluşturulur:
- --wp--preset--spacing--20
- --wp--preset--spacing--30
- --wp--preset--spacing--40 gibi
En küçük değişken adının sonundaki numara 10’dan küçük olamaz.
- En küçük değişken: --wp--preset--spacing--10
10 adımdan daha fazla olan skalalarda, en küçük değer kullanılamaz.
- Çünkü; mediumStep değeri her zaman --wp--preset--spacing--50 değişkenine verilir.

“spacingSizes” dizisi, kendimize özel bir skala yaratmamızı sağlar. Aşağıdaki kod ile özel bir boyut skalası yaratıyoruz:

{
    "version": 2,
    "settings": {
        "spacing": {
            "spacingSizes": [
                {
                    "name": "Step 1",
                    "size": "0.25rem",
                    "slug": "10"
                },
                {
                    "name": "Step 2",
                    "size": "0.5rem",
                    "slug": "20"
                },
                {
                    "name": "Step 3",
                    "size": "0.75rem",
                    "slug": "30"
                },
                {
                    "name": "Step 4",
                    "size": "1rem",
                    "slug": "40"
                },
                {
                    "name": "Step 5",
                    "size": "1.25rem",
                    "slug": "50"
                }
            ]
        }
    }
}

Özel bir skala eklerken, “spacingSizes” dizisinin her bir elemanı 3 ayardan oluşan bir objedir. Bu ayarlar ve anlamları şöyledir:

name: Adımın adıdır.
size: Adıma karşılık gelen boyuttur.
- Bu ayarın değerinde, clamp() fonksiyonun izin verilir.
- Yani şöyle: "size": "clamp(1.5rem, 5vw, 2rem)"
slug: --wp--preset--spacing--{slug} değişkeninde kullanılacak olan sayıdır.

WordPress, tema tasarımcılarına, “spacingScale” ayarından ziyade “spacingSizes” ayarını kullanmalarını tavsiye etmektedir.

Özel Sapcing Ayarlarını Devre Dışı Bırakma

Tema tasarımcıları, kendi belirledikleri “spacing” ayarlarının dışında özel ayarların kullanılmasını engelleyebilirler. Bunu yapmak için, “customSpacingSize” ayarını false (varsayılan olarak true) olarak ayarlamaları gerekir.

Aşağıdaki kod bu işi yapmaktadır:

{
    "version": 2,
    "settings": {
        "spacing": {
            "customSpacingSize": false
        }
    }
}

Ayarları Açma/Devre Dışı Bırakma

“Settings” bölümünde blokların bazı ayarlarını açabiliriz veya açıksa devre dışı bırakabiliriz.

Aşağıdaki ayarlar, varsayılan olarak açıktır:

Custom colors (The color picker): Özel solid renkler (Renk ayarı)
Custom duotone (The color picker): Özel duotone renkler (Renk ayarı)
Custom gradient (The color picker): Özel gradient renkler (Renk ayarı)
Custom font size: Özel BOYUT (Tipografi ayarı)
Drop cap: HARF DURUMU (Tipografi ayarı)

Bu ayarları kapatmak istersek, “color” ayarlarında karşılarına false değer vermemiz gerekir.

Aşağıdaki kod; özel solid ve özel gradient renk ayarlarını kapatır:

{
	"version": 2,
	"settings": {
		"color": {
			"custom": false,
                        "customGradient": false
                 }
         }
}

Aşağıdaki kod; “HARF DURUMU” ayarını kapatır:

{
	"version": 2,
	"settings": {
		"typography": {
			"dropCap": false
                 }
         }
}

Aşağıdaki ayarlar varsayılan olarak devre dışıdır:

Link color: Bağlantı rengi (Renk ayarı)
Padding and margin: DOLGU ve KENAR (Boyutlar ayarları)
Custom line-height: SATIR YÜKSEKLİĞİ (Tipografi ayarları)

Bu ayarları bir defada açmak için “appearanceTools” ayarını true yapabiliriz:

{
	"version": 2,
	"settings": {
		"appearanceTools": true,
         }
}

Aşağıdaki kod; “Bağlantı rengi” ve SATIR YÜKSEKLİĞİ ayarların açar:

{
	"version": 2,
	"settings": {
		"color": {
			"link": true
                 },
                "typography": { 
                         "lineHeight": true
                }
         }
}

Stiller (Styles)

Tıpkı ayarlarda olduğu gibi; global stiller yani web sitemizin <body> tagına uygulanacak stiller, “styles” bölümünün kök dizinine kodlanır.

Aşağıdaki kod, global olarak “color“, “typography” ve “spacing” stillerini vermektedir.

{
    "version": 2,
    "settings": { ... },
    "styles":{
        "color":{
            "background":"var(--wp--preset--color--white)",
            "text":"var(--wp--preset--color--black)"
        },
        "typography":{
            "fontSize":"1.5rem",
            "fontFamily":"var(--wp--preset--font-family--system-fonts)",
            "lineHeight":"1.5"
        },
        "spacing":{
            "margin":{
                "top":"0px",
                "right":"0px",
                "bottom":"0px",
                "left":"0px"
            }
        }
    }
}

Bir bloğa özel olarak verilecek stiller, styles.blocks.BLOCKNAME dizinine kodlanır.

Aşağıdaki kod; “Yazı başlığı” ve “Paragraf” bloklarına özel stiller vermektedir:

{
    "version": 2,
    "settings": { ... },
    "styles": {
        "blocks": {
            "core/post-title": {
                "typography": {
                    "fontSize":"var(--wp--preset--font-size--extra-large)"
                }
            },
            "core/paragraph": {
                "typography": {
                    "fontSize":"var(--wp--preset--font-size--normal)"
                }
            }
        }
    }
}

Theme.json Elemanları (Elements)

Bloklar, birden çok HTML elemanına sahip olabilirler. “elements” nesnesi, bloğun içindeki farklı HTML elemanlarına özgü stiller vermemize olanak tanır.

Aşağıdaki kod; “Başlık” bloğunun içinde bulunan bağlantıların “color” ve “spacing” stillerini ayarlamaktadır:

{
    "version": 2,
    "settings": { ... },
    "styles": {
        "blocks": {
            "core/post-excerpt": {
                "elements": {
                    "link": {
                        "color": {
                            "background": "var(--wp--preset--color--light-grey)"
                        },
                        "spacing": {
                            "padding": {
                            "top": "calc(.667em + 2px)",
                            "right": "calc(1.333em + 2px)",
                            "bottom": "calc(.667em + 2px)",
                            "left": "calc(1.333em + 2px)"
                        }
                    }
                }
            }
        }
    }
}

Şablon Parçalarını Kaydetme

Tema dosyalarında oluşturduğunuz şablon parçalarını, editörde görünür yaparak dilediğiniz yerde kullanabilirsiniz. Bunun için şablon parçasını theme.json dosyasına kaydetmeniz gerekmektedir.

Şablon parçaları, theme.json dosyasında “templateParts” dizisine kaydedilir.

Bir şablon parçası şu parametreler ile kaydedilir:

name: Şablon parçası dosyasının ismidir.
- mesela benim-sablon-parcam.html dosyası için bu ayar şöyle olur:
  - "name": "benim-sablon-parcam"
title: Şablon parçasının blok editörde görünen ismidir.
area: Şablon parçasının blok editörde yer aldığı şablon bölümüdür.

Aşağıdaki kod; tema dosyaların parts klasöründe yaratılan farklı Header şablonları ve bir Footer eklemektedir (Twenty Twenty-Two temasından):

"templateParts": [
	{
		"name": "header",
		"title": "Header",
		"area": "header"
	},
	{
		"name": "header-large-dark",
		"title": "Header (Koyu, geniş)",
		"area": "header"
	},
	{
		"name": "header-small-dark",
		"title": "Header (Koyu, küçük)",
		"area": "header"
	},
	{
		"name": "footer",
		"title": "Footer",
		"area": "footer"
	}
]

Özel Şablonları Tanıtma

Klasik temalarda, sayfalar için tasarladığımız özel şablonlar, dosya isimleri ile tanımlanırdır.

Blok temalarda, blok şablonlarınızı theme.json dosyasında listeleyebilirsiniz. Bunu yapmak için “customTemplates” dizisini kullanmalısınız.

Özel bir şablon şu parametreler ile kaydedilir:

name: Şablon dosyasının ismidir.
- mesela benim-sablon-parcam.html dosyası için bu ayar şöyle olur:
  - "name": "benim-sablon-parcam"
title: Şablon parçasının blok editörde görünen ismidir.
postType: Şablonun hangi içerik tipleri için kullanılabileceğini belirtir.
- Bir dizidir. Her bir elemanı bir içerik tipidir.
- İsteğe bağlıdır.

Aşağıdaki kod; 2 adet özel şablon ekler:

"customTemplates": [
    {
        "name": "page-home",
        "title": "Page without title"
    },
    {
        "name": "page-contact",
        "title": "Contact",
        "postTypes": [ "page" ]
    }
]

Global Stil Değişkenleri (Global Styles Variations)

Bir tema birden fazla json dosyasına sahip olabilir ve bu dosyalar üst düzey stil ayarları içerebilir. Bu json dosyaları ile oluşturduğumuz stiller, “Site Düzenleyicisi (Görünüm->Düzenleyici)” sayfasında “Stiller” sütununda ve “Biçimlere göz atın” menüsünde listelenir:

WordPress-Blok-block-tabanlı-tema-tasarımı-theme-json-global-settings-ayarlar

Aşağıda, Twenty Twenty Three temasının “Biçimlere göz atın” menüsünü görüyorsunuz:

WordPress-Blok-Tema-Kodlama-Site-Düzenleyicisi-Stiller-Biçimlere-göz-atın-global-stiller-

“Biçimlere göz atın” sayfasında “Varsayılan” olarak yer alan biçim theme.json dosyasıdır. Diğer biçimlerin her biri ise oluşturduğunuz diğer json dosyalarından birine karşılık gelir.

Temamız için, global düzeyde farklı biçimlendirmeler oluşturmak ve bu biçimleri “Biçimlere göz atın” menüsünde görmek/kullanmak istersek şunlara dikkat etmeliyiz:

Bu özellik WordPress 6.0 ve üzerinde çalışır.
Temanın varsayılan theme.json dosyası ana dizinde yer almalıdır ve versiyon 2 olduğu belirtilmelidir.
Diğer json dosyaları ana dizinde oluşturulan styles dizininde oluşturulmalıdır.
styles dizinindeki her bir json dosyası bir biçimlendirme için kullanılacaktır.

Aşağıda Twenty Twenty Three temasının styles dizinini görüyorsunuz:

WordPress-Blok-block-tabanlı-tema-tasarımı-theme-json-global-settings-ayarları-styles-dizini

Aşağıda Twenty Twenty Three temasının styles dizinindeki electric.json dosyasının kodlarını görüyorsunuz:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"title": "Electric",
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#f3f3f1",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#2500ff",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#f3f3f1",
					"name": "Primary",
					"slug": "primary"
				},
				{
					"color": "#2500ff",
					"name": "Secondary",
					"slug": "secondary"
				},
				{
					"color": "#f6f6f6",
					"name": "Tertiary",
					"slug": "tertiary"
				}
			]
		}
	},
	"styles": {
		"elements": {
			"button": {
				"border": {
					"style": "solid",
					"width": "2px",
					"color": "var(--wp--preset--color--contrast)"
				},
				"color": {
					"background": "var(--wp--preset--color--contrast)",
					"text": "var(--wp--preset--color--base)"
				},
				"spacing": {
					"padding": {
						"top": ".667em",
						"right": "1.333em",
						"bottom": ".667em",
						"left": "1.333em"
					}
				},
				":active": {
					"typography": {
						"textDecoration": "underline dotted"
					}
				},
				":focus": {
					"typography": {
						"textDecoration": "underline dotted"
					}
				},
				":hover": {
					"border": {
						"color": "var(--wp--preset--color--contrast)",
						"style": "solid",
						"width": "2px"
					},
					"color": {
						"background": "var(--wp--preset--color--base)",
						"text": "var(--wp--preset--color--contrast)"
					}
				},
				":visited": {
					"color": {
						"text": "var(--wp--preset--color--base)"
					}
				}
			},
			"link": {
				":focus": {
					"typography": {
						"textDecoration": "underline dotted"
					}
				},
				":active": {
					"typography": {
						"textDecoration": "underline dotted"
					}
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--dm-sans)"
		}
	}
}

Yukarıda verilen json dosyasında da gördüğümüz global biçimlendirme için oluşturacağımız json dosyalarının bir “title” özelliği vardır. Bu özelliğe vereceğimiz değer, bu özelliğin editörde görünene adı olacaktır. Eğer böyle bir özellik girmezsek, WordPress json dosyasının adını “title” özelliğine değer olarak verecektir.

Sonuç

Theme.json dosyasında yapılabilecekler burada bahsettiklerimizden ibaret değildir. Bu yazı, bu dosyanın ne işe yaradığını, hangi durumlarda bu dosyaya başvurmamız gerektiğini anlamamızı sağlamayı amaçlamaktadır. Bunları kavradığımızda, ihtiyaç duyacağımız ayarları kodlamakta güçlük çekmeyeceğinize inanıyorum.

WordPress

WordPress Blok Tabanlı Tema Kodlama

WordPress Blok Tabanlı Tema Kodlama

Tanıtım

Detaylı Anlatım

Online Kimya Özel Dersi Al