Özel Bir WordPress Bloğu Nasıl Oluşturulur (Kolay Yol)

WordPress web siteniz için özel bir Gutenberg bloğu oluşturmak ister misiniz?

WordPress, içerik oluşturmak için birçok temel blokla birlikte gelirken, web siteniz için daha özel bir şeye ihtiyacınız olabilir.

Bu makalede, WordPress siteniz için özel Gutenberg blokları oluşturmanın kolay bir yolunu göstereceğiz.

Neden Özel Bir WordPress Bloğu Oluşturun?

WordPress, içerik ve düzen öğelerini bloklar olarak ekleyerek yazılarınızı ve sayfalarınızı kolayca oluşturmanıza olanak tanıyan sezgisel bir blok düzenleyiciyle birlikte gelir.

Varsayılan olarak, WordPress yaygın olarak kullanılan birkaç blokla birlikte gelir. WordPress eklentileri, kullanabileceğiniz kendi bloklarını da ekleyebilir.

Ancak bazen belirli bir şey yapmak için kendi özel bloğunuzu oluşturmak isteyebilirsiniz ve sizin için çalışan bir blok eklentisi bulamayabilirsiniz.

Bu eğitimde size tamamen özel bir bloğun nasıl oluşturulacağını göstereceğiz.

Not : Bu makale orta düzey kullanıcılar içindir. Özel Gutenberg blokları oluşturmak için HTML ve CSS'ye aşina olmanız gerekir.

1. Adım: İlk Özel Bloğunuzla Başlayın

Öncelikle Genesis Custom Blocks eklentisini kurmanız ve etkinleştirmeniz gerekiyor. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Popüler Genesis Theme Framework ve StudioPress'in arkasındaki kişiler tarafından oluşturulan bu eklenti, geliştiricilere projeleri için hızlı bir şekilde özel bloklar oluşturmaları için kolay araçlar sağlar.

Bu eğitimin iyiliği için bir 'referanslar' bloğu oluşturacağız.

İlk olarak, yönetici panelinizin sol kenar çubuğundan Özel Bloklar »Yeni Ekle sayfasına gidin.

Bu sizi Blok Düzenleyici sayfasına götürecektir.

Buradan bloğunuza bir isim vermeniz gerekiyor.

Sayfanın sağ tarafında blok özelliklerini bulacaksınız.

Burada bloğunuz için bir simge seçebilir, bir kategori ekleyebilir ve anahtar kelimeler ekleyebilirsiniz.

Bilgi, bloğunuzun adına göre otomatik olarak doldurulur, bu nedenle değiştirmeniz gerekmez. Ancak, bloğunuzun kolayca bulunabilmesi için Anahtar Kelimeler metin alanına en fazla 3 anahtar kelime yazabilirsiniz.

Şimdi bloğumuza bazı alanlar ekleyelim.

Metin, sayılar, e-posta adresi, URL, renk, resim, onay kutusu, radyo düğmeleri ve çok daha fazlası gibi farklı türde alanlar ekleyebilirsiniz.

Özel referans bloğumuza 3 alan ekleyeceğiz: gözden geçirenin görüntüsü için bir görüntü alanı, gözden geçirenin adı için bir metin kutusu ve referans metni için bir metin alanı alanı.

İlk alanı eklemek için [+] Alan Ekle düğmesine tıklayın.

Bu, alan için bazı seçenekler açacaktır. Her birine bir göz atalım.

• Alan Etiketi : Alan etiketi için istediğiniz ismi kullanabilirsiniz. İlk alanımıza 'Reviewer Image' adını verelim.
• Alan Adı : Alan adı, alan etiketine göre otomatik olarak oluşturulacaktır. Bu alan adını sonraki adımda kullanacağız, bu nedenle her alan için benzersiz olduğundan emin olun.
• Alan Tipi : Alan tipini buradan seçebilirsiniz. İlk alanımızın bir resim olmasını istiyoruz, bu yüzden açılır menüden Resim'i seçeceğiz.
• Alan Konumu : Alanı düzenleyiciye mi yoksa denetçiye mi eklemek istediğinize karar verebilirsiniz.
• Yardım Metni : Alanı açıklamak için biraz metin ekleyebilirsiniz. Bu bloğu kişisel kullanımınız için oluşturuyorsanız bu gerekli değildir, ancak çok yazarlı bloglar için yararlı olabilir.

