Basit bir Gutenberg blok eklentisi nasıl yapılır

Hepimiz WordPress’i sevmiyor muyuz? Bu platform başlangıçtan itibaren büyük bir başarı elde etti, geliştirici sürekli yeni özellikler ekledi. Son zamanlarda en önemli özelliklerden biri, Gutenberg kod adı olan WordPress blok düzenleyicisidir. Gutenberg, WordPress kullanıcılarına içerik yayınlamak ve sitenizi ayarlamak için ilginç yeni bir yol sunar. Bunun kullanımı çok kolaydır, bu da yeni başlayanlar ve geliştiriciler için iyi bir haberdir. WordPress’in en son sürümünü kullanırsanız, blok editörleri ve blok konseptleri olan bir ailesiniz. Varsayılan olarak, WordPress Block Düzenleyicisi, metin, görüntüler, tırnak, ses, video, gömme vb. Girmenize izin veren birkaç blokla birlikte gelir. Buna ek olarak, orada düzenleyiciyi zorluk çekmeden genişletmenize izin veren çok sayıda Gutenberg kız kardeşi var.
Ancak, sizden kendi özel bloğunuzu oluşturmanızı isteyen özel ihtiyaçlarınız olabilir. Bugünkü görevin girdiği yer burası. Bazı paragraflarda, özel ihtiyaçlarınıza uygun özel bir Gutenberg bloğunun nasıl yapılacağını tam olarak öğreneceksiniz. Daha fazla uzatmadan başlayalım çünkü öğrenecek çok şey var. Blok nedir?

Mükemmel bir başlangıçsanız, bu Gutenberg işini merak ediyor olabilirsiniz. Biliyorum, Gutenberg tanıtıldığında kafam karıştı. Ama suçlanacak bir şey yok, hepimiz değişimi ilk başta rahatsız eden klasik editöre alışkınız.
Yine de, WordPress Block Düzenleyicisi, ister sevip sevmesek de kalmaya devam ediyor.Bu yüzden Gutenberg (ve ona eşlik eden her şey) hakkında mümkün olduğunca çok şey öğrenmelisiniz.Bloklar, paragrafları, başlıkları, medyayı ve hepsini birlikte bir araya getirildiğinde, WordPress veritabanlarında depolanan içeriği oluşturan, ücretsiz form metninin geleneksel kavramlarını gömülü ortam ve kısa kodlarla değiştiren bir bileşen olarak ele alır.- Block Editor El Kitabı Geçmişte, WordPress kullanıcıları içerik eklemek için ücretsiz form metnine ve kısa kodlara güvenir.Gutenberg bloklar kullanır.Yeni editör, kolayca yönetilen zengin ve esnek bir düzen oluşturmak için bir blok ünitesi kullanmanıza olanak tanır.Şu anda, yayınlar ve sayfalar için bir blok düzenleyiciyi kullanabilirsiniz, ancak gelecekte tam site düzenlemesini desteklemek için aktif planlar vardır. Gutenberg editörü birkaç blok gösteriyor

Bloklarla çalışmak WordPress’teki içeriği oldukça ferahlatıcı hale getirir. Ayrıca, mevcut birçok eklenti yeni editörleri destekler ve eklentiden içerik eklenmesini kolaylaştıran hazır bloklarla donatılmıştır. Editör, yayın düğmesine daha hızlı basabilmeniz için bloğu sayfaya çekip serbest bırakmanıza olanak tanır. Tıpkı doğrudan WordPress’e inşa edilen avlu üreticisi gibi. Elementors gibi görsel sayfa yapımcılarına aşina iseniz, sürükle ve bırak sayfaları yapma kavramına aşina olabilirsiniz. Gutenberg, WordPress çekirdeğine bir sürükleme ve bırak sitesi oluşturulmasını tam olarak dahil etme girişimidir. Daha fazla bilgi edinmek için WordPress için Gutenberg Builder için adım adım kılavuzumuzu görmekten çekinmeyin. Bununla, bugünkü yazının en iyi bölümüne girelim. Basit bir blok nasıl yapılacağını öğrenelim. Bunu manuel olarak yapabilir veya özel bloklar (daha önce blockLab), tembel bloklar veya ACF gibi eklentileri kullanabilirsiniz. Özel bir blok biraz teknik yapın, bu nedenle bugün yayınlamak amacıyla eklentiyi kullanacağız. Başlangıçtan özel bir Gutenberg bloğunu yaptığı için özel blokların (özel blokları kullanarak) eklenti yoluna daha kolay gidilmesi daha kolay hale gelir. Ayrıca yeni başlayanların kavisli toplar atmasını sağlayan React’i de anlamanız gerekir.
Bir sonraki bölüm için, diğer geliştiricilerin yanı sıra StudyOpress ve Wpengine tarafından sunulan Genesis Custom Block’ları kullanacağız. Genesis Custom Blocks’ın ücretsiz sürümü resmi WordPress deposunda mevcuttur, bu da WordPress yönetici kontrol paneline yükleyebileceğimiz anlamına gelir. Özel Blokları Yükle Genesis WordPress Yönetici Gösterge Tablonuzu girin ve aşağıda gösterildiği gibi Eklentiler> Yeni Ekle’ye Gezin. Ardından, Anahtar Kelime Arama Kutusuna “Genesis Özel Blokları” nı girin ve şimdi Instal düğmesine basın:
Bundan sonra, partiyi başlatmak için eklentiyi etkinleştirin.
Sonra iyisin, yeni bir özel blok yapalım. İllüstrasyon amacıyla, yayınladığımız her yazının sonunda ekleyeceğimiz özel bir eylem çağrısı (CTA) yapalım. En iyi yanı, aynı bloğu tekrar tekrar yapmak için zorluklardan tasarruf etmek için blokları yeniden kullanabilmenizdir. WordPress yönetici menünüzden, aşağıda vurgulandığımız gibi özel bloklara> Yeni Ekle’ye gidin.

