WordPress için Gutenberg Builder için Adım Adım Kılavuz

WordPress için Gutenberg Builder için Adım Adım Kılavuz

Sanırım şunu söylediğimde hemfikir olacaksın: Tüm Gutenberg işi kafa karıştırıcı.


İlk olarak, yeni blok editörünün kullanımı zor mu veya ne? Yani, tüm favori araçlarınızın nereye gittiğini bilmiyorsunuz. Şimdi, bir yazı oluşturmak için muhtemelen daha uzun sürdün, değil mi??

Belki bir bağlantı eklemek (bağlı veya başka bir şekilde) size bir eğri heck attı ve hayal kırıklığına uğramış hissettiniz. Belki de metninizin yanına resim eklerken sorun yaşadınız.

Belki birden fazla sütun eklemeyi denediniz ve işler beklendiği gibi olmadı. Aksi takdirde, PDF dosyalarınızı kolayca ekleyemezsiniz veya korkunç “Güncelleme Başarısız” mesajını birkaç kez görürsünüz.

Artık endişelenme; Çok uzun zaman önce tam olarak senin pozisyonundaydım, ama şimdi Gutenberg’i kullanmak için bir heyecan buluyorum. Bir öğrenme eğrisi var, evet, ama bugünkü gönderinin sonunda Gutenberg’i farklı düşüneceksin.

Gutenberg Editörü nedir?

wordpress gutenberg editörü

Varsayılan WordPress blok editörü Gutenberg’e bakıyorsunuz

WordPress 5.0 ve üstünü kullanıyorsanız, Gutenberg olarak bilinen yeni ve parlak WordPress editörüne rastlamış olmalısınız.

Ve diğer birçok kullanıcı gibi, devrimci editörü kullanmak istiyorsunuz, ama tereddüt ediyorsunuz çünkü Gutenberg karışık.

Veya Gutenberg ile ilk tanıştığınızda, çeşitli şeyler işe yaramadı. Sonuçta, geliştiriciler tema ve eklentileri blok düzenleyiciyle uyumlu hale getirdi ve hala yapıyorlar.

Böylece, hızlı bir şekilde Klasik Editör, hangi, BTW, bizimle iyi. Unutmayın, WordPress 2022’den sonra Klasik Editör’ü desteklemeyecektir. Ayrıca, Gutenberg’in sunduğu tüm ekstra güzellikleri kaçırıyorsunuz.

İşlevsellik açısından, Klasik Editör ve Gutenberg de aynı şeyi yapar; her iki araç da kodlamadan içerik oluşturmanıza yardımcı olur.

Ancak, eski WYSIWYG editörüne o kadar alışkınız ki, yeni Gutenberg UI’ye tamamen yabancı değilse de biraz yabancı olduğunu fark ediyoruz. En azından ben böyle düşünüyorum.

Ama Gutenberg tam olarak nedir?

Gutenberg yeni varsayılan WordPress editörüdür. Geleneksel görsel / metin editörünün aksine; Gutenberg, birçok modern sayfa oluşturucu gibi içerik bloklarını kullanıyor.

Klasik Editör’den daha sezgisel özelliklerle gönderilir, yani anında zengin medya içeriği oluşturabilirsiniz. Şimdi, WordPress yayınlarıyla veya sayfalarıyla çalışıyor olsanız da, olağanüstü düzenleri hızlı bir şekilde kırpabilirsiniz.

Ve birkaç eklenti ile Gutenberg, Brizy, Elementor ve Divi gibi yerleşik WordPress sayfa oluşturucularıyla rekabet edebilir.

Tek dezavantajı, sayfa oluşturucuların genellikle daha fazla özellik sunmasıdır, çünkü bunlar öncelikle sayfa oluşturuculardır! Aynı zamanda, Gutenberg hala oldukça genç ve sadece blok editörünün sıçramalar ve sınırlar içinde büyümesini bekleyebilirsiniz.

Bugünün gönderisinde, Gutenberg editörü ile bir WordPress gönderisi oluşturmak için heyecan verici bir zaman geçireceğiz. Profesyonelleri gibi içerikler oluşturmak için Gutenberg’i kullanabilmeniz için her küçük ayrıntıyı ve özelliği kapsamayı amaçlıyorum.

Hazır mısın? Öyleyse, WordPress gönderisini oluşturalım.

Gutenberg ile WordPress Post Nasıl Oluşturulur

Bir WordPress web sitesi çalıştırıyorsanız, muhtemelen sayfalardan daha fazla yayın oluşturursunuz. Aşağıdaki bölümde, Gutenberg’de sıfırdan bir WordPress yazısı oluşturuyoruz. Umarım Gutenberg’i test ederken yaptığım kadar eğlenirsiniz.

Yoldan çıkın, şuraya gidin: Mesajlar> Yeni Ekle aşağıdaki ekran görüntüsünde vurguladığımız gibi.

Gutenberg'de yeni bir gönderi oluşturma

Bunu yapmak sizi doğrudan aşağıda gösterilen Gutenberg editörüne yönlendirir.

wordpress gutenberg editörü

Çok temiz, ha? Şimdi, bu kolları toplayalım ve işe başlayalım.

Başlık Ekleme

Gutenberg'e yeni bir başlık eklemek

Sağlam bir başlık olmadan yayın yazamazsınız. İyi olan şey Gutenberg’in bir başlık eklemeyi inanılmaz derecede kolaylaştırması.

Gördüğünüz ilk blok Başlık Yukarıdaki resimde ayrıntılı olarak açıkladığımız gibi. Gönderiniz için bir başlık oluşturmak için bloğun içine yazın. A, B, C kadar basit.

Kalıcı bağlantıyı düzenlemeniz mi gerekiyor? Bunu kolayca Başlık tıklatarak Düzenle aşağıda gösterildiği gibi düğmesi.

düzenleme sonrası permalink gutenberg

Başlığınızı ekledikten sonra, GİRİŞ tuşuna basarak yeni bir satır başlatın. Ah evet, Gutenberg klasik WordPress editöründe sevdiğiniz yerel navigasyonu koruyor.

Yeni Paragraf Ekleme

Gutenberg'de yeni paragraf bloğu

Vurmak GİRİŞ anahtar yeni oluşturur Paragraf blok, yukarıda gösterildiği gibi. Herhangi bir metni yazmadan önce, blok size birkaç seçenek sunar. Daha fazla ayrıntı için aşağıdaki numaralı resme bakın.

yeni paragraf bloğu seçenekleri gutenberg

Notlar. Yapabilirsin:

  1. Yeni paragraf bloğunu resim, başlık, kapak, galeri, WooCommerce, form vb. Gibi başka bir bloğa dönüştürün..
  2. Paragraf bloğunu bir görüntü bloğuna dönüştürmek için kısayolu kullanın
  3. Paragraf bloğunu bir başlık bloğuna değiştirin, yani H2, H3 ve H4
  4. Paragraf bloğunu kapak resmi bloğuna dönüştürme

Örnekleme amacıyla, ilk paragrafı giriş sonrası için ayıracağım. Metin ekledikten sonra, aşağıda gösterildiği gibi bir biçimlendirme araç çubuğu görünür.

Gutenberg paragraf biçimlendirme araç çubuğu

Biçimlendirme araç çubuğu sayesinde şunları yapabilirsiniz:

  • Paragrafı bir ayet, alıntı, başlık, liste, kod ve önceden biçimlendirilmiş metne dönüştürün
  • cesur, İtalik, çizili, ve altını çizmek içerik
  • Metni sola, sağa, ortaya hizala ve blokla
  • Yeni bir sekmede de açılabilen bir bağlantı ekleyin
  • Satır içi bir resim ekleyin (evet, var!)
  • Blok ayarlarını gizle
  • Bloğu çoğaltın
  • Geçerli bloktan önce veya sonra bir blok ekleyin (bizim durumumuzda, ilk paragraf budur, bu yüzden önce, sonra sadece bir şey eklemiyorduk.) İsterseniz, ilk paragraftan önce bir kapak resmi bloğu ekleyebilirsiniz. iyi
  • Bloğu HTML olarak düzenleyin
  • Geçerli bloğu yeniden kullanılabilir bloklara ekleyin, böylece diğer yayınlarda kullanabilirsiniz
  • Bloğu tamamen çıkarın