Seçtiğiniz alan türüne göre bazı ek seçenekler de alabilirsiniz. Örneğin, bir metin alanı seçerseniz, yer tutucu metin ve karakter sınırı gibi ek seçenekler elde edersiniz.

Yukarıdaki işlemin ardından [+] Alan Ekle butonuna tıklayarak referans bloğumuz için 2 alan daha ekleyelim.

Alanları yeniden sıralamak isterseniz, her alan etiketinin sol tarafındaki tutamacı kullanarak bunları sürükleyerek yapabilirsiniz.

Belirli bir alanı düzenlemek veya silmek için alan etiketine tıklamanız ve sağ sütundaki seçenekleri düzenlemeniz gerekir.

İşiniz bittiğinde, özel Gutenberg bloğunuzu kaydetmek için sayfanın sağ tarafında bulunan Yayınla düğmesine tıklayın.

2. Adım: Özel Bir Blok Şablonu Oluşturun

Özel WordPress bloğunu son adımda oluşturmuş olsanız da, bir blok şablonu oluşturana kadar çalışmayacaktır.

Blok şablonu, bloğa girilen bilgilerin web sitenizde tam olarak nasıl görüntüleneceğini belirler. İşlevleri çalıştırmanız veya verilerle başka gelişmiş şeyler yapmanız gerekiyorsa, HTML ve CSS'yi veya hatta PHP kodunu kullanarak nasıl görüneceğine siz karar verirsiniz.

Bir blok şablonu oluşturmanın iki yolu vardır. Blok çıktınız HTML/CSS'deyse, yerleşik şablon düzenleyiciyi kullanabilirsiniz.

Öte yandan, blok çıktınız arka planda çalışmak için biraz PHP gerektiriyorsa, manuel olarak bir blok şablon dosyası oluşturmanız ve bunu tema klasörünüze yüklemeniz gerekir.

Yöntem 1. Yerleşik Şablon Düzenleyiciyi Kullanma

Özel blok düzenleme ekranında, Şablon Düzenleyici sekmesine geçin ve biçimlendirme sekmesinin altına HTML'nizi girin.

HTML'nizi yazabilir ve blok alan değerleri eklemek için çift küme parantezini kullanabilirsiniz.

Örneğin, yukarıda oluşturduğumuz örnek blok için aşağıdaki HTML'yi kullandık.

<div class="testimonial-item">
<img src="reviewer-image" class="reviewer-image">
<h4 class="reviewer-name">reviewer-name</h4>
<div class="testimonial-text">testimonial-text</div>
</div>

Bundan sonra, blok çıktı işaretlemenizi biçimlendirmek için CSS sekmesine geçin.

İşte özel bloğumuz için kullandığımız örnek CSS.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

Yöntem 2. Özel Blok Şablonlarını El İle Yükleme

Özel blok alanlarınızla etkileşim kurmak için PHP kullanmanız gerekiyorsa bu yöntem önerilir.

Temel olarak düzenleyici şablonunu doğrudan temanıza yüklemeniz gerekir.

İlk olarak, bilgisayarınızda bir klasör oluşturmanız ve onu özel blok adı bilginizle adlandırmanız gerekir. Örneğin, demo bloğumuzun adı Referanslar, bu yüzden bir referans klasörü oluşturacağız.

Ardından, düz bir metin düzenleyici kullanarak block.php adlı bir dosya oluşturmanız gerekir. Burası, blok şablonunuzun HTML / PHP bölümünü koyacağınız yerdir.

Örneğimiz için kullandığımız örnek şablon burada.

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

