WordPress İçin Özel Gutenberg Blokları Oluşturma

WordPress için özel Gutenberg blokları oluşturmak zor olmak zorunda değil. Aslında, biraz kodla, bir eklenti kullanmak zorunda kalmadan kendi özel bloklarınızı oluşturabilirsiniz. Gutenberg, içeriğiniz için özel bloklar oluşturmanıza olanak tanıyan yeni bir WordPress düzenleyicisidir. Bloklar, Gutenberg'deki içeriğinizin yapı taşlarıdır. Metin, resim, video ve daha fazlasını eklemek için kullanılabilirler. Özel bir blok oluşturmak için WordPress Code Editor gibi bir metin düzenleyici veya Block Lab gibi bir eklenti kullanmanız gerekir. Bir metin düzenleyiciniz olduğunda, temanızda veya eklenti dizininizde yeni bir dosya oluşturabilirsiniz. Yapmanız gereken ilk şey, bir blok türü oluşturmaktır. Blok türü, bloğunuzun nasıl davranacağını tanımlayan bir ayarlar topluluğudur. Bunu yapmak için register_block_type işlevini kullanmanız gerekir. Bir blok türünüz olduğunda, onu WordPress'e kaydedebilirsiniz. Bu fonksiyon iki argüman alacaktır: blok tipinizin adı ve bloğunuz için ayarları içeren bir nesne. Blok türünüzü kaydettikten sonra, buna alanlar eklemeye başlayabilirsiniz. Alanlar, bloğunuzun nasıl göründüğünü ve davrandığını kontrol eden ayarlardır. Blok türünüze bir alan eklemek için add_field işlevini kullanmanız gerekir. Blok türünüze istediğiniz tüm alanları ekledikten sonra, WordPress'e kaydedebilirsiniz. Ve bu kadar! Artık WordPress için özel bir Gutenberg bloğu oluşturdunuz.

Gutenberg blok düzenleyicisi, WordPress 5.0'daki geliştirmelerden biriydi. Gutenberg editörü, içeriği kolayca yeniden düzenlenen bölümler olan bloklara böler. Çoğu geliştirici, React becerilerinden yoksun oldukları için yerel olarak tasarlanmış bloklar oluşturamaz. WordPress geliştirici topluluğu, React/JavaScript gereksinimlerini karşılayabilecek araçlar geliştirerek yanıt verdi. Block Lab'de bloklar üç aşamada oluşturulur: bunları yönetici içinde ekleme, kopyalayıp yapıştırma ve ardından dışa aktarma. Bir API, bloğunuz için özel kontroller oluşturmak için de kullanılabilir. Buna bakmak için fazla bir şey olmayabilir, ancak size özel bir Gutenberg bloğu ile neler yapabileceğiniz konusunda bir fikir verecektir.

Bir blok oluşturmak için, bir başlık (Bildirim Çubuğu) ve üç alan içeren blok-bildirim-bar.php adlı yeni bir dosya oluşturmamız gerekecek. Bu dosyaya yanıt olarak, özel blok şablonumuzu temamıza yerleştirmemizi isteyen bir bildirim mesajı görünecektir. Dosyayı yüklemeden önce, kaydedildiğinden ve web sunucunuza yüklendiğinden emin olun. Artık bizim için özel bir blok oluşturuldu. Önemli olan o hedefe ulaşmanızdır. Halihazırda oluşturduklarımızı genişletmek istiyorsak birçok seçeneğimiz var. Simgeler, düğmeler ve başka bir gönderiye veya sayfaya bağlantı verme yeteneği, eklenebilecek özelliklerden yalnızca birkaçıdır. Tüm bu yetenekler, Block Lab ve yukarıda bahsedilen diğer eklentiler aracılığıyla elde edilebilir.

WordPress Özel Bloklar Eklentisi

WordPress için birçok harika özel blok eklentisi mevcuttur. Her eklenti farklı bir dizi özellik ve seçenek sunar. Bazı özel blok eklentileri, gönderileriniz ve sayfalarınız için özel bloklar oluşturmanıza izin verirken, diğerleri kullanabileceğiniz bir dizi önceden tasarlanmış blok sağlar.

İçerik ve düzen öğelerini bloklar olarak ekleyerek WordPress ile kolayca yazılar ve sayfalar oluşturabilirsiniz. WordPress, varsayılan yapılandırmasında çok çeşitli bloklar sunar. Ancak, belirli bir görevi gerçekleştirmek için özel bir blok oluşturmak isteyebilirsiniz. Bu öğretici, tamamen benzersiz bir blok oluşturma adımlarında size yol gösterecektir. İlk adım, referans bloğunuza üç alan eklemektir. İlk alanı doldurmaya başlamak için Alan Ekle düğmesini tıklayın. İkinci adım, verilerin tam olarak nasıl görüntüleneceğini belirleyecek bir blok şablonu oluşturmaktır.

Üçüncü adım, CSS sekmesine tıklayarak blok çıktı işaretlemesine stil vermektir. Şablonları manuel olarak yükleyerek kendi özel bloğunuzu oluşturabilirsiniz. Bu durumda PHP, özel blok alanlarınızla etkileşim kurmanın en iyi yoludur. Yükleme yöntemini kullanarak düzenleyici şablonunu temanıza yüklemeniz yeterlidir. Başlamak için özel bloğunuzu önizleyin. HTML/CSS'nizi önizlemeden önce bazı test verilerini sağlamalısınız. Gutenberg bloğu ile özel olarak oluşturulmuş bir WordPress web sitesi oluşturun.

Bir bloğu aramak için, yeni blok ekle düğmesini tıkladıktan sonra görünen kutuya adını veya anahtar kelimelerini yazın. Gönderinizi ve sayfanızı kaydedip düzenleyerek bloğu önizleyebilirsiniz. Test sitemizde, referans bloğunun nasıl göründüğünü görebilirsiniz.

Gutenberg Blok Tepki Oluşturun

React'te bir Gutenberg bloğu oluşturmanın birkaç yolu vardır. İlk yol, create-guten-block CLI aracını kullanmaktır. Bu sizin için yeni bir Gutenberg bloğunu oluşturacaktır. Bu yöntemi kullanmak için makinenizde Node.js ve npm kurulu olmalıdır. Bu bağımlılıkları kurduktan sonra, aşağıdaki komutu çalıştırarak yeni bir Gutenberg bloğu oluşturabilirsiniz: create-guten-block my-block Bu, Gutenberg bloğu için gerekli tüm dosyaları içeren my-block adlı yeni bir dizin oluşturacaktır. React'te bir Gutenberg bloğu oluşturmanın ikinci yolu @wordpress/block-editor paketini kullanmaktır. Bu paket, Gutenberg blokları oluşturmak için kullanılabilecek createBlock adında bir yardımcı fonksiyon içerir. Bu yöntemi kullanmak için projenize @wordpress/block-editor paketini kurmanız gerekecek. Paketi kurduktan sonra, aşağıdaki kodu çalıştırarak yeni bir Gutenberg bloğu oluşturabilirsiniz: import { createBlock } from '@wordpress/block-editor'; createBlock( 'blok'um/blok', { başlık: 'Bloğum', kategori: 'ortak', } ); Bu, ortak kategoride my-block adlı yeni bir blok oluşturacaktır. React'te bir Gutenberg bloğu oluşturmanın üçüncü yolu wp.blocks.createBlock işlevini kullanmaktır. Bu işlev, WordPress JavaScript API'sinin bir parçasıdır ve Gutenberg blokları oluşturmak için kullanılabilir. Bu yöntemi kullanmak için projenize wp-api-request paketini dahil etmeniz gerekecektir. Paketi kurduktan sonra, aşağıdaki kodu çalıştırarak yeni bir Gutenberg bloğu oluşturabilirsiniz: import { wp } from 'wp'; wp.blocks.createBlock( 'blok/blok', { başlık: 'Bloğum', kategori: 'ortak', }); Bu, ortak kategoride my-block adlı yeni bir blok oluşturacaktır.

Gutenberg düzenleyicisi için bu öğreticide özel blokların nasıl oluşturulacağını öğrenin. Görevi tamamlamak için kendi oluşturduğunuz bir eklenti kullanacaksınız. Özel bir Gutenberg bloğu oluşturmak için varsayılan temalardan biri mevcut olsa da, bunun mümkün olduğunu kabul etmeliyiz. Bu eğitimde, Gutenberg ile yeni bir özel bloğun nasıl oluşturulacağını gözden geçireceğiz. Ayrıca, sağladığımız tasarım tercihlerine göre ön yüzün ve düzenleyicinin görünümünü özelleştireceğiz. Blok oluşturmak için çok fazla zaman harcamak istemiyorsanız, basitçe bir tane ekleyebilir ve ardından bunları ihtiyaçlarınıza göre özelleştirebilirsiniz.

React Özel Temalarda Kullanımı Kolaydır

React, JavaScript ile kullanıcı arayüzleri oluşturmak için mükemmel bir kütüphanedir. WordPress, yeni Gutenberg düzenleyicisini , ayrıca widget yönetici ekranını ve sitenin içerik düzenleme yeteneklerindeki son güncellemeleri güçlendirmek için kullanıyor. React, WordPress'e zaten gömülü olduğundan, özel temalarda kullanımı kolaydır.

Gutenberg Özel Düğme Bloğu Oluştur

Gutenberg özel düğme bloğu oluştur, web siteniz için özel düğmeler oluşturmak için çok kullanışlı bir araçtır. Bu araç ile hem göz alıcı hem de işlevsel butonları kolayca oluşturabilirsiniz. Bu, web sitenize kişisel bir dokunuş eklemenin ve onu diğerlerinden farklı kılmanın harika bir yoludur.

Bu öğreticide, popüler uygulamada ilk basit bloğunuzu nasıl oluşturacağınızı öğreneceksiniz. WordPress @create-block uygulamamız, Javascript/PHP/CSS kodunu hızlı bir şekilde oluşturmamızı sağlayan resmi bir araçtır. Etkileşimli modda bloğunuzu bir dizi adımda yapılandırabilirsiniz. Gutenberg'i yeni öğreniyorsanız, bu son derece yararlı olabilir. Bloğu zaten kurduysanız, artık yeni oluşturulan dizine bir kod düzenleyici aracılığıyla erişebilirsiniz. Blok eklenti yapısı şu anda olduğu gibi bunu takip eder (bu öğreticiyi yazarken). Bu modülde her dosyanın ayrıntılarını ve kullanımını inceleyeceğiz.

Komut satırı bayrağı, Komut satırı programları için seçenekleri belirtmenin yaygın bir yöntemidir. Bayrakları kullanmadan önce, bayraklar dizinindeki değerleri kullanmak istediklerinizle değiştirin. Düzenleyicide kuyruğa alınacak veya uygulanacak bir stil sayfası. Eklentinin temel detayları ayrıntılı olarak tartışılmaktadır. WordPress, varsayılan olarak eklenti bilgilerini görüntüler. Versiyon kontrollü bir proje oluştururken hangi dosyaların yok sayılacağını Git'e söyleyebilmek için Gitignore A. dosyasının dahil edilmesi gerekir. Depo bilgi içerir. Config, geliştiricilerin birden çok projede tutarlı bir kodlama stili sürdürmesine olanak tanır.

WordPress Gutenberg Eklenti Geliştirme

WordPress Gutenberg eklentisi , bir gönüllü topluluğu tarafından geliştirilen açık kaynaklı bir projedir. Herkes projeye katkıda bulunabilir ve daha iyi olmasına yardımcı olabilir. Eklenti sürekli güncellenmekte ve geliştirilmektedir. Geliştiriciyseniz, yeni özellikler geliştirerek veya hataları düzelterek projeye katkıda bulunabilirsiniz.

Muhtemelen Gutenberg'i (WordPress blok düzenleyicisi) duymuşsunuzdur, ancak kendi eklentinizi oluşturmaya nasıl başlarsınız? Bloklar basit bir WordPress komut dosyasıyla oluşturulur. Burada oluşturulan WordPress eklentisi türü tipik olarak bir bloktur, ancak süreçteki diğer kişiler için iyi bir başlangıç ​​noktası sağlar. Create Block Script , kendi eklentinizi oluşturmak için bir şablon olarak kullanılabilir. Bloğu WordPress'in ön ucunda kolayca görebilirsiniz, ancak arka uçta alışmanıza yardımcı olacak farklı bir görünüme sahiptir. Bu dosya, yalnızca varlıklar derlendikten sonra geliştirme modunda oluşturulmalıdır. /node_modules – Bu, eklentinizin JavaScript'e bağlı tüm parametrelerinin depolandığı klasördür.

Kullanışlı Visual Studio Code (VDC) ortamlarını içeren ön ayar dosyaları bu dosyada bulunabilir. Bir eklenti oluşturmak istiyorsanız WordPress eklenti klasöründe olduğunuzdan emin olmalısınız. Sonuç olarak, eklentinin geliştirme ve üretim aşamalarını görebileceksiniz. Kaydetme işlevini aşağıdakiyle değiştirmek için düzenleyicinizde /src/save.js dosyasını açın: BlockText bu şekilde bir dize olarak çıkarılabilir. Bloklarınızı özel bir blok kategorisinde görüntülemek için eklentinin köküne aşağıdaki kod eklenmelidir. registerBlockType.js işlevi, eklentinin registerBlockType.js işlevi kullanılarak yeniden derlenebilen blok kategorilerinizin bir listesini döndürür.

Gutenberg İçerik Düzenlemesi

WordPress kullanıcıları, React üzerine kurulu Tek Sayfa Uygulaması (SPA) aracılığıyla içerik oluşturabilir, düzenleyebilir ve silebilir. Geleneksel içerik düzenleyicinin aksine, bu daha akıcı ve kullanıcı dostu bir arayüz sağlar. Daha güçlü bir içerik düzenleyici istiyorsanız, Gutenberg uygulaması size göre değil. Daha rahat bir görünüm tercih ediyorsanız, Gutenberg'e güvenebilirsiniz.

WordPress Özel Blok Düzenleyici

Bu bloğu istediğiniz herhangi bir gönderi veya sayfada kullanabilirsiniz. Yeni Blok Ekle ekranında, adını veya anahtar kelimelerini yazarak bloğunuzu aramak için arama kutusunu kullanın. Bloğu içerik alanına ekledikten sonra, bu özel blok için oluşturduğunuz blok alanlarını göreceksiniz.

Bu eğitim, WordPress içinde tamamen işlevsel, özel bir blok düzenleyici örneği oluşturma sürecinde size yol gösterecektir. Bu düzenleyici, tamamen Blok Düzenleyici adlı özel bir WP Yönetici sayfası içinde oluşturulacaktır (en yaratıcı şekilde). WordPress Plug-A-Thon'umuzda bir editör oluşturacağız. Şimdi blok düzenleyicinin React bileşenini kullanarak özel sayfamıza biraz HTML oluşturmalıyız. Üçüncü argüman olarak, komut dosyası bağımlılıkları ($script_asset['dependencies']) satırını kullanıyoruz. WordPress ile ilgili komut dosyalarının yerleşik pakete dahil edilmemesini sağlayacaktır. Bunları kullanmak için özel CSS stillerimizi ve WordPress varsayılan biçimlendirme kitaplığını da kaydetmemiz gerekir.

Bu, sayfanın HTML'sinde bir Blok Düzenleyici oluşturmak için JavaScript kullanmamıza izin verir. Sihir, bunun bileşeni BlockEditor olarak adlandırıldığında gerçekleşir. Bir JS global oluşturmadan editörü PHP'den oluşturmak mümkündür. Editörün düzeni, burada görebileceğiniz gibi, birkaç özel içerik sağlayıcıya ek olarak iskele üzerine kuruludur. Block EditorProvider, WordPress blok düzenleyici paketinin en önemli bileşenidir. Daha önce açıkladığımız gibi, bu blok düzenleme bağlamında yepyeni bir blok düzenleyici için yeni bir bağlam sağlar. Bunu, sağlanan kayıt defterine abone olarak (withRegistry Provider HOC aracılığıyla), blok değişikliği olaylarını dinleyerek, blok değişikliğinin kalıcı olup olmadığını belirleyerek ve gerektiğinde onChange giriş işleyicisini çağırarak gerçekleştirir.

En ilgi çekici bileşen, düzenleyiciye bir blok listesi ekleyen BlockList bileşenidir. Bu bileşenleri ayrıntılı olarak incelemeye değer, çünkü bunlar en karmaşık ve ilgili olanlardan bazılarıdır. Özel EditorBlock bileşenimiz hakkında daha fazla bilgi edinmek için lütfen aşağıdaki makaleye bakın. Slot/fill, içindeki bir Fill'i (Kenar Çubuğu. InspectorFill) ortaya çıkarmak için Blockeditor bileşenimizi (yukarıya bakın) kullanarak uygulanır ve daha sonra içe aktarıp uygulamaya aktarırız. Sonuç olarak, React, bir inceleme bileşenini DOM'sinde tutarken, onu ayrı bir konumda (örneğin, Kenar Çubuğunda) işaretlemeye dönüştürürken bize izin verir. Bloklar ayrıca LocalStorage içinde getdavesbeBlocks anahtarının altında da bulunabilir.

Bu veriler Blok Dilbilgisi biçiminde serileştirilir, bu da bir dizede saklanabileceği anlamına gelir. GitHub, özel işleyen blok düzenleyici için tüm kodu derledi. Program ücretsiz olarak indirilebilir ve kendiniz denenebilir.