Paragraf bloğunu, sayfadaki seçeneklerle daha da özelleştirebilirsiniz. Blok aşağıda gösterildiği gibi kenar çubuğu menüsünde bulunan sekme.

paragraf bloğu için gutenberg kenar çubuğu seçenekleri

Yukarıdaki resim hakkında birkaç not:

  1. Seç Blok tüm blok seçeneklerini ve ayarlarını görüntülemek için burayı tıklayın
  2. Yazı tipi boyutunu seçin ve Drop Cap’ı buradan etkinleştirin
  3. Paragrafınıza arka plan rengi ekleyin. İllüstrasyon amacıyla maviye ayarladım. Metin rengini de özelleştirebilirsiniz. Her iki durumda da sınırsız özel renkler ekleyebilirsiniz
  4. Buraya özel bir CSS sınıfı ekleyebilirsiniz, yani bloğunuza ek CSS stilleri ekleyebilirsiniz
  5. Mavi arka plan ve Drop Cap, Gutenberg editöründe zaten uygulandı

Kenar Çubuğundaki Belge Sekmesi

Kenar çubuğu menüsünde başka bir sekme var; belge aşağıda gösterildiği gibi sekme.

paragraf bloğu kenar çubuğu belge sekmesi

Burada, yukarıdaki görüntü için notlar:

  1. Geçmek için burayı tıklayın belge çıkıntı
  2. Burada bir yayın planlayabilir, görünürlüğü Özel veya halka açık, bir yayın ayarlamak Bekleyen yorum durumunu seçin, yazı biçimini seçin ve yapışkan bir yazı oluşturun
  3. Bu bölüm kalıcı bağlantınızı düzenlemenizi sağlar
  4. Burada yeni kategoriler seçebilir veya oluşturabilirsiniz
  5. Yayınınıza etiket ekleyin
  6. Öne çıkan resmi ayarla
  7. Manuel alıntı oluşturma
  8. Yorumlara, pingback’lere ve geri izlemelere izin ver

Gördüğünüz gibi, istediğiniz şekilde bir paragraf bloğu (ve tüm gönderi) tasarlamak için birçok seçeneğiniz var. Bu arada, bir dakika içinde öğreneceğimiz için farklı bloklar farklı ayarlarla geliyor.

İlk paragraftan sonra, GİRİŞ tuşuna basarak yeni bir satır (veya paragraf bloğu) oluşturun. Şimdi ilk paragrafın altına bir resim ekleyelim.

Gutenberg’de Resim Ekleme

Gutenberg'e yeni bir resim ekleme

Bir resmin bin kelime konuştuğunu ve imgesiz bir blog gönderisinin sıkıcı olduğunu söylüyorlar. Gutenberg’i kullanarak WordPress yayınınıza bir resim eklemek için birkaç seçeneğiniz vardır.

Vurduğunda GİRİŞ Birkaç dakika önce yeni bir paragraf bloğunu tetiklediniz. Gutenberg’in sezgisel olduğunu görmek için, aşağıdaki resimde vurguladığımız gibi artı (+), resim veya kapak simgelerini tıklayarak resim ekleyebilirsiniz..

Gutenberg editörüne yeni bir resim ekleme

Birkaç not:

  1. Artı (+) simgeleriyle resim ekleyebilirsiniz
  2. Burada kolayca bir resim ekleyebilirsiniz
  3. Bu seçenek, örtmek image (Bunlar genellikle diğer fotoğraflardan daha büyüktür. Ayrıca kapak görüntülerine metin ekleyebilirsiniz, BTW)

Devam edin ve artı (+) simgelerinden birini tıklayın. Ardından, görüntü sekmesi, aşağıda gösterildiği gibi.

Gutenberg'e resim ekleme

Tıklama görüntü sekmesi yükler görüntü aşağıdaki ekran görüntüsünde gösterilen blok.

Gutenberg görüntü bloğu

 görüntü engelleme, bir resim veya URL’den veya medya kitaplığından bir resim yüklemenize olanak tanır. İşlem sırasında medya ekranı ayarları aracılığıyla alternatif metin (SEO için önemli), resim yazısı ve açıklama ekleyebilirsiniz. Blok aşağıdaki resimlerde gösterildiği gibi kenar çubuğu.

Normal ortam ayarları…

wordpress medya ayarları

…ve görüntü engelleme ayarları.

gutenberg görüntü bloğu ayarları

Bugün burada bir şeyler öğreniyor musun? Umarım. Hadi devam edelim.

Resminizi ekledikten sonra Gutenberg, hemen altına yeni bir paragraf bloğu ekler. İstediğinizi ekleyebilirsiniz, ancak gösterim amacıyla, bir metin ve ardından bunun altına bir düğme ekledim.

İndirilebilir Dosyalar Nasıl Eklenir, örn. PDF, Resimler, Videolar vb.

Gutenberg, WordPress yayınınıza veya sayfanıza indirilebilir dosyalar eklemeyi inanılmaz derecede kolaylaştırır.

Yeni bir Paragraf engelle, artı (+) simgesini tıklayın, Ortak Bloklar ve vur Dosya aşağıda vurguladığımız gibi sekme.

Gutenberg'e indirilebilir dosyalar ekleme

Bunu yapmak aşağıdaki bloğu başlatır:

Gutenberg dosya bloğu

Gönderen Dosya engellemek için yeni bir dosya yükleyebilir veya medya kitaplığınızdan bir dosya ekleyebilirsiniz. Dosyanızı ekledikten sonra Gutenberg bir sevimli ekler İndir düğmesi aşağıdaki resimde görüldüğü gibi otomatik olarak.

Gutenberg'e dosya ekleme

Seçeneklerle oynayabilirsiniz. Örneğin, “Ücretsiz Gutenberg PDF Kontrol Listesi”Başlığı ve İndir buton. Bloğa bir CSS sınıfı ekleyebilir ve istediğiniz şekilde stil uygulayabilirsiniz.

Gutenberg’e Fiyat Ekleme

Ardından, bir teklif ekleyelim çünkü büyüleyici, akılda kalıcılar ve noktayı eve götürmenize yardımcı oluyorlar. Yeni bir satırda, artı (+) işaretini tıklayın, Ortak Bloklar ve vur Alıntı aşağıda gösterildiği gibi sekme.

Gutenberg'e tırnak ekleyerek

Bunu yapmak, Alıntı Aşağıdaki ekran görüntüsünde vurguladığımız için yayınınızı engelleyin.

Gutenberg alıntı blok ayarları

Yukarıdaki sağ kenar çubuğunda alıntı bloğu ayarlarına dikkat edin?

Teklifinizi eklemek için bloğun içine yazın. İşte benim sonucum.

Gutenberg alıntı

İnanılmaz görünüyor, değil mi??

Gutenberg’e Medya Yerleştirmeleri Ekleme

Gutenberg, YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare gibi 30’dan fazla siteden video ve diğer medyaları gömmek için birkaç blokla birlikte gelir.

İçeriği gömmek için artı (+) simgesini tıklayın, Gömmeler, ve siteyi seçin. Örneğin, aşağıda gösterildiği gibi YouTube’u istedim.

gutenberg youtube gömme

Ardından, YouTube video URL’sini kopyalayıp yapıştırın ve Göm düğmesi aşağıdaki resimde gösterildiği gibi.

