WordPress’te Özel Gutenberg Bloğu Nasıl Oluşturulur (3 Adımda)

0
27

WordPress Blok Düzenleyici (“Gutenberg”) çok çeşitli yerleşik bloklar sağlar, ancak bir boyut her zaman hepsine uymaz. Kutudan çıkar çıkmaz, Gutenberg güzel bir blok tabanlı web sitesi oluşturmak için ihtiyacınız olan her şeye sahip olmayabilir.

Neyse ki, Gutenberg’in yerleşik kütüphanesini genişletmenin yolları var. Genesis Custom Blocks gibi bir eklenti kullanarak, tanıdık WordPress düzenleyicisini kullanarak kendi öğelerinizi oluşturabilirsiniz. Bu, WooCommerce’in normal ürün sayfalarının dışında kullanabileceğiniz ilgili bir ürün bloğunu veya yalnızca giriş yapmış müşterilere görünen bir kupon bloğunu içerebilir.

Bu makalede, neden bu kadar çok web sitesi sahibinin özel Gutenberg blokları geliştirdiğini tartışacağız. Daha sonra size üç kolay adımda kendinizinkini nasıl oluşturacağınızı göstereceğiz. Başlayalım!

Özel Bloklara Giriş (Ve Neden Bunları Oluşturmak İsteyebilirsiniz)

WordPress Gutenberg editörü, ilk tanıtıldığında tartışmalı olabilir. Ancak, artık blok Düzenleyicinin web sitesi sahiplerine daha fazla esneklik sağladığı genel olarak kabul edilmektedir.

Beğenilecek çok şey olsa da, bu düzenleyicinin özellikle üçüncü taraf eklentileri kullanırken bazı sınırlamaları vardır. Örneğin, temel WooCommerce eklentisi, web sitenizde birden çok yerde kullanmak isteyebileceğiniz ilgili bir ürün özelliğine sahiptir. Ancak, bu özellik bir blok olarak mevcut değildir.

Genesis Custom Blocks, kendi bloklarınızı oluşturmak için kullanabileceğiniz bir eklentidir. WordPress’in varsayılan seçimini kullanarak yaratıcı vizyonunuzu hayata geçirmek için uğraşıyorsanız, özel bir öğe oluşturmak faydalı olabilir. Ayrıca, sitenize benzersiz bir görünüm ve his ve hatta yeni bir işlevsellik kazandırmanın harika bir yolu olabilir.

Kendi bloklarınızı tasarlamak, sadece bloklarına erişmek için WordPress eklentileri yüklemeniz gerekmeyeceği anlamına da gelir. Bu, sitenizde yüklü olan eklenti sayısını en aza indirmeye yardımcı olabilir, bu da güvenlik için iyi bir haberdir. Ayrıca, eklentilerinizin bakımını yapmak için ne kadar zaman harcamanız gerektiğini de azaltabilir.

Sitenizi birden çok üçüncü taraf eklenti, uygulama, sistem veya diğer hizmetlerle genişlettiyseniz, özel bloklar uyumluluk konusunda yardımcı olabilir. Web sitenizin kullandığı tüm ek yazılım ve hizmetlerle entegre olmalarını sağlamak için bu öğeleri tasarlayabilirsiniz.

Sayfalarınıza ve yayınlarınıza kod ekleyerek özel bir blok efekti oluşturmak mümkün olsa da, bu zaman alıcı ve sinir bozucu olabilir. Ayrıca, yazım hataları ve yazım hataları gibi birçok insan hatası fırsatı da bırakır. Tasarımınızı yeniden kullanılabilir bir içerik bloğu olarak uygulamak genellikle çok daha kolaydır. Ardından, bu bloğu her kullanmak istediğinizde, tanıdık Gutenberg düzenleyicisinden basitçe seçebilirsiniz.

WordPress’te Özel Gutenberg Bloğu Nasıl Oluşturulur (3 Adımda)

Bu makalede, özel bir öğe oluşturmak için Genesis Custom Blocks eklentisini kullanacağız. Örnek olarak, blog yazılarınızın altına ekleyebileceğiniz bir yazar biyo bloğu oluşturacağız.

Bu blok, yazarın kendi fotoğrafını veya avatarını ekleyebileceği bir görüntü alanından ve biyografileri için bir alandan oluşacaktır. Ayrıca kullanmak istediğiniz fazladan alanları da ekleyebilirsiniz. Genesis Custom Blocks eklentisini etkinleştirdikten sonra, başlamaya hazırsınız.

Adım 1: Bloğunuzu Yapılandırın

WordPress kontrol panelinde, Özel Bloklar> Yeni Ekle’ye gidin. Daha sonra bloğunuza açıklayıcı bir ad verebilirsiniz:

Ardından, bloğun özelliklerini yapılandıracaksınız. Bu, Gutenberg blok seçicisinde bu bloğu daha kolay bulmanıza yardımcı olacaktır.

Bu adımda, editörde bu bloğu temsil edecek simgeyi ve saklanacağı kategoriyi seçebilirsiniz. Varsayılan blok kategorileri arasından seçim yapabilir veya Yeni Kategori Ekle’yi seçerek yeni bir tane oluşturabilirsiniz. Birden fazla blok oluşturmayı planlıyorsanız, tüm Genesis bloklarınızı saklayacağınız bir kategori oluşturmak yardımcı olabilir:

WordPress Gutenberg ayarları.

Ayrıca bu bloğa bazı anahtar kelimeler de atayabilirsiniz. Bu anahtar sözcükler, seçicide bu bloğu bulmayı kolaylaştıracaktır. En fazla üç tane girebilirsiniz:

Genesis Custom Blocks anahtar kelime ayarları.

Varsayılan olarak, özel bloklarınızı hem sayfalarda hem de yayınlarda kullanabilirsiniz. Ancak, Gönderi Türleri düğmelerini kullanarak bu varsayılan davranışı değiştirebilirsiniz. Bu örnekte bir yazar biyo bloğu oluşturduğunuz için, bir web sitesinin sayfalarına bir yazar atamak alışılmadık bir durum olduğundan, bunu yayınlarla sınırlandırmak isteyebilirsiniz.

Bloğun bilgisi, adına göre otomatik olarak oluşturulur. Ancak, gerekirse bu bilgileri düzenleyebilirsiniz. Daha sonraki bir adımda blok şablonumuzu oluşturmak için bilgi bilgisini kullanacağız, bu nedenle bu bilgileri not etmek önemlidir.

Adım 2: Özel Gutenberg Bloğunuzu Tasarlayın

Ardından, özel bloğunuza bazı Editör Alanları ekleyeceksiniz. Bu alanlar, bu bloğu her kullandığınızda düzenleyebileceğiniz veri noktalarıdır (örneğin, bir ‘Resim’ alanına bir fotoğraf eklemek). Bir alan eklemek için Düzenleyici Alanı’nı seçin ve ardından artı simgesine bir tıklama verin:

Genesis özel blok düzenleyici alanları.

Alan Etiketi altında, giriş alanının yanında görüntülenecek metni girin. Bu, yazara girmesi gereken içerik hakkında bir ipucu verme şansınızdır. Alan Türü altında, bu alanın kabul etmesi gereken girdi türünü seçin. Bu, tüm yazarların bloğu tutarlı bir şekilde kullanmasını sağlamanıza yardımcı olabilir.

Genesis Custom Blocks, ‘Onay Kutusu’, ‘Görüntü’ ve ‘Geçiş’ dahil olmak üzere bir dizi alan türünü destekler. Bir yazar biyo bloğu için, genellikle yazarın vesikalık fotoğrafını veya avatarını gösterebileceği bir Görüntü alanı eklersiniz. Ayrıca biyografileri için bir alana ihtiyacınız olacak.

İkincisini yapmak için, bir Metin bloğu ekleyerek basit bir metin giriş seçeneği oluşturabilirsiniz. Alternatif olarak, bir ‘Metin Alanı’ ekleyerek yazara çalışması için daha fazla alan verebilirsiniz. Bu Metin alanı alanı, paragraflar için uygun olan çok satırlı bir metin girişi seçeneği oluşturur.