Bunu yapmak, özel bloklarımızı (bizim durumumuzda CTA) oluşturmak için tüm seçenekleri bulduğunuz bir sonraki sayfaya götürecektir:

Yukarıdaki ekran görüntüsünde gördüklerinizi açıklamak için bazı kelimeler. Yukarıdan başlayarak var.

Ana Düzenleme Alanı:

İnşaatçı – Burada özel bloğunuzu tasarlamak için çok zaman harcayabilirsiniz. Builder, başlıklar, alanlar, salyangozlar, anahtar kelimeler, kategoriler eklemenizi ve özel blok önizlemenizi görmenizi sağlar. Alan ekleyeceğinizi öğreneceksiniz.

Editör Şablonu – Özel bloğunuzu tasarladıktan sonra (yani çeşitli alanlar ekleyerek), şablonun düzenleyicisinde bir blok şablonu (okuma, küçük bir kod ekleyin) oluşturmanız gerekir. CTA tasarladığımızda daha fazla bilgi edineceğiz. Derleme Editörü – Bu, WordPress blok düzenleyicisinde özel blok önizlemesini görmenizi sağlar.
Ön taraf ön ucunda, sitenizde özel bir bloğun özel bir ekranını görebilirsiniz.
Editör Alanı – Bir gönderinin veya sayfaların ana düzenleme alanındaki alanları görüntüleyecek (bilirsiniz, WordPress editöründe olağan yayınlarınızı nasıl gördüğünüz gibi)
Müfettiş Field – Alanı Blok Müfettişinin sağ tarafında gösterecektir.
Yan çubuk seçenekleri
Slug – Slug, özel bloğunuza verdiğiniz başlığa göre otomatik olarak doldurulur. Bu bir blok şablonu yaparken önemlidir.
Bu simge, özel bloğunuza simgeler eklemenizi sağlar.
Kategori – Bu, kategorileri özel bloklarınıza ayarlamanızı sağlar. Özel bloğunuzu varsayılan kategorilerden birini kullanarak kategorize edebilir veya yeni bir kategori oluşturabilirsiniz.
Anahtar Kelimeler – Özel bloğunuzla ilgili maksimum üç anahtar kelime ekleyin, böylece insanlar bunları kolayca oylanan blokları bulabilir.
Sermaye içinde bir alan açmak istiyorsanız, yerlerde render olmak yerine büyüklükteki blok alanını sermaye açın. Bu, birçok alanlı özel bir bloğunuz varsa kullanışlıdır.
Her bir yazı türünde özel bloğunuzun görüntülenmesine izin vermek için gönderi türü – onay kutusu. Örneğin, yayındaki kontrolleri silerseniz, blok herhangi bir yayında hiç görünmez.
Özel bir blok oluşturma Şimdi kullanıcı arayüzünü daha iyi anladıktan sonra ve her parçayı ne yapıldıktan sonra, çalışmaya başlamak için gömleğin kolunu yırtalım. İnşaatçıda özel bloğunuza uygun başlığı verin. Aşağıda gösterildiği gibi bunun için CTA’yı kullanacağım.
Yeni bir alan eklemeden önce, bir simge, anahtar kelimeler ekleyelim ve aşağıda gösterildiği gibi özel bloklar için kategoriyi seçelim.
Bunu ayarlayın, özel bloklarımıza birkaç alan ekleyelim. CTA bloklarımızın örnekleri için, aşağıdaki dizilere yalnızca üç alan ekleyeceğiz: İnsanların hayali e -kitabı indirmesine izin veren görüntüler, bazı metinler ve dosyalar, blok düzlemini editör alanına ekleyin, eklemek için simge plus (+) tıklayın Aşağıdaki resim gibi ilk alan.
Ardından, çizim alanını ekleyelim. Yan çubuktan, düzlem türünü resme ayarlayın ve diğer seçenekleri belirleyin. Ayrıca, bir blok şablonu yaparken kullanacağız çünkü sümüğe dikkat edin (görüntüye koydum). Aşağıdaki resme bakın.
Bundan sonra, metin ve dosya alanları aynı şekilde ekleyin.

Kutlamayın, hala bir adım daha var. Editör şablonuna geç> İşaretleme:

Benimkinin zaten birkaç kodu var ama mülkünüz boş olacak

Burada özel blok ekranınızı sitenizde tasarlayacağız. Şablon editörü HTML, CSS ve saha salyangozları alır (ki 2 paranteze dahil etmeniz gerekir). PHP kullanmanız gerekiyorsa, PHP şablonu yöntemini kullanarak bir şablon oluşturabilirsiniz.

Endişelenme, kolay. Şablon düzenleyicisinde, işaretleme sekmesinin altındaki (yukarıdaki resme bakın), HTML işaretlemesini (kod) ekleyin:

<a href = "erter