Basit Bir Gutenberg Blok Eklentisi Nasıl Oluşturulur

Hepimiz WordPress'i sevmiyor muyuz? Platform, başlangıcından bu yana, geliştiricilerin sürekli olarak yeni özellikler eklemesiyle büyük bir başarı elde etti. Son zamanlardaki en dikkat çekici özelliklerden biri, kod adı Gutenberg olan WordPress blok düzenleyicisidir.

Gutenberg, WordPress kullanıcılarına içerik yayınlamanın ve sitenizi özelleştirmenin heyecan verici yeni bir yolunu sunuyor. Hem yeni başlayanlar hem de geliştiriciler için harika bir haber olan kullanımı inanılmaz derecede kolaydır. WordPress'in en son sürümünü kullanıyorsanız, zaten blok düzenleyici ve blok kavramı ile ailedensiniz.

Varsayılan olarak, WordPress blok düzenleyici, metin, resim, alıntı, ses, video, yerleştirme vb. eklemenize izin veren bazı bloklarla birlikte gelir. Bunun da ötesinde, editörü ter dökmeden genişletmenize izin veren bir sürü Gutenberg eklentisi var.

Yine de, kendi özel bloklarınızı oluşturmanızı isteyen özel bir ihtiyacınız olabilir. İşte bugünün yazısı burada devreye giriyor. Birkaç paragrafta, özel ihtiyaçlarınıza uyacak şekilde özel Gutenberg bloklarının nasıl oluşturulacağını tam olarak öğreneceksiniz.

Daha fazla uzatmadan, öğrenecek çok şey olduğuna göre başlayalım.

Neyse, Bloklar Nedir?

Yeni başlayan biriyseniz, muhtemelen bu Gutenberg işinin neyle ilgili olduğunu merak ediyorsunuzdur. Biliyorum, Gutenberg tanıtıldığında oldukça kafam karışmıştı. Ama suçlanacak kimse yok, hepimiz Klasik Editör'e alışmıştık ki bu değişiklik ilk başta rahatsız ediciydi.

Yine de, beğensek de beğenmesek de WordPress blok düzenleyicisi burada kalacak. İşte bu yüzden Gutenberg (ve onunla birlikte gelen her şey) hakkında olabildiğince çok şey öğrenerek ondan en iyi şekilde yararlanmalısınız.

Bloklar, Paragrafları, Başlıkları, Medyaları ve Gömmeleri, birbirine dizildiğinde WordPress veritabanında depolanan içeriği oluşturan ve geleneksel serbest biçimli metin kavramını gömülü medya ve kısa kodlarla değiştiren bileşenler olarak ele alır. – Blok Editörü El Kitabı

Geçmişte, WordPress kullanıcıları içerik eklemek için serbest biçimli metinlere ve kısa kodlara güveniyordu. Gutenberg blokları kullanır. Yeni düzenleyici, yönetimi kolay zengin ve esnek düzenler oluşturmak için blok birimlerini kullanmanıza olanak tanır. Şu anda gönderiler ve sayfalar için blok düzenleyiciyi kullanabilirsiniz, ancak gelecekte tam site düzenlemeyi desteklemek için aktif planlar vardır.

Bazı blokları gösteren Gutenberg editörü

Bloklarla çalışmak, WordPress'te içerik oluşturmayı oldukça ferahlatıcı hale getirir. Ayrıca, mevcut eklentilerin çoğu yeni düzenleyiciyi destekler ve söz konusu eklentilerden içerik eklemeyi çok kolay hale getiren kullanıma hazır bloklarla birlikte gelir. Düzenleyici, yayınla düğmesine daha hızlı basabilmeniz için blokları bir sayfaya sürükleyip bırakmanıza olanak tanır.

Tıpkı doğrudan WordPress'te yerleşik bir sayfa oluşturucu gibi.

Elementor gibi görsel sayfa oluşturuculara aşinaysanız, muhtemelen sürükle ve bırak sayfa oluşturma konseptine de aşinasınızdır. Gutenberg, sürükle ve bırak site oluşturmayı WordPress çekirdeğine tam olarak dahil etme girişimidir. Daha fazla bilgi edinmek için WordPress için Gutenberg Builder için Adım Adım Kılavuzumuza göz atmaktan çekinmeyin.

Bu arada, bugünün gönderisinin en iyi kısmına gelelim. Basit bir blok oluşturmayı öğrenelim. Bunu manuel olarak veya Genesis Custom Blocks (eski BlockLab), Lazy Blocks veya ACF gibi eklentileri kullanarak yapabilirsiniz. Özel bloklar oluşturmak biraz tekniktir, bu nedenle bugünkü yazının amaçları için bir eklenti kullanacağız.

Özel Blok Nasıl Oluşturulur (Genesis Özel Bloklarını Kullanarak)

