Advanced Custom Fields (ACF) ile Gutenberg Blok Nasıl Oluşturulur

İçindekiler

WordPress 5.8 sürümüyle hayatımıza giren Gutenberg, websitelerinde birçok yeniliği beraberinde getirdi. Full Site Editing kavramıyla karşımıza çıkan WordPress Gutenberg’i kullanarak kullanıcıların blok tabanlı websitesi oluşturmalarının önünü açtı.

Bu yazımızda sizlerle beraber Advanced Custom Fields ile Gutenberg Blok nasıl oluşturulacağını inceleyip kendi özel blok yapımızı oluşturacağız. Tek yapmamız gereken Advanced Custom Fields ile Gutenberg Blok Nasıl Oluşturulur sorusu için çözümleri adım adım inceleyerek uygulamak. Haydi Advanced Custom Fields ile Gutenberg Blok Nasıl Oluşturulur yazımızı beraber inceleyelim.

Advanced Custom Fields(ACF) Nasıl Kurulur?

WordPress güncellenen sürümleriyle birlikte artık full site editing kavramında yoğunlaştığını görüyoruz. Gutenberg’in duyurulmasıyla birlikte Full Site Editing kavramını geliştiren WordPress, yeni sürümleriyle birlikte Advanced Custom Fields kullanarak kullanıcıların kendi özel alanlarını yaratmasını mümkün kıldı. Bu özel alanlar ile kullanıcılar sitelerinde istedikleri değişiklikleri kolayca yapabiliyorlar. Gutenberg, bu blok özelliklerini kullanarak kullancıların kendi istedikleri blokları oluşturup özel alanlarını yaratmalarına imkan verdi.

Şimdi birlikte Advanced Custom Fields ile Gutenberg Blok oluşturmak için adımları yapmaya başlayalım. Gutenberg Blok oluşturmamızı sağlayan Advanced Custom Fields pluginini indirmemiz gerekiyor ve WordPress sitemizde plugin sayfamıza giriş yapıyoruz. Alttaki görselde de belirttiğim gibi Plugins başlığının hemen sağında bulunan Yeni Ekle butonuna basarak karşımıza çıkan pencerede search alanına Advanced Custom Fields yazarak bir alt görseldeki ACF pluginini ekliyoruz.

Yukarıdaki resimdeki gibi karşımıza çıkan ekranda Install Now butonuna tıklayarak pluginimizi yükleyip aktifleştiriyoruz. Advanced Custom Fields ile Gutenberg Blok oluşturmak için ilk adımı yapıp, Advanced Custom Fields pluginini sitemize yükledik, şimdi birlikte Advanced Custom Fields aracılığıyla nasıl özelleştirilmiş blok yaratabileceğimize bakalım.

Advanced Custom Fields İle Özel Blok Nasıl Oluşturulur?

Başarıyla Advanced Custom Fields pluginini yükledikten sonra Advanced Custom Fields İle Özel Blok oluşturma adımına geçebiliriz. Öncelikle yapmamız gereken WordPress yönetici Panelimizden ACF yazısına tıklamak. Daha sonra açılan pencerede karşınıza fotoğraftaki gibi ekran gelecektir.

Add Field Group butonuna tıklayarak oluşturacağımız blok için bir isim belirlememiz gerekiyor, ben genel bir isim olarak Custom Block isminde blok oluşturacağım. Siz de kendi özel isminizle Fields Group oluşturabilirsiniz. Blok ismi oluştururken yaptığı işleme göre blok ismini isimlendirmek ve global isimler kullanmak daha sonra bize kullanım kolaylığı sağlayacaktır.

Blok ismini belirledikten sonra blok içerisinde oluşturacağımız değişkenleri eklememiz gerekiyor. Ayrıca kullanacağımız değişkenlerin tiplerini belirlememiz ve isimlendirmemiz gerekiyor. Kendi oluşturduğum blok için başlık, açıklama metni, görsel ve buton kullanacağım sizde kendi bloğunuzun ihtiyacına göre değişkenleri oluşturup isimlendirebilirsiniz. Değişkenlerinizi oluştururken Field Type değişkeni ile oluşturduğunuz field tipini, Field Label ile oluşturduğunuz değişkenin ismini belirleyebilirsiniz. Örneğin image değişkeni oluşturulurken Field Type olarak image seçilmelidir. Field Name, label ile aynı olacak şekilde otomatik olarak ekleniyor ama değiştirmek isterseniz değiştirebilirsiniz.

