WordPress Blok Kalıpları

Blok kalıplarının tanıtılmasından bu yana, WordPress ekosistemindeki blok kalıplarına ilgi arttı.

Gutenberg'e blok kalıplarının eklenmesi WordPress kullanıcıları için oldukça avantajlı oldu. Bunun nedeni, artık web sitenizi tasarlarken önceden hazırlanmış tasarımları kullanabilmeniz ve bunları tercihinize göre değiştirebilmenizdir. Bu, site sayfalarınızı sıfırdan tasarlamaya kıyasla zamandan tasarruf etmenize gerçekten yardımcı olur.

Bu yazıda, bu blok kalıplarının ne olduğuna, nerede bulunacağına, nasıl kullanılacağına ve yeniden kullanılabilir bloklarla nasıl karşılaştırıldığına bakacağız.

İçindekiler

Blok Kalıpları Nelerdir?

Mevcut Blok Modellerini Kullanma

Blok Kalıpları ve Yeniden Kullanılabilir Bloklar

Kendi Blok Kalıplarınızı Nasıl Oluşturursunuz

• Manuel Yaklaşım
• Kalıp Dizini aracılığıyla

Özel Blok Kalıpları Eklentisi Nasıl Oluşturulur

Blok Kalıplarının Kaydını Silme

Blok Modeli Kategorilerinin Kaydını Silme

Çözüm

Blok Kalıpları Nelerdir?

Blok Modelleri, önceden tasarlanmış düzenler oluşturmak için birleştirilmiş bir blok koleksiyonudur.

Örneğin bir harekete geçirici mesaj oluşturmak isteyen bir WordPress kullanıcısı, sayfalarına Başlık, Paragraf ve Düğme blokları gibi bir dizi blok ekleyerek bunu yapabilir. Ancak blokları tercih ettiğiniz tasarım düzenine uyacak şekilde yerleştirmek, özellikle acemi WordPress kullanıcıları için o kadar kolay olmayabilir. WordPress kullanıcıları sadece Harekete Geçirici Mesaj blok modelini ekleyebildiklerinden, Blok Kalıpları böyle bir durumda kullanışlıdır. Daha sonra blok kalıplarını istedikleri görünüme göre düzenleyebilirler.

Mevcut Blok Modellerini Kullanma

WordPress, klasik düzenleyicinin yerine geçen bir blok düzenleyiciyi (Gutenberg) entegre eder. Düzenleyici içinde, sayfalarınıza veya gönderilerinize kolayca kalıp ekleyebilirsiniz. Başlamak için önce blok yerleştiriciye tıklamanız gerekecek.

Üzerine tıkladıktan sonra, aşağıda gösterilen Desenler sekmesine gidin:

Ardından, “Keşfet” düğmesine tıklayın

Oluşturulan açılır pencerede, çeşitli kategorilere göre gruplandırılmış bir dizi desene sahip olacaksınız.

Sayfaya veya gönderiye bir desen eklemek için, üzerine tıklamanız yeterlidir ve daha sonra sayfanızda veya gönderinizde oluşturulmalıdır.

Bu yapıldıktan sonra, desen içindeki blokları tercihinize göre daha da özelleştirebilirsiniz.

Ayrıca wordpress.org blok kalıpları dizininden daha fazla kalıp bulabilirsiniz.

Tercih ettiğiniz bir kalıbı bulduğunuzda, istenen kalıp üzerinde bir fareyle üzerine gelme olayı olduğunda görüntülenen kopyala düğmesine tıklayarak kopyalamanız yeterli olacaktır.

Bunu başardığınızda, kalıbı sayfanıza veya yayınınıza yapıştırmanız gerekecektir.

Blok Kalıpları ve Yeniden Kullanılabilir Bloklar

Yeniden kullanılabilir blok, daha sonra gönderinizde veya sayfanızda kullanabileceğiniz tek veya daha fazla bloktan oluşan bir koleksiyondur.

Yukarıdaki tanıma göre, yeniden kullanılabilir bloklar, her ikisinin de bir gönderi veya sayfa içinde önceden oluşturulmuş blokların eklenmesini içermesi anlamında blok kalıplarına oldukça benzer görünmektedir. Ancak bu iki madde arasında bir fark vardır.

Yeniden kullanılabilir bloklar söz konusu olduğunda, bu bloklar blok kalıplarına kıyasla oldukça esnek değildir. Yeniden kullanılabilir bloklar, uygulandıkları sayfa veya gönderi ne olursa olsun tek bir örneği korur. Bu, birkaç sayfaya yeniden kullanılabilir bir blok eklerseniz ve sayfalardan birinde yeniden kullanılabilir bloğu özelleştirmeye karar verirseniz, değişikliklerin tüm sayfalarda yeniden kullanılabilir bloğun tüm örneklerine uygulanacağı anlamına gelir.

Öte yandan blok desenlerine gelince, birkaç sayfaya bir blok deseni eklediğinizde ve belirli bir sayfadaki blok deseni üzerinde bazı özelleştirmeler yaptığınızda, özelleştirmeler geri kalan sayfalardaki blok desenlerine uygulanmaz. Blok Örüntü örnekleri bu nedenle farklıdır.

