Klasik bir temayı bir blok temaya dönüştürmenin bir çok faydası vardır. Fakat yine de göz ardı edilmemesi gereken bazı sorunlar da yok değildir:

• Klasik bir temayı dönüştürmek, yavru temaları (child themes) etkileyebilir.
• theme.json dosyası, WordPress 5.8 ve sonrasını gerektirmektedir.
• WordPress 5.8 ile birlikte, İnternet Explorer 11 desteği da son bulmuştur. Temanızın böyle bir zorunluluğu varsa muhtemelen görünüşü bu değişiklikten etkilenecektir.

Aşamalı Olarak Site Düzenleyicisini Etkinleştirme

Klasik bir temaya aşamalı olarak “Site Düzenleyici (Görünüm -> Düzenleyici)” özelliklerini kazandırmanın birden çok yolu vardır:

Universal Temalar

Universal tema demek, yönetim panelinde, “Görünüm -> Özelleştir” sayfası olan (Customizer API kullanan) tema demektir. Blok temalarda bu özellik yoktur. Universal bir temayı özelleştirmek için Customizer API kullanılır.

Customizer API hakkında detaylı bilgi almak isterseniz şuradan başlayabilirsiniz: 5. Bölümün (Customizer API Yazı Dizisinin) Tanıtımı

Hibrit Temalar

Hibrit temalar da aslında klasik temalardır fakat “Site Düzenleyici” özellikleri de vardır. Bu yüzden bir theme.json dosyaları ve “şablon editörü” özellikleri de bulunur. Mesela bu temalarda, theme.json dosyası ile renk ayarlarını kodlayıp bir renk paleti oluşturabilir veya sitenizin yerleşim (layout) ayarlarını yapabilirsiniz.

Not: Temaya theme.json dosyası eklemek, global stilleri kullanıma açar fakat blokların stillendirme ara yüzünü kullanıma sokmaz.

Blok Ayarlarını Kullanıma Sokmak

Klasik Temalara theme.json Dosyası Ekleme

Klasik bir temanın (WordPress 5.8 ve üzerinde iken) ana dizinine bir theme.json dosyası eklediğimizde dosya kullanılmaya başlanacaktır. Bu işlemden sonra, klasik temaların funcitons.php dosyasında add_theme_support() fonksiyonu ile eklediğimiz özelliklere daha fazla ihtiyaç kalmaz. Çünkü bu özellikler artık theme.json dosyası ile düzenlenebilir. Unutmayın, aynı özellik için hem add_theme_support ile hem de theme.json dosyasını kullanırsak öncelik theme.json dosyasındadır.

Klasik Temalara Blok Modelleri Ekleme

Blok modelleri, belli bir amaca göre dizayn edilmiş ve o şekilde kaydedilmiş bloklardır. Web sitesinin herhangi bir yerinde kullanılabilirler.

Mesela klasik temalarda, Customizer API yardımı ile, sidebar kullanma seçeneği sunulabilmektedir. Bu seçenek ile tek sütun ya da iki sütunlu sayfa düzenleri oluşturmak mümkün olabilmektedir. Aynı şeyi, bir blok modeli oluşturarak da yapabiliriz.

Blok Modelleri Nasıl Oluşturulur?

Blok modeli oluşturmak için register_block_pattern() fonksiyonundan yararlanırız. Argümanlarını girdikten sonra da fonksiyonu, "init" kancası ile çağırırız.

Aşağıdaki örnek “Buton çifti” adında bir blok modeli kodlamaktadır:

functions.php

