Bir WordPress blok temasında her bir sayfadan sorumlu bir şablon dosyası vardır. Yani web sitemizin ziyaretçileri, sitemizde bir sayfayı açtığında, sayfadaki içerik, o sayfa için hazırladığımız şablona göre sunulur. Bundan, her sayfa için ayrı ayrı şablon hazırlamak zorunda olduğumuz anlaşılmasın. Bir tane şablon hazırlayarak, sitemizde aynı türden bütün içerikler için aynı şablonu kullanabiliriz. Hatta, WordPress mecbur kaldığında, bütün içeriklerimizi sunmak için index.html şablonunu kullanır.

Şablon parçaları ise, tek başlarına değil de bir şablonun parçası olarak kullanılabilen şablonlardır. Bir şablon içinde birden çok şablon parçası kullanabiliriz. (WordPress bazı yerlerde “şablon parçası” kavramını “şablon bölümü” olarak da kullanmaktadır.)

Mesela sayfa şablonlarında bulunan logo, header veya footer gibi kısımlar genellikle birer şablon parçasıdır.

Blok temaların şablonlarına “blok şablonları” da denir.

Bir blok şablonu, bir veya daha çok bloğun bir araya gelmesinden oluşur. Şablonlarda ve şablon parçalarında WordPress blokları sınırsız bir şekilde kullanılabilir.

Blokların Şablon Dosyalarına Kodlanması

Bir bloğu bir şablon dosyasına ve bir şablon parçası dosyasına kodlamak arasında bir fark yoktur.

Bloklar, HTML dosyalarında kullandığımız yorum tagları (<!-- -->) arasında kodlanır.

Bir bloğu bir şablon dosyasına kodlarken şu kalıp kullanılır:

<!-- prefix:blok-adi {json formatında blok ayarlarının "key":"value" çiftleri} /-->

Mesela bir şablon dosyasında “Site başlığı” bloğunu kullanmak istersek şöyle bir kod yazmalıyız:

<!-- wp:site-title /-->

Aynı bloğu “level” ayarı yaparak kullanmak istersek şöyle yazmalıyız:

<!-- wp:site-title {"level":2} /-->

Yukarıdakiler gibi tek satırlık bloklar olduğu gibi çok satırlı bloklar da vardır. Mesela aşağıdaki blok WordPress’in standart başlık bloğudur, çok satırlıdır, hem yorum tagı hem de HTML tagları ile birlikte yazılır:

<!-- wp:heading {"level":3} -->
<h3 id="hello-world">Hello world</h3>
<!-- /wp:heading -->

Yukarıdaki gibi çok satırlı bloklarda açılış ve kapanış tagları aynı dosyada olmalıdır. Aksi taktirde blok doğruma hataları alabilirsiniz ve bloğunuz doğru gösterilmeyebilir.

Blokların HTML Kodlarının Tespiti

Bir bloğun şablon dosyasına eklenirken adını, ayarlarının key ve value değerlerini… tespit etmek zahmetli bir iş olabilir. Bizi bu zahmetten kurtaracak basit bir yol şudur:

• WordPress yönetim panelinde blok editör açılır.
• Şablon dosyasına kodlanacak blok editöre eklenir.
• Gerekli ayarlamalar yapılır.
• Bloğun ayarlar menüsünde bulunan “Bloğu kopyala” menüsü tıklanarak bir kopyası alınır.

• Son olarak, alınan kopya, şablon dosyasında istenilen yere şu tuşlara basılarak yapıştırılır: Ctrl + V

WordPress bloklarının adlarının ve ayarlarının topluca verildiği şu sayfa da belki ilginizi çekebilir.

Şablonlar

Bir WordPress teması farklı amaçlar için farklı şablonlar içerebilir. Bunlardan bazıları şunlardır:

• home
• 404
• archive
• single
• page …

WordPress temalarının hangi şablon dosyalarını kullandıklarını hatırlamak için Şablon Hiyerarşisi yazımıza göz atabilirsiniz.

