Index
Advanced Custom Fields (ACF), WordPress kullanıcılarına web siteleri için özel içerikler oluşturma ve yönetme fırsatı sunan bir araçtır. Bu kapsamlı araç sayesinde, kullanıcılar karmaşık içerik yapısını kolayca yönetebilir ve web sitelerinin fonksiyonelliğini genişletebilirler. ACF’nin sağladığı InnerBlocks özelliği, Gutenberg editörünün esnekliğini bir adım daha ileri taşıyarak, kullanıcıların web sitelerinde zengin ve dinamik içerik blokları oluşturmalarını sağlar.
Bu makalede, ACF’nin InnerBlocks özelliğinin temellerini, bu güçlü özelliğin web sitenizde nasıl yapılandırılacağını ve sayfa düzenlerinize nasıl entegre edilebileceğini ayrıntılı bir şekilde ele alacağız. Adım adım rehberimizde, bu özelliği etkin bir şekilde kullanarak kullanıcı deneyiminizi nasıl zenginleştirebileceğinizin detaylarını bulabilirsiniz.
InnerBlocks Nedir?
InnerBlocks, WordPress blok editöründe, özel bloklar içinde başka blokların yerleştirilmesine olanak tanıyan bir özelliktir. Bu özellik sayesinde, geliştiriciler ve içerik üreticileri, kullanıcı deneyimini önemli ölçüde zenginleştiren, katmanlı ve iç içe geçmiş içerik yapısı oluşturabilirler. InnerBlocks, bir “kapsayıcı” blok içinde daha küçük “çocuk” blokların yerleştirilmesine izin vererek, web sitesi sahiplerinin kendi sayfalarını tamamen özelleştirilmiş ve modüler bir şekilde inşa etmelerine olanak tanır.
Gutenberg, kullanıcıların içeriklerini parçalar halinde düşünmelerine ve her bir parçayı bir blok olarak yönetmelerine imkan veren, blok tabanlı bir düzenleyicidir. Kullanıcılar, InnerBlocks özelliğini kullanarak, basit bir metin bloğundan karmaşık bir ürün listesine veya hizmet sunumu bölümüne kadar her şeyi oluşturabilirler.
Her bir blok, bağımsız olarak eklenebilir, düzenlenebilir ve yeniden konumlandırılabilir, bu da web sayfalarının yapısını ve içeriğini neredeyse sınırsız bir şekilde özelleştirmeyi mümkün kılar. Örneğin, bir blog yazısı içinde kullanıcıların alıntılar, resimler ve ilgili içeriklerle zenginleştirilmiş bir hikaye anlatmasına imkan verir. E-ticaret siteleri, ürün özelliklerini, resim galerilerini ve satın alma butonlarını tek bir ürün bloğunda birleştirebilir.
Geliştiriciler için InnerBlocks, özel bloklar oluştururken kullanıcılara esneklik sunmanın yanı sıra, kodun yeniden kullanımını ve bakımını kolaylaştırır. Örneğin, bir tema veya eklenti geliştiricisi, müşterilerin sıkça kullandığı içerik öğelerini standartlaştırılmış bloklar olarak sunarak, sitenin genel tutarlılığını korurken aynı zamanda özelleştirme seçeneklerini de artırabilir.
Özetle, InnerBlocks, WordPress temaları ve eklentileri geliştiricileri için oldukça değerlidir. Bu özellik, karmaşık içerik yapılarını ve iç içe geçmiş blok düzenlemelerini mümkün kılar. Özel blok geliştirirken, InnerBlocks özelliğini kullanmak, bu blokların kullanıcılar tarafından daha rahat ve esnek bir şekilde özelleştirilmesini sağlar. Böylece, kullanıcılar kendi ihtiyaçlarına göre blokları düzenleyebilir ve kişiselleştirebilir.
ACF içinde InnerBlocks’u Aktive Etme
İlk adım olarak WordPress kurulumunuzun güncel olduğundan emin olun. Daha sonraki adım ise ACF Pro eklentisini edinmek ve WordPress sitenize yüklemektir. Çünkü InnerBlocks ACF Pro ile çalışan bir özelliktir. ACF Pro’yu yüklemek ve etkinleştirmek için ACF web sitesindeki ACF Pro Yükseltme Rehberi adımlarını takip edebilirsiniz. Eklentiyi aktifleştirdikten sonra lisans anahtarınızı girerek ACF PRO eklentisini kullanmaya başlayabilirsiniz.
InnerBlocks ile Blok Oluşturma
ACF ve InnerBlocks kullanarak WordPress için örnek olarak bir “Our Services” bloğu nasıl oluşturabileceğinizi adım adım inceleyelim. Her bir adımda, gerçekleştireceğiniz işlemleri destekleyecek kod örnekleri sunarak ve bu kodların her bir parçasının önemini ve işlevini detaylandırarak, bu sürecin her yönünü aydınlatmaya çalışacağım. Böylece, kendi web siteniz için benzer blokları nasıl oluşturabileceğinizi, bu blokları kişiselleştirme ve zenginleştirme yollarını keşfedeceksiniz.
Blok Kaydı İçin JSON dosyası Oluşturma
İlk olarak bir block.json dosyasına ihtiyacımız var. Bu dosya, yeni bloğunuzun temel ayarlarını, işlevlerini ve özelliklerini tanımlar ve WordPress’in bloğunuzu tanımasını ve onu doğru bir şekilde işlemesini sağlar. Bunun için oluşturacağımız eklentide veya temada tüm blokların bulunduğu bir blocks klasörü yaratmak işimizi kolaylaştıracaktır.
Oluşturduğunuz blocks klasörü içinde, “Our Services” bloğunuz için özel bir alt klasör oluşturalım. Bu alt klasörü, bloğunuzla uyumlu ve tanımlayıcı olacak şekilde our-services olarak adlandırabiliriz. Bu klasör, bloğunuzla ilgili tüm dosyaları (kaynak kodları, stil dosyaları ve JavaScript dosyaları gibi) bir arada tutacak ve bloğunuzun tüm öğelerinin birbiriyle uyum içinde çalışmasını sağlayacaktır.
Oluşturduğunuz our-services klasörü içine, bloğunuz için gereken block.json dosyasını yerleştirin. block.json dosyası, bloğunuzun yapılandırmasını JSON formatında saklar ve WordPress’e bu bloğun adını, açıklamasını, kategori ve ikonunu, kullanılacak betik ve stil dosyalarını ve diğer önemli bilgileri içerir.
Ardından, bloğunuzun ön yüzde nasıl görüneceğini tanımlayan PHP şablon dosyası olan our-services.php dosyasını ekleyin. Bu dosya, bloğunuzun HTML yapısını, WordPress tarafından işlenecek PHP kodlarını ve kullanıcıların içeriklerini InnerBlocks aracılığıyla nasıl düzenleyebileceklerini tanımlar.
Görseldeki gibi bir yapı oluşturup devam ediyorum. Daha önceki Advanced Custom Fields (ACF) ile Gutenberg Blok Nasıl Oluşturulur yazımızda bu yapının nasıl kurulacağından detaylı olarak bahsetmiştik, isterseniz inceleyebilirsiniz.
İlk olarak block.json dosyamızı oluşturuyoruz.
{
"name": "acf/our-services",
"title": "Our Services",
"description": "Inner block template",
"category": "formatting",
"icon": "smiley",
"keywords": ["services", "inner block"],
"acf": {
"mode": "preview",
"renderTemplate": "our-services.php"
},
"supports": {
"anchor": true,
"jsx": true
}
}Oluşturduğumuz bu json dosyasında,
- name: Bloğunuzun özel adıdır. Genellikle theme-prefix/block-name formatında kullanılır.
- title: Bloğunuzun görünen adıdır ve kullanıcılar tarafından blok seçici içinde görülür.
- category: Bloğun hangi kategori altında yer alacağını belirler.
- icon: Bloğunuzun simgesini belirtir. WordPress’in ikonlarından birini veya özel bir ikon kullanabilirsiniz.
- keywords: Kullanıcıların blok arama sırasında bloğunuzu kolayca bulabilmesi için anahtar kelimeler. Blok seçici içinde arama kısmına bu kelimeleri yazarsanız bloğunuza hızlıca ulaşabilirsiniz.
- supports: Bloğunuzun desteklediği ekstra özellikleri belirtir. jsx desteği, InnerBlocks gibi React tabanlı özelliklerin kullanılmasını sağlar.
- renderTemplate: Bloğunuzun frontend ve editörde nasıl render edileceğini belirleyen PHP şablon dosyasının yoludur.
Bu aşamada sonra, bloğunuzun stil ve davranışlarını daha da özelleştirmek için ek CSS ve JavaScript dosyalarını, gerektiğinde block.json dosyanıza dahil edebilirsiniz
Siz de oluşturacağınız blok için uygun şekilde bir json dosyası oluşturabilirsiniz.
Bloğu kaydetme
block.json dosyasını oluşturduktan sonra, WordPress’in bu bloğu tanıması ve kullanılabilir hale getirmesi için bloğu kaydetmeniz gerekiyor. block.json dosyası, blok yapılandırmasını tanımlar, ancak WordPress’e bu bloğu kaydetmek için ekstra bir adım gereklidir.
Bu kayıt işlemi, WordPress’in register_block_type() fonksiyonu aracılığıyla yapılır. Bu fonksiyon, block.json dosyası yoluyla veya doğrudan PHP içinde çağrılabilir ve WordPress’in blok kayıt mekanizmasına bloğunuzun varlığını ve nasıl işleneceğini bildirir. Bu işlem genellikle temanızın functions.php dosyasında veya bir eklenti içinde gerçekleştirilir. Kayıt sırasında, block.json dosyanızın yolu fonksiyona parametre olarak verilir ve WordPress bu dosyayı okuyarak bloğunuzun ayarlarını sistemine yükler.
function register_acf_blocks()
{
register_block_type(get_template_directory() . '/blocks/our-services');
}
add_action('init', 'register_acf_blocks');
InnerBlocks Entegrasyonu
Şimdi bloğumuzun HTML yapısını our-services.php içinde oluşturalım. Bu PHP dosyası, bloğunuzun ön yüzdeki görünümünü ve içeriğini tanımlayan HTML yapısını içerir. Web sayfanızda kullanıcıların göreceği her şey, bu dosya tarafından belirlenen kodlarla şekillenir.
InnerBlocks yapısını kullanarak, iç içe blokların ve özelliklerinin nasıl düzenleneceğini bu dosyada belirliyoruz. Ben, “Our Services” bloğu için, içerikleri yan yana göstermek amacıyla iki sütunlu bir düzen oluşturmayı tercih ettim. Bu yapılandırmayı, WordPress’in core/columns ve core/column bloklarını kullanarak gerçekleştirdim.
<?php
$inner_blocks_template = [
[
'core/columns', [], [
['core/column', [], [
['core/image']
]],
['core/column', [], [
['core/heading', ['placeholder' => 'Add your title here...']],
['core/paragraph', ['placeholder' => 'Add your description here...']],
['core/button', ['placeholder' => 'Add link text...']]
]]
]
]
];
echo '<div class="our-services-block">';
echo '<InnerBlocks template="' . esc_attr(wp_json_encode($inner_blocks_template)) . '" />';
echo '</div>';
?>
Oluşturduğum bu our-services.php dosyasında;
- $inner_blocks_template dizi içinde, core/columns ve core/column bloklarını kullanarak iki sütunlu bir yapı oluşturabilirsiniz. Bu örnekte, bir başlık (core/heading), bir paragraf (core/paragraph), bir resim (core/image) ve bir buton (core/button) kullanarak yapımızı oluşturduk.
- esc_attr(wp_json_encode ($inner_blocks_template)): Bu kod, PHP’deki $inner_blocks_template dizisini güvenli bir şekilde JSON formatına dönüştürür ve InnerBlocks’a geçirir.
Bloğunuzun düzeni konusunda daha fazla kontrol ve esneklik istiyorsanız, our-services.php dosyasında kullanabileceğiniz templateLock özelliğini de göz önünde bulundurabilirsiniz. Bu özellik, bloğunuzun içindeki alt blokların düzenini kilitlemek veya kullanıcılara değiştirme özgürlüğü tanımak için kullanılır. Örneğin, templateLock=”false” ayarı ile, kullanıcılar bloğunuzdaki sütunların yapısını ve içeriklerini, kendi ihtiyaç ve tercihlerine göre sürükleyip bırakarak yeniden düzenleyebilirler. Bu, özellikle kullanıcıların yaratıcı olmalarını ve sayfa içeriğini kişiselleştirmelerini istediğiniz durumlar için idealdir.
Alternatif olarak, eğer oluşturduğunuz bloğun yapısını korumak ve sadece belirli içeriklerin eklenmesine veya değiştirilmesine izin vermek istiyorsanız, templateLock=”all” kullanarak bloğunuzun yapısını tamamen kilitleyebilirsiniz. Bu, bloğunuzun tutarlı bir görünüm ve işlevselliğe sahip olmasını sağlar, böylece kullanıcılar yalnızca önceden belirlenmiş alanlara içerik ekleyebilirler.
Örnek olması için templateLock=”false kullanımını aşağıda ekliyorum.
echo '<div class="our-services-block">';
echo '<InnerBlocks templateLock="false" />';
echo '</div>';Sayfaya Blok Ekleme
Bloğumuz artık web sayfamıza ekleme için hazır. WordPress yönetim panelinde “Sayfalar” sekmesine giderek yeni bir sayfa oluşturabilir veya mevcut bir sayfayı düzenleyebilirsiniz. Gutenberg bloklarını eklerken olduğu gibi, ACF ile oluşturduğumuz “Our Services” bloğunu da ekleyebilirsiniz. Bu işlemi sayfanın sol üst köşesinde yer alan “+” butonuna tıklayarak yapabilirsiniz. Açılan blok menüsünde oluşturduğunuz “Our Services” bloğunu arayıp bulabilir ve sayfanıza ekleyebilirsiniz. Alternatif olarak, metin alanının içindeki + butonuna tıklayarak da bloğunuzu ekleyebilirsiniz.
Bloğunuzu sayfanıza ekledikten sonra, içerik düzenleme aşamasına geçebilirsiniz. “Our Services” bloğu, kullanıcıların kendi ihtiyaçlarına göre içerikleri kolayca düzenlemelerine olanak tanıyan InnerBlocks özelliğine sahiptir. Bu, her bir alt bloğun (başlık, açıklama, resim ve link) sayfa üzerinde istediğiniz yere yerleştirilmesini ve özelleştirilmesini sağlar. İçerik eklediğinizde, WordPress editörünün sağ tarafında bulunan blok ayarları panelinden her bir alt bloğun ayarlarını yapabilirsiniz. Bu panel, bloğunuzun stilini ve içeriğini kişiselleştirmenize imkan verir.
Blok Stillendirme
Oluşturduğum “Our Services” bloğu, şu anda sayfada ham bir şekilde görünüyor.
Bloğunuzu stilize etmek için çeşitli yöntemler mevcuttur. İsterseniz temanızın CSS dosyasını kullanarak, isterseniz WordPress’in kendi stil özelliklerini kullanarak bloğunuzun görünümünü değiştirebilirsiniz. WordPress editörünün sağ panelindeki ‘Gelişmiş’ sekmesinde, bloğunuza özel CSS sınıfları ekleyebilir ve bu sınıflara uygun CSS kuralları tanımlayabilirsiniz.
Bloğunuza farklı bir stil eklemenin bir yolu, bloğu oluştururken her bir alt blok için özel stiller belirlemektir. Örneğin, “Our Services” bloğunuzun içindeki başlık için belirli bir font boyutu, rengi veya font ailesi atayabilirsiniz.
Bu özelleştirmelerden sonra sayfayı paylaşın. Ve işte birlikte oluşturduğumuz Our Services Bloğu bu şekilde gözüküyor.
WordPress’in sağladığı bu özelleştirme seçenekleri sayesinde, içeriklerinizi benzersiz ve etkileyici bir şekilde sunabilirsiniz. İster başlangıç seviyesinde bir kullanıcı olun, ister deneyimli bir geliştirici, ACF ve InnerBlocks ile WordPress’te özelleştirilmiş bloklar oluşturmak, web sitenize değer katmanın harika bir yoludur. Bu rehber, “Our Services” bloğunun oluşturulması ve özelleştirilmesi sürecini adım adım göstermiştir. Şimdi siz de kendi bloklarınızı oluşturabilir ve web sitenizi zenginleştirebilirsiniz.
