WordPress için Gutenberg Builder için adım adım kılavuz
Sanırım dediğimde kabul edeceksin: Tüm Gutenberg meseleleri kafa karıştırıcı. Birincisi, yeni blok editörlerinin kullanılması zor mu yoksa ne? Demek istediğim, tüm favori araçlarınızın nereye gittiğini bilmiyorsunuz. Şimdi, bir yazı yapmak için daha fazla zamana ihtiyacınız olabilir, değil mi? Belki bir bağlantı (bağlantı veya başka) eklemek sizi zorlaştırır ve hayal kırıklığına uğramış hissedersiniz. Belki metninizin yanına bir resim eklerken bir sorununuz olur. Belki birkaç sütun eklemeye çalışırsınız ve her şey beklendiği gibi çalışmaz. Bu sorun değilse, belki PDF dosyanızı kolayca ekleyemezsiniz veya genellikle “Güncelleme Başarısız” mesajını görürsünüz.
Artık endişelenme; Son zamanlarda doğru pozisyondaydım, ama şimdi Gutenberg’i kullanımı çok ilginç buluyorum. Bir öğrenme eğrisi var, evet, ama bugünkü yazının sonunda Gutenberg’i farklı düşüneceksiniz. Gutenberg editörü nedir?
WordPress 5.0 ve daha yeni kullanıyorsanız, Gutenberg olarak bilinen yeni ve parlak bir WordPress editörü bulmuş olmalısınız. Ve diğer birçok kullanıcı gibi, devrimci bir editör kullanmak istiyorsunuz, ancak şüphelisiniz çünkü Gutenberg karmaşık.
Ya da belki Gutenberg ile ilk tanıştığınızda, çeşitli şeyler başarısız oldu. Ancak, ilk önce geliştirici ve hala Block Editor ile uyumlu bir tema ve eklenti yaptı. Yani, hızla klasik editör Yang, BTW’ye dönüyorsunuz, bizim için sorun yok. WordPress’in 2022’den sonra klasik editörü desteklemeyeceğini unutmayın. Ayrıca, Gutenberg tarafından sunulan tüm ekstra eşyaları kaybedersiniz. İşlevsellik açısından, klasik editörler ve Gutenberg de aynısını yaparlar; Her iki araç da kodlamadan içerik oluşturmanıza yardımcı olur. Bununla birlikte, eski Wysiwyg editörüne çok alışkınız, bu yüzden gerçekten kafa karıştırıcı olmasa da yeni UI Gutenberg UI’ye oldukça garip hissediyoruz. En azından bence bu. Ama, Gutenberg tam olarak nedir? Gutenberg yeni bir varsayılan WordPress editörüdür. Bu geleneksel görsel/metin editörlerinden farklıdır; Gutenberg, birçok modern sayfa üreticisi gibi içerik blokları kullanıyor. Bu, klasik editörlerden daha sezgisel özelliklerle gönderilir, bu da multimedya içeriği hızlı bir şekilde oluşturabileceğiniz anlamına gelir. Şimdi, bir WordPress gönderisi veya sayfası ile çalıştığınız hızlı bir şekilde olağanüstü bir düzen hazırlayabilirsiniz. Ve bazı eklentilerle Gutenberg, Brzy, Elementor ve Divi gibi yerleşik WordPress sayfa yapımcılarıyla rekabet edebilir.
Tek zayıflık, sayfa yapımcılarının genellikle daha fazla özellik sunmasıdır, çünkü bunlar temelde sayfa yapımcılarıdır! Aynı zamanda, Gutenberg hala çok genç ve sadece bir blok editörünün hızla büyümesini bekleyebilirsiniz. Bugünkü gönderide, Gutenberg editörü ile bir WordPress gönderisi yapmak için eğleneceğiz. Pro gibi içerik oluşturmak için Gutenberg’i kullanabilmeniz için her ayrıntıyı ve küçük özellikleri tartışmayı amaçlıyorum. Hazır mısın? Eğer öyleyse, bir WordPress gönderisi yapalım. Gutenberg ile WordPress Gönderimi Nasıl Yapılır WordPress sitesini çalıştırırsanız, sayfadan daha fazla yayın yapabilirsiniz. Bir sonraki bölümde, en başından beri Gutenberg’de bir WordPress yazısı yaptık. Umarım Gutenberg’i test ederken yaptığım gibi eğlenirsiniz. Yoldan çıktı, aşağıdaki ekran görüntülerinde vurguladığımız gibi yayınlara geziniyor.
Sizi doğrudan aşağıda gösterilen Gutenberg editörüne getirin.
Oldukça temiz, ha? Şimdi, gömleğin kolunu yırtalım ve iş yapmaya başlayalım. Başlığı ekle Sağlam bir başlık olmadan yayınlar yazamazsınız. İyi olan şey, Gutenberg’in başlığı eklemeyi çok kolaylaştırmasıdır. Gördüğünüz ilk blok, yukarıdaki resimde detaylandırdığımız için belgenin üst kısmındaki başlıktır. Gönderiniz için bir başlık oluşturmak için bloğu yazın. A, B, C kadar basit Kalıcı bir bağlantı düzenlemeniz mi gerekiyor? Bunu, aşağıda gösterildiği gibi Düzenle düğmesine tıklayarak başlık bloğunda kolayca yapabilirsiniz. Başlığınızı ekledikten sonra, yeni bir satır başlatmak için Enter tuşuna basın. Oh evet, Gutenberg klasik WordPress editöründe sevdiğiniz orijinal navigasyonu koruyor. Bir Bargüman Paragraf Enter düğmesi eklemek, yukarıda gösterildiği gibi yeni bir paragraf bloğu oluşturur. Herhangi bir metin yazmadan önce, blok size bazı seçenekler sunar. Daha fazla ayrıntı için aşağıda numaralandırılan numaraya bakın.
Notlar. Yapabilirsiniz: Yeni paragraf bloğunu başka bir bloğa, örneğin resimler, başlıklar, kapaklar, galeriler, wooocommerce, formlar vb. Paragraf bloklarını görüntü bloklarına dönüştürmek için kısayolları kullanın Paragraf bloğunu H2, H3 ve H4 gibi baş blok olarak değiştirin
Kapak resmini kapsayacak şekilde paragraf bloğunu değiştirin
İllüstrasyon amacıyla, gönderime giriş için ilk paragrafı sipariş edeceğim. Birkaç metin ekledikten sonra, biçimlendirme araç çubuğu aşağıda gösterildiği gibi görünür.
Biçimlendirme aracı sayesinde şunları yapabilirsiniz:
Paragrafı daha önce biçimlendirilmiş ayet, alıntı, başlık, liste, kod ve metne kapatın
Kalın, eğik, karalama ve alt çizgiler içeriği Metni sola, sağa, orta ve düzleştirmeye yaymak
Yeni sekmede de açılabilecek bir bağlantı ekleyin
Bir dizi resim ekleyin (evet, var!)
Blok Ayarlarını Gizle
Bloğu ikiye katlamak
Geçerli bloktan önce veya sonra bloğu girin (bizim durumumuzda, bu ilk paragraftır, bu yüzden daha önce hiçbir şey eklemez, ancak daha sonra.) İsterseniz ilk paragraftan önce bir kapak görüntü bloğu ekleyebilirsiniz, çünkü görünüyor çünkü çok iyi
Bloğu html olarak düzenleyin
Başka bir gönderide kullanabilmeniz için yeniden kullanılabilecek bloğa geçerli bloğu ekleyin
Bloğu tamamen çıkarın
Daha sonra paragraf bloğunu, aşağıda gösterildiği gibi yan çubuk menüsünde bulunan blok sekmesinde bulunan seçeneklerle ayarlayabilirsiniz. Yukarıdaki resim hakkında bazı notlar:
Tüm seçenekleri görmek ve ayarları engellemek için buradaki blok sekmesini seçin
Yazı tipi boyutunu seçin ve buradaki damla kapağını etkinleştirin
Paragrafınıza arka plan rengini ekleyin. Çizim amacıyla maviye ayarladım. Metnin rengini de ayarlayabilirsiniz. Her iki durumda da, sınırsız özel renkler ekleyebilirsiniz Buraya özel bir CSS sınıfı ekleyebilirsiniz, yani bloğunuza ek CSS stilleri ekleyebilirsiniz
Gutenberg editöründe mavi arka plan ve damla kapağı uygulandı
Yan taraftaki belge sekmeleri Yan çubuk menüsünde başka bir sekme var; Aşağıda gösterildiği gibi belge sekmesi.
Burada, yukarıdaki resim için notlar:
Belge sekmesine geçmek için buraya tıklayın
Burada yayınları planlayabilir, kişisel veya kamuya açık görünürlüğü yönetebilir, yayınları bekleyen inceleme durumuna ayarlayabilir, gönderinin biçimini seçebilir ve sabit bir gönderi yapabilirsiniz
Bu bölüm, kalıcı bağlantınızı düzenlemenizi sağlar Buradan yeni bir kategori seçebilir veya oluşturabilirsiniz
Etiketi gönderinize ekleyin
Üstün bir resim ayarlayın
Manuel Alıntı Yap
Yorumlara izin verin, pingback ve geri izleyin
Gördüğünüz gibi, paragraf bloklarını (ve tüm gönderi) istediğiniz şekilde tasarlamak için birçok seçeneğiniz var. Bu arada, yakında öğreneceğimiz gibi farklı bloklar farklı düzenlemelerle geliyor.
İlk paragraftan sonra, yeni bir satır (veya paragraf bloğu) oluşturmak için Enter düğmesine tekrar basın. Şimdi, ilk paragrafın altına bir resim ekleyelim. Gutenberg’de resim ekleyin bin kelime ve resimsiz blog yazıları, sıkıcı. Gutenberg kullanarak WordPress yayınınıza resim eklemek için birkaç seçeneğiniz var. Birkaç dakika önce Enter düğmesine bastığınızda, yeni bir paragraf bloğunu tetiklediniz. Gutenberg sezgisel olduğundan, aşağıdaki resimde vurguladığımız gibi artı simgesine (+), görüntüleri veya kaplamayı tıklayarak görüntüler ekleyebilirsiniz.
Bazı notlar:
Artı simgesinden (+) resimler ekleyebilirsiniz
Burada, görüntüleri kolayca ekleyebilirsiniz
Bu seçenek kapak resimleri eklemenize izin verir (bu genellikle diğer fotoğraflardan daha büyüktür. Ayrıca, kapak resmine metin ekleyebilirsiniz, btw) Lütfen ve artı simgelerinden birini (+) tıklayın. Ardından, aşağıda gösterildiği gibi Resim sekmesini tıklayın. Aşağıdaki ekran görüntüsünde gösterilen resim bloğunu içeren resim sekmesini tıklayın.
Görüntü blokları, resim yüklemenize veya URL’lerden veya medya kitaplıklarından eklemenize olanak tanır. Bu süreçte, medya ekranı ayarları aracılığıyla alt metin (SEO için önemli), bilgi ve açıklama ekleyebilir veya aşağıdaki resimde gösterildiği gibi tarafları engelleyebilirsiniz. Sıradan medya ayarları …
… ve görüntü bloğu ayarları.
Bugün burada bir şeyler öğreniyor musunuz? Umarım. Devam edelim. Görüntünüzü ekledikten sonra Gutenberg hemen aşağıya yeni bir paragraf bloğu ekledi. İstediğiniz her şeyi ekleyebilirsiniz, ancak illüstrasyon amacıyla birkaç metin ve ardından altına düğme eklerim. İndirilen dosyalar nasıl eklenir, örneğin PDF’ler, resimler, videolar vb. Gutenberg, WordPress yayınınıza veya sayfanıza indirilebilecek dosyaları eklemeyi çok kolaylaştırır. Yeni paragraf bloğunda, artı simgesini (+) tıklayın, genel bloğa gidin ve aşağıda vurgulandığımız gibi Dosya sekmesine basın. Aşağıdaki bloğu başlatmayı yapın:
Block dosyalarından yeni dosyalar yükleyebilir veya medya kitaplığınızdan ekleyebilirsiniz. Dosyanızı ekledikten sonra Gutenberg, aşağıdaki resimde gösterildiği gibi otomatik olarak sevimli bir indirme düğmesi ekler. Seçimlerle oynayabilirsiniz. Örneğin, “Ücretsiz PDF Gutenberg Kontrol Listesi” başlıkını düzenleyebilir/silebilirsiniz ve indir düğmesi. CSS sınıfını bloğa ekleyebilir ve isteklerinize göre düzenleyebilirsiniz. Gutenberg’e bir teklif ekleyerek, bir teklif ekleyelim çünkü büyüleyici, ilginç ve eve yönelmenize yardımcı olurlar. Yeni satırda, artı işaretini (+) tıklayın, ortak bloklara gidin ve aşağıda gösterildiği gibi Alıntı sekmesine basın. Bunu yapmak, aşağıdaki ekran görüntülerinde vurguladığımız gibi gönderinize bir teklif bloğu ekleyecektir. Yukarıdaki sağ kenar çubuğundaki teklif bloğunun ayarına dikkat ediyor musunuz? Teklifinizi eklemek için bloğu yazın. Bu benim sonucum.
Olağanüstü görünüyor, değil mi? Gutenberg Gutenberg’e Emmeds Media eklemek, YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare vb. İçeriği gömmek için artı (+) simgesini tıklayın, Semanan’a gidin ve siteyi seçin. Örneğin, YouTube’u aşağıda gösterildiği gibi istiyorum. Ardından, YouTube Video URL’sini kopyalayın ve aşağıdaki resimde gösterildiği gibi Gömme düğmesini tıklayın.
Pime basar basmaz Gutenberg, aşağıda vurgulandığımız gibi bağlantıyı otomatik olarak videoya sakladı. Yol boyunca sorunsuz bir şekilde yelken. Şimdi, harekete geçmeye davet etmek için mükemmel bağımsız düğmeyi ekleyelim (CTA). Gutenberg’e bir düğme nasıl eklenir. Şu anda bir blok eklemekte sorun yaşamamanız gerekir. Plus (+) işaretini tıklayın ve bloğunuzu seçin. Bundan daha kolay bir şey yok. Peki, nasıl bir düğme ekleriz? Yeni satırda (veya blokta) artı simgesini (+) tıklayın, düzen öğelerine gidin ve aşağıda gösterildiği gibi düğme sekmesini tıklayın. Aşağıda açıkladığımız gibi düğmeyi engellemenizi sağlar. Yukarıdaki resimden de görebileceğiniz gibi, düğme metnini düzenleyebilir ve bir bağlantı ekleyebilirsiniz. Ayrıca, düğmeyi ekranın sağındaki yan çubuk menüsünden ayarlayabilirsiniz. Birkaç tıklamadan sonra, ben de bu. Bu arada, düğmenizde okunması zor bir renk kombinasyonu kullanırsanız, Gutenberg hemen size söyleyecektir. İyi? Gutenberg’e güzel bir düğme ile bir sütun nasıl eklenir, birkaç sütun ekleyelim. İki sütun ekleyeceğim, bu yüzden dikkatlice takip edin. Yapılması gereken budur. Artı simgesini (+) tıklayın, düzen öğelerini işaret edin ve aşağıdaki resimde gösterildiği gibi Sütunlar sekmesini tıklayın. Gutenberg varsayılan olarak iki sütun ekledi. Aşağıdaki resme bakın ve unutmayın, sütuna içerik ekledim. Bu beni yaptı: Birkaç saniye iş için fena değil. Ama belki bir sütun yapmak istemezsiniz. Belki görüntüyü birkaç metnin yanında görüntülemek istersiniz. Bunun için bir blok var mı? Evet burada! Gutenberg’deki metnin yanına bir resim nasıl eklenir? Birkaç metnin yanına bir resim eklemek ister misiniz? Eğer öyleyse, aşağıdaki bölümü beğeneceksiniz. Her zamanki gibi, Icon Plus (+) ‘ı tıklayın, düzen öğelerine gidin ve aşağıda gösterildiği gibi Medya ve Metin’i tıklayın. Aşağıda gösterildiği gibi bir medya bloğu ve metin göreceksiniz. Ardından, resimlerinizi/videolarınızı/medyalarınızı yükleyin veya medya kitaplığından bir tane ekleyin. Bundan sonra, metninizi aşağıdaki resimde gösterildiği gibi medyanın yanına ekleyin. Bir medya bloğu ve metinle oynadım ve aşağıdakileri buldum. Aklın; Orada da düğmeye basmayı başardım Oh, bu arka! Size ön uç göstereyim. Burada: Çok profesyonel görünüyor, değil mi? Gutenberg editörü ile ne kadar başarabileceğinizi kesinlikle hayal edebilirsiniz. Üçüncü -Party Gutenberg Block WordPress geliştiricileri, Gutenberg editörü ile uyumlu bir tema ve eklenti oluşturmakla ilgileniyor. Bazı örnekler Wooocommerce, Jetpack ve Yoast SEO’dur. Örneğin, WordPress yayınınıza bir WooCommerce bloğu ekleyebilirsiniz. İlk olarak, woocommerce yüklemeli ve etkinleştirmelisiniz. Ardından, yeni satırda, artı simgesini (+) tıklayın, WooCommerce’e gidin 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 yayınlar ve iyi sayfalar yapabileceğiniz anlamına gelir. Diğer önde gelen bloklar 2.000’den fazla kelimeye ulaştı ve bunu yapmaya devam edersek, sonunda tüm e-kitapları yazacağız. Benim duam, artık Hıçkırık olmadan Gutenberg’i kullanabilmeniz. Ayrıca, mevcut diğer blokların bir listesi. Widget – Widget’ınızdan blog gönderisine içerik ekleyebilirsiniz Kısa Kod – Yine de orijinal WordPress kısa kodunu kullanabilirsiniz Klasik – Eski içeriğinizi saklayan harika bloklar More – Bu blok daha önce tam okunan etiket olarak biliniyordu Sayfa Break, Ayırıcı, Aralayıcı Html özel, pullquote, masa HTML5 Galerisi ve Ses/Video Ve kullandığınız temaya ve eklentiye bağlı olarak daha fazlası Bunun yanı sıra: Bir WordPress sayfası yapmak birkaç dakika depolayan bir gönderi yapmaya benzer, bu yüzden bugün tartışmayacağız.Fast Gutenberg Hacking & Gutenberg klavye kısayolu, kolaylaştıran birkaç hack ve klavye kısayolu ile birlikte gelir.Örneğin, paragraf bloğuna “/” yazıyorsanız, blok listesi görüntülenir.Eğimli çizgi tersine çevrildikten (/) sonra bloğun başlığını yazarak belirli bir blok bile seçebilirsiniz, örneğin “/görüntü” yazma, diğer görüntülerle ilgili bloklar arasında blok görüntüleri görüntüler.Daha fazla ayrıntı için aşağıdaki resme bakın. Klavye Presyonu: Kullanılabilir tüm kısayolları görmek için Windows’ta Shift + Alt + H tuşuna ve Mac’te + Ctrl + H’ye basın.Belgenin üstünde, aşağıda gösterildiği gibi simgeye (i) tıklayarak belgenin yapısını görebilirsiniz.İyi.İnanılmaz pürüzsüz.Oh, ve bu arada, “Başarısız Güncelleme Hataları” genellikle titrek İnternet bağlantısı nedeniyle oluşur