Bir Blok Temasında şablon dosyaları site düzenleyicisi (Yönetim paneli: Görünüm -> Düzenleyici) ile düzenlenebilir.

WordPress, şablonları bir içerip tipi olarak wp_template adıyla kaydeder.

Blok Temaları, şablon dosyalarını HTML formatında kullanır, klasik temalar ise PHP formatında. Web sitemizde bir sayfa yüklenirken o sayfaya ait bir HTML şablonu aranır varsa sayfa o HTML şablonuna göre yüklenir. Şayet yoksa, ilgili sayfaya uygun olan PHP şablonu kullanılır ve sayfa o PHP şablonuna göre gösterilir. Yani PHP formatındaki şablon dosyaları, HTML formatındakilerin fallback‘leridir.

Bir Şablon Dosyası Nasıl Kodlanır?

Manuel olarak bir şablon dosyası kodlamak için şu adımlar takip edilir:

• Bir HTML dosyası oluşturulur.
• Dosyanın ismi şablon hiyerarşisinde belirtilen kriterlere uygun seçilmelidir.
• Dosya temanın ana dizininde oluşturulan templates klasörüne konmalıdır.
• Oluşturduğumuz HTML dosyasına şablonumuzu dilediğimiz gibi kodlayabiliriz.

Bir şablon dosyası oluşturmanın kodlamaya göre daha basit bir yolu vardır: Site Düzenleyici (Tam Site Düzenleyici)

Site Düzenleyicisi İle Şablon Dosyası Oluşturmak

Bir Blok Temada, Site düzenleyicisi (Yönetim paneli: Görünüm -> Düzenleyici) ile yeni bir şablon oluşturmak şu şartlara bağlıdır:

1. Şablon dosyası WordPress’in şablon hiyerarşisinde yer almak zorundadır.
2. Daha önce o içerik için bir şablon oluşturulmamış olmalıdır.

Site Düzenleyicisi ile şablon oluşturmak için şu adımlar takip edilir:

1. Önce yönetim paneline yeterli yetki ile (administrator yetkisi ile) giriş yapılır.
2. Yönetim panelinden Görünüm -> Düzenleyici sayfasına geçilir:

3. Düzenleyiciyi açtığımızda bizi şöyle bir sayfa karşılayacaktır (WordPress sürümünüze ve ana sayfa görünümünüze bağlı olarak farklı bir görüntü ile karşılaşabilirsiniz):

4. Yukarıdaki resimde de görüldüğü gibi, site düzenleyicisinin sol tarafında “Tasarım” adında bir menü bulunmaktadır ve bu menüde iki adet bağlantı vardır:
   • Şablonlar: Şablon dosyaları hazırlamak için kullanılır.
   • Şablon parçaları: Şablon dosyalarında kullanılacak şablon parçaları oluşturmak için kullanılır.
5. Bir şablon dosyası oluşturmak için Şablonlar bağlantısını tıklamalıyız.
   • Bu bağlantıyı tıkladığımızda karşımıza bir alt menü çıkar.
   • Bu alt menüde listelenen öğeler, daha önce hazırladığımız şablon dosyalarıdır:

6. Yeni bir şablon dosyası eklemek için;
   • “Şablonlar” başlığının yanındaki “+” işareti tıklanır veya
   • “Şablonlar” menüsünün en altındaki “Tüm şablonları yönet” bağlantısına tıklanır, açılan sayfada “Yeni ekle” butonu tıklanır.
     • Her iki şekilde karşımıza “YENİ ŞABLON EKLE” adında bir pop up menü çıkar.

7. “YENİ ŞABLON EKLE” menüsü bize ne tür bir şablon dosyası oluşturmak istediğimizi sorar.
   • Karşımıza çıkan liste, WordPress’in şablon hiyerarşisinde izin verilen şablon sayfalarıdır.
   • Bu listede, daha önce şablonları hazırlanmış içerikler yer almaz.
     • Hazırlanmış şablonlarımız, “Şablonlar -> Tüm şablonları yönet” sayfasında listelenir.
   • Listedeki öğelerin her biri sitemizde başka bir içeriği göstermek için kullanılır. (Biz burada WordPress’in şablon hiyerarşisi mantığını bildiğinizi kabul ediyoruz.)
8. Listeden seçtiğimiz öğe;
   • “Ana sayfa“, “Ön sayfa“, “404 (sayfa bulunamadı sayfası)“, “Ara (arama sonuçları sayfası)” gibi bir şablon ise doğrudan şablon oluşturma sayfasına gideriz.
   • Tıkladığımız öğe bir içerik ya da taxonomy ise, önce ilgili öğe için;
     • genel bir şablon mu yoksa
     • bu öğenin özel bir unsuruna has bir şablon mu oluşturmak istediğimizi soran bir tercih formu çıkacaktır.
       • Mesela “Tek öğe: Yazı“ya tıkladığımızda, karşımıza şöyle bir form çıkacaktır:
         
       • Bu formda;
         • “Tüm yazılar“ı seçersek, oluşturduğumuz şablon, bütün yazılar için kullanılacaktır.
         • “Yazı“yı seçersek, karşımıza kayıtlı yazıların bir listesi gelecek, o listeden bir yazı seçmek zorunda kalacağız.
           • Yazıyı seçtikten sonra şablonunu oluşturacağımız sayfaya yönlendirileceğiz.
           • Oluşturduğumuz şablon ise, web sitemizde, sadece seçtiğimiz yazıyı sunmak için kullanılacaktır.
   • Eğer seçtiğiniz öğenin zaten bir şablon dosyası varsa karşımıza hazırlanmış bir şablon çıkacaktır, yoksa da boş bir şablon dosyası çıkacaktır.
     • Daha önce hazırladığımız bir şablon dosyasını açtıysak, üzerinde değişiklikler yaparak kaydedebiliriz.
     • Boş şablon dosyalarında dilediğimiz şablon parçalarını veya blokları kullanarak bir şablon dosyası meydana getirir ve sonunda değişiklikleri kaydederiz.

Hazır Şablonlar

Site düzenleyicisinin giriş sayfasındaki “Tasarım” menüsü vardır. Bu menüde, “Şablonlar“a tıkladığımızda bir alt menü açılır demiştik. Açılan menüden “Tüm şablonları yönet“i seçersek, tema dosyaları ile birlikte gelen ve sonradan kullanıcılar tarafından oluşturulan şablonların bir listesini görürüz. Bu listede:

• Önceden hazırlanmış şablonları adının üzerine tıklayarak tekrar düzenleyebiliriz.
• Tema dosyaları ile birlikte gelen bir şablonda yapılan değişikleri iptal edebiliriz.
• Kullanıcıların oluşturduğu şablonları silebiliriz.

Şablon Editörü İle Şablon Hazırlama

“Şablon Editörü“, WrodPress’in Blok Temaları ile birlikte gelen bir özelliktir. Klasik temalara bu özellik sonradan eklenebilir. Bu editör, WordPress’in block editörü ile bir içerik oluştururken “Şablon” adıyla karşımıza çıkar:

Yukarıda da gördüğümüz gibi, Şablon Editörünü, blok editörünün sağ tarafında açılan “Ayarlar” yan menüsünde, “Kategori“, “Öne çıkan görsel” gibi ayarlarını yaptığımız sekmede görürüz. Burada, “Şablon” özelliği, o an oluşturduğumuz içeriğin şablonunu gösterir. Şablonun karşısında yazan isme tıkladığımızda bir popup menüsü açılır. Bu menüde:

• İçeriğin şablonunu değiştirebiliriz.
• Bir özel şablon ekleyebilir ve içeriği o şablon ile sergileyebiliriz.
  • Hazırladığımız özel şablonları, daha sonra dilediğimiz herhangi bir içerik için de kullanabiliriz.
    • Bunu için herhangi içeriği düzenlerken yine şablon editörü yardımı ile o içerik için hazırladığımız özel şablonu seçmemiz yeterli olacaktır.
• O içeriğin şablonun tekrar düzenleyebiliriz.

Şablon Parçaları

Şablon parçası (şablon bölümü) bir çeşit bloktur, sitemizi oluşturmak için kullanılırlar. Şablon parçası, başka bloklardan oluşan bir kapsayıcı bloktur. Birden çok blok içermek zorunda değildir. Mesela sitelerin footer veya header kısımları genellikle birere şablon parçasıdır.

Şablon parçaları, site düzenleyicisinde ya da blok editörde, yeni bir blok eklerken karşımıza çıkar.

WordPress, şablon parçalarını wp_template_part adında bir içerik tipi olarak saklar.

Şablon parçaları şu niteliklerle (attributes) tanımlanır:

• slug: Şablon parçasının kimliğidir.
• theme: Temanın slug değeridir (Türkçe karakter ve boşluk içermeyen adı). Şablon parçasını, şablonların dışında bir yerde kullanmak istediğimizde kullanacağımız isimdir.
  • Mesela şablon parçasını bir “blok modeli (block pattern)” içinde kullanmak istediğimizde bu nitelikte verdiğimiz isim ile çağırırız.
• area: Şu 3 değerden birini alır:
  1. uncategorized (general),
  2. header
  3. footer
• tagName: Şablon parçasını saracak HTML tagıdır. Şu değerlerden biridir:
  • header
  • main
  • section
  • article
  • aside
  • footer
  • div

Bir Şablon Parçası Nasıl Kodlanır?

Manuel olarak bir şablon parçası kodlamak için, bir HTML dosyası oluşturmalıyız. Oluşturduğumuz HTML dosyasını, temamızın ana dizinindeki parts klasöründe saklamalıyız.

Mesela bütün şablon dosyalarımızda kullanmak üzere, site başlığını içeren header adına bir şablon parçası oluşturalım. Bunun için hızlı bir yol olarak şu adımları takip edebiliriz:

1. Temanın ana dizininde parts/header.html dosyası oluşturulur.
2. Yönetim panelinden Sayfalar->Yeni ekle sayfasına gidilir.
3. Açılan sayfada blok editörde bir “Grup” bloğu ve bu bloğun içerisinde “Site başlığı” bloğu oluşturulur. (Biz örnek olsun diye bu blokları seçtik, siz dilediğiniz blokları kullanabilirsiniz.)
4. İstenilen düzenlemeler yapılır.
5. Grup bloğunun ayarlar menüsü (üst üste 3 nokta) tıklanarak “Bloğu kaplaya” seçilir.
6. Kopyalanan içerik, parts dizininde oluşturduğumuz header.html dosyasına yapıştırılır:

header.html

<!-- wp:group {"style":{"spacing":{"padding":{"top":"2em","right":"2em","bottom":"2em","left":"2em"}}},"backgroundColor":"vivid-cyan-blue","layout":{"type":"constrained"}} --><div class="wp-block-group has-vivid-cyan-blue-background-color has-background" style="padding-top:2em;padding-right:2em;padding-bottom:2em;padding-left:2em"><!-- wp:site-title /--></div><!-- /wp:group -->

Şablon Parçaları Bir Şablon Dosyasına Nasıl Çağırılır?

Şablon parçasının adı, o parçayı yarattığımız HTML dosyasının adıdır (uzantısını dahil etmeden).

Şablon parçaları bir şablon dosyasına şu kalıba göre çağırılır:

herhangi bir şablon dosyası (html formatında)

<!-- wp:template-part {"slug":"dosyasinin-adi"} /-->

Mesela, biraz önceki örnekte header.html dosyası içerisinde bir şablon parçası oluşturmuştuk. Bu şablon parçasını çağırmak için şu kodu yazmak yeterlidir:

herhangi bir şablon dosyası (html formatında)

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

Şablon Parçalarını theme.json Dosyasına Ekleme

Blok editörde yeni bir blok eklerken de kullanmak istiyorsak, oluşturduğumuz şablon parçalarını temamızın theme.json dosyasına kaydetmeliyiz.

Aşağıda, header.html ve footer.html dosyaları ile oluşturulan şablon parçalarının theme.json dosyasına nasıl kaydedildiğini görmekteyiz:

theme.json

{
...
"templateParts": [
	{
		"name": "header",
		"title": "Header",
		"area": "header"
	},
	{
		"name": "footer",
		"title": "Footer",
		"area": "footer"
	}
]
...
}

Site Editörü ile Şablon Parçası Oluşturma

Site Düzenleyicinin giriş sayfasında bulunan “Tasarım” menüsünde “Şablon parçaları” adında bir bağlantı bulunmaktadır. Buraya tıkladığımızda, temanın sahip olduğu şablon parçaları “Şablon bölümleri” başlığı ile karşımıza çıkar. Temaya eklenen bütün şablon parçaları bu gölümde listelenir.

Temamıza dilediğimiz kadar şablon parçası ekleyebiliriz.

Bir şablon parçası eklemek için şu iki yolu kullanabiliriz:

1. “Şablon Bölümleri” başlığının hemen yanındaki “+” işaretini tıklarız.
2. “Şablon Bölümleri” başlığının altındaki listenin sonunda bulunan “Tüm şablon bölümlerini yönet” bağlantısını tıklarız.
   • Ekli olan şablon parçalarını listeleyen bir sayfa açılacaktır.
     • Açılan sayfanın sağ üst köşesindeki “Yeni ekle” butonuna tıklarız.

Hangi yolla olursa olsun bir şablon parçası eklemek için tıkladığımızda karşımıza önce “Bir şablon bölümü oluştur” adında bir form çıkar:

Bu formda, yapmamız gereken, şablon parçasının adını girmek ve alanını seçmektir.

Ad verirken kendinizi özgür hissedebilirsiniz fakat verdiğiniz addaki Türkçe karakterleri İngilizceleri yer değiştirip, boşlukların yerine de tire koyarsanız, şablon parçanızın kimliğini elde edersiniz. Bu kimlik, bu şablon parçasını çağırmanız gerektiğinde lazım olacaktır.

Daha sonra “Oluştur” diyerek şablon parçamızı veritabanına kaydetmiş oluruz. Bu aşamadan sonra düzenleyici bizi şablon parçasını tasarlayıp düzenleyebileceğimiz sayfaya yönlendirecektir.

Şablonlarda Yapılan Değişiklikler Nerede Kaydedilir?

Şablonlarda veya şablon parçalarında değişiklik yapmanın 2 yolu vardır:

• Site düzenleyicisi ile
• Şablonun/parçasının HTML dosyasını doğrudan değiştirerek

Site düzenleyici ile yaptığınız değişiklikler veritabanında saklanır ve şablonun HTML dosyasına etki etmez. Site düzenleyici ile yaptığınız değişikliklerin önceliği veya üstünlüğü vardır.

HTML dosyasındaki kodlarda yaptığınız değişiklikler şablonda hemen görünmez. Bu değişikliklerin şablonda görünmesini istiyorsanız yapmanız gereken şudur:

• Şablon/parçası “Site Düzenleyicisi” ile açılır.
• Düzenleme sayfasının sağ taraftaki “Ayarlar” menüsü açılır ve “Şablon” sekmesinde olduğundan emin olunur:
  
• Sekmede, şablon adının karşısında bulunan 3 nokta tıklanır.
  • Burada 3 nokta görmüyorsanız geri alabileceğiniz bir değişiklik yapılmamış demektir.
• Açılan popup menüde, “Özelleştirmeleri temizle” bağlantısı tıklanır.