Eklenti yoluna gitmek daha kolaydır, çünkü sıfırdan özel Gutenberg blokları oluşturmak HTML, CSS, PHP ve daha da önemlisi JavaScript'i iyi bir şekilde kavramayı gerektirir. Yeni başlayanlara bir eğri topu atan React'i de anlamanız gerekecek.

Bir sonraki bölüm için diğer geliştiricilerin yanı sıra StudioPress ve WPEngine tarafından size sunulan Genesis Custom Blocks'u kullanacağız. Genesis Custom Blocks'ın ücretsiz sürümü, resmi WordPress deposunda mevcuttur; bu, onu WordPress yönetici panosuna yükleyebileceğimiz anlamına gelir.

Genesis Özel Bloklarını Yükleyin

WordPress yönetici kontrol panelinize giriş yapın ve aşağıda gösterildiği gibi Eklentiler > Yeni Ekle seçeneğine gidin.

Ardından, anahtar kelime arama kutusuna “Genesis Özel Blokları” yazın ve Şimdi Yükle düğmesine basın:

Bundan sonra, partiyi başlatmak için eklentiyi etkinleştirin .

gayet iyi gidiyorsun

Ardından, yeni bir özel blok oluşturalım. Örnekleme amacıyla, yayınladığımız her gönderinin sonuna ekleyeceğimiz özel bir Harekete Geçirici Mesaj (CTA) oluşturalım. En iyi yanı, sizi aynı blokları tekrar tekrar oluşturma zahmetinden kurtarmak için blokları yeniden kullanabilmenizdir.

WordPress yönetici menünüzden, aşağıda vurguladığımız gibi Özel Bloklar > Yeni Ekle seçeneğine gidin.

Bunu yapmak sizi, özel bloğumuzu (bizim durumumuzda bir CTA) oluşturmak için tüm seçenekleri bulabileceğiniz aşağıdaki sayfaya götürecektir:

Yukarıdaki ekran görüntüsünde gördüğünüzü açıklamak için birkaç kelime. En baştan başlayarak, sahipsin.

Ana Düzenleme Alanı:

• Oluşturucu – Özel bloğunuzu tasarlamak için muhtemelen burada çok zaman harcayacaksınız. Oluşturucu bir başlık, alanlar, bilgi, anahtar kelimeler, kategori eklemenize ve özel bloğunuzu önizlemenize olanak tanır. Alanları nasıl ekleyeceğinizi öğreneceksiniz.
• Şablon Düzenleyici – Özel bloğunuzu tasarladıktan sonra (yani çeşitli alanlar ekleyerek), Şablon Düzenleyici'de bir blok şablonu oluşturmanız (okuyun, biraz kod ekleyin) gerekir. CTA'yı tasarladığımızda daha fazlasını öğreneceğiz.
• Editör Önizleme - Bu, WordPress blok düzenleyicisinin içindeki özel bloğu önizlemenize olanak tanır.
• Ön Uç Önizleme – Burada, özel bloğun sitenizde nasıl göründüğünü önizleyebilirsiniz.
• Editör Alanları – Bir yazının veya sayfanın ana düzenleme alanındaki alanları görüntüler (Biliyorsunuz, tıpkı WordPress düzenleyicide normal yazılarınızı nasıl gördüğünüz gibi)
• Denetçi Alanları – Alanı, blok denetçisinin altındaki sağ kenar çubuğunda görüntüler.

Kenar Çubuğu Seçenekleri

• Bilgi – Bilgi, özel bloğunuza verdiğiniz başlığa göre otomatik olarak doldurulur. Blok şablonunu oluştururken önemlidir.
• Simge – Bu seçenek, özel bloğunuza bir simge eklemenizi sağlar.
• Kategori – Bu, özel bloğunuza bir kategori atamanıza olanak tanır. Yerleşik kategorilerden birini kullanarak özel bloğunuzu kategorilere ayırabilir veya yepyeni bir kategori oluşturabilirsiniz.
• Anahtar Kelimeler – Özel bloğunuzla ilgili en fazla üç anahtar kelime ekleyin, böylece insanlar blok seçicide kolayca bulabilirler.
• Blok alanları yerinde işlemek yerine bir modda açın – Alanları bir modda açmak istiyorsanız açın. Birçok alana sahip özel bir bloğunuz varsa bu yararlıdır.
• Gönderi Türleri – Özel bloğunuzun her gönderi türünde görüntülenmesine izin vermek için kutuyu/kutuları işaretleyin. Örneğin, Gönderiler'in işaretini kaldırırsanız, blok hiçbir gönderide görünmez.

Özel Blok Oluşturma

Artık kullanıcı arayüzünü ve her bir parçanın ne yaptığını daha iyi anladığınıza göre, işe koyulmak için kolları sıvayalım.