Başlığımızı oluşturduktan sonra Add Field butonuna tıklayarak oluşturmak istediğimiz Fieldları oluşturacağız.

Kendi blok yapımda kullanacağım fieldları resimdeki gibi oluşturdum sizde ihtiyacınız olan fieldları resimdeki gibi oluşturarak kendi bloğunuzu özelleştirebilirsiniz.

Bu işlemleri yaparken dikkat etmeniz gereken en önemli unsurlardan bir tanesi oluşturduğunuz fields için type özelliğidir. Her field kendi özelliğini yansıtmalı ki daha sonra bu özel blokları sayfaya eklediğimizde seçtiğimiz field tipine göre alanlar geleceği için sorun yaşamayalım. Örneğin link eklemek istediğimizde text olarak seçersek, bu link sadece bir metin olarak görüntülenecektir.

Yukarıdaki gibi özel bloğumuzu oluşturduktan sonra Gutenberg içerisinde özel blok yapımızı nasıl kullanabileceğimize hep birlikte göz atalım.

Tema İçerisinde Advanced Custom Blok Nasıl Oluşturulur?

Advanced Custom Fields ile oluşturduğumuz blokları temanın içerisinde çağırmak için bir klasör oluşturmalıyız. Bu klasörü aktif olan temamızın içerisinde açıyoruz. Dosyanın ismini kendi yapınıza göre belirleyebilirsiniz ben anlaşılabilir olması açısından blocks adında bir klasör oluşturacağım. Siz istediğiniz isimle bir klasör oluşturabilirsiniz.

Blocks ismini verdiğim klasörde Advanced Custom Fields tarafından oluşturduğum blokları tutacağım.

Oluşturduğumuz blokları saklamamız için gereken blocks klasörünü oluşturduktan sonra bu klasör içerisinde istediğimiz isimde bir klasör açıyoruz. Benim oluşturduğum blok ismim Custom Block olduğu için custom adında klasör açıyorum. Bu klasör içerisine blok yapısının PHP ve JSON dosyalarını ekleyeceğiz. Oluşturduğumuz PHP dosyası ACF ile oluşturduğumuz blok içerisindeki değişkenleri çağırmamızı ve HTML yapımızı oluşturmamızı sağlar. JSON dosyası ise blok yapımızın isim, icon, özelliklerinin yer aldığı dosyadır. JSON dosyamızı Gutenberg tarafından bloğumuzu tanıtmak için kullanırız. Aşağıda benim oluşturduğum JSON dosyasını inceleyebilirsiniz.

{
 "name": "acf/custom-block", // blok Name
 "title": "Custom Block", // blok Title
 "description": "Custom blok exercise", // blok description
 "category": "formatting", // blok category
 "icon": "ellipsis", // blok icon
 "keywords": [ // blok yapımızın anahtar kelimeleri
 "custom",
 "block",
 "exercise"
],
"acf": {
  "mode": "preview",
  "renderTemplate": "custom-block.php"
},
 "align": "full", // Full hizalama
 "supports": {
  "anchor": true
  }
}

Oluşturduğumuz JSON dosyasından sonra HTML yapımızı oluşturuyoruz. Aşağıdaki örnekte olduğu gibi ihtiyacıma uygun olarak tasarladığım HTML yapım bulunmakta sizde kendi HTML yapınızı oluşturup bu PHP dosyasında yazabilirsiniz. Aşağıda bulunan kod yapımızda bilmeniz gereken önemli bir konu; WordPress fonksiyonu get_field($selector, [$post_id], [$format_value])şekilde çağrılmaktadır. get_field(“field_name”) bu şekilde oluşturduğunuz özel blok değişkenleri html içerisinde echo ile yazdırmış olursunuz. Dikkat etmeniz gereken get(“field_name”), oluşturduğunuz field değişkeninin sayfada bizim tarafımızdan düzenlenecek name özelliğini alır bunu field label name ile karıştırmayalım.

