WordPress’te Gutenberg özel bloğu nasıl yapılır (kolay yol)

WordPress siteniz için özel bir Gutenberg bloğu oluşturmak ister misiniz? WordPress 5.0 güncellemesinden sonra, yeni WordPress blok düzenleyicisinde içerik oluşturmak için bir blok kullanmanız gerekir. WordPress, içerik yazarken kullanabileceğiniz birkaç yararlı blokla gönderilir. Birçok WordPress eklentisi de kullanabileceğiniz kendi bloklarıyla birlikte gelir. Ancak, bazen belirli bir şey yapmak için kendi özel Gutenberg bloğunuzu yapmak isteyebilirsiniz. WordPress siteniz için özel bir Gutenberg bloğu oluşturmak için kolay bir çözüm arıyorsanız, doğru yerdesiniz.
Bu adım adım öğreticide, Gutenberg için bir WordPress özel bloğu oluşturmanın kolay bir yolunu göstereceğiz.

Not: Bu makale orta kullanıcılar içindir. Özel bir Gutenberg bloğu oluşturmak için HTML ve CSS’ye alışkın olmalısınız. Adım 1: Yapmanız gereken ilk şey Block Lab eklentisini yüklemek ve etkinleştirmektir. Bu, yönetici panelinizden çok zorluk çekmeden özel bir blok oluşturmanızı sağlayan bir WordPress eklentisidir.

Bir eklenti yüklemek için WordPress eklentilerinin nasıl yükleneceği konusunda yeni başlayan kılavuzumuzu takip edebilirsiniz. Eklenti etkinleştirildikten sonra, ilk özel bloğunuzu oluşturmak için bir sonraki adıma geçebilirsiniz.
Adım 2: Yeni bir blok oluşturun Bu öğreticiden sonra bir ‘referans’ blok oluşturacağız. İlk olarak, blok laboratuvarını aç »Yönetici panelinizin sol kenar çubuğundan yeni ekleyin. Bu sayfada, bloğunuza bir isim vermeniz gerekir. Seçtiğiniz adını “Block Adını Buraya Girin” metin kutusuna yazabilirsiniz.

Özel bloğumuzun adını vereceğiz: referans. Sayfanın sağ tarafında, blok özelliğini bulacaksınız. Burada bloğunuz için bir simge seçebilir ve açılır kutu kategorisinden blok kategorisini seçebilirsiniz. Salyangozlar bloğunuzun adına göre otomatik olarak doldurulacaktır, bu nedenle değiştirmenize gerek yoktur. Ancak, bloğunuz kolayca bulunabilmesi için anahtar kelime metni alanında en fazla 3 anahtar kelime yazabilirsiniz. Şimdi bloklarımıza birkaç alan ekleyelim. Metin, numaralar, e -postalar, URL’ler, renkler, resimler, onay kutuları, radyo düğmeleri ve daha fazlası gibi çeşitli alan türleri ekleyebilirsiniz. Özel referans bloklarımıza 3 alan ekleyeceğiz: gözden geçiren görüntüler için görüntü alanları, gözden geçiren adları için metin kutuları ve tanıklık metni için metin alanları. İlk alanı eklemek için + Ekle düğmesini tıklayın.

Bu, alan için birkaç seçenek açacaktır. Her birine bakalım.

Alan Etiketi: Alan etiketi için seçtiğiniz adını kullanabilirsiniz. İlk alanımızı bir gözlemci görüntüsü olarak adlandıralım.
Alan Adı: Alanın Adı Alan etiketine göre otomatik olarak yapılacaktır. Bir sonraki adımda bu alanın adını kullanacağız, bu nedenle her alan için benzersiz olduğundan emin olun.
Alan Türü: Burada alan türünü seçebilirsiniz. İlk alanımızın bir resim olmasını istiyoruz, bu yüzden römorkör menüsünden görüntüleri seçeceğiz.
Alan Konumu: Editöre veya Müfettiş’e alan eklemek isteyip istemediğinize karar verebilirsiniz.
Yardım Metni: Alanı tanımlamak için bazı metinler ekleyebilirsiniz. Bu bloğu kişisel kullanımınız için yaparsanız bu gerekli değildir.
Ayrıca, seçtiğiniz alan türüne göre bazı ek seçenekler de alabilirsiniz. Örneğin, metnin metnini seçerseniz, yer tutucu metni ve karakter sınırları gibi ek seçenekler alırsınız. Çizim düzlemi ile bitirdikten sonra kapat düğmesini tıklayabilirsiniz. Yukarıdaki işlemi takiben, + Plus düğmesini tıklayarak referanslarımızı engellemek için 2 başka alan ekleyelim.
Alanı yeniden düzenlemek istiyorsanız, her alan etiketinin sol tarafında bir hamburger simgesi kullanarak sürükleyerek yapabilirsiniz. Belirli alanları düzenlemek veya silmek için, düzenleme ve sil seçeneğini almak için fareyi alan etiketine yönlendirmeniz gerekir. İşiniz bittiğinde, özel Gutenberg bloğunuzu kaydetmek için sayfanın sağ tarafındaki düzenleme düğmesini tıklayın. Adım 3: Bir Blok Şablonu Oluşturma Son adımda özel bir WordPress bloğu oluşturmuş olsanız bile, block-testimonials.php adlı bir blok şablonu oluşturana ve geçerli tema klasörünüze yükleyene kadar çalışmaz.
Block şablonu dosyası, eklentiye editörde blok alanınızı nasıl görüntüleyeceğini anlatacaktır. Eklenti şablon dosyalarını arayacak ve ardından blok içeriğini görüntülemek için kullanacaktır. Bu dosyaya sahip değilseniz, “Blocks/Block-Testimonials.php Dosya Şablonu görüntülenmez. Blok şablon dosyamızı oluşturalım. İlk olarak, masaüstünüzde bir klasör oluşturun ve bloğu adlandırın. Bu klasörde blok şablon dosyanızı oluşturacak ve ardından geçerli WordPress tema dizininize yükleyeceksiniz. Bir şablon dosyası oluşturmak için Not Defteri gibi sıradan bir metin düzenleyicisi kullanabilirsiniz.