Yeniden kullanılabilir blokların aksine, blok kalıpları temanız veya eklenti kodunuz içinde de kaydedilebilir.

Bir dizi sayfaya veya gönderiye uygulanacak belirli bir düzen kullanmak istiyorsanız, blok kalıpları idealdir ve buradan bunları ilgili sayfaların veya gönderilerin bağlamına uyacak şekilde tek tek sayfalarda veya gönderilerde özelleştirebilirsiniz.

Yeniden kullanılabilir bloklar ise, sayfalarınızdaki içeriğin aynısını çoğaltmak ve kullanmak istediğiniz senaryolar için idealdir. Bu, örneğin banner reklamlarda olabilir.

Kendi Blok Kalıplarınızı Nasıl Oluşturursunuz

Kendi blok kalıplarınızı yaratmanın farklı yolları vardır. Bu yazıda bu yöntemlerden iki tanesine gireceğiz:

• Manuel Yaklaşım
• Kalıp Dizini aracılığıyla

Manuel Yaklaşım

Bu yaklaşımda, önce bir sayfa veya gönderi içinde blok koleksiyonu oluşturmamız ve daha sonra onu bir kalıp olarak kaydetmemiz gerekecek.

Blok Koleksiyonu Oluşturma

Blok koleksiyonunuzu kurmak için aşağıdakileri yapmanız gerekecektir:

i) Önce yeni bir sayfa veya gönderi oluşturun

ii) Gönderi veya sayfa içindeki deseni veya başka bir düzeni oluşturacak istediğiniz blokları ekleyin. Buradaki durumumuzda, bir medya ve metin bloğunun yanı sıra bir düğme bloğu ve onlara bazı stiller ekleyeceğiz.

Aşağıda blokların örnek bir görüntüsü verilmiştir:

Bir Blok Kalıbının Kaydedilmesi

Blok koleksiyonunu blok deseni olarak kaydetmek için aşağıdakileri yapmanız gerekir:

i) Blok koleksiyonuna sahip olduğunuz sayfa veya gönderide kod düzenleyiciye geçin:

ii) Oluşturulan tüm kodları kopyalayın ve bunları Not Defteri veya Yüce Metin gibi istediğiniz metin düzenleyiciye yapıştırın:

iii) Ardından, aşağıdaki kodu alt temanızın içindeki functions.php dosyasına ekleyin:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => 'Fill in your copied code here' ) ); } add_action( 'init', 'reg_block_patterns' );

“Kopyaladığınız kodu buraya girin” içeriğini, yukarıdaki (ii)'de kopyalanan kodla değiştirmeniz gerekecektir.

Aşağıda, bizim tarafımızdan son kodla ilgili bir örnek verilmiştir:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' );

Bu yapıldıktan sonra, sayfanızı veya gönderinizi ziyaret edebilir ve kalıplar bölümüne gittiğinizde, aşağıda gösterildiği gibi "Öne Çıkanlar" bölümünde yeni kalıbı görebilirsiniz:

Bir Model Kategorisinin Kaydedilmesi

WordPress, kalıpları kaydederken kullanabileceğiniz bazı varsayılan kalıp kategorileri sağlar. Bunlar şunları içerir: Düğmeler, Sütunlar, Galeri, Başlıklar, Metin, Sorgu ve Öne Çıkanlar.

Blok kalıplarını kaydederken, kalıpları özel kategorilerde kaydetmek daha iyi bir yaklaşım olacaktır. Bunu başarmak için önce bir kalıp kategorisi kaydetmeniz gerekir.

Bir model kategorisi kaydetmek için, alt temanızın functions.php dosyasına aşağıdaki kodu eklemeniz gerekir.

 function register_category_pattern() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_category_pattern' );

Kategori etiketini tercihinize göre değiştirebilirsiniz. Yukarıdaki kod örneğinde “Custom” kategori etiketini kullanıyoruz.

Özel kalıp kategorisinin sayfanızda veya gönderinizde görüntülenmesi için onu bir kalıpla ilişkilendirmeniz gerekir. Buradaki örneğimizde, bu kalıp kategorisine uyum sağlamak için orijinal kalıp kayıt kodunu değiştireceğiz. Bunu yapmak için şu kod satırını arayın:

 'categories' => array( 'featured' ),

Ardından, "özellikli" olan kategoriyi yerinde "özel" olarak değiştirmeniz gerekecek, böylece kod şu şekilde okunacaktır:

 'categories' => array( 'custom' ),

Bizim durumumuzda kalıp ve kalıp kategorisini kaydetmek için son kod şu şekilde olacaktır:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

Sayfanıza veya gönderinize erişip ona bir kalıp eklemeyi denediğinizde, kalıp aşağıda görüldüğü gibi yeni kayıtlı "Özel" kategorimizde oluşturulacaktır:

Kalıp Dizini aracılığıyla

WordPress ekosistemindeki herkesin erişebileceği bir kalıp oluşturmak istediğiniz bir durumda, bunu artık Kalıplar Dizininden yapabilirsiniz.

