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

Varsayılan WordPress blokları basit içerikler için harikadır — ancak özel düzenler, etkileşimli öğeler veya özel tasarımlar gerektiğinde hızla yetersiz kalabilirler.

Özel bloklar tam da burada devreye giriyor. Bunlar, şişirilmiş eklentilere veya geçici çözümlere güvenmeden içeriğinizin görünümü ve işlevi üzerinde tam kontrol sahibi olmanızı sağlar.

En iyi yanı? Özel bloklar oluşturmak çoğu insanın düşündüğünden daha kolaydır. Doğru araçlar ve net bir süreçle, sitenizin benzersiz ihtiyaçlarına uyan bloklar oluşturmak için geliştirici olmanıza gerek yok.

Yıllar boyunca, iş akışlarını kolaylaştırmak ve müşteriler için tamamen özel WordPress siteleri sunmak için özel bloklar kullandık ve şimdi size aynısını nasıl yapacağınızı göstereceğiz.

Bu kılavuzda, uzman bir kodlayıcı olmasanız bile özel WordPress blokları oluşturmak için adım adım süreci öğreneceksiniz.

Özel WordPress Bloğu Neden Oluşturulur?

WordPress, içerik ve düzen öğelerini blok olarak ekleyerek gönderilerinizi ve sayfalarınızı kolayca oluşturmanıza olanak tanıyan, sezgisel bir blok düzenleyiciye sahiptir.

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

Ancak, bazen, sizin için çalışan bir blok eklentisi bulamadığınız için WordPress web sitenizde belirli bir şeyi yapmak üzere özel bir blok oluşturmak isteyebilirsiniz.

Özel bloklarla, web sitenize önceden oluşturulmuş bloklarda bulunmayan benzersiz özellikler ve işlevler ekleyebilirsiniz. Bu, işlemleri otomatikleştirmeye veya WordPress blogunuz için içerik oluşturmayı daha verimli hale getirmeye yardımcı olabilir.

Örneğin, referansları görüntülemek için özel bir blok oluşturabilir ve ardından herhangi bir kodlama bilgisine gerek kalmadan bu bloğu kolayca ekleyip yönetebilirsiniz.

Bunu söyledikten sonra, WordPress'te tamamen özel bir blok oluşturmanın ne kadar kolay olduğuna bakalım.

Bu eğitimde, özel bir blok oluşturmak için size iki yöntem göstereceğiz. Seçtiğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

Yöntem 1: WPCode Kullanarak WordPress için Özel Blok Oluşturma (Önerilen)

WordPress'e yeniyseniz ve kodlama göz korkutucu görünüyorsa, WPCode sizin için harika bir seçenektir.

Araç setimizin bir parçası olarak, özel kod parçacıkları eklemenin en başlangıç dostu ve en güvenli yolu olarak WPCode'u bulduk.

Tam potansiyelini anlamanıza yardımcı olabilecek ayrıntılı bir WPCode incelememiz de bulunmaktadır.

Öne çıkan özelliklerinden biri, özel blokları zahmetsizce oluşturmanıza olanak tanıyan blok kod parçacıklarıdır.

Öncelikle, WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılı talimatlar için, bir WordPress eklentisinin nasıl kurulacağına dair başlangıç kılavuzumuza bakmak isteyebilirsiniz.

Etkinleştirdikten sonra, WordPress yönetici kenar çubuğundan Kod Parçacıkları » + Parçacık Ekle sayfasına gidin.

Oraya ulaştığınızda, 'Özel Kodunuzu Ekle (Yeni Kod Parçacığı)' seçeneğinin altındaki 'Kod Parçacığını Kullan' düğmesine tıklayın.

Bu sizi ‘Özel Kod Parçacığı Oluştur’ sayfasına götürecektir; burada oluşturmak üzere olduğunuz yeni blok için bir ad yazarak başlayabilirsiniz.

Bunu yaptıktan sonra, ekranın sağ köşesindeki ‘Kod Türü’ açılır menüsünden ‘Bloklar Kod Parçacığı’ seçeneğini seçmeniz yeterlidir.

