Oluşturucu Temelleri: Blok Kalıpları Nasıl Oluşturulur

Geçen ayki Oluşturucu Temelleri makalesinde, blok kalıplarını araştırdık: ne olduklarını ve bunları nasıl kullanabileceğinizi. Bir blok kalıbının, belirli bir düzen oluşturan önceden tanımlanmış bir blok koleksiyonu olduğunu öğrendik. Kalıpların gücünü sergiledik ve bunların modern WordPress tema geliştirmesinin temel taşı olduğunu tartıştık. Bugün kendi kalıplarımızı tasarlamayı, paylaşmayı ve kaydetmeyi öğreneceğiz!

Lütfen bu makalenin tüm örneklerinde Twenty Twenty-Two temasını kullandığını unutmayın. Bu blok tabanlı tema, WordPress 5.9 ile birlikte yayınlandı ve 60'tan fazla blok deseni içeren harika bir kaynaktır.

Desen tasarımı

Bir blok kalıbı oluşturmanın en zor kısmı, nasıl görünmesi gerektiğine karar vermektir. Nispeten basit bir şeyle başlayalım: bir öğe ızgarası, iki sıra üçlü. Bu tasarımı farklı iş hizmetlerini veya ürün özelliklerini sergilemek için kullanabiliriz.

Hızlı İpucu: Desenler, üçüncü taraf bloklar da dahil olmak üzere herhangi bir bloktan oluşturulabilir. Bununla birlikte, kalıplarınızı geniş bir kitleye dağıtmayı düşünüyorsanız, yalnızca temel WordPress bloklarını deneyin ve kullanın; bu şekilde, kullanıcının tasarımlarınızı kullanmak için ek eklentiler yüklemesi gerekmez.

Benim için desen tasarımı Editör'de başlar. Kalıplar manuel olarak kodlanabilirken, işleri görsel olarak yapmak çok daha kolaydır. Kılavuzun ilk satırı için üç sütunlu bir Sütun bloğu ekleyerek başlayacağım. Ardından, her sütuna Başlık, Paragraf ve Düğmeler blokları ekleyin. İkinci ızgara satırını oluşturmak için Sütunlar bloğunu çoğaltın. Son olarak, birkaç stil yapılandırması uygulayacağım ve her iki Sütun bloğunu da arka plan rengiyle bir Grup bloğuna saracağım. Sonuç şöyle görünür:

Bu tasarımı oluşturan 33 bloğu yukarıdaki ekran görüntüsünde görebilirsiniz!

Izgaranın alternatif bir "karanlık" versiyonunu yaratmak istersem, sadece orijinal tasarımı kopyalamam ve stil üzerinde ince ayar yapmam gerekiyor.

Her iki tasarım da nispeten basit olsa da, onları sıfırdan oluşturmak sıkıcı olabilir. Bu blok kalıplarını paylaşabilmek ve/veya kaydedebilmek çok zaman kazandıracaktır.

Tasarım Paylaşma

Bir desen tasarımını paylaşmak kolaydır! Tasarımı web sitenizdeki başka bir sayfaya veya belki de tamamen başka bir web sitesine taşımak istediğinizi varsayalım. Blok işaretlemeyi kopyalayıp yapıştırmak kadar basit. Bunu başarmanın birden fazla yolu vardır.

Desen tasarımı Grup, Kapak veya Sütunlar bloğu gibi bir "kapsayıcı" bloğunda yer alıyorsa, en dıştaki kabı seçin ve "Kopyala"yı seçmek için araçlar menüsünü kullanın. Blok işaretleme panoya kopyalanır ve istediğiniz yere yapıştırabilirsiniz.

İkinci bir seçenek, Seçenekler panelinden erişebileceğiniz Kod Düzenleyiciyi kullanmaktır.

Kod Düzenleyici, geçerli sayfa veya gönderideki tüm blok işaretlemelerinin görsel bir sunumunu sağlar. Bu yöntemi tercih ediyorum çünkü tam olarak hangi kodun kopyalandığını görmek kolay.

Bir Modelin Kaydedilmesi

Blok işaretlemeyi kopyalayıp yapıştırmak kolay olabilir, ancak genellikle desen tasarımlarımızın daha kalıcı bir versiyonunu isteriz. Bunu yapmak için, özel bir blok kalıbını "kaydetmek" için Kalıplar API'sini kullanacağız. Bu, tasarımımızı WordPress içindeki hem Yerleştiricide hem de Desen Gezgini'nde kullanılabilir hale getirir.

Bir kalıbı kaydetmek için PHP'nin register_block_pattern() fonksiyonunu kullanırız. Bu işlev, bir başlık ve bir dizi özellik olmak üzere iki parametre kabul eder. Her birini incelemeden önce, bir örneğe bakalım.

