Şu an okuyorsunuz: Gutenberg WordPress jeneratörü adım adım talimatlar
Bence şunu söyleyeceksiniz: Gutenberg’in tüm işi kafa karıştırıcı.
Öncelikle, yeni blok düzenleyiciyi kullanmak zor mu yoksa ne? Yani, tüm favori aletlerinizin nereye gittiğini bilmiyorsunuz. Muhtemelen şimdi yazmak daha uzun sürdü, değil mi?
Belki bir bağlantı eklemek (ortak ya da değil) ona büyük bir eğri verdi ve hayal kırıklığına uğradı. Metninizin yanına resim eklemekte sorun yaşıyor olabilirsiniz.
Belki daha fazla sütun eklemeyi denediniz ve işler beklendiği gibi çalışmadı. Aksi takdirde, PDF dosyalarınızı ekleyemeyebilir veya korkunç “Güncelleme Hatası” mesajını göremeyebilirsiniz.
Artık endişelenme; Çok uzun zaman önce tam konumundaydı, ama şimdi Gutenberg’i kullanmak için heyecan verici buluyorum. Bir öğrenme eğrisi var, evet, ama bugünkü yazının sonunda Gutenberg’i farklı göreceksiniz.
Gutenberg editörü nedir?
Standart WordPress blok editörü Gutenberg’i görüyorsunuz.
WordPress 5.0 ve daha üst sürümünüz varsa, Gutenberg adlı yeni WordPress editörüne rastlamanız gerekir.
Ve diğer birçok kullanıcı gibi, devrimci editörü kullanacak, ancak Gutenberg’in karmaşık olduğundan şüphe ediyor.
Veya Gutenberg ile tanıştığınızda, bazı şeyler işe yaramadı. Son olarak, geliştiriciler temaları ve eklentileri blok düzenleyiciyle uyumlu hale getirdiler ve bunu yapmaya devam ettiler.
Bu yüzden hızla bizim için iyi olan Klasik Editör’e geri döndü. Ancak, WordPress’in 2022’den sonra Klasik Editör tarafından artık desteklenmediğini unutmayın. Gutenberg’in sunduğu ek avantajları da kaybedeceksiniz.
İşlevsellik açısından, Klasik Editör ve Gutenberg de aynı şeyi yapıyor. 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, tamamen kafa karıştırıcı olmasa da Gutenberg’in yeni kullanıcı arayüzüne uyum sağlamayı biraz garip buluyoruz. En azından öyle düşünüyorum.
Peki Gutenberg tam olarak nedir?
Gutenberg yeni standart WordPress editörüdür. Geleneksel görüntü / metin düzenleyiciden farklıdır. Gutenberg, bugün diğer birçok sayfa oluşturucu gibi içerik bloklarını kullanıyor.
Klasik Editör’den daha sezgisel özellikler sunar, böylece hareket halindeyken zengin multimedya içeriği oluşturabilirsiniz. Artık WordPress yayınlarıyla veya sayfalarıyla çalışırken hızlı bir şekilde olağanüstü mizanpajlar oluşturabilirsiniz.
Bazı eklentilerle Gutenberg, Brizy, Elementor ve Divi gibi yerleşik WordPress site yaratıcılarıyla rekabet edebilir.
Tek dezavantajı, sayfa oluşturucuların genellikle daha fazla özellik sunmasıdır, çünkü bunlar esas olarak sayfa oluşturuculardır! Aynı zamanda, Gutenberg hala oldukça genç ve sadece blok editörünün sıçrama ve sınırlarla büyümesini umabilir.
Bugünün gönderisinde, Gutenberg editörü ile bir WordPress gönderisi oluşturmaktan keyif alacağız. Amacım Gutenberg ile profesyoneller gibi içerikler oluşturabilmeniz için her ayrıntıyı ve özelliği kapsamak.
Hazır mısın Bu durumda, bu WordPress gönderisini oluşturacağız.
Gutenberg ile WordPress yazısı nasıl oluşturulur
Bir WordPress sitesi çalıştırıyorsanız, büyük olasılıkla sayfalardan daha fazla yayın oluşturursunuz. Bir sonraki bölümde, Gutenberg üzerinde sıfırdan bir WordPress yazısı oluşturduk. Umarım Gutenberg’i denediğimde benim kadar eğlenirsiniz.
Yoldan çekip bırakın, şuraya gidin: Yayınlar> Yeni ekle aşağıdaki ekran görüntüsünde vurguladığımız gibi.
Bu sizi doğrudan aşağıda gösterilen Gutenberg editörüne götürecektir.
Oldukça temiz, değil mi? Şimdi kollarımızı kıralım ve çalışmaya başlayalım.
Başlık ekleyin
Kesin bir başlık olmadan bir yazı yazamazsınız. İyi olan şey, Gutenberg’in bir başlık eklemeyi inanılmaz derecede kolaylaştırması.
İlk gördüğünüz blok başlık yukarıdaki resimde gösterildiği gibi belgenin üst kısmına yerleştirin. Yayınınız için bir başlık oluşturmak üzere bloğu girin. A, B, C. gibi
Kalıcı bağlantıyı düzenlemeniz mi gerekiyor? Kolaylaştırabilirsiniz başlık Tıklayarak kilitle düzenlemek Düğme aşağıda gösterildiği gibi.
Başlığınızı ekledikten sonra düğmesine basın Giriş Yap Yeni bir satır başlatmak için tuşu. Gutenberg, klasik WordPress editöründe çok sevdiğiniz yerel navigasyonu korur.
Yeni bir bölüm ekle
Vur Giriş Yap Anahtar yeni bir tane oluşturur bölüm Yukarıda gösterildiği gibi kilitleyin. Bir metin yazmadan önce, blok size bazı seçenekler sunar. Daha fazla bilgi için aşağıdaki numaralı resme bakın.
Şunları yapabilirsiniz:
- Yeni paragraf bloğunu başka bir bloğa dönüştürün, örn. B.Görüntü, başlık, kapak, galeri, WooCommerce, form vb.
- Paragraf bloğunu bir görüntü bloğuna dönüştürmek için kısayolu kullanın
- Paragraf bloğunu bir başlık bloğuna değiştirin. H. H2, H3 ve H4
- Paragraf bloğunu kapak bloğuna dönüştür
Örnekleme yoluyla, daha sonra giriş için ilk bölümü açıklarım. Metin ekledikten sonra bir biçimlendirme araç çubuğu görünecektir (aşağıya bakın).
Biçimlendirme araç çubuğu sayesinde şunları yapabilirsiniz:
- Paragrafları ayet, tırnak işareti, başlık, liste, kod ve önceden biçimlendirilmiş metne dönüştürme
- cesur, İtalik, kesik ve altı çizili içerik
- Metni sola, sağa, ortaya ve kaydır
- Yeni bir sekmede de açılabilecek bir bağlantı ekleyin
- Çevrimiçi bir fotoğraf gönderin (evet, var!)
- Blok ayarlarını gizle
- Bloğu çoğaltın
- Geçerli bloktan önce veya sonra bir blok ekleyin (bizim durumumuzda bu ilk paragraftır, bu yüzden önce ve sonra hiçbir şey eklemeyiz). İsterseniz, ilk paragraftan önce bir kapak resmi ekleyebilirsiniz, çünkü bu iyi görünüyor
- 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 silin
Seçenekte bulunan seçenekleri kullanarak paragraf bloğunu daha da özelleştirebilirsiniz kilit Kenar çubuğu menüsündeki sekme aşağıda gösterildiği gibi.
Yukarıdaki fotoğraftaki bazı notlar:
- seçmek kilit Tüm kilit seçeneklerini ve ayarlarını görmek için buraya tıklayın
- Yazı tipi boyutunu seçin ve Drop Cap’ı buradan etkinleştirin
- Bölümünüze arka plan rengi ekleyin. Bunu göstermek için maviye ayarladım. Ayrıca metnin rengini de özelleştirebilirsiniz. Her durumda, sınırsız özel renkler ekleyebilirsiniz
- Buraya özel bir CSS sınıfı ekleyebilirsiniz, yani bloğunuza ek CSS stilleri ekleyebilirsiniz
- Mavi arka plan ve alt kapak Gutenberg editörüne zaten uygulandı
Kenar çubuğundaki Belge sekmesi
Kenar çubuğu menüsünde başka bir sekme var. o belge Sekme aşağıda gösterildiği gibi.
Yukarıdaki resim için yorumlar:
- Değiştirmek için burayı tıklayın belge dil
- Burada bir yayın planlayabilir ve özel veya kamu, içinde bir yayın oluşturdu İncelenmeyi bekliyor Durum, katkı biçimini seçin ve sabit bir katkı oluşturun
- Bu bölümde kalıcı bağlantınızı düzenleyebilirsiniz
- Burada yeni kategoriler seçebilir veya oluşturabilirsiniz
- Yayınınıza etiket ekleyin
- Seçilen görüntüyü ayarla
- Manuel bildirim oluşturma
- Yorumlara, pingback’lere ve geri izlemelere izin ver
Gördüğünüz gibi, isteklerinize göre bir paragraf bloğu (ve makalenin tamamı) tasarlamak için birçok seçeneğiniz var. Bu arada, farklı blokların bir anda öğrendiğimiz farklı konfigürasyonları var.
İlk bölümden sonra tuşuna basın. Giriş Yap Yeni bir satır (veya yeni bir paragraf bloğu) oluşturmak için tekrar basın. Şimdi ilk bölümün altına bir resim ekleyelim.
Gutenberg Fotoğraf ekle
Bir görüntünün bin kelimeye bedel olduğunu ve görüntüsüz bir blog gönderisinin sıkıcı olduğunu söylüyorlar. Gutenberg ile WordPress yayınınıza fotoğraf eklemenin birkaç yolu vardır.
Eğer varsa Giriş Yap Hemen şimdi yeni bir paragraf bloğunu etkinleştirin. Gutenberg sezgisel olduğundan, aşağıdaki resimde vurgulandığı gibi artı (+), görüntü veya kapak simgelerine tıklayarak bir görüntü ekleyebilirsiniz.
Bazı notlar
- Artı işaretli bir resim ekleyebilirsiniz (+)
- Buradan kolayca resim ekleyebilirsiniz
- Bu seçenekle bir tane ekleyebilirsiniz örtbas etmek Görüntü (genellikle diğer fotoğraflardan daha büyüktür. Kapak görüntülerine de metin koyabilirsiniz)
Artı işaretlerinden (+) herhangi birini tıklayın. Sonra tıklayın resim Sekme aşağıda gösterildiği gibi.
tıklayın resim Sekme yüklendi resim Kilit aşağıdaki ekran görüntüsünde gösterilir.
o resim Blok, bir URL veya medya kitaplığından resim yüklemenize veya bir resim eklemenize olanak tanır. Medya ekranının ayarlarından veya aracılığıyla alternatif metin (SEO için önemli), altyazılar ve açıklama ekleyebilirsiniz. kilit Aşağıdaki resimlerde gösterildiği gibi yan panel.
Normal ortam ayarları …
… Ve resim Kilit ayarları.
Bugün burada bir şey öğreniyor musun? Umarım yapabiliriz
İmajını ekledikten sonra, Gutenberg doğrudan altına yeni bir paragraf bloğu ekler. İstediğinizi ekleyebilirsiniz, ancak gösterim amacıyla metin ve ardından altına bir düğme ekledim.
İndirilebilir dosyalar eklemek için, örn. Pdf, resimler, videolar vb.
Gutenberg, WordPress postanıza veya WordPress sitenize indirilebilir dosyalar eklemeyi inanılmaz derecede kolaylaştırır.
Yeni bir tane bölüm Kilitleyin, artı işaretini (+) tıklayın ve Ortak bloklar ve vur kayıt Aşağıda vurguladığımız sekme.
Bu, aşağıdaki bloğu başlatır:
itibaren kayıt Yeni bir dosya yükleyebileceğiniz veya medya kitaplığınızdan bir dosya ekleyebileceğiniz bloklar. Gutenberg dosyanızı ekledikten sonra, indir Aşağıdaki resimde gösterildiği gibi otomatik olarak düğmesine basın.
Ayarlarla oynayabilirsiniz. Örneğin, “Gutenberg Ücretsiz PDF Kontrol Listesi“Başlık hem de indir Düğme. Bloğa bir CSS sınıfı ekleyebilir ve istediğiniz gibi biçimlendirebilirsiniz.
Gutenberg için teklif ekle
Aşağıda, sevimli ve akılda kalıcı oldukları ve konuyu anlamanıza yardımcı olduğu için bir teklif ekliyoruz. Yeni bir satırdaki artı işaretini (+) tıklayın ve şuraya gidin: Ortak bloklar ve vur randevu Sekme aşağıda gösterildiği gibi.
Bu olacak randevu Aşağıdaki ekran görüntüsünde vurguladığımız şekilde yayınınızı engelleyin.
Üstteki sağ kenar çubuğunda tırnak işareti ayarının yapıldığına dikkat edin?
Bütçenizi eklemek için bloğu yazın. İşte benim sonucum.
Güzel görünüyor, değil mi?
Gutenberg’e medya gönderileri ekleme
Gutenberg, YouTubeVimeo gibi 30’dan fazla siteden video ve diğer medyaları eklemek için çeşitli bloklarla birlikte gelir Facebook, SoundCloud, WordPress, Slideshare vb.
İçerik eklemek için artı işaretini (+) tıklayın ve Gömülü, ve siteyi seçin. Mesela istedim YouTube aşağıda gösterildiği gibi.
Ardından video URL’sini kopyalayıp YouTube ve tıkla gömmek Aşağıdaki resimde gösterildiği gibi düğme.
Gelir gelmez gömmek Düğmede Gutenberg, aşağıda vurgulandığı gibi bağlantıyı otomatik olarak bir videoya dönüştürür.
Sonuna kadar sorunsuz gezinme. Şimdi, Harekete Geçirici Mesaj (CTA) oluşturmanıza olanak tanıyan ayrı bir düğme ekleyelim.
Gutenberg’de düğme nasıl eklenir
Bu noktada blok ekleme konusunda sorun yaşamamanız gerekir. Artı işaretini (+) tıklayın ve bloğunuzu seçin. Çok kolay.
Nasıl düğme ekleyebiliriz?
Yeni bir satırdaki (veya bloktaki) artı işaretini (+) tıklayın ve şuraya gidin: Tasarım öğeleri ve tıkla aygır Sekme aşağıda gösterildiği gibi.
Bu sizi aygır Aşağıda açıklandığı gibi kilitleyin.
Yukarıdaki resimde görebileceğiniz gibi, düğme metnini düzenleyebilir ve bir bağlantı ekleyebilirsiniz. Düğmeyi, ekranın sağındaki kenar çubuğu menüsünden de özelleştirebilirsiniz.
Birkaç tıklamadan sonra anladım.
BTW, düğmeleriniz için okunması zor renk kombinasyonları kullanırsanız, Gutenberg sizi hemen bilgilendirecek, Ne güzel
Gutenberg’e sütun ekleme
İyi bir düğmeyle bazı sütunlar ekleyelim. İki sütun eklemek istiyorum, bu yüzden dikkatli olun.
Bunu yapmak zorundasın. Artı işaretini (+) tıklayın ve Tasarım öğeleri ve tıkla sütunlar Aşağıdaki resimde gösterildiği gibi sekme.
Varsayılan olarak Gutenberg iki sütun ekler. Aşağıdaki resme bakın ve sütunlara zaten içerik eklediğimi unutmayın.
Beni yakalayan ne
Birkaç saniye içinde fena değil. Ancak, sütun oluşturamayabilirsiniz. Metnin yanında bir resim görüntülemek iyi bir fikir olabilir.
Bir kilit var mı? Evet var!
Gutenberg’de metnin yanına resim ekleme
Metnin yanına fotoğraf eklemek ister misiniz? Bu durumda, bir sonraki bölümü seveceksiniz.
Artı işaretini (+) her zamanki gibi tıklayın ve Tasarım öğeleri ve tıkla Medya ve metin Aşağıda gösterildiği gibi.
Görmelisin Medya ve metin Aşağıda gösterildiği gibi kilitleyin.
Ardından görüntünüzü / videonuzu / medyanızı yükleyin veya medya kütüphanesinden bir tane ekleyin. Ardından, metninizi aşağıdaki resimde gösterildiği gibi orta tarafa ekleyin.
Onunla oynadım Medya ve metin Kaza yaptım ve aşağıdakiler bana oldu. Orada da bir düğmeye basmayı başardığımdan emin ol 🙂
Oh bu arka uç! Size önü göstereyim. Buraya:
Çok profesyonel görünüyor, değil mi? Gutenberg editörü ile ne kadar başarabileceğinizi hayal edebilirsiniz.
Gutenberg Üçüncü Taraf Blokları
WordPress geliştiricileri temaları ve eklentileri Gutenberg editörü ile uyumlu hale getirmekle ilgileniyorlar. Bazı örnekler WooCommerce, Jetpack ve Yoast SEO’dur.
Örneğin, WooCommerce bloklarını WordPress yayınınıza yapıştırabilirsiniz. İlk olarak, WooCommerce’i kurun ve etkinleştirin.
Ardından yeni bir satırdaki artı işaretini (+) tıklayın ve WooCommerce ve aşağıda gösterildiği gibi istediğiniz bloğu seçin.
Bunun ne anlama geldiğini biliyor musunuz? Bu, dakikalar içinde zengin medya ve harika yayınlar ve sayfalar oluşturabileceğiniz anlamına gelir.
Diğer önemli bloklar
Şimdiden 2.000’den fazla kelimemiz var ve eğer böyle devam edersek, tam bir elektronik kitap yazıyoruz. Benim duam artık Gutenberg’i rahatlıkla kullanabilmeniz.
Yoldan çıkarken mevcut diğer blokların bir listesi.
- oyuncu – Widget’larınızdan blog yayınlarına içerik ekleyebilirsiniz
- kısa kodlar – Yine de orijinal WordPress kısa kodlarını kullanabilirsiniz
- klasik – Geçmiş içeriğinizle birlikte büyük bir blok
- daha – Blok daha önce şu adla biliniyordu: Daha fazlası gün
- Yan dayanaklar, bölmeler, mesafeler
- Özel HTML, ayıklama sıklığı, tablo
- galeri ve HTML5 ses / video
- Kullandığınız temalara ve aksesuarlara bağlı olarak çok daha fazlası
Bunlara ek olarak: WordPress sitesi oluşturmak, birkaç dakika boyunca kaydedilmiş bir yayın oluşturmaya benzer, bu yüzden bugün bu konuya girmeyeceğiz.
Gutenberg hızlı püf noktaları ve klavye kısayolları
Gutenberg, daha da kolaylaştıran bazı hileler ve klavye kısayolları içerir. Örneğin, bir paragraf bloğuna “/” yazarsanız, bir blok listesi görüntülenir.
Ters eğik çizgiden (/) sonra blok başlığını yazarak belirli bir bloğu bile seçebilirsiniz. Örneğin, “/ image” girdiğinizde görüntü bloğu diğer görüntü ile ilgili blokların altında görüntülenecektir. Daha fazla ayrıntı için aşağıdaki resme bakın.
Klavye kısayolları: Mevcut tüm kısayolları görmek için hafifçe vurun ÜST KARAKTER + TÜM + H. içinde Windows ve OPT + CTRL + H Mac’te
Belgenin üstünde, simgeyi (i) tıklatarak belgenin yapısını görebilirsiniz (aşağıdaki şekle bakın).
Güzel. Mükemmel pürüzsüz.
Oh, ve bu arada, “Güncelleme Hatası” hatası genellikle kararsız bir internet bağlantısı nedeniyle oluşur 🙂
Gutenberg, benimle aranızda mükemmel bir içerik düzenleyicisidir. Halatları öğrenmeye hazır olduğunuzda; Geleceğin WordPress editöründen çok yararlanabilirsiniz.
Gutenberg hala nispeten genç ve kullanılabilirlik ve işlevsellik açısından büyüme bekleyebilir. Önümüzdeki birkaç güne sahip olmak büyük bir güç olacak. Sayfanın içerik oluşturucuları dikkatli olmalıdır, aksi takdirde işletme biter 🙂
Gutenberg editörünün adım adım kılavuzumuzun bir şeyleri perspektif içine koymanıza yardımcı olduğunu umuyoruz. Artık bir profesyonel gibi içerik oluşturmak için blok düzenleyiciyi kullanabileceğinize inanıyoruz.
Endişelerinizi, düşüncelerinizi ve sorularınızı aşağıdaki yorum bölümünde paylaşın.