function sc_add_button_block_pattern() {
	register_block_pattern(
		'my-plugin/buton-cifti',
		array(
			'title'       => __( 'Buton çifti', 'my-plugin' ),
			'description' => _x( 'Sitecenneti ile biraz önce deneme amaçlı eklendi.', 'Block pattern description', 'my-plugin' ),
			'content'     => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">" . esc_html__( 'Button One', 'my-plugin' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">" . esc_html__( 'Button Two', 'my-plugin' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
		)
	);
}
add_action( 'init', 'sc_add_button_block_pattern' );

Yukarıdaki kodda görülen “content” elemanının değeri bloğumuzun HTML formatındaki yapısıdır. Bir bloğun HTML yapısına ulaşmak için bloğun hemen üzerinde gördüğümüz blok tools kısmından bulunan “Ayarlar” menüsündeki “Bloğu kopyala” seçeneğini kullanabiliriz. Bu şekilde bloğun HTML yapısını kopyalamış oluruz ve dilediğimiz yere yapıştırabiliriz:

Bu kodlar temamıza eklendiğinde, artık dilediğimiz sayfa ya da içerikte kullanabileceğimiz bir model oluşturmuş oluruz. Oluşturduğumuz modeli kullanmak sitersek, blok editörde iken “Blok ekleyici” butonuna basıp, “Modeller” sekmesindeki listeden “Genel” kategorisine bakmamız gerekmektedir:

register_block_pattern() fonksiyonu 2 argüman alır. Bunlar şunlardır:

1. title: Makine dilinde bir başlıktır.
   • namespace/title formatında olmalıdır.
   • Örnek: benim-temam/buton-cifti
2. properties: Oluşturacağımız modelin detaylarını girdiğimiz argümandır. Bir çeşit dizidir (array) ve elemanları da şunlardır:
   • title (zorunlu): İnsan dilinde bir başlıktır.
     • Modelimizi burada verdiğimiz başlık ile ararız.
   • content (zorunlu): Modelimizin HTML yapısıdır.
     • Bir bloğun HTML yapısını bulmanın kolay yolu bloğumuz şekillendirdikten sonra üzerindeki Toolbarda bulunan 3 noktaya tıklayım “Bloğu kopyala” seçeneğine basmaktır. Bu şekilde kopyalanan HTML yapısını bu elemanın karşısına yapıştırabiliriz.
   • description: Bloğumuzun hangi amaçla oluşturulduğunu açıklayan kızımdır. Zorunlu olmasa da şiddetle tavsiye edilir. Başlığımız yeterince açıklayıcı değilse, kullanıcılarımız modelimizi ararken buradaki ifadeler de taranacaktır.
   • categories: Blok ekleyicisinde blok modelleri belli kategoriler halinde sunulur. Oluşturduğumuz modelin hangi kategorilerde gösterileceğini bir dizi şeklinde bu ayar ile belirtiriz.
     • Bu ayarı pas geçersek, modelimiz “Genel” kategorisinde gösterilecektir.
     • WordPress 6.2 ile birlikte gelen model kategorileri şunlardır:
       • about: Deneyimler
       • Call to action: Eylem çağırısı
       • Contact: İletişim
       • Footers: Alt kısımlar
       • Headers: Üst kısımlar
       • Media: Galeri
       • Portfolio: Portfolyo
       • Posts: Yazılar
       • Services: Servisler
       • Team: Takım
       • Testimonials: Metin
   • keywords: Arama esnasında modelimizin bulunabilmesini sağlamak için anahtar kelimeler dizisidir.
   • viewportWidth: Blok ekleyicisinde gösterilirken, bloğun genişliğini dilersek burada ayarlayabilir.
     • Integer tipinde değer alır.
   • blockTypes: Modelimizin hangi blokların içinde kullanılabileceğini belirleyen bir dizidir.
     • Dizinin her bir elemanı bloğun bilgisayar dilindeki adıdır.
   • postTypes: Modelimizin hangi içerik tiplerinde görüneceğini belirlediğimiz bir dizidir.
     • Modelimiz, bu dizide belirttiğimiz içerik tipleri haricinde görüntülenmeyecektir.
   • templateTypes: Bloğumuzun hangi şablon dosyalarına gösterileceğini belirten bir dizidir.
     • Mesela bu diziye “404” elemanını girersek modelimiz sadece 404.php şablonunda görünür; “single-post” girersek de sadece yazılarımızda görünür.
   • inserter: Modelimizin blok ekleyicisinde görünüp görünmeyeceğini belirleyen, boolean tipinde bir elemandır.
   • source: Modelimizin kodlandığı kaynak tipidir.
     • Modelimiz bir eklenti tarafından oluşturulmuşsa “plugin“, tema dosyalarında oluşmuşsa “theme” değerini alır.

Bir blok modelini kaldırmak istersek unregister_block_pattern() fonksiyonunu şu şekilde kullanmalıyız:

function sc_delete_button_block_pattern() {
	unregister_block_pattern( 'my-plugin/buton-cifti' );
}
add_action( 'init', 'sc_delete_button_block_pattern' );

Blok Modelleri İçin Kategori Ekleme

Blok modelleri için bir kategori eklemek istersek register_block_pattern_category fonksiyonunu kullanırız.

Aşağıdaki kod; Site Cenneti adında bir kategori ekler:

function sc_register_my_pattern_categories() {
	register_block_pattern_category(
		'site-cenneti',
		array( 'label' => __( 'Site Cenneti', 'my-plugin' ) )
	);
}
add_action( 'init', 'sc_register_my_pattern_categories' );

Eklediğimiz bloğu kaldırmak istersek şu kodu kullanırız:

function sc_unregister_my_pattern_categories() {
	unregister_block_pattern_category( 'site-cenneti' );
}
add_action( 'init', 'sc_unregister_my_pattern_categories' );

Şablon Editörünü Etkinleştirme/Devre Dışı Bırakma

Klasik bir temada şablon editörünü etkinleştirmenin 2 yolu vardır:

• Temaya theme.json dosyası ekleme
• Temanın functions.php dosyasına add_theme_support( 'block-templates' ); kodunu ekleme.
  • Bu kodu eklediğimizde blok editörde sağ tarafındaki ayarlar sütununda ve Şablon ayarında şöyle bir “Şablon ekle” butonu görünür:
    
    • Bu buton bizi şablon editörüne yönlendirecektir.

Şablon editörünü devre dışı bırakmak istersek aşağıdaki kodu kullanabiliriz:

remove_theme_support( 'block-templates' );

Şablon Parçası Desteği

Aşağıdaki kod; klasik bir temanın şablon parçası editörüne kavuşmasını sağlar:

add_theme_support( 'block-template-parts' );

Bu kodu ekledikten sonra klasik temanın yönetim panelinde “Görünüm -> Şablon parçaları” menüsü aktif olacaktır. Bu menü bizi doğrudan “Site Düzenleyicisi” ne yönlendirecektir. Bu editör yadımı ile yeni şablon parçaları oluşturmak ve var olanları düzenlemek mümkün olacaktır.

Şablon Parçası Dosyalarını Çağırma

Klasik temalarda şablon parçası oluşturduğumuz dosyaları şöyle çağırıyorduk:

get_template_part( $name )

Klasik temalarda get_template_part() fonksiyonunun nasıl kullanıldığını merak ediyorsan şu yazıya göz atabilirsin: Kendi Şablonlarımızı Çağırma

Blok temalarda bütün şablon parçaları parts/{$name}.html dizininde yer almak zorundadır ve şöyle çağılırlar:

block_template_part( $name )

Özelleştirme Seçenekleri

Özelleştirme özelliği, klasik temalarda, “Görünüm -> Özelleştir” menüsünden ulaşılan sayfadır.

Klasik bir temada, temaplates dizini oluşturup bu dizine index.html klasörü koyarsak bu “Site Düzenleyicisi (Görünüm -> Düzenleyici)” sayfasını aktifleştirmiş oluruz.

Fakat bu durum “Görünüm->Özeleştir” sayfasında bazı yerlerin saklanmasına sebep olabilir.