<?php
    $title = get_field('title');
    $description = get_field('description');
    $link = get_field('button')
    $image = get_field('image');
?>
<div class="custom-block-container">
    <div class="custom-block">
        <div class="custom-block-left-side">
            <div class="custom-block-title">
                <?php echo esc_html($title); ?>
            </div>
            <div class="custom-block-description">
                <?php echo esc_html($description); ?>
            </div>
            <a class="custom-block-button" 
                href="<?php echo esc_attr($link['url']) ?>" 
                 target="<?php echo esc_attr($link['target']) ?>">
                <?php echo esc_html($link['title']); ?>
            </a>
        </div>        
        <div class="custom-block-right-side">
            <div class="custom-block-image">
                <?php echo wp_get_attachment_image($image); ?>
            </div>
        </div>
    </div>
</div>

Yukarıdaki yapıda dikkat ettiğiniz gibi get_field(‘button’) bir dizi ve içinde farklı bilgiler sakladığı için dizi şeklinde çağırıyoruz. Sizde çağırdığınız değişkenin türünü <?php var_dump(variablesName) ?> kodunu yazarak değişkenizin içindeki verileri ve türünü öğrenebilirsiniz.

Advanced Custom Blok Tema İçine Nasıl Eklenir?

Yazdığımız JSON ve PHP dosyalarının temamızın içine aktarılması gerekmektedir. Ancak ACF zaten otomatik olarak temamızın içerisinde oluşturulan JSON dosyalarını, tema içerisinde yaratıyor. Böylece JSON için herhangi bir işlem yapmamıza gerek yoktur. Bu otomatik olarak oluşturulan dosyalar Advanced Custom Fields içerisinde oluşturduğumuz Custom Block gibi özel blok değişkenlerinin tutulduğu alan içerisinde saklayacaktır.

ACF tarafında otomatik olarak oluşturulan JSON dosyası silinmediği sürece diğer kullanıcılar tarafından import edilerek aynı şekilde kullanılabilir. Bunun için ACF içinde Fields Group sayfasında senkronizasyon sekmesinden import edilebilir durumda olan blokları indirip kullanabilirsiniz.

Oluşturduğumuz Custom Blockların ACF tarafından tanımlanması için içe aktarmanız gerekmektedir. Bunun için aşağıdaki fonksiyonu kullanmak istediğimiz tema içerisinde bir dosya oluşturup oraya yazmamız gerekmektedir. Ben bu dosya ismini acf.php adında oluşturuyorum, sizde ismini kendinize göre belirleyip yaratabilirsiniz.

acf.php dosyamızı yarattıktan sonra aşağıda bulunan kodumuzu yarattığımız dosya içine yerleştiriyoruz.

<?php
function custom_register_acf_blocks() {
  register_block_type(get_template_directory() . '/blocks/custom');
}
add_action( 'init', 'custom_register_acf_blocks' );

Yukarıdaki gibi kodlarımızı yazdıktan sonra Advanced Custom Fields pluginine girip kendi yarattığımız Blok içerisine tıklayıp sağ üstte bulunan Değişiklikleri Kaydet Butonuna bastığımız zaman ACF otomatik olarak JSON dosyamızın oluştuğunu görebilirsiniz.

Advanced Custom Fields İle Gutenberg’e Custom Blok Nasıl Eklenir ?

Son adımımızda Advanced Custom Fields ile yarattığımız blok yapımızı kullanmamız için eklememiz gereken kod aşağıda bulunmaktadır. Bu kodda custom_includes= array(./acf.php) ile acf.php içerisinde çağrılan dosyaları sayfamızda içe aktarıyoruz. Ben bu kodu kullandığımız tema içerisinde bulunan function.php içerisine ekliyorum.

$custom_inc_dir = get_template_directory();

// Array of files to include.
$custom_includes = array(
        '/acf.php'
);

// Include files.
foreach ( $custom_includes as $file ) {
    require_once $custom_inc_dir . $file;
}