Özel bloğunuza her yeni bir alan eklediğinizde, blok şablon dosyanıza aşağıdaki PHP kodunu eklemeniz gerekir: Buradaki eklenen isimleri alanın adıyla değiştirmeyi unutmayın. Örneğin, ilk alanımızın adı resimlerdir, bu nedenle şablon dosyasına aşağıdaki satırları ekleyeceğiz: Basit, değil mi? Aynı şeyi diğer alanlarımız için yapalım:

Daha sonra, yapılandırma amacıyla yukarıdaki koda bazı HTML etiketleri ekleyeceğiz.
Örneğin, görüntüleri görüntülemek için IMG etiketine bir inceleme yapabilirsiniz. Değilse, WordPress istemediğiniz bir görüntü URL’si görüntüler, değil mi? Ayrıca HTML etiketinize sınıf adları ekleyebilir ve blok içeriğinizi (bir sonraki adımda yapacağımız) düzenlemek için kodunuzu div kapsayıcısına sarabilirsiniz. Yani, bu blok şablonumuz için son kodumuz:
<div class = "”>>

Son olarak, dosyayı Block-Testimonials.php olarak adlandırın ve blok klasörüne kaydedin.
Adım 4: Özel blok stili Özel bloğunuzu düzenlemek ister misiniz? Bunu CSS’nin yardımıyla yapabilirsiniz. Not Defteri gibi sıradan metin editörlerini açın ve aşağıdaki kodu ekleyin:. Tanım-blok {genişlik:%100;
Marj-Alt: 25px;
}
.testimonial-image {
Şamandıra: sol;
Genişlik:%25;
dolgu suyu: 15px;
}
.testimonial-box {
Şamandıra: sol;
Genişlik:%75;
}
.ClearFix :: sonra {
İçerik: “”;
İkisini de temizle;
Ekran: Tablo;
} Bittiğinde, dosyayı blok-testonials.css olarak adlandırın ve blok klasörüne kaydedin. Adım 5: Tema klasörüne bir blok şablonu dosyası yükleyin Şimdi özel blok şablon dosyamızı içeren blok klasörünü WordPress tema klasörümüze yükleyelim.
Bunu yapmak için FTP istemcileri kullanarak WordPress sitenize bağlı olmanız gerekir. Yardım için, FTP kullanarak WordPress sitenize dosyaları nasıl yükleyeceğiniz konusundaki kılavuzumuzu görebilirsiniz. Bağlandıktan sonra/wp-content/temaları/klasörünü açın. Buradan mevcut tema klasörünüzü açmanız gerekir.
Şimdi bir blok dosyası ve CSS dosyası içeren blok klasörünü temanızın dizinine yükleyin. Bittiğinde, özel bloğunuzu test etmek için son adıma devam edebilirsiniz. Not: Block Lab eklentisi, özel bir tema bloğu oluşturmanıza olanak tanır. WordPress temanızı değiştirirseniz, blok klasörünü yeni tema dizininize kopyalamanız gerekir.
Adım 6: Yeni blok testiniz, özel referans bloğumuzu test etme zamanıdır. Bunu sayfaya giderek yapabilirsiniz »Yeni bir sayfa oluşturmak için yeni eklendi. Ardından, Blok Ekle (+) simgesini tıklayın ve referans blokları arayın. Bulduktan sonra, sayfa düzenleyicinize özel bir blok eklemek için tıklayın.