Bu, 'Kod Önizleme' kutusunda 'Blok Düzenleyici ile Düzenle' düğmesini gösterecektir.

Blok düzenleyicisini başlatmak için bu düğmeye tıklamanız yeterlidir.

Şimdi, ekranınızda kod parçacığını kaydetmenizi ve blok düzenleyicisinde yüklemenizi isteyen bir istem belirecektir. Devam etmek için ‘Evet’ düğmesine tıklayın.

Artık blok düzenleyicisindeyken, blok menüsünde bulunan önceden hazırlanmış blokları kullanarak kolayca özel bir blok oluşturabilirsiniz.

Bu eğitim için, sitenize referanslar eklemek üzere özel bir blok oluşturacağız.

İlk olarak, blok menüsünü açmak için ekranın sol üst köşesindeki ‘Blok Ekle’ (+) düğmesine tıklayın.

Buradan, Başlık bloğunu blok düzenleyici arayüzüne sürükleyip bırakın ve adını 'Referanslar' olarak belirleyin.

Ardından, web sitenizde farklı müşterilerden referanslar eklemek için paragraf, alıntı veya alıntı bloklarını kullanabilirsiniz.

Testimonial bloğunuzu resim, site logosu, sosyal simgeler veya site sloganı bloklarını kullanarak daha da özelleştirebilirsiniz.

Ayrıca, ekranın sağ tarafındaki blok panelinden referanslarınızın boyutunu, metin rengini veya arka plan rengini yapılandırabilirsiniz.

İşiniz bittiğinde, özel blok ayarlarınızı kaydetmek için üstteki 'Güncelle' düğmesine tıklamayı unutmayın.

Ardından, kod düzenleyici sayfasına yönlendirilmek için üstteki ‘WPCode Snippet’e Geri Dön’ düğmesine tıklamanız yeterlidir.

Oraya ulaştığınızda, 'Ekleme' bölümüne aşağı kaydırın ve 'Otomatik Ekle' modunu seçin.

Kod parçacığını etkinleştirdikten sonra, özel bloğunuz web sitenize eklemeyi seçtiğiniz konuma otomatik olarak eklenecektir.

Ardından, oluşturduğunuz özel bloğun konumunu yapılandırmanız gerekir.

Bunu yapmak için, 'Ekleme' bölümündeki 'Konum' açılır menüsüne tıklamanız ve 'Sayfaya Özel' sekmesine geçmeniz yeterlidir. Buradan, Testimonial bloğunuzu gönderinin sonunda göstermek istiyorsanız 'Gönderi Sonrası Ekle' seçeneğini seçebilirsiniz.

Bunu yaptıktan sonra, referans bloğunun görünmesi gereken gönderi sayısını da yapılandırabilirsiniz. Örneğin, 3 sayısını girerseniz, Referanslar bloğu her üçüncü gönderide görünecektir.

Bloğu farklı paragraflar arasında, gönderi özetlerinden sonra ve daha fazlasını görüntüleyebilirsiniz.

Ancak, aradığınız blok konumunu bulamazsanız, özel bloğu tercih ettiğiniz yere yerleştirmek için kendi koşullu mantık kuralınızı da oluşturabilirsiniz.

Bunu yapmak için aşağı kaydırarak 'Akıllı Koşullu Mantık' bölümüne gidin ve 'Mantığı Etkinleştir' düğmesini açın.

Ardından, koşullu mantık kuralı oluşturmaya başlamak için 'Yeni Grup Ekle' düğmesine tıklamanız gerekir.

Örneğin, oluşturduğunuz özel bloğu yalnızca belirli bir sayfada veya gönderide göstermek istiyorsanız, sağdaki açılır menüden 'Sayfa URL'si' seçeneğini seçmeniz gerekecektir.

Bundan sonra, ortadaki açılır menüyü olduğu gibi bırakabilir ve ardından sol taraftaki alana istediğiniz WordPress sayfası/gönderisinin URL'sini ekleyebilirsiniz.

Koşullu mantık kuralınızı, özel bloğu yalnızca belirli bir sayfada, oturum açmış kullanıcılarda, WooCommerce mağazası sayfalarında, Easy Digital Downloads sayfalarında, belirli tarihlerde ve daha fazlasında görüntülemek üzere de yapılandırabilirsiniz.

İşiniz bittiğinde, sayfanın üstüne geri kaydırın ve ‘Etkin Değil’ anahtarını ‘Etkin’ olarak değiştirin. Ardından, ayarlarınızı kaydetmek için ‘Güncelle’ düğmesine tıklayın.

Özel bloğunuz artık blok kod parçacığı için seçtiğiniz tüm konumlara otomatik olarak eklenecektir.

Oluşturduğunuz özel bloğun WordPress Gutenberg düzenleyicisinin blok menüsünde bir seçenek olarak görüntülenmeyeceğini unutmayın.

WordPress kontrol panelindeki Kod Parçacıkları sayfasını ziyaret ederek ve blok parçacığı altındaki ‘Düzenle’ bağlantısına tıklayarak blok ayarlarını yapılandırmanız gerekecek.

Bu, bloğu özelleştirebileceğiniz veya konumunu ve koşullu mantık kurallarını kolayca değiştirebileceğiniz 'Snippet Düzenle' sayfasını açacaktır.

Şimdi, oluşturduğunuz özel bloğu çalışırken görmek için web sitenizi ziyaret edin.

İşte demo web sitemizdeki özel Referanslar bloğumuz.

Yöntem 2: Genesis Özel Kod Eklentisi (Ücretsiz) Kullanarak WordPress İçin Özel Bloklar Oluşturun

Orta düzeyde bir kullanıcıysanız ve ücretsiz bir çözüm arıyorsanız, bu yöntem tam size göre. Bu yöntemde yer alan talimatları izlemek için HTML ve CSS'ye aşina olmanız gerektiğini unutmayın.

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

Bu eğitim için bir Testimonial bloğu oluşturacağız.

Adım 1: WordPress için Özel Blok Oluşturma

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

Bu sizi, WordPress siteniz için özel bir blok oluşturacağınız Blok Düzenleyici sayfasına getirecektir.

Buradan bloğunuza bir isim vererek başlayabilirsiniz.

Şimdi, sayfanın sağ tarafında yapılandırabileceğiniz blok özelliklerini bulacaksınız.

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

Kısa ad, bloğunuzun adına göre otomatik olarak doldurulacaktır, bu yüzden değiştirmenize gerek yoktur. Ancak, bloğunuzun kolayca bulunabilmesi için 'Anahtar Kelimeler' metin alanına en fazla 3 anahtar kelime yazabilirsiniz.

Şimdi, bloğunuza bazı alanlar ekleme zamanı. Metin, sayılar, e-posta adresleri, URL'ler, renkler, resimler, onay kutuları, radyo düğmeleri ve daha fazlası gibi farklı alan türleri ekleyebilirsiniz.

Özel Testimonial bloğumuza üç alan ekleyeceğiz: incelemecinin fotoğrafı için bir resim alanı, incelemecinin adı için bir metin kutusu ve testimonial metni için bir metin alanı.

İlk alanı eklemek için ‘+’ düğmesine tıklamanız yeterlidir.

Bu, sağ sütundaki alan için bazı seçenekleri açacaktır. Her birine bir göz atalım.

• Alan Etiketi: Alan etiketi için istediğiniz herhangi bir adı kullanabilirsiniz. İlk alanımıza ‘İnceleyen Görseli’ adını verelim.
• Alan Adı: Alan adı, alan etiketine göre otomatik olarak oluşturulacaktır. Bu alan adını bir sonraki adımda kullanacağız, bu nedenle her alan için benzersiz olduğundan emin olun.
• Alan Türü: Burada alanın türünü seçebilirsiniz. İlk alanımızın bir resim olmasını istiyoruz, bu yüzden açılır menüden 'Resim' seçeneğini seçeceğiz.
• Alan Konumu: Alanı düzenleyiciye mi yoksa denetleyiciye mi eklemek istediğinize karar verebilirsiniz.
• Yardım Metni: Alanı açıklamak için bazı metinler 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 faydalı olabilir.