gutenberg youtube gömme bloğu

Vurur vurmaz Göm düğmesini tıkladığınızda Gutenberg, aşağıda vurguladığımız gibi bağlantıyı otomatik olarak videoya kapatır.

Gutenberg'de gömülü youtube videosu

Sorunsuz yelken. Şimdi, harekete geçirici mesaj oluşturmak için mükemmel olan bağımsız bir düğme ekleyelim (CTA).

Gutenberg’de Düğme Ekleme

Bu noktada blok eklemekte zorlanmamalısınız. Artıya (+) tıklayın ve bloğunuzu seçin. Bundan daha kolay olamaz.

Peki, nasıl düğme ekleyebiliriz?

Yeni bir satırda (veya engellemede) artı (+) simgesini tıklayın, Düzen Elemanları ve tıklayın Buton aşağıda gösterildiği gibi sekme.

Gutenberg editöründe düğme ekleme

Bunu yapmak sizi Buton aşağıda detay olarak blok.

Gutenberg editöründe düğme ekleme

Yukarıdaki görüntüden de görebileceğiniz gibi, düğme metnini düzenleyebilir ve bir bağlantı ekleyebilirsiniz. Ayrıca, ekranın sağındaki kenar çubuğu menüsünden düğmeyi özelleştirebilirsiniz.

Birkaç tıklamadan sonra, sahip olduğum şey.

Gutenberg düğmesi örneği

Bu arada, düğmelerinizde okunması zor renk kombinasyonları kullanıyorsanız, Gutenberg derhal size bildirecek. Ne güzel?

Gutenberg’de Sütun Ekleme

Yerinde güzel bir düğme varken, bazı sütunlar ekleyelim. İki sütun ekleyeceğim, bu yüzden dikkatlice takip et.

İşte yapmanız gerekenler. Artı (+) simgesini tıklayın, Düzen Elemanları ve tıklayın Sütunlar sekmesini aşağıdaki resimde görüldüğü gibi.

sütunlar sekmesi gutenberg düzenleyicisi

Gutenberg varsayılan olarak iki sütun ekler. Aşağıdaki resme bakın ve unutmayın, zaten sütunlara içerik ekledim.

wordpress düzenleyicide gutenberg sütunları

Hangi beni alır:

Gutenberg sütunları frontend

Birkaç saniye çalışmanın fena değil. Ancak belki de sütun oluşturmak istemezsiniz. Belki bir metnin yanında bir resim görüntülemek istersiniz.

Bunun için bir blok var mı? Evet var!

Gutenberg’de Metnin Yanına Resim Ekleme

Bazı metnin yanına resim eklemek mi istiyorsunuz? Eğer öyleyse, aşağıdaki bölümü seveceksiniz.

Her zamanki gibi artı (+) simgesini tıklayın, Düzen Elemanları ve tıkla Medya ve Metin Aşağıda gösterildiği gibi.

medya ve metin gutenberg bloğu

Görmelisin Medya ve Metin aşağıda gösterildiği gibi blok.

Gutenberg'de medya ve metin bloğu

Ardından, resminizi / videonuzu / medyanızı yükleyin veya medya kütüphanesinden bir tane ekleyin. Bundan sonra, metninizi aşağıdaki resimde gösterildiği gibi medyanın yanına ekleyin.

İle oynadım Medya ve Metin blok, ve ben aşağıdaki ile geldi. Dikkat edin; Orada da bir düğmeye basmayı başardım ��

medya ve metin bloğu tam işlemde

Oh, arka plan bu! Size ön ucu göstereyim. Buraya:

Gutenberg'de medya metin bloğu

Çok profesyonel görünüyor, değil mi? Gutenberg editörü ile ne kadar başarabileceğinizi kesinlikle hayal edebilirsiniz.

Üçüncü Taraf Gutenberg Blokları

