WordPress Blok Temalarına Giriş

Tipik bir WordPress temasını oluşturan bileşenler yıllar içinde pek değişmedi. Öyle ki, projenin kurucu ortağı Matt Mullenweg, eski okul Kubrick temasının (2005'te piyasaya sürüldü) hala içerik yönetim sisteminin modern sürümleriyle çalıştığını söyledi.

Elbette, tema geliştiricileri kendi eklemelerini yaptılar. Karmaşık ayarlı kullanıcı arayüzlerinden entegre sayfa oluşturuculara kadar her şeyi gördük. Ancak özünde temalar tutarlı bir yapıyı korumuştur. Yani blok temaların tanıtımına kadar.

Blok temaları, WordPress'in geleceği olacak şekilde ayarlanmıştır. Web siteleri oluşturma ve sürdürme şeklimizi değiştirecekler. Ayrıca, Gutenberg blok düzenleyicisi ile “klasik” emsallerinden daha sıkı bir şekilde bütünleşmişlerdir.

Tüm yaygara hakkında ne olduğunu merak ediyor musunuz? Bugün size WordPress blok temalarının temellerini anlatacağız. Yol boyunca, geleneksel temalarla nasıl karşılaştırıldıklarını ve zıt olduklarını keşfedeceğiz. Başlayalım!

Neden Temaları Engelle?

Varlığının ilk birkaç yılında, blok düzenleyici öncelikle içerik oluşturmanın ve stil oluşturmanın bir yolu olmuştur. Klasik bir temayla birleştirildiğinde bu, sayfaların ve gönderilerin tam istediğiniz gibi oluşturulabileceği anlamına geliyordu.

Tüm temayı etkileyen değişiklikler yapmak söz konusu olduğunda, WordPress Özelleştiricisi tercih edilen kaynak olarak kaldı. Bu araç, temanın yazarı tarafından kullanıma sunulan tasarım ve düzen ayarlarına erişim sağlar. Özelleştirici'de değilse, büyük olasılıkla kodu incelemeniz gerekecektir.

Bununla birlikte, blok düzenleyicinin temel ilkelerinden biri, WordPress panosunda daha birleşik bir arayüz oluşturmak olmuştur. Bunun, Widget'lar ekranının blok tabanlı bir kullanıcı arayüzüne taşınmasıyla gerçekleştiğini zaten gördük. Özelleştirici bu kalıba uymuyor.

Tam Site Düzenlemenin (FSE) tanıtımı bu süreçteki bir sonraki adımdır. Sayfalarımızı ve gönderilerimizi şekillendirmenin ötesine geçer. Artık bir temanın tasarımının her yönü (üstbilgi, altbilgi, sayfa şablonları vb.) doğrudan WordPress içinde yönetilebilir.

Blok temaları, bu işlevsellik için ağ geçidi görevi görür. Bu nedenle, yalnızca bloklar düşünülerek inşa edilirler.

Bir WordPress Blok Temasının İç Çalışmaları

Klasik ve blok temalar arasında çok fazla benzerlik yoktur. Ancak her ikisinin de makyajlarına rehberlik eden bir dizi temel kuralı vardır. Bir blok teması indirecek ve dosya yapısında gezinecek olsaydınız, birkaç önemli karşıtlık göze çarpabilir.

Şablon Dosyaları PHP Yerine HTML'dir

Klasik bir temada, index.php ve header.php gibi adlara sahip şablon dosyaları bulacaksınız. Blok temaları PHP'yi ortadan kaldırır ve bunun yerine .html dosya uzantısını taşır.

İçeride, bir şablon dosyası, HTML ve blok işaretlemenin bir kombinasyonunu içerir. Örneğin, resmi WordPress belgelerinden bu şablona bir göz atalım:

 <!-- wp:site-title /--> <!-- wp:image {"sizeSlug":"large"} --> <figure class="wp-block-image size-large"> <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:post-title /--> <!-- wp:post-content /--> </div> <!-- /wp:group --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:heading --> <h2>Footer</h2> <!-- /wp:heading --> </div> <!-- /wp:group -->

Blok işaretleme, HTML yorumlarına çok benziyor. Ancak şablona belirli blokları çağırmak için sözdizimi içerir. WordPress Tam Site Düzenleme web sitesinde, her varsayılan blok için işaretleme içeren kullanışlı bir referans bulunur.

Ve bu tür bir kod tanıdık geliyorsa, Gutenberg'in kod düzenleyici görünümünde benzer bir şey görmüş olabilirsiniz.

Klasörlerin Kullanımı

Klasik temalar, şablonları klasörler içinde saklayabilir, ancak bu bir zorunluluk değildir. Blok temaları birkaç alt klasör gerektirir:

/parts
Üst bilgi, alt bilgi ve kenar çubuğu gibi yeniden kullanılabilir öğeler içerir.

/templates
Çeşitli içerik türleri için şablonlar barındırır. Sayfalar, gönderi arşivleri ve tekil gönderiler gibi öğeler yaygın örneklerdir. Adlandırma kurallarının, klasik temalarla bir başka benzerlik olan WordPress şablon hiyerarşisini izlediğini unutmayın.

Bu düzenlemenin olumlu yan etkilerinden biri de temaların daha iyi organize edilecek olmasıdır. Standart bir klasör yapısına sahip olmak, belirli bir dosyayı aramak için daha az zaman harcanması anlamına gelir.

Theme.json Stili

theme.json dosyası, blok düzenleyiciye varsayılan ayarlar atamak için kullanılır. Bu, diğer şeylerin yanı sıra, varsayılan renk paletlerini, tipografiyi ve aralığı ayarlamanın mümkün olduğu anlamına gelir. Ayarlar site genelinde olabilir veya belirli bloklara uygulanabilir.

theme.json , yapılandırmasına bağlı olarak uygun CSS'yi otomatik olarak oluşturacağından, bir temanın style.css dosyasını çok fazla doldurmanız gerekmeyebilir. Bu senaryoda, stil sayfası birkaç temel özelliği tanımlamak için kullanılırken diğer her şey bu yeni moda dosyaya dayanır.

Şablon Oluşturma ve Düzenleme

WordPress, uzun zamandır bir temanın şablon dosyalarını doğrudan kontrol panelinde düzenleme olanağı sağlamıştır. Küçük bir kodlama hatası bile bir web sitesini erişilemez hale getirebileceğinden, bu genellikle cesareti kırıldı. Bir tema güncellendiğinde değişikliklerin üzerine yazılma olasılığından bahsetmiyorum bile (bu nedenle, bir alt tema kullanma nedeninin bir parçası). Bazı geliştiriciler, uzak bir felaket olasılığını bile önlemek için özelliği tamamen kapatır.

Ancak blok temaları tamamen kontrol panelinde düzenleme ile ilgilidir. Bir temaya dahil olan şablonlar, blok düzenleyici aracılığıyla ince ayar yapılabilir ve yeni özel şablonlar da oluşturulabilir.

Tahmin edebileceğiniz gibi, bu senaryoda kod tamamen isteğe bağlıdır. Her şey, bir blok teması etkinleştirildiğinde eski Özelleştiricinin yerini alan yeni Site Düzenleyicisi ( Görünüm > Düzenleyici – WordPress 5.9 veya üstü gereklidir ) aracılığıyla düzenlenebilir. Ve tıpkı sayfalar veya gönderiler gibi, Site Düzenleyici de tanıdık blok düzenleyici kullanıcı arayüzünü kullanır.

Ve hepsi bu değil. WordPress'te yaptığınız her türlü değişiklik dışa aktarılabilir. Bu, özelleştirilmiş blok temanızı birden fazla web sitesinde kullanmanıza olanak tanır.

Bu, temaları özelleştirmek ve hatta oluşturmak isteyenler için giriş engelini azaltır. Şimdi, tasarım için temel bir göz ve bloklar hakkında çalışma bilgisi, özel bir web sitesine yol açabilir.

Akılda Tutulması Gerekenler

Dalış yapmadan ve tüm web sitelerinizi blok temalarını kullanacak şekilde değiştirmeden önce bilmeniz gereken birkaç şey var.

Her şeyden önce, blok temaları yeni gelişen bir teknolojidir . Tüm özellikler kesinleştirilmemiştir ve bazı en iyi uygulamaların düzeltilmesi gerekmektedir. Ayrıca, bu temaların bir üretim ortamında nasıl çalıştığını yeni yeni görmeye başlıyoruz. İşler geliştikçe birkaç değişiklik bekleyin.

Müşteriler için siteler oluşturuyorsanız ve gelecekte biraz esneklik sağlamak istiyorsanız, karma temalar ilginizi çekebilir. Klasik bir temanın PHP yapısını korurken FSE özelliklerinin kullanımına izin verirler. Bu işlevi kullanmak için mevcut bir temayı bile güçlendirebilirsiniz.

Son olarak, blok temalar klasik temaların sonunu getirmez - en azından öngörülebilir gelecek için. Bununla birlikte, bu yeni tema oluşturma yöntemine geçişin hemen olması gerekmiyor. Örneğin, üretimde en sevdiğiniz klasik temalara güvenmeye devam ederken yerel bir ortamda bloklarla denemeler yapmak sorun değil.

Blok Tema Kaynakları

WordPress blok temaları hakkında daha fazla bilgi edinmek isterseniz, bazı olağanüstü kaynaklar mevcuttur. İşte bizim en çok beğendiklerimizden bir kaç tanesi:

• WordPress ile Tema Belgelerini Engelle
• Automattic tarafından Blockbase Tema
• Carolina Nymark tarafından Tam Site Düzenleme
• Rich Tabor'dan Gutenberg'deki WordPress Blok Şablonları İçin En İyi Kılavuz
• WordPress Blok Tema Devrimi Justin Tadlock tarafından Sessizce Hızlanıyor
• WordPress'ten WordPress Tema Denemeleri