Dosya Yapısı

Bir blok temasında 2 tane zorunlu dosya vardır. Bunlar:

• style.css
• templates/index.html

Blok temanızın WordPress 5.9 ve daha önceki sürümleri ile uyumlu olmasını istiyorsanız, ana dizinde bir index.php dosyası da yaratmalısınız.

Şablonlarınıza ait bütün HTML dosyalarını templates klasörüne koymak zorundasınız. Aksi taktirde temanız doğru bir şekilde yüklenmeyecektir.

Şablon parçaları dosyaları isteğe bağlıdır. Eğer bu dosyaları kullanmak isterseniz, hepsini parts klasörüne koymak zorundasınız.

theme.json dosyası bir yapılandırma dosyasıdır ve isteğe bağlıdır. Fakat kullanılması önemle tavsiye edilmektedir.

Yukarıda bahsedilen dosyalar dışında bir blok teması functions.php dosyası, temaya çeşitli özellikler kazandırabilecek PHP, CSS, resim/medya veya JavaScript dosyaları da içerebilir.

Aşağıda, bir blok temasının temel dosya hiyerarşisi verilmiştir:

patterns (dir)
      - example.php
parts (dir)
      - footer.html
      - header.html
templates(dir)
      - 404.html
      - archive.html
      - index.html (zorunlu)
      - singular.html
functions.php
index.php
README.txt
screenshot.png
style.css (zorunlu)
theme.json

Theme_setup Fonksiyonu

Bir blok temasının functions.php dosyası, wp-block-styles desteği veya editör tarafına ait stil dosyasını içerebilir.

Aşağıda blok teması için örnek bir functions.php dosyası verilmiştir:

if ( ! function_exists( 'benim_ilk_temam_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which runs
 * before the init hook.
 */
function benim_ilk_temam_setup() {
	// Blok stilleri desteği ekler.
	add_theme_support( 'wp-block-styles' );

	// Ana dizine editör görünümü için bir stil dosyası ekler.
	add_editor_style( 'editor-style.css' );
}
endif; // benim_ilk_temam_setup
add_action( 'after_setup_theme', 'benim_ilk_temam_setup' );

Yukarıda gördüğünüz functions.php dosyasının klasik temalarda kullanılandan çok daha sade olduğunu siz de farketmişsinizdir.

Theme Support (Tema Desteği)

Blok temalar, aşağıdaki özellikleri otomatik olarak destekler:

add_theme_support( 'post-thumbnails' );
add_theme_support( 'responsive-embeds' );
add_theme_support( 'editor-styles' );
add_theme_support( 'html5', array('style','script', ) );
add_theme_support( 'automatic-feed-links' );

Bazı tema destekleri, theme.json dosyasında ilgili özellik kullanıldığında aktive olur. Theme.json dosyasında yapılan ayarların add_theme_support() fonksiyonuna göre önceliği vardır.

Aşağıda, theme.json dosyasında yapılan ayarların add_theme_support() fonksiyonundaki karşılığı verilmiştir:

Theme support (tema desteği)	Theme.json ayarı
add_theme_support( ‘editor-font-sizes’, array() );	settings.typography.fontSizes
add_theme_support( ‘custom-line-height’ );	settings.typography.lineHeight
add_theme_support( ‘align-wide’ );	settings.layout
add_theme_support( ‘editor-color-palette’, array() );	settings.color.palette
add_theme_support( ‘editor-gradient-presets’, array() );	settings.color.gradients
add_theme_support( ‘custom-spacing’ );	settings.spacing
add_theme_support( ‘custom-units’, array() );	settings.spacing.units

Bloklar İçin CSS Ekleme

Bir block temasına bir CSS dosyası ekleme işlemi functions.php dosyasına eklenen aşağıdaki fonksiyonlar yardımı ile eklenir:

1. wp_enqueue_style()
2. wp_enqueue_block_style()

Bu iki fonksiyonu daha yakından tanıyalım.

1. Wp_enqueue_style Fonksiyonu

Bu fonksiyon ile ilgili detaylı bilgiyi stil dosyası ekleme yazımızda bulabilirsiniz.

Aşağıda verilen kod, temanın ana dizininde oluşturulmuş bir assets/css dizininde bulunan stilim.css dosyasının temaya nasıl eklendiğini göstermektedir.

functions.php:

function tema_scriptleri() {
     wp_enqueue_style( 'benim-stilim', get_template_directory_uri() . '/assets/css/stilim.css',false,'1.1','all');
}
add_action( 'wp_enqueue_scripts', 'tema_scriptleri' );

2. Wp_enqueue_block_style Fonksiyonu

Blokların kendilerine ait stil ayarları olmasına karşın, daha fazla stil eklemek istersek bunu wp_enqueue_block_style() fonksiyonu ile yapabiliriz. Bu fonksiyon WordPress 5.9 ve daha yukarısında çalışır.

wp_enqueue_block_style() fonksiyonu ile eklediğimiz CSS kodları, sadece ilgili block, sayfada kullanılıyorsa yüklenir. Bu da gereksiz yüklemelerin önüne geçerek, temamızın performans kaybını önler.

Bu fonksiyon ile eklenen stiller hem editör hem de tema görünümünde çalışır.

Blok editörde bir bloğu kullanırken yaptığımız stil ayarlarının bu fonksiyona göre önceliği vardır.

Bu fonksiyonu, theme.json dosyası aracılığı ile ekleyemediğimiz stilleri eklemek için kullanabiliriz. Örneğin CSS media sorguları (@media screen and (max-width: 992px) { ... } gibi) bu fonksiyon yardımı ile eklenebilir.

Mesela “En son yorumlar” bloğuna bir CSS ekleyelim. Bunun için şu adımları takip etmeliyiz:

1. Stil dosyasına, hangi blok için kullanacaksak o bloğun adını vermeliyiz.
   • Blokların orijinal adlarını kullanmalıyız.
   • Blokların orijinal adlarını görmek için WordPress kurulumu ile birlikte gelen bloklarının listesine bakabilirsiniz.
     • Blok adlarını yazarken; küçük harfler kullanmalı ve kelimeler arasındaki boşlukları “-” (tire) işareti ile değiştirmeliyiz.
   • Örnekteki blok “En son yorumlar” bloğudur ve adı “latest-comments” olarak geçer.
     • O zaman bu blok için oluşturacağımız stil dosyasının adı latest-comments.css olmalıdır.
2. Oluşturduğumuz latest-commetns.css dosyasını assets/CSS/blocks dizinine koyuyoruz.
   • Bu dizin zorunlu değildir, siz dilerseniz başka bir dizin oluşturup koyabilirsiniz.
   • Diyelim ki CSS dosyamızda şöyle bir stil kullandık:

latest-comments.css

.wp-block-latest-comments__comment-date {
 color: var(--wp--preset--color--primary);
 font-size: var(--wp--preset--font-size--small);
}

3. Bu CSS dosyasını, functions.php dosyasına ekleyeceğimiz şu kodlar ile temamıza dahil edebiliriz.
   • Aşağıdaki kodlar, dinamik olarak bütün bloklar için tek seferde ekleme yapar.
     • Yapmamız gereken tek şey, yukarıda anlatıma uygun şekilde CSS dosyasını hazırladığımız bloğun adını $styled_blocks = ['latest-comments']; dizisine eklemektir.

functions.php

function benim_ilk_temam_setup() {
	/*
	 * Ekstra blok stilleri ekler. Aşağıda verilen diziye, CSS dosyalarını hazırladığınız blokların isimlerini eklemeniz yeterli olacaktır.
	 */
	$styled_blocks = ['latest-comments'];
	foreach ( $styled_blocks as $block_name ) {
		$args = array(
			'handle' => "myfirsttheme-$block_name",
			'src'    => get_theme_file_uri( "assets/css/blocks/$block_name.css" ),
			$args['path'] = get_theme_file_path( "assets/css/blocks/$block_name.css" ),
		);
		wp_enqueue_block_style( "core/$block_name", $args );
	}
}
add_action( 'after_setup_theme', 'benim_ilk_temam_setup' );

JavaScript Dosyaları Ekleme

Blok Temaya bir JavaScript dosyası eklemek, klasik temaya eklemek ile aynıdır.

Bu konu ile ilgili detaylı bilgi, klasik WordPress teması kodlamayı öğrendiğimiz derslerimizde Scriptler (JavaScript) başlığı altında verilmiştir.