Gutenberg için Oluştur: Yazar ve temalar Gutenberg’e geçişin üstesinden gelmek nasıl

WordCamp Europe 2018’de Matt Mullenweg, önümüzdeki birkaç ay boyunca Gutenberg için kaba bir yol haritası derledi. Temmuz ayında, Ağustos ayında (ya da daha fazlası; aslında bundan daha fazlası) oyunda Beta 5.0 versiyonu ile Gutenberg’in benimsenmesini artırmak için büyük bir cesaret olacak. Gelecekteki entegrasyon, WordPress geliştiricilerinin Gutenberg için nasıl inşa etmeyi planladığını merak etmenizi sağlayabilir. Yani, geliştiricilerin tekliflerini Gutenberg için hazırlamalarının çeşitli yolları nelerdir? Ve insanlar Gutenberg için yeni ve ilginç bir şey yapıyor mu? Bu yazıda, eklenti geliştiricilerinin ve temaların Gutenberg için nasıl kurulabileceğine dair bazı somut ve somut örnekler vereceğiz.
Geliştiricilerin daha entegre düzenleme deneyimleri yaratmak için blokları ve stilleri nasıl kullandıklarına dair bazı somut örneklere bakarak, umarım:
Gutenberg’in son kullanıcı olarak size nasıl fayda sağlayabileceğini anlayın.
Kendi WordPress projeniz için Gutenberg’i oluşturmak için bazı fikirler alın.
Gutenberg editörünün ne olduğundan hala emin değilseniz, önce Gutenberg editörümüzün tam öğreticisini görmek isteyebilirsiniz.
Nasıl #wordpress #plugin ve #theme yazar Gutenberg’e geçişleri ele alıyor
Tweet için tıklayın
Mevcut eklentilerin Gutenberg’e geçişini Gutenberg için oluşturma şeklini nasıl ele aldığına dair altı örnek esas olarak eklentinin işlevine bağlıdır.
Bir yandan, ön uç içeriğinin eklenmesine odaklanan bir eklentiniz var. Bunlar özellikle kısa kodlar ekleyerek daha önce yapılan şeylerdir. İyi bir örnek form eklentisidir. Hemen hemen her form eklentisi, formunuzu oluşturmak için ayrı bir arayüz ve ardından formu ön uçtaki sabitlemek için kısa bir kod verir. Bu tür eklenti genellikle içeriğin eklenmesini kolaylaştırmak için Gutenberg’i özel bir blokla işleyecektir. Bu bölümde bazı örnekler göreceksiniz: ninja formları
Vermek
Woocommerce
Ardından, perde arkasındaki ayrıntıları kontrol etmenize yardımcı olan başka bir eklentiniz var. Genellikle, bu eklenti bir meta kutusu kullanır.
En ünlü örnek Yoast Seo gibidir. İçerik eklemezsiniz, ancak tüm meta kutu bilgileri önemlidir. Meta kutusu şimdi Gutenberg ile çalışıyor, ancak eklentinin Gutenberg’i kullanma işlevini değiştirmesi için hala bir fırsat var. Size SEO’nun bu sorunun üstesinden gelebileceği birkaç yol ve kendi eklentilerimizle bir şeyler yapmayı nasıl seçtiğimizi göstereceğim.
1. Ninja Forms eklendi Yeni Gutenberg Block Ninja Forms, repo wordpress.org’daki en popüler form eklentilerinden biridir. Şimdiye kadar, basit bir ninja form bloğu ekleyerek Gutenberg’i ele alıyor.
Diğer Gutenberg blokları gibi bloklar girersiniz:
Ardından, formunuzu açılır menüden seçebilirsiniz:

Ve formu seçtikten sonra, önizlemeyi doğrudan düzenleyicide göreceksiniz:

Şu anda, hepsi orada. Ama bu sağlam bir temel yaklaşım çünkü:

Bu, kısa bir kodla doğrudan çalışma ihtiyacını ortadan kaldırır, sayfanızı hala düzenlerken önizlemeyi doğrudan tasarımınızdan görebilir
Sonraki iki eklenti bunu birkaç daha derin kuvvet/kontrol seçeneği ile oluşturacak.
2. Düzeni Ver seçeneğiyle iki gutenberg bloğu eklemek, Gutenberg editörüne vermeyi entegre etmek için çok proaktif bir geliştirme ekibine sahip popüler bir bağış eklentisidir (eğer bu yazı konusunu beğendiyseniz, blogdaki #playingwithblocks serisinin tadını çıkaracaksınız burada ekibin detayları Gutenberg için inşa etmeyi planlıyorlar).
Ver, şimdiye kadar denediğim en verimli Gutenberg deneyimlerinden birine sahiptir. Sadece bağış formunu iki blokla giremezsiniz, aynı zamanda Gutenberg arayüzünü kullanarak ayarlayabilirsiniz. İki blok vermenize izin verir:
Tek bağış formu
Bağış formu kutusu
Ninja formu gibi, doğrudan formunuzdan bir önizleme alırsınız. Ancak size izin veren bir blok düzenleme seçeneği de alırsınız:
Biçimi seçin

Bağışın amacını etkinleştirin/devre dışı bırakın
İçeriği konumlandırmak için bir yer seçin
Ve imleci formunuza yönlendirirseniz, formu düzenlemek için doğrudan bir bağlantı elde edersiniz:
Böylece, bloğun ninja formlarının mevcut uygulamasından biraz daha derin olabileceğini görün. Ama WooCommerce daha da ilerliyor …

3. WooCommerce, sütun kontrolüne sahip bir ürün bloğu eklerken WooCommerce, WordPress 5.0 yaklaşırken daha fazla Gutenberg entegrasyonu ekleyebilir (buraya ürünlerin nasıl ekleneceğine dair bazı fikirler), ekip WooCommerce Gutenberg Gutenberg Gutenberg ürünleri ile Gutenberg’e daldırdı Blok blok. Evet – şimdi bu ayrı bir eklenti. Ancak yükledikten sonra, mevcut WooCommerce ürününü Gutenberg içeriğinizde bir blok olarak girebilirsiniz. Bir ürün bloğu eklediğinizde, hangi ürünün görüntüleneceğini seçebilirsiniz:

Ardından, düzeni değiştirmek için blok düzenleme seçeneğini kullanabilirsiniz:
Bu beni çok heyecanlandırıyor çünkü bu, Gutenberg’in standart olmayan içeriğin stili/yapılandırması için nasıl daha kolay erişilebilir hale getirdiğinin iyi bir örneğidir.
4. Beaver Builder, “Beaver Builder’a Dönüştürme” seçeneğini ekliyor. Sayfa üreticilerinin Gutenberg’i nasıl ele alacağı hakkında birçok görüşme var. Pek çok somut değil, ancak Beaver Builder, Gutenberg düzenini Beaver Builder’a dönüştürmenizi sağlayan Beaver Builder 2.1’de özellikler ekledi:

Şu anda, dönüşüm süreci mükemmel değil. Ancak, dönüşüm pürüzsüzse Gutenberg ve sayfa yapımcıları arasında hareket edebilme fikri çok ilginç.

5. Meta kutusu çalışmaya devam etmelidir – Yoast SEO iyi bir örnektir Yoast SEO’nun Gutenberg’in üstesinden gelmek için herhangi bir değişiklik yayınladığını sanmıyorum, bu yüzden şimdi mevcut meta kutusunun Gutenberg ile nasıl çalıştığına dair bir örnek (eğer varsa Gutenberg’i dikkatli bir şekilde takip etti – mevcut meta kutusunun desteğine sahip, ancak bu uzun vadeli bir çözümden daha fazla sırt uyumluluk için daha fazla). Gördüğünüz gibi, Meta SEO Yoast Utama kutusu Gutenberg ile yaralanmadan gelir: ancak genellikle kenar çubuğunda olan SEO puanlarını ve içerik analizini kaybedersiniz. Peki Gutenberg’in üstesinden gelmesi için nasıl bir inşa edersiniz? İşte Yoast’ın analizini gerçek Gutenberg arayüzüne entegre etme olasılığı için bazı maketler:
Mockup a

Mockup B
Mockup C

6. WP Ürün İnceleme Eklentisindeki Meta Kutusunu Nasıl İşleyelim WP Ürün İncelediğimiz, ön uçtaki çıkışı kontrol etmek için Meta kutusunu kullanan eklentilerden biridir (bu durumda inceleme kutusu).
WP ürün incelemesini Gutenberg editörüne entegre etmek için çalışma şeklimiz budur:

Kullanıcı, yayının yan çubuk anahtarı ile bir inceleme olduğunu gösterdiğinde, inceleme kutularıyla ilgili her şeyi yukarıdaki seçenekten yapılandırabilecektir:

Geliştirici -Bu, eklentinizi Gutenberg için hazırlamak için iyi bir kaynaktır, eğer gerçek bir eklenti geliştiriciyseniz, özel eklentiniz için Gutenberg için nasıl inşa etmeniz gerektiğini merak ediyor olabilirsiniz. Şey … Bunu sana söyleyemem. Ama sizi kendi Asrani Hardeep’imizle bu olağanüstü yazıya yönlendirebilirim. Hardeep, eklentinizi Gutenberg’e hazırlamak için takip edilebilecek bazı ipuçlarını açıkladı.

Geliştiriciler, yeni eklentilerle Gutenberg için de inşa edebilirler geliştiriciler sadece Gutenberg ile uyumlu eklentiler yapmaya odaklanmakla kalmaz, aynı zamanda Gutenberg için yeni eklentilerle de inşa etmeyi planlıyorlar.

Yeni Gutenberg bloğu bir tarafta bol miktarda bulunur, yalnızca yeni türde blok içeriği ekleyen birçok genel eklentiniz vardır. Bu, Gutenberg’e sayfa yapımcılarının daha fazla nüansını verir. Bir blok bulabilirsiniz:

Fiyat Tablosu

Referans
Takım üyesi
Vb.
Örneğin, bu, istiflenebilir eklenti – Ultimate Gutenberg bloklarının fiyat tablosu bloğudur. Blok Düzenleme seçeneğinin ne kadar ayrıntılı olduğunu görün:
WordPress.org’da bu eklentilerin çoğu var. Ancak yukarıda belirtilen istiflenebilir eklentinin dışında, diğer popüler teklifler şunlardır:
Atomik Blok – Bu dizi temalarından.
Gelişmiş Gutenberg Bloğu
Kendisini “içerik pazarlamacıları için Gutenberg bloğu” olarak pazarlayan Coblocks adlı bir teklif de var. Bence bu niş yaklaşım çok ilginç. Belki gelecekte şunlar için özel bir Gutenberg bloğu göreceğiz:
Gıda Blogcu

Seyahat Blogcu
Vb.
Blok kitap eklentisi, niş gutenberg bloğunun nasıl bir şey olabileceğinin bir başka mini örneğidir.
Özel alanların Gutenberg Gutenberg özel alanlarıyla nasıl çalışabileceğine dair örnekler, cazibe almış gibi görünen diğer ilginç eklentilerdir. Belirli özel yazı türleriyle ilgili özel alanları veya alanları yönetmeyi kolaylaştırır: o zaman, Gutenberg editörünü açtığınızda, özel alan daha önce bir blok olarak doldurulmuştur:
Birçok insan özel alanın Gutenberg ile nasıl çalışacağını merak ediyor-bu, vahşi doğada zaten var olan bir vaat örneğidir. Burada daha fazla öğrenebilirsiniz.
Yukarı git
Tema geliştiricilerinin Gutenberg’e geçişleri nasıl ele aldığına dair üç örnek, eklenti geliştiricilerinin Gutenberg için nasıl oluşturabileceğine dair birkaç örnek gördünüz, ama temalar ne olacak? Tema geliştiricileri, geçişin üstesinden gelmenin iki ana yolunu takip ediyor gibi görünüyor:
Gutenberg Düzen seçeneğini engellemek ve desteklemek için stil ekleyerek Gutenberg için hazır bir tema oluşturun
Tema içeriği oluşturmak için gutenberg bloğunu kullanmak

İşte resimleri boyamak için bazı örnekler …

1. Gutenberg editörüne özel bir stil ekleyin, geliştirici tarafından gördüğümüz çok düzgün şeylerden biri, tema stilini gerçek Gutenberg arka uç arayüzüne eklemektir. Bigbox WooCommerce’den Spencer, üçüncü taraf bloklarının düzenlenmesi ile ilgili bazı sorunları detaylandırmasına rağmen, gerçek bir Wysiwyg deneyimi yaratmak için kapıyı açtı. Örneğin, Ohana Themeshaper’ın temasının, yazı başlığı da dahil olmak üzere tüm Gutenberg içeriğinin stilini nasıl değiştirdiğini görün:
Onu eylemde görmek istiyorsanız, Ohana temasını GitHub’dan indirin. Ve Themeshaper ayrıca bu blog gönderisinde bu etkiyi nasıl elde ettiklerini de açıklıyor.
2. Göreceğiniz diğer serin temaların uyumluluğunu değiştirmek için tam genişlik tesviye seçeneğini ekleyin, geniş hizalama desteğinin eklenmesidir. Temel olarak, bu tam genişliğe sahip belirli bloklar yapmanızı sağlar. En yaygın örnek, tam genişliğe sahip görüntüler eklemektir. Bir kez daha, bunun Ohana temasıyla geçerli olduğunu görebilirsiniz: Bu hizalamanın işlev görmesi için, tema yazarının desteği açıkça ifade etmesi gerekiyor.
3. Bloklar ile Demo İçerik Temaları oluşturmak – Örneğin Blok Teması Son olarak, bu organik temanın yaklaşımı oldukça havalıdır: Demo İçerik Tema Blokları tamamen Gutenberg bloğu ile yapılır. Bu, Matt’in Gutenberg Yolu haritasında açıkça söylediği gibi, Temmuz ayında “Gutenberg’in görevin dışındaki genişleyen sitenin ayarlanmasına” ekleyeceği gibi, kesinlikle büyümeye devam edeceğimiz bir şey. Blok temasının dışında, Array teması, yukarıda belirtilen atomik blok eklentisi ile entegre edilecek şekilde özel olarak tasarlanmış bir atomik blok temasına sahiptir.
Geliştirici -Bu temanızı Gutenberg için nasıl hazırlayacağınızdır, eğer Gutenberg ile uyumlu olan temanızı nasıl yapacağınızı merak eden bir tema geliştiriciyseniz, Bill Erickson yüksek puanlar için harika bir rehber var. Ve Gutenberg El Kitabı’nın Tema Destek Departmanı başka bir iyi kaynak.
Yukarı git
Elbette yukarıdaki örnekten gelecek daha harika şeyler olacak, umarım eklenti geliştiricilerinin nasıl ve Gutenberg için inşa etmeyi planlama temasını daha iyi anlıyorsunuz. Şahsen, bu yazıyı yazmanın beni Gutenberg olasılığı konusunda daha heyecanlandırdığını biliyorum. Eklentinin önünde, kısa bir kodla daha önce yapılan her şeyi değiştirmek için bir blok kullanmak, özellikle sıradan kullanıcılar için büyük bir kullanım artışıdır. Tema geliştiricilerinin kendi stillerini sunma ve blokları birleştirme şekli de ilginçtir – özellikle Gutenberg site ayarlamaları geliştirdiği için. Şimdi size kalmış – bir eklenti üreticisinin iyi bir örneği mi yoksa Gutenberg için ilginç bir yol bulan bir tema mı buluyorsunuz? Yorumlarda bize söyleyin!

Tweet için tıklayın
WordPress sitenizi hızlandırmak için Lightning kursumuza katılmayı unutmayın. Bazı basit iyileştirmelerle, yükleme süresini%50-80’e düşürebilirsiniz:

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir