WordPress’te Özel Gutenberg Bloğu Nasıl Oluşturulur

Gutenberg, 5.0 güncellemesinden bu yana varsayılan WordPress editörü olmuştur. Klasik editör olan selefinden daha sezgisel ve kullanıcı dostu bir editör ihtiyacından yaratılmıştır. Ve içerik bloklarını sürükleyip bırakma süreci Gutenberg’i kullanıcılar için daha çekici hale getirmiş olsa da, bu düzenleyicinin eksiklikleri de var. Ana olanlardan biri, varsayılan olarak kullanıcılara sunulan blok sayısında yatmaktadır. Bazı ek bloklar sunan WordPress eklentileri ve temaları olsa da, web sitenize benzersiz bir his katmak zor olabilir. Bu durum özel işlevler eklemekten başka bir şey değildir.

Gutenberg editörünü kullanarak web sitelerini özelleştirmeye karar veren tüm kullanıcılar için WordPress’te nasıl özel bir blok oluşturulacağını bilmek çok önemlidir. Özel olarak uyarlanmış Gutenberg blokları oluşturmanın ek bir avantajı olarak, web sitenize özel bloklar eklemek veya işlevlerini genişletmek için kullandığınız tüm eklentilerden potansiyel olarak kurtulabilirsiniz. Bu yazıda, bir eklenti kullanarak WordPress’te nasıl özel bir Gutenberg bloğu oluşturabileceğinizi açıklayacağız. Süreç birkaç adım içerdiğinden, bunları birer birer ele alacağız:

• Bir eklenti ile özel bir Gutenberg bloğu oluşturma

• Blok özelliklerini belirtmek için eklentiyi kullanma

• Çıkış kodunu ekleme

• Özel bloğu şekillendirme

Bir eklenti ile özel bir Gutenberg bloğu oluşturma

WordPress’teki diğer birçok özel özellikte olduğu gibi, özel bir Gutenberg bloğunun tanıtılmasıyla başa çıkmanın iki farklı yolu vardır. Birincisi, kodu kullanarak sıfırdan manuel olarak oluşturmak veya bunu yapmak için uygun bir WordPress Gutenberg eklentisi kullanmaktır. İlki çok yoğun kodlama gerektirdiğinden ve zaman alıcı olduğundan, size ikincisini göstermeyi seçtik. Bu vitrin için kullanacağımız eklentinin adı Lazy Blocks ve sayısız özel Gutenberg bloğu oluşturmanıza izin veriyor. Nasıl yapılır kısmına geçmeden önce bazı özelliklerine kısaca göz atalım.

Özel Blok Oluşturucu – Lazy Blocks eklentisi, özel Gutenberg blokları oluşturmak için yapılmış ücretsiz bir WordPress eklentisidir. Ayrıca özel meta alanları gösterme ve tüm gönderi türleri için gönderi şablonları oluşturma seçeneğine de sahiptir. Eklentinin birincil amacı, elbette, WordPress’te özel bir bloğun nasıl oluşturulacağıdır. Bir sürükle ve bırak düzenleyici kullanarak özel blokları kaydetmek ve kontrol alanlarını (örn. metin alanı, URL, onay kutusu ve renk seçici alanı) eklemek için çok sezgisel bir kullanıcı arabirimi sunar. Bununla birlikte blok oluşturma işlemi, kullanıcıların blok içeriğini ön uçta görüntüleyecek bazı özel kodlar yazmasını gerektirdiğinden, bu eklenti acemi WordPress kullanıcıları için tasarlanmamıştır.

Bununla birlikte eklenti çok iyi belgelenmiştir ve kontrol alanlarının her birinin uygulanması için basit kod örnekleri sunar. Bu yüzden onunla çalışmaya başlamadan önce eklentinin belgelerini incelemenizi şiddetle tavsiye ederiz. Ayrıca eklenti, ek özelleştirme amaçları için ek filtreler ve kancalar sunar. Tüm bunlar, ileri düzey WordPress kullanıcılarının yanı sıra daha önce kodlama deneyimi olan orta seviye WordPress kullanıcıları için çok uygun hale getirir. Bunu söyledikten sonra, bu eklentiyi kullanarak WordPress’te nasıl özel bir blok oluşturulacağını keşfedelim.

Eklentiyi yükledikten sonra, yönetici kontrol panelinizdeki Lazy Blocks bölümüne gidin. Halihazırda yeni bir Gutenberg bloğu oluşturduysanız, Bloklar alt bölümünden ona erişebilecek ve onu düzenleyebileceksiniz.

Aksi takdirde, yeni bir özel Gutenberg bloğu oluşturmak için Tembel Bloklar > Yeni Ekle’ye gidin.

Blok özelliklerini belirtmek için eklentiyi kullanma

