oluşturmak ister misiniz? WordPress Plugin basit Gutenberg bloğu?

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 zamanların öne çıkan özelliklerinden biri, kod adı olan WordPress Blok Düzenleyicisidir. Gutenberg.

Gutenberg, WordPress kullanıcılarına içerik yayınlamak ve web sitelerini özelleştirmek için heyecan verici yeni bir yol 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, blok düzenleyiciyi ve blok kavramını zaten biliyorsunuzdur.

Varsayılan olarak, WordPress blok düzenleyici metin, resim, alıntı, ses, video, yerleştirme vb. eklemenize izin veren bazı bloklarla birlikte gelir. Bunun yanı sıra, düzenleyiciyi bozmadan genişletmenize izin veren bir sürü Gutenberg eklentisi vardır. bir ter.

Ancak, kendi özel bloklarınızı oluşturmanızı isteyen özel bir ihtiyacınız olabilir. Bu makalede, size özel ihtiyaçlarınızı karşılamak için özel Gutenberg bloklarının nasıl oluşturulacağını birkaç paragrafta göstereceğiz.

Lafı fazla uzatmadan başlayalım çünkü öğrenecek çok şey var.

Ama daha önce, eğer WordPress keşfi hiç kurmadıysanız Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için

O zaman neden burada olduğumuza dönelim. 

Yine de bloklar nedir?

Bloklar, paragrafları, başlıkları, medyayı ve yerleştirmeleri, birbirine dizildiğinde WordPress veritabanında depolanan içeriği oluşturan, geleneksel metin kavramını medya ve gömmelerle değiştiren bileşenler olarak ele alır.

Geçmişte, WordPress kullanıcıları içerik eklemek için metne ve kısa kodlara güveniyordu. Gutenberg kullanır bloglar. Yeni düzenleyici, yönetimi kolay zengin ve esnek düzenler oluşturmak için blok birimleri kullanmanıza olanak tanır. Şu anda, gönderiler ve sayfalar için blok düzenleyiciyi kullanabilirsiniz, ancak alınması gereken aktif planlar vardır. gelecekte tam site düzenlemesini destekleyin.

Bloklarla çalışmak, WordPress'te içerik oluşturmayı oldukça ferahlatıcı hale getirir. Ek olarak, mevcut birçok eklenti yeni düzenleyiciyi destekler ve söz konusu eklentilerden içerik eklemeyi kolaylaştıran 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'e entegre edilmiş bir sayfa oluşturucu gibi.

aşina iseniz Elementor gibi sayfa oluşturucular, muhtemelen sürükle ve bırak sayfa oluşturma kavramına aşinasınızdır. Gutenberg, sürükle ve bırak web sitesi oluşturmayı WordPress çekirdeğine tam olarak entegre etme girişimidir.

Gelelim bugünkü yazının en güzel kısmına. Basit bir blok oluşturmayı öğrenelim. Bunu manuel olarak veya gibi eklentileri kullanarak yapabilirsiniz. Genesis Özel Blokları (eski adıyla BlockLab), Tembel Bloklar ou ACF. Özel bloklar oluşturmak biraz tekniktir, bu nedenle bugünkü makalenin amaçları doğrultusunda bir eklenti kullanacağız.

Özel bir blok nasıl oluşturulur (genesis Özel Blokları kullanılarak)

Eklenti yoluna gitmek daha kolaydır çünkü sıfırdan özel Gutenberg blokları oluşturmak HTML, CSS, PHP ve en önemlisi javaScript'i iyi anlamayı gerektirir. Ayrıca React'i de anlamanız gerekecek.

Bir sonraki bölüm için Genesis Özel Bloklarını kullanacağız. Ücretsiz sürümü resmi WordPress deposunda mevcuttur, bu da 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 şuraya gidin: Uzantılar> Ekle, Aşağıda gösterildiği gibi.

Sonra girin" Genesis Özel Blokları anahtar kelime arama kutusunda ve Tıklayın düğmede Şimdi yükleyin

Daha sonra, etkinleştirmek başlamanıza yardımcı olacak eklenti

Ardından, yeni bir özel blok oluşturalım. Örnekleme amacıyla, yayınladığımız her makalenin sonuna ekleyeceğimiz özel bir harekete geçirici mesaj (CTA) oluşturalım. En iyi yanı, sizi aynı blokları tekrar tekrar oluşturmaktan kurtarmak için blokları yeniden kullanabilmenizdir.

WordPress yönetici menünüzde şuraya gidin: Özel Bloklar > Yeni Ekle, aşağıda vurguladığımız gibi.

Bu sizi özel bir blok (bizim durumumuzda bir CTA) oluşturmak için tüm seçenekleri bulacağınız bir sonraki sayfaya götürecektir:

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

Ana düzenleme alanı:

  • inşaatçı – Özel bloğunuzu tasarlamak için muhtemelen burada çok zaman harcayacaksınız. en CONSTRUCTEUR başlık, alanlar, bilgi, anahtar kelimeler, kategori eklemenize ve özel bloğunuzu önizlemenize olanak tanır. Alan eklemeyi öğreneceksiniz.
  • Şablon Düzenleyici – Özel bloğunuzu tasarladıktan sonra (yani çeşitli alanlar ekleyerek), bir blok şablonu oluşturmanız (okuyun, biraz kod ekleyin) gerekir. model düzenleyici. CTA'yı tasarladığımızda daha fazlasını öğreneceğiz.
  • Editör Önizlemesi – Özel bloğu WordPress blok düzenleyicide önizlemenizi sağlar.
  • Ön Uç Önizleme – Burada özel bloğun web sitenizde nasıl görüneceğini önizleyebilirsiniz.
  • Editör Alanı – Bir yazının veya sayfanın ana düzenleme alanındaki alanları gösterecek (biliyorsunuz, tıpkı WordPress düzenleyicide normal yazılarınızı gördüğünüz gibi)
  • Müfettiş Alanı – Blok Denetçisinin altındaki sağ kenar çubuğundaki alanı görüntüler.