Bu işlemi yaptıktan sonra Advanced Custom Fields içerisinde oluşturduğumuz Custom Blok yapımızın tipini seçmemiz gerekmektedir. Bunun için aşağıdaki resimde bulunan Edit Field Group içerisinde Settings kısmında oluşturduğumuz custom blok yapısını, Blocks klasörü adı altında oluşturduğumuz Custom Block klasörüne eşitlememiz gerekmektedir.

Bu şekilde Custom Block klasörümüzle oluşturduğumuz blok yapısını içe aktarabiliriz ve oluşturduğunuz değişkenleri kullanabiliriz. Bu eşitlemeyi yapmazsanız yarattığınız blok yapısını sayfanızda kullanmazsınız.

Gutenberg’de Advanced Custom Blok Nasıl Kullanılır?

Yukarıdaki adımları izledikten sonra bütün işlemlerimiz tamamlandı ve artık sadece oluşturduğumuz özel blok yapımızı çağırmak kaldı. Gutenberg içerisinde bu yapıyı çağırmak için sayfamıza gidelim.

WordPress panelinde üst kısmında bulunan +Yeni butonuna basarak oluşturmak istediğimiz yapıyı seçiyoruz. Daha sonra Gutenberg içerisinde Advanced Custom Fields ile oluşturduğumuz blok yapısını çağırmamız gerekmektedir. Bunun için +Yeni butonuna bastığımızda açtığımız post veya sayfada üst kısmında bulunan + butonuna basarak sayfamıza blok yapısını ekleyebiliriz.

+ Butonuna bastıktan sonra karşımıza bir Search kutusu çıkıyor. Bu kısıma Advanced Custom Fields ile oluşturduğumuz özel blok ismini yazarak blok yapımızı çağırıyoruz. Bu işlemi yaptıktan sonra geriye tek bir işlem kaldı. Eklediğimiz blok yapısının değişkenlerini yazmamız gerekiyor haydi birlikte son işlemi de tamamlayıp sayfamıza oluşturduğumuz özel blokları çağıralım.

Oluşturduğumuz Custom Blok yapısını sayfamımıza yarattık. Şimdi değişkenlerimizi girelim. Değişkenlerimi girdikten sonra oluşturduğumuz blok karşımızda. Eklediğimiz blok yapımız Gutenberg Editor sayfasında bu şekilde gözüküyor şimdi sayfamızda nasıl gözüktüğüne beraber göz atalım.

Sayfamızda alttaki görsel gibi gözüküyor şimdi css kodlarımızı yazarak görüntümüzü biraz düzenleyelim.

Gelişmiş Özel Alanlarla (ACF) Gutenberg Bloğu Nasıl Oluşturulur

Css kodlarınızı kendinize göre uygulayarak, istediğiniz görüntüyü elde edebilirsiniz.

Gutenberg editör yazdığınız css kodlarını içe aktarmaz. O yüzden sayfada gözüktüğü gibi Gutenberg Editörde göremezsiniz bunu düzenlemek için dosyanıza Gutenberg Editör içinde yazdığınız css dosyasını içe aktarmanız gerekmektedir. Bunun için WordPress fonksiyonlarından wp_enqueue_style fonksiyonunu kullanmanız gerekmektedir. Aşağıda bulunan kodu function.php dosyanıza ekleyerek Gutenberg Editör içerisinde css dosyalarını içe aktarmayı sağlayabilirsiniz. Benim eklediğim css dosyası custom-block.css dosyası olduğu için get_theme_file_uri ile kendi dosyamın uzantısını yazdım sizde kendi dosya uzantınızı yazabilirsiniz.

function enqueue_editor_styles() {
    wp_enqueue_style(
            'mytheme-block-editor-styles',
            get_theme_file_uri('assets/css/custom-block.css')
    );
}

add_action( 'enqueue_block_editor_assets', 'enqueue_editor_styles' );

Yukarıdaki Advanced Custom Fields Gutenberg Blok Nasıl Oluşturulur makalemizde adım adım ilerleyerek yaptığımızda sizde Advanced Custom Fields kullanarak kendi özel bloğunuzu oluşturabilir be bu şekilde sayfalarınızı, postlarınız ve kullanmak istediğiniz alanları editleyebilirsiniz. Aklınıza takılan tüm soruları aşağıdaki yorumlara bırakabilirsiniz.

0 Comment