Seçtiğiniz alan türüne bağlı olarak bazı ek seçenekler de görebilirsiniz. Örneğin, bir metin alanı seçerseniz, yer tutucu metin ve karakter sınırı gibi ek seçenekler alırsınız.

Yukarıdaki işlemi takip ederek, ‘+’ düğmesine tıklayarak Testimonials bloğumuz için 2 alan daha ekleyelim.

Alanları yeniden sıralamak isterseniz, her alan etiketinin sol tarafındaki tutamaçları kullanarak sürükleyerek bunu 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ındaki 'Yayınla' düğmesine tıklamanız yeterlidir.

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

Son adımda özel WordPress bloğunu oluşturdunuz, ancak 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. HTML ve CSS kullanarak veya verilerle işlevleri çalıştırmanız veya başka gelişmiş şeyler yapmanız gerekiyorsa PHP kodu 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 ise, yerleşik şablon düzenleyiciyi kullanabilirsiniz.

Öte yandan, blok çıktınızın arka planda çalışması için bazı PHP'lere ihtiyacı varsa, manuel olarak bir blok şablon dosyası oluşturmanız ve temanızın klasörüne yüklemeniz gerekecektir.

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

Özel blok düzenleme ekranında, ‘Şablon Düzenleyici’ sekmesine geçmeniz ve işaretleme sekmesi altında HTML'nizi girmeniz yeterlidir.

HTML'nizi yazabilir ve blok alanı değerlerini eklemek için çift küme parantezlerini 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ısı işaretlemesini biçimlendirmek için ‘CSS’ sekmesine geçmeniz yeterlidir.

İş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ı Manuel Olarak Yükleme

Özel blok alanlarınızla etkileşim kurmak için PHP kullanmanız gerekiyorsa bu yöntem önerilir. Düzenleyici şablonunu doğrudan temanıza yüklemeniz gerekecektir.

İlk olarak, bilgisayarınızda özel blok adınızın kısa adına sahip bir klasör oluşturmalısınız.

Örneğin, demo bloğumuzun adı Testimonials, bu nedenle testimonials klasörünü oluşturacağız.

Ardından, düz metin düzenleyici kullanarak block.php adında bir dosya oluşturmanız gerekir. Bloğunuzun HTML / PHP kısmını buraya yerleştireceksiniz.

İşte örneğimiz için kullandığımız örnek şablon:

<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>

Şimdi, bir blok alanından veri almak için block_field() işlevini nasıl kullandığımızı fark etmiş olabilirsiniz.

Blok alanlarımızı, bloğu görüntülemek için kullanmak istediğimiz HTML içine aldık. Bloğu düzgün bir şekilde stilize edebilmemiz 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 bunu oluşturduğunuz klasörün içine block.css olarak kaydetmeniz gerekir.

Bloğumuzun gösterimini biçimlendirmek için gereken CSS'yi eklemek için bu dosyayı 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üzde artık içinde iki şablon dosyası bulunacaktır.

Ardından, blok klasörünüzü web sitenize bir FTP istemcisi kullanarak veya WordPress hosting hesabınızın kontrol panelindeki Dosya Yöneticisi uygulaması aracılığıyla yüklemeniz gerekir.

Bağlandıktan sonra, /wp-content/themes/mevcut-temaniz/ klasörüne gidin.

Tema klasörünüzde ‘blocks’ adında bir klasör yoksa, yeni bir dizin oluşturun ve adını blocks olarak belirleyin.

Ardından, bilgisayarınızda oluşturduğunuz klasörü blocks klasörüne yüklemeniz gerekir.

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

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

HTML/CSS'nizi önizleyebilmeniz için, örnek bir çıktı görüntülemek üzere kullanılabilecek bazı test verileri sağlamanız gerekecektir.

WordPress yönetici alanında, bloğunuzu düzenleyin ve ‘Düzenleyici Önizlemesi’ sekmesine geçin. Burada bazı örnek veriler girmeniz gerekir.