Oluşturucuda özel bloğunuza uygun bir başlık verin. Aşağıda gösterildiği gibi bunun için CTA ile gidiyorum.

Yeni alanlar eklemeden önce, aşağıda gösterildiği gibi bir simge, anahtar kelimeler ekleyelim ve özel blok için bir kategori seçelim.

Bu küme, özel bloğumuza bazı alanlar ekleyelim. Örnek CTA bloğumuz için, aşağıdaki sırayla yalnızca üç alan ekleyeceğiz: bir resim, biraz metin ve insanların hayali e-kitabı indirmesine izin veren bir dosya alanı

Blok Alanları Ekleme

Editör Alanları bölümünde, aşağıda gösterildiği gibi ilk alanı eklemek için Artı (+) simgesine tıklayın.

Ardından, bir görüntü alanı ekleyelim. Kenar çubuğundan Alan Türü'nü Görüntü olarak ayarlayın ve diğer seçenekleri tanımlayın. Ayrıca, blok şablonunu oluştururken kullanacağımız için (benimkini image-field olarak ayarladım) bilgi notuna dikkat edin. Aşağıdaki resme bakın.

Bundan sonra, metin ve dosya alanlarını benzer şekilde ekleyin.

Henüz kutlamayın, gidilecek bir adım var. Şablon Düzenleyici > İşaretleme'ye geçin:

Benimkinin zaten bir kodu var ama seninki boş olacak

Burada, özel bloğunuzun sitenizde nasıl görüneceğini tasarlayacağız. Şablon Düzenleyici HTML, CSS ve alan bilgilerini kabul eder (2 parantez içine almanız gerekir). PHP kullanmanız gerekiyorsa, şablonu bunun yerine PHP şablonlama yöntemini kullanarak oluşturabilirsiniz.

Endişelenme, kolay.

Şablon Düzenleyicinin içinde, İşaretleme sekmesi altında (yukarıdaki resme bakın), aşağıdaki HTML işaretlemesini (kodunu) ekleyin:

 <div class="cta-block">
<div class="cta-image">
<img kaynağı ="{{görüntü alanı}}">
</div>
<div class="metin yükleme">
<h2>{{metin alanı}}</h2>
<a href="{{dosya-alanı}}">
<button type="button" class="dwnld">İndir</button></a>
</div>
</div>

HTML işaretlemenizi yazarken, Şablon Düzenleyicinin sizin için alan bilgilerini (örneğin {{image-field}} ) otomatik olarak tamamladığını fark edeceksiniz.

Ardından, bazı basit stiller eklemek için CSS bölümüne gidin.

Arzu ettiğiniz stilleri ekleyebilirsiniz, ancak bununla çalışıyorum:

 .cta-blok {
metin hizalama:merkez;
arka plan rengi:turuncu;
genişlik: %100;
yükseklik:otomatik;
kenarlık: 2 piksel düz turuncu;
}

.dwnld {
arka plan rengi: siyah;
kenarlık: 2 piksel düz siyah;
yeşil renk;
dolgu: 5px 10px;
metin hizalama: merkez;
ekran: satır içi blok;
yazı tipi boyutu: 20 piksel;
kenar boşluğu: 10 piksel 30 piksel;
imleç: işaretçi;
sınır yarıçapı:2px;

}

Ve hazırsın! Yayınla'yı tıklayın:

Yeni özel bloğunuzu çalışırken görmek için WordPress yönetici kontrol panelinize geri dönün ve Gönderiler > Yeni Ekle'ye gidin (Sayfalarla da çalışır):

Normalde yaptığınız gibi bir gönderi oluşturun, yeni bir blok eklemek için Artı (+) 'yı tıklayın ve aşağıda vurguladığımız gibi yeni parlak özel bloğunuzu seçin.

Ardından, özel bloğunuzu istediğiniz gibi doldurun ve gönderinizi yayınlayın:

Şimdi, ön uçtaki yeni özel CTA bloğumu kontrol edersem şunu görüyorum:

Özel CTA'm tam orada! Lütfen tasarım yeteneklerime aldırmayın - tabii ki gerçek yaşam senaryosunda bloğunuzu şekillendirmek için fazladan zaman harcamak isteyeceksiniz. Ama umarım bugün burada bir şeyler öğrenmişsindir.

Diğerlerinin yanı sıra Genesis Custom Blocks ve Lazy Blocks gibi araçlarla özel bloklar oluşturmak zor bir iş olmak zorunda değil. Buna ek olarak, ihtiyaçlarınıza bağlı olarak özel bloklarınızı karmaşık veya basit hale getirebilirsiniz. Özel blokları manuel olarak oluşturmanız gerekiyorsa, JavaScript dersleri alın. Yardımcı olacaktır

Herhangi bir düşünce veya soru? Lütfen aşağıdaki yorumlarda bize bildirin.