BU DERSİN BAŞLIKLARI
Blok Tabanlı Tema Nedir?
“Block Tabanlı Tema” kısaca “Blok Tema“; performans önceliği düşünülerek tasarlanan bir teknolojidir. Bunun yanında kullanıcılarına, kodlama gereği duymadan, tasarımı genişletme ve daraltma imkanı verir. Yeni bir sayfa şablonu hazırlamak için kod yazmanıza gerek kalmaz mesela.
Blok temalar; WordPress’in yeni blok editörünün sağladığı tasarım kolaylığını bütün bir temaya uygulama imkanı verir. Bir başka ifade ile blok tabanlı bir tema, bloklardan oluşan bir temadır. Bu temalar sayesinde, blokları kullanırken yaşadığımız tasarım kalaylığından web sitemizin bütün sayfalarında yararlanmak mümkün olmuştur.
Blok Tabanlı Tema Teknolojisine Geçişin Kısa Tarihçesi
WordPress, Aralık 2018’de klasik editörden vazgeçerek “Gutenberg Block Editör” veya kısaca “Block Editör” adıyla anılan yeni bir text editörü teknolojisini tanıtmıştır. Daha sonra, 2021’de block editör teknolojisi üzerine kurulu “Tam Site Düzenleme (TSD)” teknolojisini tanıtmış ve bir yıllık beta sürümünün ardından 2022 başlarında WordPress 5.9 sürümü ile birlikte kararlı sürümünü hayata geçirmiştir.
Blok Tabanlı Temaların Bazı Avantajları
- Blok tabanlı bir tema ile temanın görünümüne dilediğimiz gibi müdahale etme imkanımız olmaktadır.
- Mesela; klasik temalarda, kodlama yapmadan bir sayfa şablonunun ana hatlarını değiştirmek pek mümkün değildi, fakat block tabanlı bir temada çalışırken, dilediğimiz zaman temamızdaki şablonları sadece bir kaç tıklama ile değiştirebiliriz, yeni şablonlar/şablon parçaları ekleyebiliriz.
- Bu şablonları oluştururken de sahip olduğumuz blokların bütün gücünü özgürce kullanabiliriz.
- Yani aslında blok tabanlı temalar, web sitemizin nasıl görüneceğine dair yaşadığımız kısıtlamaları ortadan kaldırarak bizi hayal gücümüz ile baş başa bırakmayı hedeflemektedir diyebiliriz.
- Blok tabanlı temalar sayesinde kazandığımız tasarım özgürlüğü ve esnekliği, bizi tema değiştirme ihtiyacından kurtaracaktır.
- Çünkü, sahip olduğumuz temayı dilediğimiz gibi tasarlama özgürlüğümüz olacaktır.
- Blok tabanlı temalar, tasarım ve şekillendirmede sağladığı kolaylıklar sayesinde, Elementor gibi tasarım araçlarına olan ihtiyacı da zamanla ortadan kaldıracaktır.
Tam Site Düzenleme (TSD)
Tam Site Düzenleme özelliği, blok tabanlı temalarda kullanılmaktadır. Bu yüzden blok temalara “Tam Site Düzenleme Temaları” da denmektedir.
TDS özelliği sayesinde, bir WordPress teması, kodlar arasında boğulmadan canlı bir şekilde düzenlenebilmektedir. Sitenin hemen hemen her bir parçasına kolayca müdahale edilebilmektedir.
Klasik temaların aksine, blok tabanlı temalarda, kodlama işlemine gerek kalmadan şablon dosyaları ya da şablon parçaları oluşturmak mümkündür. Bu da web sitemizin görünümü ile ilgili bizlere büyük bir özgürlük sağlamaktadır.
Blok Tabanlı Temaların Avantajları
WordPress hali hazırda klasik tema yapısını desteklemeye devam ediyorken, niçin blok tabanlı bir temaya ihtiyaç duyarız? Blok tabanlı bir tema bize hangi faydaları sağlamaktadır.
Blok tabanlı temalar:
- Performansları daha yüksektir, daha hızlıdırlar.
- Dilediğimiz yönde genişletebilme veya daraltabilme imkanı sağlarlar.
- Yüklenme hızları daha yüksektir.
- Sadece sayfada kullanılan blokların stillerini yükler.
- Ön yüz veya arka yüz için manuel olarak stil dosyaları ekleme zorunluluğunu ortadan kaldırır.
add_theme_support()fonksiyonu ile temaya kattığımız özelliklerin hepsinitheme.jsondosyası ile halledebiliriz.- “Skip to content (içeriğe git)“, “keyboard navigation (klavye ile gezinme)“, and “landmarks (yer işaretleri)” gibi Accessibility (ulaşılabilirlik) özellikleri ekstra bir kod yazmadan otomatik olarak üretilir.
- Bir kullanıcı, temasının bütün bölümlerini kodlama yapmadan düzenleyebilir.
- “Styles” ara yüzü ile kullanıcılar, temanın veya blokların renklerini tipografisini özelleştirebilirler.
Blok Tabanlı Temalar ile Klasik Temaların Karşılaştırılması
Bir klasik WordPress teması ile blok tema arasındaki benzerlik ve farklar şöyle sıralanabilir:
For theme developers that are accustomed to creating classic themes, there is a comparison table:
| Klasik Temalar: | Blok Temalar: |
| İçerikleri göstermek için PHP dosyaları kullanır.. | Blokları göstermek için HTML dosyaları kullanır. HTML dosyasını bulamazsa, ilgili içeriği göstermek için PHP dosyasını kullanır: single.html dosyası klasik temadaki single.php dosyasının karşılığıdır. |
| Şablon hiyerarşisini kullanır. | Şablon hiyerarşisini kullanır. |
| İçerikleri sunmak için PHP fonksiyonlarını kullanır: the_content(), get_header()…. | Her şey için blokları kullanır. Mesela “Yazı içeriği” bloğu, the_content() fonksiyonu ile aynı işlevi görür. |
| Tercüme edilebilirlik için PHP fonkskiyonlarını kullanır. | HTML dosyalarındaki textler tercüme edilemez. Tema şablonlarında tercüme etmek istediğimiz textler için “patterns” klasörü altında, php dosyaları ile oluşturacağımız modelleri (patterns) kullanabiliriz. |
| if/else koşulları için PHP fonksiyonlarını kullanır. | Farklı koşullarda farklı sonuçlar almak için blok ayarlarını kullanır. |
| Farklı içerikleri ve içerik tiplerini sergilemek için WordPress döngüsünü kullanır. | Bütün içerikleri sergilemek için “sorgu döngüsü (query) ve “yazı şablonu (post template)” bloklarını kullanır. |
| Bileşenleri (widgets) ve bileşenler için oluşturulmuş bölgeleri (sidebars) kullanır. | Bileşenler yerine blokları kullanır. Varsa mevcut bileşenleri boklara dönüştürür. |
| Tema ayarları için “Görünüm -> Özelliştir” menüsünü kullanır. | Tema düzenlemesi “Görünüm -> Düzenleyici” menüsü ile ulaşılan “Tam Site Düzenleyicisi” ile yapılır. İstenirse “Görünüm -> Özelleştir” menüsü de aktive edilebilir. |
| Bir menü eklemek için önce “Görünüm -> Menüler” sayfasında bir menü oluşturmak gerekir. | Menü oluşturmak için “Dolaşım” bloğu kullanılır. |
| Amaca göre özelleştirilmiş header (sayfaların üst kısmı) şablonu oluşturulabilir. | Sitenin header kısmını ve bu kısımda kullanılacak görselleri düzenlemek için de bloklar kullanılır. |
| Logo kaydı yapılabilir. | “Site logosu” bloğu kullanılır. |
| Özelleştirilmiş CSS ve scriptler eklenebilir. | Özelleştirilmiş CSS ve scriptler eklenebilir fakat daha çok blok ayarlarında görülen özelleştirmeler ve theme.json dosyası kullanılır. |
theme.json dosyası kullanılabilir fakat tema yazarları temanın ön yüzü için stil dosyaları kullanmak zorundadırlar. | theme.json dosyasında yapılan ayarlar ve bloklarda kullanılan stiller, editöre ve ön yüze otomatik olarak eklenir. |
| Şablon dosyaları temanın kök dizinine eklenebilir. | Şablon dosyaları, ana dizinde oluşturulan templates klasörüne yerleşir. |
| Şablon parçaları, tema dizininde istenilen yere yerleştirilebilir. | Şablon parçası dosyaları, ana dizinde oluşturulan parts klasöründe oluşturulur. |
| Özelleştirici (“Görünüm -> Özelleştir”) 404 sayfası, arşiv sayfası gibi şablon dosyaları oluşturulamaz. | “Tam Site Düzenleyicisi” ile şablonlar oluşturulabilir ya da düzenlenebilir. |
| “Şablon” editörü ile blok şablonları oluşturulabilir/düzenlenebilir. Bunun için theme support (tema desteği) gerekir. | “Şablon” editörü ile blok şablonları oluşturulabilir/düzenlenebilir. |
Sonraki yazımızda, bir blok temanın nasıl oluşturulacağından bahsedeceğiz.