Kenar çubuğu seçenekleri

  • Sümüklüböcek – Özel bloğunuza verdiğiniz başlığa göre otomatik olarak doldurulur. Blok modelini oluştururken bu önemlidir.
  • ikon – Bu seçenek, özel bloğunuza bir simge eklemenizi sağlar.
  • Kategoriler – Özel bloğunuza bir kategori atamanıza olanak tanır. Yerleşik kategorilerden birini kullanarak özel bloğunuzu kategorilere ayırabilir veya tamamen yeni bir kategori oluşturabilirsiniz.
  • Anahtar Kelimeler – Kişilerin blok seçicide kolayca bulabilmesi için özel bloğunuza en fazla üç alakalı anahtar kelime ekleyin.
  • Blok alanlarını yerinde işlemek yerine bir modda açın – Alanları bir modda açmak istiyorsanız etkinleştirin. Bu, birçok alana sahip özel bir bloğunuz varsa kullanışlıdır.
  • Mesaj Tipleri – Ö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 bir blok oluşturun

Artık kullanıcı arayüzünü ve her bir parçanın ne yaptığını daha iyi anladığınıza göre, çalışmaya başlayalım.

dans le İnşaatçı - İnşaatçı -, özel bloğunuza uygun bir başlık verin. Bunun için aşağıda gösterildiği gibi CTA seçeceğiz.

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

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

Ayrıca Oku: Ürünlerinizi toplu olarak düzenlemek için 5 WooCommerce eklentileri

Blok Alanları Ekleme

bölümünde Düzenleyici alanlarıtıklayın Artı (+) simgesi aşağıda gösterildiği gibi ilk alanı eklemek için.

bir blok WordPress eklentisi oluşturun

Ardından, bir görüntü alanı ekleyelim. Kenar çubuğunda, Alan türü açık Resim ve diğer seçenekleri ayarlayın. Ayrıca, blok modelini oluştururken kullanacağımız slug'u da göz önünde bulundurun.

bir blok WordPress eklentisi oluşturun

Daha sonra aynı şekilde text ve file alanlarını ekleyin.

bir blok WordPress eklentisi oluşturun

Çevirmek Şablon Düzenleyici > İşaretle.

Burada özel bloğumuzun web sitenizde nasıl görüneceğini tasarlayacağız. model düzenleyici HTML, CSS ve alan bilgilerini kabul eder (2 köşeli parantez arasına yerleştirmeniz gerekir). PHP dilini kullanmanız gerekiyorsa, kullanarak şablonu oluşturabilirsiniz. PHP modelleme yöntemi

Endişelenme, kolay.

Dans model düzenleyici, altında işaretleme sekmesi, aşağıdaki kodu ekleyin:

<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>

Kodunuzu yazarken şunu fark edeceksiniz. model düzenleyici Sizin için otomatik tamamlama alan bilgileri (ör. {{image-field}} ).

O zaman bölüme git CSS aşağıdaki kodla basit stiller eklemek için:

.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}

.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;

}
bir blok WordPress eklentisi oluşturun

Bu stilleri istediğiniz gibi özelleştirebilirsiniz,

Tıkla yayınlamak :

bir blok WordPress eklentisi oluşturun

Yeni özel bloğunuzu çalışırken görmek için WordPress yönetici panonuza dönün ve normalde yaptığınız gibi bir gönderi oluşturun, Artı (+) Yeni bir blok eklemek ve aşağıda vurguladığımız gibi yeni özel bloğunuzu seçmek için.

bir blok WordPress eklentisi oluşturun

Ardından, özel bloğunuzu istediğiniz gibi doldurun ve mesajınızı gönderin:

Şimdi, ön uçtaki yeni özel CTA bloğumuzu kontrol edersek, gördüğümüz şey budur.

Özel CTA'mız hemen orada! Lütfen tasarım yeteneklerimiz hakkında endişelenmeyin - elbette, gerçek yaşam senaryosunda bloğunuzu özelleştirmek için biraz daha fazla zaman harcarsınız. Ama umarız burada bir şeyler öğrenmişsinizdir.

Diğer önerilen kaynaklar

Ayrıca sizi danışmaya davet ediyoruz. kaynakların bulunduğu Web sitenizin ve blogunuzun daha fazla sahipliğini ve kontrolünü almak için aşağıdaki

Sonuç

Özel bloklar oluşturmak kolay bir iş değildir. Fakat WordPress eklentileri Genesis Custom Blocks ve Lazy Blocks gibi, diğerleri arasında, başlangıç ​​seviyesinde olsanız da olmasanız da, onları yaratmayı başaracaksınız. İhtiyaçlarınıza bağlı olarak en temelden karmaşığa.

Bir WordPress web sitesine nasıl özel yazı tiplerinin ekleneceğini gösteren bu makale bu kadar. Sizi denemeye davet ediyoruz. Herhangi bir endişeniz veya öneriniz varsa, lütfen bize bildirin. Yorumlar.

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Bu arada, bu yazıyı farklı sosyal ağlarda paylaş.   

...