Bir blok alanından veri almak için block_field() işlevini nasıl kullandığımıza dikkat edin.

Blok alanlarımızı, bloğu görüntülemek için kullanmak istediğimiz HTML'ye sardık. Bloğun stilini düzgün bir şekilde verebilmemiz için CSS sınıfları da ekledik.

Dosyayı daha önce oluşturduğunuz klasörün içine kaydetmeyi unutmayın.

Ardından bilgisayarınızdaki düz metin düzenleyiciyi kullanarak başka bir dosya oluşturmanız ve oluşturduğunuz klasörün içine block.css olarak kaydetmeniz gerekir.

Bu dosyayı blok ekranımıza stil vermek için gereken CSS'yi eklemek için kullanacağız. İşte bu örnek için kullandığımız örnek CSS.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

Değişikliklerinizi kaydetmeyi unutmayın.

Blok şablon klasörünüzün içinde artık iki şablon dosyası olacaktır.

Bundan sonra, bir FTP istemcisi veya WordPress barındırma hesabınızın kontrol panelindeki Dosya Yöneticisi uygulamasını kullanarak blok klasörünüzü web sitenize yüklemeniz gerekir.

Bağlandıktan sonra /wp-content/themes/your-current-theme/ klasörüne gidin.

Tema klasörünüzde bir klasör adı blokları yoksa, devam edin ve yeni bir dizin oluşturun ve onu blocks olarak adlandırın.

Şimdi bloklar klasörüne girin ve bilgisayarınızda oluşturduğunuz klasörü bloklar klasörüne yükleyin.

Bu kadar! Özel bloğunuz için manuel şablon dosyalarını başarıyla oluşturdunuz.

Adım 3. Özel Bloğunuzu Önizleyin

Şimdi, HTML/CSS'nizi önizlemeden önce, örnek bir çıktıyı görüntülemek için kullanılabilecek bazı test verilerini sağlamanız gerekir.

WordPress yönetici alanının içinde bloğunuzu düzenleyin ve Editör Önizleme sekmesine geçin. Burada, bazı boş veriler girmeniz gerekiyor.

Önizleme yapmadan önce değişikliklerinizi kaydetmek için Güncelle düğmesine tıklamayı unutmayın.

Artık bloğunuzun ön uçta (WordPress web sitenizin genel alanı) nasıl görüneceğini görmek için Ön Uç Önizleme sekmesine geçebilirsiniz.

Her şey size iyi görünüyorsa, kaydedilmemiş değişiklikleri kaydetmek için bloğunuzu güncelleyebilirsiniz.

Adım 4. WordPress'te Özel Bloğunuzu Kullanma

Artık özel bloğunuzu WordPress'te diğer blokları kullandığınız gibi kullanabilirsiniz.

Bu bloğu kullanmak istediğiniz herhangi bir gönderiyi veya sayfayı düzenlemeniz yeterlidir.

Yeni blok ekle düğmesine tıklayın ve adını veya anahtar kelimelerini yazarak bloğunuzu arayın.

Bloğu içerik alanına ekledikten sonra, bu özel blok için oluşturduğunuz blok alanlarını göreceksiniz.

Blok alanlarını gerektiği gibi doldurabilirsiniz.

Bloktan başka bir bloğa geçtiğinizde, düzenleyici otomatik olarak bloğunuzun canlı bir önizlemesini gösterecektir.

Artık gönderinizi ve sayfanızı kaydedebilir ve özel bloğunuzu web sitenizde çalışırken görmek için önizleyebilirsiniz.

Test sitemizde referans bloğunun nasıl göründüğü aşağıda açıklanmıştır.

Bu makalenin, WordPress web siteniz için kolayca özel Gutenberg blokları oluşturmayı öğrenmenize yardımcı olduğunu umuyoruz.

Ayrıca, sıfırdan özel bir WordPress temasının nasıl oluşturulacağına ilişkin kılavuzumuza veya web siteniz için olması gereken WordPress eklentileri konusunda uzman seçimimize göz atabilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.