Bu veriler özel bloğunuzun bir parçası olmayacak ve yalnızca HTML ve CSS kullanarak yaptığınız değişiklikleri önizlemek için kullanılacaktır.

Verileri ekledikten sonra, değişikliklerinizi kaydetmek için 'Güncelle' düğmesine tıklamayı unutmayın.

‘Güncelle’ düğmesine tıklamazsanız, özel bloğunuzun önizlemesini göremezsiniz.

Artık bloğunuzun WordPress web sitenizin ön yüzünde nasıl görüneceğini görmek için 'Ön Yüz Önizleme' sekmesine geçebilirsiniz.

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

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

Özel bloğunuzu artık WordPress'te diğer bloklar gibi kullanabilirsiniz.

Bu bloğu kullanmak istediğiniz herhangi bir gönderiyi veya sayfayı düzenleyin. Ardından, blok menüsünü açmak için sol üst köşedeki ‘Blok Ekle’ (+) düğmesine tıklayın.

Burada, bloğunuzu adını veya anahtar kelimelerini yazarak bulmak için arama özelliğini kullanın. Ardından sayfaya veya gönderiye ekleyin.

Özel bloğu içerik alanına ekledikten sonra, daha önce oluşturduğunuz blok alanlarını göreceksiniz.

Blok alanlarını gerektiği gibi doldurabilirsiniz.

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

Artık gönderinizi ve sayfanızı kaydedebilir ve özel bloğunuzun web sitenizde nasıl çalıştığını görmek için önizleyebilirsiniz.

İşte Testimonial bloğunun test sitemizde nasıl göründüğü.

Bonus: Gönderileriniz İçin Özel Şablonlar Oluşturun

Özel bloklar oluşturmanın yanı sıra, web sitenizin blog gönderileri veya sayfaları için özel şablonlar ekleyebilirsiniz.

Şablon, gönderinize diğer sayfalardan ve içeriklerden farklı görünmesi için ekleyebileceğiniz bir düzendir. Bu, gönderilerinizi daha ilgi çekici ve görsel olarak çekici hale getirebilir ve daha fazla potansiyel müşteri oluşturmaya yardımcı olabilir.

Yeniden kullanılabilir bir Grup bloğu oluşturarak tüm gönderileriniz için kolayca bir şablon oluşturabilirsiniz.

Öncelikle, Grubu gönderiye eklemek için 'Blok Ekle' (+) düğmesine tıklamanız gerekecektir. Ardından, başlık, medya ve metin, kapak resimleri ve daha fazlası dahil olmak üzere grubun içine herhangi bir blok ekleyebilirsiniz.

Gönderi şablonunu oluşturduktan sonra, bloğun üst kısmındaki blok araç çubuğundaki üç noktalı menüye tıklayın. Ardından, ‘Desen Oluştur’ düğmesine tıklayın.

Bundan sonra, gönderi şablonunuz yeniden kullanılabilir bir blok olarak kaydedilecektir. Blok menüsünü (+) açıp 'Şablonlar' sekmesine geçerek herhangi bir gönderiye erişebilir ve ekleyebilirsiniz.

Ancak, özel gönderi şablonları oluşturmanın bu yönteminin sınırlı işlevsellik sağladığını unutmayın. Kodlama yapmadan daha güzel bir özel şablon oluşturmak için, piyasadaki en iyi sayfa oluşturucu olan SeedProd'u kullanabilirsiniz.

Ayrıntılar için, WordPress'te özel tek gönderi şablonları oluşturma hakkındaki eğitimimize bakın.

Umarım bu makale, WordPress web siteniz için özel Gutenberg bloklarını nasıl kolayca oluşturacağınızı öğrenmenize yardımcı olmuştur. Ayrıca, WordPress düzenleyicisine bir blog gönderisi kontrol listesi ekleme kılavuzumuza ve web sitenizde kısa kodları kullanmak için temel ipuçlarımıza da bakmak isteyebilirsiniz.

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