register_block_pattern(

'örnek/özellik-ızgara-ışık',

sıralamak(

'title' => __( 'Feature Grid – Light', 'textdomain' ),

'description' => __( 'Açık bir arka plan üzerinde bir ızgarada öne çıkan altı öğeyi sergileyin.', 'textdomain' ),

'kategoriler' => dizi( 'özellikli', 'sütunlar' ),

'anahtar kelimeler' => dizi( 'özellik', 'ızgara' ),

'viewportWidth' => 1400,

'blockTypes' => dizi( 'çekirdek/sütunlar'),

'içerik' => 'DESEN İÇERİĞİ'

)

);

Burada daha önce tasarladığımız Feature Grid desenini kaydediyoruz. Başlık, bir ad alanı/başlık adlandırma kuralına uygundur. Aynı projeye birden çok desen kaydederken, ad alanını tutarlı tutmak en iyi uygulamadır.

Yalnızca özellikler dizisindeki başlık ve içerik parametreleri teknik olarak gereklidir. Kısa olması için, desen içeriği yukarıdaki örnekte hariç tutulmuştur. Ancak bu, önceki bölümde kopyalayıp yapıştırdığımız kodun aynısıdır. Kategoriler, kategoriler alanı kullanılarak ayarlanır ve bir modelde birden fazla olabilir. Editör'de desenler kategoriye göre düzenlenir. Kalan mülkler için, Blok Düzenleyici El Kitabında harika bir döküm sunulmaktadır.

Özellik Izgarası modelini koyu arka planla kaydetmek için kayıt kodunu çoğaltın ve buna göre güncelleyin. Son olarak her iki fonksiyonu da bu şekilde sarıyoruz ve her şeyi temamızın function.php dosyasına yerleştiriyoruz.

işlev my_pattern_library_register_block_patterns() {

register_block_pattern(

'örnek/özellik-ızgara-ışık',

sıralamak( … )

);

register_block_pattern(

'örnek/özellik-ızgara-karanlık,

sıralamak( … )

);

}

add_action('init', 'example_register_block_patterns');

Kodun tamamı GitHub'daki bir Gist'te mevcuttur.

Kod eklendikten sonra, yeni kayıtlı kalıplarımız artık Yerleştirici ve Kalıp Gezgini'nde görüntülenecektir.

Bir Model Kategorisinin Kaydedilmesi

Özel kalıplarla çalışırken, bunları özel kategorilere yerleştirmek genellikle yardımcı olur. WordPress, register_block_pattern_category() ile bunu basitleştirir. Bu fonksiyon, kalıpları kaydetmek için kullandığımız fonksiyona benzer. Tek yapmanız gereken bir kategori başlığı ve bir dizi özellik sağlamak. WordPress 5.9'dan itibaren, etiket desteklenen tek özelliktir, ancak gelecekte daha fazlasını bekliyoruz.

Aşağıdaki örnek, "Özel" kategorisini özel başlığıyla kaydeder. Bu kodu, şablon kayıt örneklerinin yanı sıra temanızın functions.php dosyasına yerleştirin.

function example_register_block_pattern_categories() {

register_block_pattern_category(

'gelenek',

dizi( 'etiket' => __( 'Özel', 'metin etki alanı') )

);

}

add_action('init', 'example_register_block_pattern_categories');

Kalıp kategorileri, yalnızca kendileriyle ilişkili kalıpları varsa Editör'de görüntülenecektir. Bu nedenle, daha önce kaydettiğimiz iki özellik ızgara modeline özel eklersek, “Özel” kategorisi şöyle görünecektir:

Bir Model Kitaplığı Eklentisi Oluşturun

Önceki bölümlerde temamızın function.php dosyasına kodu yerleştirerek kalıpları ve kalıp kategorisini kaydetmiştik. Bu işe yarasa da, uzun vadede ideal değil. Diyelim ki temamızı güncellememiz gerekiyor? Belki de kalıpları başka bir web sitesinde kullanmak istiyoruz?

WordPress, özel kalıp yönetimi için henüz yerel bir çözüm sağlamadı, bu nedenle alternatif çözümlere bakmalıyız. Ek olarak, kalıpların daha taşınabilir bir biçimde olması genellikle tercih edilir.

Bulduğum en iyi yaklaşım, özel kalıp koleksiyonumu depolamak için basit bir WordPress eklentisi oluşturmak. Eklentiler maksimum çok yönlülük sağlar ve temadan bağımsızdır. Aşağıdaki adımlarda size kendi kalıp kitaplığı eklentinizi nasıl oluşturacağınızı göstereceğim.

Hızlı İpucu: Aşağıdaki adımları atlamak isterseniz, kendi kitaplığınız için harika bir başlangıç ​​noktası sağlayacak eksiksiz bir "Model Kitaplığım" eklentisi hazırladım. Kod, GitHub'da Gist olarak mevcuttur.

Adım 1: Kurulumu Alma