WordPress geliştiricileri, temaları ve eklentileri Gutenberg editörü ile uyumlu hale getirme konusunda istekli. WooCommerce, Jetpack ve Yoast SEO’ya birkaç örnek verilebilir.

Örneğin, WordPress yayınınıza WooCommerce blokları ekleyebilirsiniz. Öncelikle, WooCommerce’i kurmalı ve etkinleştirmelisiniz.

Ardından, yeni bir satırda artı (+) simgesini tıklayın, WooCommerce ve aşağıda gösterildiği gibi istediğiniz bloğu seçin.

woocommerce gutenberg blokları

Bunun ne anlama geldiğini biliyor musun? Bu, birkaç dakika içinde zengin medya ve harika yayınlar ve sayfalar oluşturabileceğiniz anlamına gelir.

Diğer Önemli Bloklar

Şimdiden 2.000’in üzerinde kelimedeyiz ve bunu devam ettirirsek, bir e-Kitap yazacağız. Benim duam şimdi Gutenberg’i hıçkırık olmadan kullanabiliyorsun.

Yoldan çıkarken, diğer mevcut blokların bir listesi.

  • widget’lar – Widget’larınızdan blog yayınlarına içerik ekleyebilirsiniz
  • Kısa kodlar – Yine de yerel WordPress kısa kodlarını kullanabilirsiniz
  • Klasik – Eski içeriğinizi tutan harika bir blok
  • Daha – Blok daha önce Daha fazla oku etiket
  • Sayfa Sonu, Ayırıcılar, Aralayıcılar
  • Özel HTML, Pullquote, Tablo
  • galeri ve HTML5 ses / video
  • Kullandığınız temalara ve eklentilere bağlı olarak çok daha fazlası

kenara: WordPress sayfası oluşturmak, birkaç dakikalık farklar için bir posta kaydetme oluşturmaya benzer, bu yüzden bugün bunu ele almayacağız.

Hızlı Gutenberg Hack’leri ve Klavye Kısayolları

Gutenberg, daha da kolaylaştıran birkaç hack ve klavye kısayoluyla birlikte gelir. Örneğin, bir paragraf bloğunun içine “/” yazarsanız, blokların bir listesini getirir.

Ters eğik çizgiden (/) sonra bloğun başlığını yazarak belirli bir bloğu bile seçebilirsiniz; örneğin, “/ image” yazmak görüntü bloğunu diğer görüntü ile ilgili bloklar arasında getirir. Daha fazla ayrıntı için aşağıdaki resme bakın.

Gutenberg boşluk kısayolu

Klavye kısayolları: Kullanılabilir tüm kısayolları görüntülemek için ÜST KARAKTER + ALT + H Windows ve OPT + CTRL + H Mac’te.

Belgenin üstünde, aşağıda gösterildiği gibi (i) simgesini tıklayarak belge yapısını görebilirsiniz.

gutenberg belge yapısı

Güzel. Olağanüstü pürüzsüz.

Oh, ve bu arada, “Güncelleme Başarısız” hatası genellikle titrek bir internet bağlantısı nedeniyle olur ��


Seninle benim aramda Gutenberg müthiş bir içerik editörü. Halatları öğrenmeye istekli olmanız koşuluyla; geleceğin WordPress editöründen çok şey toplayabilirsiniz.

Gutenberg hala nispeten genç ve kullanılabilirlik ve işlevsellik açısından büyümesini bekleyebilirsiniz. Önümüzdeki günlerde hesaba katmak ciddi bir güç olacak. Sayfa oluşturucular dikkat etse iyi olur, yoksa işletmeniz biter ��

Gutenberg editörü için adım adım rehberimizin, şeyleri perspektif haline getirmenize yardımcı olmasını umuyoruz. Artık bir profesyonel gibi içerik oluşturmak için blok düzenleyiciyi kullanabileceğinize inanıyoruz.

Lütfen endişelerinizi, düşüncelerinizi ve sorularınızı aşağıdaki yorum bölümünde paylaşın.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map