Modeller dizinine eriştikten sonra aşağıdakileri yapmanız gerekecektir:

i) Modeller dizinine giriş yapın.

ii) "Yeni bir desen oluştur" bağlantısına tıklayın.

iii) Bir sonraki ekranda kalıp başlığınızı ekleyin ve istediğiniz blokları eklemeye başlayın. En az üç blok eklemeniz gerekir.

iv) Blok ekleme işlemi bittiğinde, deseni taslak olarak kaydedebilirsiniz.

v) Ardından, modelinizin burada özetlenen yönergeleri ihlal etmediğini doğrulayın: Kalıp Yönergeleri. Her şey yolundaysa, kalıbı gönderebilirsiniz.

Burada gösterilen "kalıplarım" bağlantısını tıklayarak, sahip olduğunuz kalıpları görüntüleyebilirsiniz:

“Desenlerim” bölümünde oluşturulan kalıplar, taslaklar, gönderdiğiniz kalıplar ve incelenmeyi bekleyen kalıplardır.

vi) Ardından yeni bloğu kopyalayabilir ve sayfanıza veya gönderinize yapıştırabilirsiniz.

Özel Blok Kalıpları Eklentisi Nasıl Oluşturulur

Kalıbınızı ve kategorinizi function.php dosyanıza kaydedecek koda sahip olmak yerine, kalıplar ve kalıp kategorileri eklemek için kullanılabilecek özel bir eklentiye sahip olmayı tercih edebilirsiniz. Bunu yapmak için aşağıdakileri yapmanız gerekecektir:

i) Web sitesi dosyalarınıza barındırma panelinizden veya alternatif olarak Filezilla gibi bir FTP yazılımı kullanarak FTP üzerinden erişin

ii) wp-content > plugins dizini yoluna gidin

iii) Eklentiler dizini içinde “özel desenler” adında bir klasör oluşturun.

iv) Klasörde custom-patterns.php adlı bir dosya oluşturun

v) Dosyaya aşağıdaki başlık yorumunu ekleyin:

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */

İstediğiniz eklenti adlandırmayla eşleşmesi için yukarıdaki başlık yorumunu özelleştirebilirsiniz.

vi) Başlık yorumunun altına, kalıbı ve kategoriyi kaydetmek için kodunuzu ekleyin. Buradaki durumumuzda, desenimizi ve özel kategorimizi kaydetmek için daha önce oluşturduğumuz kodu kullanacağız. Son kod bu nedenle olacaktır:

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */ function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

vii) Kontrol panelindeki eklentiler listenizde, artık eklentiler listesinden eklentinin bir görünümüne sahip olmalısınız. Eklentiyi etkinleştirmek için eklenti adının yanındaki etkinleştir bağlantısını tıklayın.

viii) Etkinleştirildikten sonra, aşağıda görüldüğü gibi blok düzenleyicide blok deseni ve özel kategorinin bir görünümüne sahip olmalısınız:

Blok Kalıplarının Kaydını Silme

Kaydettiğiniz blok kalıplarını kaldırmak mümkündür. Örneğin, daha önce kaydettiğimiz “eklenti/medya-metin-pattern” blok kalıbını kaldırmak isterseniz, alt temanın function.php dosyasına aşağıdaki kodu eklemeniz gerekir:

 function deregister_my_pattern() { unregister_block_pattern( 'my-plugin/media-text-pattern' ); } add_action( 'init', 'deregister_my_pattern' );

Yukarıdaki kodda, “eklentim/medya-metin-kalıpım” ifadesini kaydetmiş olduğunuz kalıbın adıyla değiştirmeniz gerekecektir.

Blok Modeli Kategorilerinin Kaydını Silme

Yalnızca bir kalıp kategorisinin kaydını silmek ve kalıbın kendisini korumak istiyorsanız, alt temanın function.php dosyasına aşağıdaki kodu eklemeniz gerekir:

 function deregister_pattern_category() { unregister_block_pattern_category( 'custom'); } add_action( 'init', 'deregister_pattern_category');

Yukarıdaki kod, daha önce eklediğimiz "özel" kategorisinin kaydını siler. "Özel" ifadesini, kaydetmiş olduğunuz kategoriyle değiştirmeniz gerekecektir.

Çözüm

Bu makalede, blok kalıplarının ne olduğunu, nasıl kullanılacağını, blok kalıplarını ve kategorilerini kaydetme ve kayıtlarını silme konusunu inceledik. Blok düzenleyici ile web sitenizi tasarlarken blok kalıpları oldukça önemlidir. Web sitenizdeki dinamik sayfaları ve gönderileri çok az çabayla tasarlamayı kolaylaştırırlar.

Bu makalenin, web sitenizde blok kalıplarının nasıl kullanılacağına ilişkin ilgili bilgiler sağladığını umuyoruz. Herhangi bir sorunuz veya yorumunuz varsa, lütfen aşağıdaki yorumlar bölümünde bir başvuruda bulunmaktan çekinmeyin.