Yeni bir blok oluşturduğunuzda, aşağıda gösterilen ekranı göreceksiniz. Bu ekran kabaca üç bölüme ayrılabilir. İlk bölüm, Gutenberg bloğunuzun parçası olan alanları (örn. metin alanları, onay kutuları, renk seçici alanları vb.) eklemenizi sağlayan ve iki sekmeye ayrılan Kontroller bölümüdür: İçerik ve Denetçi. Özel bloğunuzu kullandığınızda, İçerik sekmesindeki tüm alanlar sayfanın düzenleyici bölümünde görüntülenecektir. Özel blok kullanıldığında, Müfettiş sekmesindeki alanlar sağ taraftaki menüde görüntülenecektir. Bu yazı için örnek olarak hazırladığımız özel Gutenberg bloğuna geldiğimizde bunu pratikte görebileceksiniz.

Sayfanın sağ tarafında bulunan ikinci bölüm, Gutenberg bloğunun seçeneklerini ve kontrol alanlarını belirtmek için kullanılır. Bu durum bölüm içinde bulunan Blok ve Kontrol adlı iki sekme kullanılarak yapılır.

Son olarak üçüncü bölüm, Gutenberg bloğunu bir bütün olarak görüntülemek için kodu eklemeniz gereken Kod bölümüdür. Ayrıca iki sekmesi vardır—Ön Uç ve Düzenleyici. Bunlar, özel Gutenberg bloğunuzun çıktısını hem web sitenizin ön yüzünde kodlamanıza hem de sayfa düzenleyicinizde önizlemenize olanak tanır.

Eklenti, çıktı için üç olası kodlama tekniği sunar: gidon gösterimi ile HTML kodunu kullanmak, PHP kodunu kullanmak (yani, HTML ve PHP kodunun bir karışımı) veya kodla ayrı bir şablon dosyası oluşturmak ve onu sunucunuza yüklemek. Son tekniği seçerseniz, şablon dosyanızın katı bir WordPress dosya yapısını izlediğinden emin olmanız gerekir. Daha kesin olarak, dosya yolu /wp-content/themes/theme_name/blocks/lazyblock-block_name/block.php olmalıdır. theme_name ve block_name bölümleri, sırasıyla temanız ve özel Gutenberg blok adlarınızla eşleşecek şekilde değiştirilmelidir.

Aşağıdaki ekran görüntüsünden de görebileceğiniz gibi, çıktıyı oluşturmak için varsayılan teknik HTML + Gidon seçeneğidir.

Artık farklı bölümleri ele aldığımıza göre, kontrol alanlarını nasıl ekleyebileceğinizi inceleyelim ve mevcut olanlar arasından seçeneklerini belirleyelim.

Varsayılan olarak, Kontroller bölümünün İçerik sekmesine yerleştirileceksiniz. Bu sekmeye bir kontrol alanı eklemek için “+” düğmesine basmanız yeterlidir. Bu durum varsayılan olarak bir metin alanı oluşturacaktır, fakat bunu ayarlamak için sağdaki seçenekleri kullanabilirsiniz. Daha doğrusu, bir kontrol alanı seçtiğinizde, sağdaki Kontrol sekmesinden seçeneklerini ayarlayabilirsiniz. Seçeneklerden bazıları tüm kontrol alanları için kullanılabilirken (örn. Etiket, Ad, Tür ve Yerleşim), diğerleri belirli bir kontrol alanına özel olabilir.

Bu yüzden Lazy Blocks eklentisini kullanarak özel bir Gutenberg bloğu oluşturmanın ilk kısmı, bloğu kaydetmektir. Daha sonra o blok için gerekli tüm kontrol alanlarını ekleyin ve seçeneklerini ve bloğun kendisinin seçeneklerini ayarlayın. Özel bir Gutenberg bloğu oluşturmanın geri kalan bölümleri, çıktı için kodlama yöntemini seçmeyi ve uygun kodu yapmayı içerir. Ardından bloğu belirli bir sayfadaki Gutenberg editörüne eklemeniz ve stilizasyon amacıyla ek CSS kodu oluşturmanız gerekir. Bu makale için oluşturulan bir örneği kullanarak bu adımları daha ayrıntılı olarak açıklayacağız.

Lazy Blocks > Add New ekranına giriş yaptıktan sonra blok kayıt işlemi başlar. Sağdaki Blok sekmesini seçtikten sonra, sonuç olarak onu kaydedecek olan özel bloğunuzun sahip olacağı bazı bilgileri ve özellikleri belirleyebilirsiniz. Bu makale için, otomatik olarak karşılık gelen bir bilgi parçası oluşturan Başlık Özel CTA bloğunu yapmaya karar verdik.

Başlık ve Bilgi Bilgisi dışında Kategori, Anahtar Sözcükler ve Simge özelliklerini de belirleyebilirsiniz. Bunlar, sayfalara ve gönderilere eklenebilecek mevcut bloklar listesinden kendi özel bloğunuzu ararken kullanışlıdır. Bir başka yararlı özellik de Açıklama’dır. Bireysel kodlarını incelemek zorunda kalmadan, blok listesinden düzenlemek istediğiniz tam bloğu bulmanıza yardımcı olabilir.

Kalan üç bölüme gelince, Destekler bölümündeki tüm seçenekleri işaretlemeye karar verdik, fakat altındaki bölümlerde – Hizala ve Koşullandır – özellikleri varsayılan değerlerine ayarladık. Bu özellikler hakkında daha fazla bilgi edinmek için eklentinin belgelerini, özellikle blok oluşturma sayfasını inceleyebilirsiniz.

Bunu yaptıktan sonra, aşağıdaki adım özel bloğunuz için kontrol alanlarını eklemektir. İçerik sekmesini kullanarak, örnek bloğumuz Özel CTA için şu kontrol alanlarını ekledik: tekrarlayıcı, metin, zengin metin, URL ve metin. Inspector sekmesinden, bir renk seçici alanı eklemek için Yerleştirme seçeneğini kullandık. Ayrıca kontrol alanlarının her birine kasıtlı olarak bir etiket ve ad ekledik. Bunların tümü, aşağıdaki iki ekran görüntüsünde ilgili kontrol adları vurgulanarak gösterilmektedir. Kodlama bölümünde kullanıldıkları için kontrol adlarının en önemli özellikler olduğunu lütfen unutmayın.

Bu kontrol alanlarının çoğu basit olsa da, tekrarlayıcı kontrol alanı kafa karıştırıcı olabilir. Bu alan, içine ek kontrol alanları eklemenizi sağlar. Daha doğrusu, tekrarlayıcı ve içindeki içerik türü, süresiz olarak tekrarlanabilen bir satır gibi davranır, dolayısıyla adı.

Örneğimiz için, satırımıza sırasıyla inner-small-image ve inner-label adlı bir resim ve bir metin alanı eklemeyi seçtik. Ayrıca eklediğimiz kontrol alanları için seçeneklerin çoğunu varsayılan değerlerinde tuttuk. Tek istisna, iç etiket metin alanına koyduğumuz 40 karakterlik sınır ve sağ sütun metin zengin metin alanını çok satırlı yapmamızdır. Bunu söyledikten sonra, bu makale için oluşturulan koda geçelim.

Çıkış kodunu ekleme

Kod bölümünde PHP çıktı yöntemini kullanmayı seçtik, fakat mevcut üç yöntemden hangisini en rahat hissediyorsanız onu seçebilirsiniz. Eklentinin izin verdiği diğer iki kodlama çıktı yönteminden birini kullanmayı seçerseniz, önceden eklentinin belgelerini incelemenizi tavsiye ederiz.

Ayrıca aynı bölüm içinde ayarlayabileceğiniz ek seçenekler de vardır. Kullanırken özel bloğun bir önizlemesine sahip olmak isteyip istemediğinizi seçebilirsiniz. Blok önizlemesini düzenleyicide göster’i Hiçbir Zaman olarak ayarlayarak bu seçeneği dahil etmemeye karar verdik. Bununla birlikte kendi tarafınızda önizlemeyi etkinleştirmeyi seçerseniz, ön uç çıktısıyla aynı kodu kullanmayı seçebileceğinizi veya bunun için Düzenleyici sekmesinde ayrı bir kod oluşturabileceğinizi bilmeniz önemlidir. Aynı kodu kullanmak istiyorsanız yapmanız gereken tek şey Frontend and Editor için Single output code onay kutusunu işaretlemektir.

Bunu söyledikten sonra, bu makale için oluşturduğumuz kod aşağıda gösterilmiştir.

<?php
$wrapper_style="";
if ( isset( $attributes['border-color'] ) ) {
$wrapper_style .= "border: 2px solid " . $attributes['border-color'];
} ?>
<div class="custom-block-wrapper" style="<?php echo $wrapper_style; ?>">
<div class="left-column">
<?php foreach ( $attributes['left-column-repeater'] as $inner ) { ?>
<div class="left-inner-section">
<?php if ( isset( $inner['inner-small-image']['url'] ) ) { ?>
<img src="https://qodeinteractive.com/magazine/how-to-create-a-custom-block-in-wordpress/<?php echo esc_url( $inner["inner-small-image']['url'] ); ?>"
alt="<?php echo esc_attr( $inner['inner-small-image']['alt'] ); ?>">
<?php }
if ( isset( $inner['inner-label'] ) ) { ?>
<p><?php echo esc_html( $inner['inner-label'] ); ?></p>
<?php } ?>
</div>
<?php } ?>
</div>
<div class="right-column">
<?php if ( isset( $attributes['right-column-title'] ) ) { ?>
<h3><?php echo esc_html( $attributes['right-column-title'] ); ?></h3>
<?php }
if ( isset( $attributes['right-column-text'] ) ) { ?>
<p><?php echo wp_kses_post( $attributes['right-column-text'] ); ?></p>
<?php }
if ( isset( $attributes['cta-link'] ) && isset( $attributes['cta-link-text'] ) ) { ?>
<a href="https://qodeinteractive.com/magazine/how-to-create-a-custom-block-in-wordpress/<?php echo esc_url( $attributes["cta-link'] ); ?>" target="_blank" class="btn"><?php echo esc_html( $attributes['cta-link-text'] ); ?></a>
<?php } ?>
</div>
</div>

Bu kodu parçalayalım.

Bunu yapmak için, ona daha basitleştirilmiş bir biçimde bakacağız. Aşağıda görebileceğiniz gibi, özel Gutenberg bloğumuzun HTML yapısı iki