Gelişmiş Özel Alan (ACF) ile Gutenberg bloğu nasıl yapılır
Bütçe sınırlamaları nedeniyle yeni bir geliştiriciyseniz veya kendi web sitenizi oluşturursanız, bu yeteneklerinizin ötesinde kolayca hissedilebilir. Ancak, Gelişmiş Özel Fields (ACF) kişileri sayesinde gerçekleşmesi gerekmez. Sürüm 5.8’den beri, kendi bloğunuzu Gutenberg editörüne oluşturmayı ve ayarlamayı mümkün kıldılar. Bu yazıda nasıl çalıştığını göstereceğiz. ACF aracılığıyla bir blok oluşturmanın neden çok iyi olduğunu, bu özellikten yararlanabileceğini ve son olarak adım adım nasıl yapılacağını tartışacağız. Hadi içine girelim.
Neden Gutenberg bloğunu ACF ile yapıyorsunuz? Özel bir Gutenberg bloğu inşa etmekle ilgili bir yazı okursanız (Gutenan blokları yapma yardımıyla), bunun oldukça teknik olduğunu anlayacaksınız. Bu aracı kullanmak için Webpack, React, Eslint, Babil ve daha fazlasını kullanmanız gerekir. Ayrıca, blok el kodunuzu yapmanız gerekir. Bunu yapmanıza yardımcı olacak ayrıntılı belgeler olmasına rağmen, bu geliştirme dışı ligden uzaktır (bir kez daha denedim). Peki, gelişmiş özel alanlar tüm bu denemeleri nasıl kolaylaştırıyor? Her şeyden önce, JavaScript değil, PHP üzerinden blok kaydetmenize izin veriyorlar. PHP ile son 15 yıldır çalışan WordPress kullanıcıları için bu iyi bir haber.
Buna ek olarak, ACF aracılığıyla, bloğunuzun parçalarını bilinen bir kullanıcı arayüzünden de yapabilirsiniz. Ayrıca, sofistike bir geliştirme ortamı yerine, yalnızca bir WordPress, eklenti ve kod düzenleyicisi kurulumuna ihtiyacınız vardır. Bu kim için ideal? WordPress’i kullanan herkesin böyle bir yayınla ilgileneceğini düşünmek istiyoruz, ancak belirli bir kitleye daraltmamız gerekiyorsa, şu olacaktır: JavaScript’te güçlü olmayan bir geliştirici – JavaScript geliştiricisi olmak için bir gezi Hala uzun. Tabii ki, bu bilmek güçlü ve kullanışlı bir dildir ve yeni geliştiricilerin bunu öğrenmesini engellemiyoruz, sadece zaman alabileceğini vurguluyoruz.
Öncü işletme sahipleri veya geliştirici hizmetleri ödeyemeyen küçük işletmeler – öncü bir işletme veya küçük işletmeye sahip olmak genellikle zaman, para, kaynak ve personel eksikliği anlamına gelir. Ayrıca çeşitli görevleri tamamlamak için farklı şapkalar giyme eğilimindesiniz. Bir şapka sitenizi tasarlamayı içerebilir. Bu yazı, geliştirici olmadan Gutenberg bloklarını nasıl yapacağınızı öğrenmenize yardımcı olacaktır.
Gelişmiş Özel Fan-ACF eklentileri, kullanıcıların yıllarca WordPress düzenleyicilerine ek içerik eklemelerine izin verdi. Bunun için birçok yararlı uygulama var ve hayransanız, bu listeye eklenecek başka bir şey.
Gutenberg bloğuyla daha fazla kodlamadan oynamak isteyen herkes-Yukarıdaki gruplardan birisiniz ya da olmasın, yine de eğlenebilir ve süreci öğrenmek ve WordPress becerilerinizi geliştirmek için ACF ile bir Gutenberg bloğu oluşturabilirsiniz. Şimdi vurguladık. ACF aracılığıyla bir blok yapmanın avantajı ve ondan kim yararlanacak, nasıl tamamlayacağına bakalım.
Gutenberg’de bir blok nasıl yapılır Bu öğretici için gelişmiş bir özel alanla, portföy öğemi görüntülemek için bir blok yapmak istiyorum. Buna, solda konumlandırılmış istemci logo görüntüleri, istemci adları için H3 başlığı ve müşteri açıklamaları ve yapılan işler için metin alanları dahildir.
Aşağıda, gelişmiş bir özel alanla yukarıdaki nihai sonuçların nasıl yapılacağını öğreneceksiniz. 1. Eklentiyi yükleyin Bu işlevi kullanmak için ACF 5.8 veya daha yüksek bir Pro sürümüne ihtiyacınız var. Ana web sitesinden satın alabilirsiniz. Bir site için 25 $ AUD ve sınırsız web siteleri için geçerli olan geliştirici lisansları için 100 $ AUD’ye mal olur. Fiyat makul, bunun tekrarlayan maliyetler olmadan bir kez bir ödeme olduğu ve sınırsız güncellemeler için gereksinimleri karşıladığınızı düşünür.
Satın aldıktan sonra hesabınızı açın ve indirme bağlantısını tıklayın.
Göz atın …, bilgisayarınızdaki dosyaları arayın ve şimdi yükleyin. Bittiğinde, etkinleştirmeyi unutmayın. 2. Bloğunuzu kaydetme kurulumdan sonra bloğunuzu kaydetme zamanı. Bu, ACF_REGISTER_BLOCK_TYPE () () işlevinin yardımıyla Fonksiyon.php dosyanızda olur. WordPress’e bir tür özel gönderi kaydetmeye benzer. Sunucunuzdaki işlev dosyasına erişmek için favori FTP istemcinizi kullanın, ardından aşağıdaki kodu ekleyin: işlev ACF_PORTFOLIO_ITEM_BLOCK () {// (function_exists (‘acf_register_block’)) {// Bir portföy öğe bloğu adı ‘= kaydedilirse işlevini kontrol edin’ = // > ‘Portfolio-item’, ‘başlık’ => __ (‘portföy öğesi’), ‘açıklama’ => __ (‘portföy öğeleri için özel bir blok.’), ‘render_template’ => ‘şablon parçaları /bloklar / Portfolio-ith/block-portfolio-ith.php ‘,’ kategori ‘=>’ düzeni ‘,’ simge ‘=>’ excerpt-view ‘,’ anahtar kelimeler ‘=> dizi (‘ portfolio ‘),)); }} add_action (‘acf/init’, ‘acf_portfolio_item_block’); Aşağıdakiler tüm bunların anlamının bir açıklaması: İsim – Bu, yapacağınız bloğun adıdır. Bu, her şeyin işlevini sağlamak için kullanılacak ve yalnızca alfasayısal karakterler ve bağlantı işaretleri içerebilir. Başlık – Bu, Gutenberg editöründe görünecek bloğun başlığıdır.
Açıklama – Bloğunuzun ne yaptığının açıklaması. Bu editör tarafında görünür.
Render_template – Bu, bloğu oluşturmak için kullanılan dosyayı ifade eder. Aşağıda nasıl çalıştığını göreceksiniz.
Kategori – Blok bloğu kategorinizin aşağıda görüneceği anlamına gelir. Seçimler arasında genel, biçimlendirme, düzen, widget, gömme .icon – bloğunuzla ilgili simgeler bulunur. Dashicons arasından seçim yapabilirsiniz (ön tarafta dashicons-imzası olmayan adı). İsteğe bağlı olarak, özel bir SVG dosyası kullanın.
Anahtar Kelimeler – Bloğunuzu bulmak için kullanıcılar tarafından ne yazılabilir. Burada üç terim kullanabilirsiniz.
Artık her bölümün anlamını anladıktan sonra, yukarıdaki kodu kopyalayıp ekleyebilir ve yapmaya karar verdiğiniz her türlü blokla değiştirebilirsiniz. Daha fazla bilgi için belgeleri kontrol edin.
Bu arada, blokları etkinleştirip devre dışı bırakabilmek ve diğer sitelere aktarabilmek için, alternatif olarak, yukarıdakilerin tümünü özel bir eklentiye ekleyebilirsiniz. 2. Yukarıdaki kodu Function.php olarak girdikten sonra alanınızı oluşturun.
Ancak, şu anda hiçbir şey içermiyor. Bunu değiştirme zamanı. Bunu yapmak için, yeni bir alan grubu oluşturmak için Custom Fields> arka uç WordPress’e yeni ekleyin. Hangi alandan emin değilseniz, ACF Beginner öğreticimizi okuyun. Yapılandırmamı takip ederek:
Önceki bir alan grubu oluşturduysanız, bu sürecin ACF’nin normal kullanımına benzer olduğunu fark edeceksiniz. Ancak, bir ana fark vardır – konumunuzun kurallarına gitmeli ve daha sonra bloğun portföy öğesi (veya özel bloğunuza verdiğiniz başka bir ad) ile aynı olduğunu belirlemelisiniz. Bunu yukarıdaki ekran görüntüsünde görebilirsiniz.
Bittiğinde yukarı kaydırın ve yayın düğmesine basın. 3. Blok oluşturma ACF ile oluşturulan özel bloğunuzun içeriğini belirlemiş olsanız bile, yine de ön veya arkada görünmeyecektir. Çünkü onu işlemek için talimatlar hazırlamadık. Yukarıdakilerden tahmin edebileceğiniz gibi, bu yüzden render şablonu. Yardımı ile bloğunuzu görüntülemek için gereken WordPress bilgilerini sağlayabilirsiniz. Böylece, bloğunuzu kaydederken belirttiğiniz aynı adlı ve aynı yerde dosyaları girmeniz gerekir. Benim durumumda bir şablon parçaları/bloklar/portföy-öğe/blok-portfolio-item.php. Orada aşağıdakileri ekledim: ” haleza kutsal logo)); İf (! Boş ($ başlık)) echo ‘
‘. $ başlık. ‘
‘; if (! boş ($ açıklama)) echo ‘
‘. $ açıklama. ”; echo ”; ?> Dosya ile, şimdi Gutenberg editörüne dönüp portföy öğe bloğuna girmeyi seçtiğimde şunu görüyorum:
Ve bu, ön uçtaki içerikle görülen şey budur.
Oldukça heyecan verici değil mi? Yapmayı planladığınız şey buysa, burada durabilirsiniz. Ancak, benim durumumda, hala blok stilimi değiştirmek istiyorum, bu yüzden bir adım daha atmam gerekiyor. 4. Blok stilinizi hem sitenin ön ucunda hem de arkada CSS ile oluşturulmasını sağlayın. Yukarıdaki işaretlemeye yerleştirilmiş sınıf ve HTML kimliği sayesinde, görünüşünde değişiklik yapmak için yeterince kolaydır. Örneğin, stil sayfama aşağıdakileri ekleyebilirim: .portfolio-item {Border-Bottom: 1px katı #999; } .Portfolio-title {Clear: None; } .portfolio-logo {anahat: 2px katı #Ebebeb; } Bundan sonra nihayet sonuçları yukarıdan alıyoruz: ancak, değişen stil arkada görülmedi. Bunu başarmak için, diğer dosyalara koymanız ve enqueue_block_ededor_asses ile enqueue yapmanız gerekir. Bu makalede daha fazla bilgi bulabilirsiniz. Ve hepsi bu. ACF ile Gutenberg blokları yapmanın temel yolu budur. 5. Diğer bazı şeyler bu arada, bu şekilde yapılmış bir blokla harika şeylerden biri önizleme moda ile gelmesidir. Bu, işlevsel olarak görebileceğiniz ve doğrudan düzenleyebileceğiniz veya oluşturulan sürümü görebileceğiniz ve içeriği editör tarafındaki değiştirebileceğiniz anlamına gelir. Buna ek olarak, ACF ile yapılan blok Gutenberg hizalama çubuğunu destekler. Yani, yeni bloğunuzu ekranın her tarafına uzatmak istiyorsanız, bunu yapabilirsiniz.Ayrıca, gelişmiş özel alanlarla çalışan daha fazla bloka ihtiyacınız varsa, ancak kendiniz yapmak istemiyorsanız, Gutenberg Blocks eklentisi – ACF Blocks Suite sizin için doğru şeydir. Diğer şeylerin yanı sıra, referanslar için bloklar, tweetler, görüntü kaydırıcıları, sosyal paylaşım ve daha fazlası için tıklayın. Gutenberg blok binası kolaylaşıyor – ACF sayesinde ve orada var! ACF ile kendi Gutenberg bloğunuzu nasıl yapacağınıza dair tam kılavuzunuz. Bu saatler önce olsa da, şimdi birkaç dakika içinde yapabilirsiniz. Adımlar bir kez daha aşağıdadır: Gelişmiş özel alanları yükleyin
Yapmak istediğiniz bloğu kaydedin Özel Saha Grubunuzu Oluşturun Blok oluşturma İster bir geliştirici olun, sadece WordPress, küçük bir işletme sahibi veya web sitesi sahibini bilin, içerik ayarlaması çalışmanızın önemli bir parçasıdır. Bu daha kolay hale geldi. Hangi bloğu yapacaksın? ACF üzerinden Gutenberg bloğunu yapmaya çalıştınız mı? Ne yapıyorsun? Yorumlar bölümünde bize her şeyi anlatın.
