Gelişmiş Özel Alanlar: Özel Alanlar ve ACF Blokları Kılavuzu

Uzun zamandır Gelişmiş Özel Alanların (ACF) hayranıyım. Son birkaç yıldır oluşturduğum veya üzerinde çalıştığım hemen hemen her sitede kullanılıyor.

Farkında olmayanlar için ACF, içeriğiniz üzerinde size daha fazla kontrol sağlayan bir eklentidir. İçeriğinizi yapılandırılmış verilerle zenginleştirmek için özel post meta kullanır. Ayrıca gönderileri, sayfaları, özel gönderi türlerini ve çok daha fazlasını güncellerken meta kutularındaki veri alanlarını oluşturmanıza ve yapılandırmanıza olanak tanır.

Geçmişte, Delicious Brains web sitesindeki bir projenin parçası olarak eklentiyi kullandım. Ancak, bu blog yazısı bana üçüncü taraf çözümünün WordPress geliştirme için ne kadar hayati olduğunu gösterdi. Açıklamama izin ver…

ACF Nasıl Çalışır?

ACF'nin ne yaptığı konusunda kafamı toplamam biraz zaman aldı, işte size kısa bir örnek. Bunu, kullanıcıların özel bir gönderi türü olarak yeniden barındırmak için yeni köpekler eklediği bir köpek kurtarma yardım sitesinde kullandım. Ancak, köpeğin adı, açıklaması, gönderi başlığı ve içeriğinin yanı sıra köpeğin cinsini ve cinsiyetini, bir videonun bağlantısını ve bazı fotoğrafları da saklamak istiyorlar.

Bunu yapmak için, Özel Alanlar > Alan Grupları > Yeni Ekle menüsünden bu veriler için bir alan grubu oluşturdum:

Çeşitli türlerde alanlar ekleyebilirsiniz. Burada seçimler, metin kutuları, basit bir boole onay kutusu ve bir galeri alanı kullandım. İkincisi bir ACF Pro seçeneğidir ve bunu daha sonra tartışacağım.

Kullanıcı seçenekleriyle birlikte bir seçim kutusunu şu şekilde yapılandırabilirsiniz:

Daha sonra, bu grubun yalnızca Dog özel gönderi türü için düzenleme ekranlarında görünmesi gerektiğini söyledim. Gönderi türleri, şablonlar, kategoriler ve kullanıcı rolleri gibi burada kullanabileceğiniz her türlü mantık vardır:

Ancak, ACF'nin gerçek gücü, veri eklediğiniz zamandır.

ACF Alanlarına Veri Ekleme

Bir Dog gönderisi üzerinde çalışırken düzenleme ekranı farklı görünüyor. Tanımlanmış alanlarla tamamlanmış özel bir meta kutusu gösterir:

Bu, içerik düzenleyiciler için tüm ekstra verileri eklemeyi kolaylaştırır. Ayrıca, get_field işlev kodunu kullanarak verilerin temada tam olarak nerede oluşturulmasını istediğinizi belirtmenize olanak tanır:

 <div class="columns small-12 medium-9"> <a href="<?php get_permalink(); ?>"> <h2 class="icon paw"><?php get_the_title(); ?> <span class="dog-data"> <?php printf( '%s %s, get_field( 'gender' ), get_field( 'breed' ) ); ?> </span> </h2> </a> </div>

Eklenti olmadan, ya varsayılan WordPress özel meta kutularını kullanmam, kendi daha zengin meta kutularımı sıfırdan kodlamam ya da köpeğin cinsini ve cinsiyetini özel taksonomilere dönüştürmem gerekirdi. Yazı içeriğinin içine yerleştirilmiş yerel galeriyi bile kullanmam gerekebilir. titriyor .

ACF, WordPress'i Yükseltiyor

ACF, içeriğiniz üzerinde daha fazla kontrol sahibi olmak söz konusu olduğunda, İçerik Yönetim Sistemi (CMS) olarak WordPress'in tam olarak eksik olduğu şeydir. Bir milyondan fazla aktif yükleme ile WordPress platformunun daha güçlü olmasına yardımcı oldu ve hatta büyümesine katkıda bulunmuş olabilir.

Dahası, geliştiriciler ve ajanslar, müşterilere kısa kodlara, sayfa oluşturuculara ve hatta post_content ihtiyaç duymadan içeriklerinin kontrolünü vermek için bundan yararlandı. Geliştiriciler, görselleri yok eden kaçınılmaz istemci düzenlemelerinden kaçınarak, verilerin sitenin ön ucunda nerede göründüğü üzerinde tam kontrole sahiptir.

Aslında, ACF müşterilerimiz arasında o kadar popüler ki, WP Offload Media ile bir entegrasyon eklemek zorunda kaldık. Artık görüntüler ve kırpma, Amazon S3, DigitalOcean Spaces veya Google Cloud Storage'a aktarılan medyayla çalışıyor.

ACF'ye Ekstra Alan Seçenekleri Ekleme

Eklentinin ücretsiz sürümü çok sayıda işlevselliğe sahiptir. Ancak, yineleyiciler, esnek düzenler ve galeriler gibi alanlara erişmek için premium sürüm gereklidir.

Örneğin, kullanıcıların ürün sayfalarındaki bir kaydırıcıda belirli referansları görüntülemesine izin vermek için Tekrarlayıcı alanını kullanıyoruz. Tekrarlayıcı, iç içe geçmiş bir gönderi nesnesi alanı içerir:

Ardından, sayfayı düzenlerken görünür, böylece hangi referansların görüntüleneceğini kontrol edebiliriz:

ACF, kod tabanına serpiştirilmiş eylemler ve filtrelerle her zaman son derece geliştirici dostu ve genişletilebilir bir araç olmuştur. Ayrıca kullanıcıları için önemli olan iyileştirmelere öncelik verir.

Yerel JSON Özelliğini Kullanma

Ancak geçmişte bulduğum birkaç sorundan biri, alan yapılandırmalarını, özellikle alan grupları ve alanlar için özel gönderi türlerini veritabanında depolamaktı.

Bu, bir geliştirme sitesinde alan tanımını değiştirdiyseniz, WP Migrate DB Pro gibi bir çözüm kullanarak veritabanınızı yeniden hayata geçiremezsiniz. Gönderiler tablosunun değişeceğini ve yeni verileri kaybettiğinizi göreceksiniz.

Bu, eski veritabanı birleştirme sorunudur (başlamama izin verme…). Önce canlı sitede alan değişiklikleri yaparak bu sorunu çözerdim. Ardından, geliştirmeye devam etmek için veritabanını yerel siteme çekerdim. Uygun değil.

Neyse ki ACF, Yerel JSON özelliğini tanıttı. Bunun yaptığı, alan yapılandırmalarının veritabanıyla eşitlenebilen JSON dosyaları olarak kaydedilmesine izin vermektir.

Bu harika özellik, ACF verileri için veritabanı birleştirme sorununu çözer. Ayrıca, JSON dosyalarını sürüm kontrolü altında tutabileceğiniz ve yapılandırmayı tipik dosya dağıtım sürecinizin bir parçası haline getirebileceğiniz anlamına gelir. Sitemizde eklentiyle çalışırken, onu Git ve çoklu ortam kurulumumuzla daha da entegre etmek için bazı ince ayarlar ekledim:

• JSON dizinini temanın dışında (değişebileceği gibi) app/data dizinimize tanımladım.
• "Özel Alanlar" menü öğesi yalnızca geliştirme ortamlarında görüntülenecektir.
• admin_init üzerinde güncel olmayan bir veritabanı yapılandırmasına sahip JSON dosyaları otomatik olarak eşitlenir.

Artık WordPress Blok Düzenleyicisine (eski adıyla Gutenberg) sahip olsak da, ACF'nin harika bir düzenleme deneyimi oluşturmak için hala hayati olduğunu savunuyorum.

ACF'nin Yanında Blok Düzenleyiciyi Kullanma

Blok Düzenleyici, içeriği düzenlemek için ACF'den farklı bir yön sunar. İçeriği meta veri olarak depolamak yerine Blokları kullanarak oluşturursunuz, bu da size tasarım esnekliği sağlar.

İlk başta, Blok Düzenleyici meta kutuları desteklemiyordu. Hatta “Gönderiyi Düzenle” ekranından kaldırıldılar ve çok fazla öfkeye yol açtılar. Artık meta kutuları için destek eklendi. Minimal, daha az rafine bir Kullanıcı Arayüzü (UI) ile Blok Düzenleyicinin altında görünürler.

Özel veriler için alanlar yerine Blokları kullanan yeni düzenleyici, ACF'nin geleceği üzerinde büyük bir etki yaratma potansiyeline sahiptir. Dahası, yeni sitelerin artık yerel bir çözüm olduğu için üçüncü taraf bir araç yükleme olasılığı çok daha düşük olacak.

Ancak, önerilen temel değişikliklerin ACF'nin geleceğini ilk kez tehdit etmesi değil. Birkaç yıl önce Post Meta için yeni bir ekip kuruldu. İlk başta, bu, çeşitli üçüncü taraf özel alan çözümlerini öldürecek gibi görünüyordu:

Şu an için bu rolü dolduran çok sayıda kitaplık/çerçeve/eklenti (CMB, SCB, WPAlchemy, ACF, Pod'lar) var. Bunları yeni bir temel değere sahip eklentinin ruhani öncülleri olarak göreceğiz.

O zamanlar, yeni rakip özellikleri tanıtma kararının bazı eklentileri nasıl gereksiz hale getirebileceğini yazmıştım. Sonuçta Post Meta projesi hiçbir yere gitmedi, yeni editör geldi ve ACF fırtınayı atlattı.

ACF sadece geri dönmekle kalmadı, aynı zamanda uyum sağladı. Sonuç, ACF'nin gücü ile özel Blokların esnekliğini birleştiren bir şeydi. Bundan sonra konuşalım.

ACF Kullanarak Bloklar Nasıl Oluşturulur

Açıkçası, özel Bloklar faydalı olabilir. Ancak, onları oluşturmak için teknik süreç karmaşıktır. ACF Blokları boşluğu doldurur.

ACF Blokları mevcut özel alanlarınızla entegre olur, dinamik ve özelleştirilebilir ve iki şeyi başarmanıza izin verir:

• Mevcut özel alanlarınızı Block Editor ekosistemine alabilirsiniz.
• Özel satır içi çözümler oluşturabilirsiniz.

Bir PHP şablon dosyası veya callback işlevi kullanılarak oluşturulurlar – yani bu tıpkı bir tema geliştirmek gibidir. Ayrıca, WordPress çekirdek uyumluluğunu da korurlar, böylece çerçeve aracılığıyla yeniden kullanılabilir Bloklar bile oluşturabilirsiniz.

ACF Blokları bir koltuk değneği olmasa da, React becerileriniz hala eksikse, kesinlikle onları daha fazla araştırmak isteyeceğinizi söyleyebilirim. Bilinen functions.php dosyası içinde kalırken Blok Düzenleyicinin gücünden yararlanmanıza izin verecekler.

Bir ACF Bloğu Oluşturma

Size bir ACF Bloğunun nasıl oluşturulacağını gösterelim. Aracın Pro sürümü, ACF 5.8'deki bu işlevi içeriyor, yani yaklaşık iki yıldır bizimle. İşte süper basit örnek blok kayıt kodu:

 add_action('acf/init', 'my_acf_init'); function my_acf_init() { // check function exists if( function_exists('acf_register_block_type') ) { // register a testimonial block acf_register_block_type(array( 'name' => 'testimonial', 'title' => __('Testimonial'), 'description' => __('A custom testimonial block.'), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'render_callback' => 'my_acf_bock_render_callback', 'category' => 'formatting', 'icon' => 'admin-comments', 'keywords' => array( 'testimonial', 'quote' ), )); } }

Buradan bir alan grubu oluşturmak ve Bloğu oluşturmak isteyeceksiniz. İlki için bunu WordPress'teki Özel Alanlar > Alan Grupları ekranından yapacaksınız:

Burada alan grubunuzu ekleyin ve normal şekilde doldurun. Ancak, "Konum" meta kutusunda, (bu durumda) Referans Bloğu'nu seçmek için "Engelle" kuralını kullanmak isteyeceksiniz.

Son olarak, Bloğu işlemeniz gerekecek. Bu, özel alanlarla zaten alışık olabileceğiniz aynı süreci takip eder:

• Bloğu ilk kaydederken render_template ayarında verilen parametreye göre temanız için bir şablon dosyası oluşturun.
• Bloğu işlemek için doğru yöntemi seçin.
• Stillerinizi ve komut dosyalarınızı sıraya koyun.

acf_register_block_type() işlevinin enqueue_style , enqueue_script ve enqueue_assets ayarları sunduğunu unutmayın.

Genel olarak, Bloklar, ihtiyaç duyulan her özel alan meta kutusunu değiştirmemelidir, ancak düzenleyicide içerik oluşturma avantajından yararlanmanıza izin verir.

'InnerBlocks' Desteği

Blok Düzenleyici ayrıca ACF Blokları ile çalışmanıza yardımcı olan işlevselliğe sahiptir. InnerBlock'lar esasen ACF Bloğunuza herhangi bir yeni Blok eklemenize izin verir.

Bunlar özel veya çekirdek Bloklar olabilir ve mevcut “Başlık”, “İçerik” ve “Düğme” alanlarını kendi ACF Bloklarınızda kullanabilirsiniz.

İşte kalkmak ve koşmak için hızlı bir eğitim. InnerBlocks'u kullanmaya başlamak için, supports dizisine 'jsx' => true :

 acf_register_block_type( array( 'name' => 'testimonial', 'title' => __( 'Testimonial' ), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'mode' => 'preview', 'supports' => [ 'align' => false, 'anchor' => true, 'customClassName' => true, 'jsx' => true, ] ));

Ardından, Blok şablonunuzda < echo <InnerBlocks /> HTML etiketini tekrarlamanız gerekir:

 echo '<div class="block-about__content">'; echo '<InnerBlocks />';

Bu yalnızca basit bir örnek, ancak InnerBlocks ile yapabileceğiniz daha pek çok şey var.

ACF Bloklarına Alternatifler

Tabii ki ACF, Blok oluşturmak için tek çözüm olmayacak. Bu nedenle, ilk içgüdünüz muhtemelen özel bir yapı olacaktır.

Geçmişte bir 'vanilya' Bloğunun nasıl oluşturulacağını ele aldık, ancak başlamadan önce React bilgisine ihtiyacınız olacak.

Ayrıca çeşitli bileşenlerden Bloklar oluşturmanıza izin veren WordPress eklentileri de var, ancak bunların gerçekten geliştiriciler için değil, 'son kullanıcı tamircileri' için olduğunu söyleyebilirim. Tembel Bloklar düzenli olarak güncellenir, bu nedenle sunduklarını denemek istiyorsanız bu iyi bir seçenektir.

ACF'nin Geleceği

ACF, piyasaya sürülmesinden bu yana WordPress için hayati bir tamamlayıcı eklenti olmuştur. Platformu genişletir, zenginleştirir ve daha kullanışlı hale getirir. Onsuz web siteleri oluşturabileceğimi sanmıyorum.

Bununla birlikte, Blok Düzenleyici ve ACF Bloklarını birleştirmek, pastanın üzerindeki kremadır – CMS'nin geleceği için mükemmel bir yatırımdır. Geliştiricilerin, React'in dik öğrenme eğrisine başlamadan Blok Düzenleyiciyi genişletmeleri için giriş engelini düşürmeye yardımcı olacaktır. Uzun vadede, Blok Düzenleyicinin evrimi için çok çabalayanlar bunu bir kazanç olarak görebilirler.

Blok Düzenleyicinin kullanıma sunulmasından bu yana site oluşturmak için ne kullanıyorsunuz? Aşağıdaki yorumlar bölümünde bize bildirin!