Eklentiyi oluşturmaya başlamadan önce, çalışan bir WordPress sürümüne ve çeşitli metin düzenleyicilere ihtiyacınız olacak. Yerel WordPress kurulumları oluşturmak için Local'i şiddetle tavsiye ediyorum ve uzun yıllardır özel olarak kullanıyorum. Metin düzenleme için Atom kullanıyorum, ancak birçok harika seçenek var. İşletim sisteminizle birlikte gelen temel metin düzenleyici bile işinizi görecektir.

Yerel veya benzer bir uygulama kullanarak yerel bir WordPress sitesi kurun. WordPress'in 5.9 veya daha yüksek bir sürüme güncellendiğinden emin olun. Desenler 5.5+ üzerinde çalışır, ancak mümkün olduğunda WordPress'in en son sürümünü kullanmak her zaman en iyisidir.

2. Adım: Eklentiyi Oluşturun

Yapmanız gereken bir sonraki şey, eklentinin “tabanını” oluşturmaktır. Eklenti geliştirme konusunda yeniyseniz, korkmayın. Kulağa olduğundan daha ürkütücü geliyor.

Yerel WordPress kurulumunuzdaki wp-content → plugins dizinine gidin ve my-pattern-library adlı yeni bir dizin oluşturun. Dizine istediğiniz herhangi bir ad verebilirsiniz. Sonraki tüm adımlarda "my-pattern-library" ifadesini özel adınızla değiştirmeniz yeterlidir.

Yeni wp-content → plugins → my-pattern-library dizininin içinde, my-pattern-library.php başlıklı bir PHP dosyası oluşturun. Dosyayı metin düzenleyicinizde açın ve aşağıdaki eklenti başlık yorumunu dosyanın üstüne ekleyin. Baştaki <?php'yi unutmayın. Bu eğitim için başlığı basitleştirdiğimi unutmayın.

<?php

/**

* Eklenti Adı: My Pattern Library

* Açıklama: Basit bir blok desen kitaplığı.

* Sürüm: 0.1.0

* En az gerektirir: 5.8

* PHP gerektirir: 7.0

* Yazar: Adınız

* Lisans: GPL v2 veya üstü

* Metin Alanı: benim desen kitaplığım

*/

Başlık bilgilerini uygun gördüğünüz şekilde değiştirmekten çekinmeyin. Ardından dosyayı kaydedin. Artık tamamen işlevsel bir WordPress eklentiniz var. Yönetici Eklentileri sayfasında göründüğünü onaylayın ve "Etkinleştir"i tıklayın. Bu şekilde görünmelidir.

Artık çalışan bir eklentiniz olsa da, aslında hiçbir şey yapmıyor. Bunu değiştirelim.

3. Adım: Kalıpları ve Kategorileri Kaydedin

Bu son adımda, yapmanız gereken tek şey, bu makalenin başlarındaki kalıp ve kalıp kategorisi kayıt kodunu yeni eklentiye kopyalamak. Bu kodu daha önce temanın function.php dosyasına yerleştirmiştik. Şimdi, bunu my-pattern-library.php dosyanızdaki başlık yorumunun altına yapıştırın.

Dosyayı kaydedin ve ardından WordPress'te Editör'e gidin. Yerleştiriciyi açın, Desenler sekmesine tıklayın ve Özel kategorisini seçin. Eklenti tarafından kaydedilen iki kalıbı görmelisiniz.

Desen kitaplığınız artık çalışır durumda! Yeni özel kalıplara veya kategorilere ihtiyaç duyulduğunda, bunları eklentiye eklemeniz yeterlidir. Eksiksiz bir kod örneği GitHub'da Gist olarak mevcuttur.

Bitirmeden önce, bu örneğin kişisel kullanım için tasarlandığını belirtmek önemlidir. Eklenti herkese açık olarak dağıtılacak olsaydı, muhtemelen daha fazla işlevsellik eklemek istersiniz. Yerelleştirme akla geliyor. Bununla birlikte, bu öğretici, özel blok kalıplarını depolayan basit bir eklenti oluşturmanın ne kadar kolay olduğunu gösterir.

toparlamak

Bu makalede, blok kalıplarını tasarlamayı, paylaşmayı ve kaydetmeyi öğrendiniz. Kendi kalıp kitaplığınızı barındırmak için basit bir WordPress eklentisinin nasıl oluşturulacağını bile öğrendiniz. Blok kalıplarının modern tema geliştirmenin ayrılmaz bir parçası olduğuna kuvvetle inanıyorum ve geleceğin neler getireceğini görmek beni heyecanlandırıyor. Kalıpları keşfetmeye başlamadıysanız, umarım bu makale sizi bunu yapmaya teşvik eder. WordPress'i Öğrenin, ek öğrenme için harika bir kaynaktır ve herhangi bir sorunuz varsa, lütfen yorumlarda bana bildirin.