Çeşitli alanlar ekledikçe, farklı yapılandırma seçeneklerine erişim elde edeceksiniz. Aşağıdaki ekran görüntülerinde, alan türü olarak Metin kullanıyoruz.

Bir Metin alanı için, bir yer tutucu metin sağlayabilir ve bir karakter sınırı belirleyebilirsiniz. Web sitenizde nasıl görüntülenmesi gerektiğini belirtmek için Alan Genişliğini de kullanabilirsiniz:

Özel Gutenberg blok metin ayarları.

Özel bloğunuzdaki her alan için bu adımları tekrarlayabilirsiniz. Bloğunuzun nasıl yapılandırıldığından memnun olduğunuzda, Yayınla’ya tıklayın. Bu öğe artık WordPress blok seçicide mevcut olacaktır.

3. Adım: Bir Blok Şablonu Oluşturun

Yeni bloğunuzu düzgün bir şekilde görüntülemek için, seçtiğiniz WordPress teması için bir blok şablonu oluşturmanız gerekir. Bu, yazarın vesikalık fotoğrafı ve biyografi metniniz gibi özel bloğunuzda kullanılan tüm alan verilerini içerir.

Blok şablonlarınızı aktif temanızın dizininde saklamanız gerekecek. Bu dizine erişme şekliniz, barındırma ortamınıza bağlı olarak değişecektir. Ancak çoğu barındırma sağlayıcısı Dosya Aktarım Protokolü (FTP) erişimi sunacaktır.

Ardından, barındırma sağlayıcınıza uzaktan bağlanmak için FileZilla gibi bir FTP istemcisi kullanabilirsiniz. Bunu nasıl yapacağınızdan emin değilseniz, sağlayıcınızın belgelerine başvurmak yardımcı olabilir veya yardım için doğrudan onlarla iletişime geçebilirsiniz.

Web sitenize başarıyla bağlandıktan sonra, aktif temanızın dizinini açabilirsiniz. Bu dizinin içinde “bloklar” adlı yeni bir klasör oluşturun.

Ardından, bloklar dizini içinde yeni bir PHP dosyası oluşturun. Bu dosyayı aşağıdaki biçimde adlandırabilirsiniz:

block- {block-slug} .php

Önceki adımda oluşturduğunuz bloğun bilgisini “blok sümüklü böcek” ile değiştirdiğinizden emin olun. Örneğin, bu “block-custom-block.php” gibi görünebilir.

Bu noktada, Genesis blok şablonunuzu başarıyla tanıyabilir. Bununla birlikte, şablonunuzu HTML ve gerekli tüm PHP işlevlerini kullanarak kodlamanız gerekir.

Bu adımı nasıl tamamladığınız bloğunuza bağlı olarak değişecektir. Bununla birlikte, Genesis Custom Blocks web sitesinde birçok örnek kod bulacaksınız. Bu adımları başarıyla tamamladıktan sonra, Gutenberg düzenleyicisinin içinden özel bloğunuza erişebilmelisiniz:

Özel Gutenberg bloğunuzu ekleme.

Bloğunuz otomatik olarak görünmezse, Tümüne Gözat’a tıklayarak Gutenberg’in düzenleyici kitaplığına erişebilirsiniz. Daha sonra özel bloğunuzu oluşturduğunuz kategoriyi seçebilirsiniz – artık bunu sayfanıza veya gönderinize ekleyebilmelisiniz.

Sonuç

Gutenberg, iyi bir yerleşik blok seçimi sunar, ancak kapsamlı bir listeden uzaktır. Genesis Custom Blocks gibi bir eklenti kullanarak Gutenberg kütüphanesinin sınırlamalarının ötesine geçebilirsiniz.

Bu makalede, size özel bir Gutenberg bloğunu üç aşamada nasıl tasarlayacağınızı ve geliştireceğinizi gösterdik:

Özel Gutenberg bloğunuzu yapılandırın. Bloğunuzu tasarlayın. Bir blok şablonu oluşturun.

WordPress’te özel bir Gutenberg bloğu oluşturmakla ilgili sorularınız mı var? Aşağıdaki yorumlar bölümünde sorabilirsiniz!

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz