WordPress Gutenberg Blokları Açıklaması

WordPress Gutenberg blokları, WordPress'teki yazıları ve sayfaları düzenlemenin tamamen yeni bir yoludur. WordPress 5.0 ile başlayarak, her WordPress kullanıcısının WordPress Gutenberg bloklarını nasıl kullanacağını öğrenmesi gerekecektir. Bu eğitimde, yeni blokların yeni Gutenberg WordPress Düzenleyicisi ile nasıl çalıştığını açıklıyoruz.

Daha ileri gitmeden önce WordPress Gutenberg Ultimate Kılavuzumuza göz atmalısınız. Bu gönderi ve e-kitap, bu nasıl yapılır'ın zaten bildiğinizi varsaydığı bilgileri kapsar. Klasik Düzenleyici eklentisi yalnızca resmi olarak 31 Aralık 2021'e kadar desteklenecektir, bu nedenle kaçınılmaz olanı yalnızca bu kadar uzun süre erteleyebilirsiniz.

Şahsen, yeni düzenleyiciyi kullanmayı seviyorum ve sitelerinizde sayfalar ve gönderiler oluşturmak için WordPress Gutenberg'in blok konseptini nasıl kullanacağınızı öğrenmekten keyif alacağınızı düşünüyorum.

WordPress Gutenberg Blokları nedir?

Gutenberg blokları, gönderinize belirli bir içerik türü eklemenize ve ardından bunları diğer bloklardan bağımsız olarak düzenlemenize olanak tanır. Sadece bir tıklama ve bir fare sürüklemesi kullanarak, bir yazının veya sayfanın yapısını tamamen yeniden düzenleyebilirsiniz. Başka bir bonus mu? Bloklar, herhangi bir kod bilmenize gerek kalmadan zengin gönderiler oluşturmanıza olanak tanır.

10 WordPress Gutenberg Ortak Bloğu

1. Listeler

Liste bloğunu kullanarak sayfanıza veya yayınınıza bir liste ekleyin.

Blok Seçenekleri

1. Sırasız bir listeye dönüştürün.
2. Sıralı bir listeye dönüştürün.
3. Çıkıntılı liste öğesi.
4. Girinti listesi öğesi.

Numaralandırılmış bir listede, karışık bir liste oluşturmak için bir liste öğesini girintileyebilir ve dönüştürebilirsiniz.

2. Paragraf

Yeni bir paragraf eklemek için Paragraf bloğunu kullanın.

Blok Seçenekleri

1. Sola hizalamak
2. Merkezi hizalama
3. Sağa Hizala
4. Gözü pek
5. İtalik
6. Bağlantı
7. üstü çizili
8. Metin Ayarları
9. Arka plan rengi
10. Metin Rengi

Gutenberg Düzenleyicisi, temel metin değişikliklerini kolay ve hızlı bir şekilde yapmanızı sağlar. Yazı tipi boyutunu ancak önceden yapılandırılmış küçük, normal, orta, büyük ve çok büyük kullanarak değiştirebilirsiniz.

Yazı tipi boyutunu pikselleri kullanarak da ayarlayabilirsiniz.

Renk Ayarları, düzenleyiciden ayrılmadan veya kendi CSS'nizi eklemeden önemli metinleri öne çıkarmanıza olanak tanır.

3. Başlık

Gönderinize bir başlık eklemek için Başlık bloğunu kullanın.

1. Başlık Boyutunu Seçin
2. Metin biçimlendirme
3. Başlık Boyutu
4. Metni Hizala

4. Dosya

Bir FIle bloğu kullanarak dosyayı görüntülemek için bir bağlantı oluşturabilir veya dosyayı indirmek için bir düğme oluşturabilirsiniz.

1. Blok Türünü Dönüştür
2. Sola hizalamak
3. Merkezi hizalama
4. Sağa Hizala
5. Geniş Genişlik
6. Tam genişlik
7. Dosya düzenle
8. Metin Bağlantısı Ayarları
9. Düğme Ayarlarını İndir

5. Alıntı

Alıntı bloğu, sayfanıza veya yayınınıza kolayca bir alıntı ve alıntı eklemenize olanak tanır.

1. Alıntı Hizalama
2. Metin biçimlendirme
3. Alıntı Stilleri

Alıntı bloğu ayarları, stili seçmenize ve bloğu beğeninize göre hizalamanıza olanak tanır.

6. Galeri

Bir grup resimden bir galeri oluşturun.

1. Galeri Hizalama
2. Galeriyi Düzenle
3. Sütun Sayısını Ayarlayın
4. Görüntüleri Kırp Aç/Kapat

Galeri bloğu, resimleri sayfanıza veya yayınınıza sürükleyip bırakmanıza izin verir ve Gutenberg editörü sizin için otomatik olarak bir Galeri oluşturur.

Galeriyi Düzenle seçeneği, resim yazıları veya yeni resimler eklemenizi ve resimlerin sırasını yeniden düzenlemenizi sağlar.

Görüntüleri Kırp düğmesi, küçük resimleri aynı boyutta yapmak için görüntüleri kırpmaya çalışır, bu da istenenden daha az sonuç verebilir. Galeri bloğunu kullanırken, benzer bir boyutu paylaşan resimler eklemek isteyeceksiniz.

7. Görüntü

Gönderinize bir resim ekleyin.

1. Resmi Hizala
2. Resmi Düzenle
3. alternatif metin
4. Resim Boyutunu Seç
5. Özel Görüntü Boyutu Seçin
6. Bağlantı Ayarları

Artık Medial Libray'inize girmeden resim ekleyebilir, resmi doğrudan gönderinize sürükleyip bırakabilirsiniz.

Görüntülenen görüntüyü değiştirmeniz gerekirse, Görüntüyü Düzenle seçeneğine tıklayabilirsiniz. Düzenleyiciden ayrılmadan da görüntünün Alternatif Metni'ni ayarlayabilirsiniz.

Bir görüntü eklerken, otomatik olarak biçimlendirilmiş üç boyuttan birini seçebilirsiniz: Küçük Resim, Orta veya Tam.

Görüntü için özel bir Genişlik ve Yükseklik ayarlamak için Görüntü Boyutu ayarlarını da kullanabilirsiniz.

8. Kapak Resmi

Kapak Resmi, blog gönderiniz için kullanılacak resmi ayarlamanıza olanak tanır.

1. Resmi Hizala
2. Metni Hizala
3. Kapak bloğu için Kullanılan Resmi Değiştir
4. Sabit Arka Planı Açın ve Kapatın
5. Kaplama Rengi
6. Arka Plan Opaklığı

Kullandığınız temaya bağlı olarak, yazınızla birlikte bir kapak resmi görüntülenerek potansiyel okuyucular için daha davetkar hale gelir.

Kaplama rengini ve kaplamanın opaklığını seçmek için Kaplama ayarlarını kullanabilirsiniz.

9. Ses

Gönderinize bir ses klibi ekleyin.

1. Ses Bloğu Hizala
2. Ses Bloğunu Düzenle
3. Otomatik Oynatmayı ve Döngüyü Açmayı ve Kapatmayı Değiştirin
4. Ön Yükleme Seçenekleri

Ön Yükleme seçeneği, siteyi ziyaret eden kişiler için neyin önceden yüklendiğini kontrol etmenizi sağlar.

10. Video

Gönderinize bir video ekleyin.

1. Videoyu Hizala
2. Videoyu Değiştir
3. Otomatik Oynat, Döngü, Sessiz ve Oynatma Denetimlerini Açın ve Kapatın
4. Ön Yükleme Seçeneklerini Seçin
5. Video için Poster Resmi Ekleyin

7 WordPress Gutenberg Biçimlendirme Bloğu

1. Özel HTML

Bir WordPress Gutenberg Bloğunda tam olarak ihtiyacınız olanı bulamıyor musunuz? HTML'nizi siteye eklemek için Özel HTML bloğunu kullanın.

1. HTML bloğunu görüntüle
2. HTML'nizi önizleyin

2. Alıntıyı Çekin

Gönderiden bir alıntıya dikkat çekmek için bir Çekme Alıntısı ekleyin.

1. Alıntıyı Hizala
2. Metni Biçimlendir
3. Alıntı Stilini Seçin
4. Alıntı Rengi Seç
5. Metin Rengi Seç

3. Klasik Editör

Klasik WYSIWYG düzenleyicisini kullanın.

4. Tablo

Sayfanıza veya yayınınıza bir tablo ekleyin.

1. Tabloyu Hizala
2. Tabloyu Değiştir
3. Metni Biçimlendir
4. Tablo Stilini Seçin
5. Sabit Genişlik Hücrelerini Açma ve Kapatma
6. Satır ve Sütun Sayısını Seçin ve Tablo Oluşturun
7. Oluşturulan Tablo

Bir Tablo bloğu eklediğinizde, tabloyu oluşturmadan önce istediğiniz sayıda sütun ve satır seçmeniz gerekecektir.

Tablo oluşturulduktan sonra sütun ve satır ekleyip kaldırabileceksiniz.

5. Ayet

Sitenize bir şiir veya şarkıdan bir ayet ekleyin.

1. Ayet Bloğu Hizala
2. Metni Biçimlendir

6. Kod

Bir gönderiye veya sayfaya bir kod bloğu ekleyin.

Kod parçacığının ziyaretçilerinize nasıl görüneceği aşağıda açıklanmıştır.

7. Önceden biçimlendirilmiş

Sitenize Önceden Biçimlendirilmiş metin ekleyin.

İşte sitenizin ön ucundaki Önceden Biçimlendirilmiş blok.

7 WordPress Gutenberg Düzen Öğesi Bloğu

1. Ara parça

Bloklar arasına biraz boşluk ekleyin.

Bloklar arasında istenen miktarda beyaz boşluk elde etmek için boşluk bloğunu yukarı ve aşağı kaydırın.

Daha çok alan

2. Sütun

Sütun bloğunu kullanarak içeriği düzenleyin.

1. Sütunları Hizala Bloğu
2. Metni Biçimlendir
3. Yazı Tipi Boyutunu Ayarlayın ve Gömmeyi Etkinleştirin
4. Metni ve Arka Plan Rengini Ayarlayın

3 tane daha

Bir gönderi için Ana Sayfa veya Blog sayfanızda bir bilgi oluşturun.

1. Tease metninin asıl gönderide gösterilmesini isteyip istemediğinizi seçin.

Blog sayfasında göreceğiniz şey bu

Ve işte Teaser'ı Gizle seçeneği açık olduğunda gönderinin sayfasında göreceğiniz şey.

4. Düğme

Bir Düğme bloğu ile bir harekete geçirici mesaj ekleyin.

1. Hizala Düğmesi
2. Metni Biçimlendir
3. Düğme Stilini Seç
4. Metin ve Arka Plan Rengini Seçin

Bir bağlantı oluşturmak için düğmeye bir URL ekleyebilirsiniz.

5. Medya Metni

1. Geniş Genişlik ve Tam Genişlik Arasında Geçiş Yap
2. Medyayı Metnin Sağında veya Solunda Göster
3. Resmi veya Videoyu Değiştir
4. Mobil için Yığınlamayı Aç/Kapat ve Görüntüye Alternatif Metin Ekle
5. Arka Plan Rengini Değiştir

Medyanın veya metnin kullandığı gayrimenkul miktarını değiştirmek için kaydırıcıyı kullanın. Yazı tipi boyutunu ve rengini ayarlamak için metin kutusunu seçin.

6. Sayfa Sonu

Bir gönderiyi sayfalara ayırın.

7. Ayırıcı

Yatay bir ayırıcıyla fikirler veya bölümler arasında bir mola oluşturun.

5 WordPress Gutenberg Widget Bloğu

1. Son Gönderiler

En Son Gönderi bloğunu kullanarak son gönderilere bağlantılar içeren bir pencere öğesi ekleyebilirsiniz.

1. Widget'ı Hizala
2. Listeleri veya Izgaraları Kullanarak Gönderileri Görüntüleme
3. Gönderilerin Nasıl Sipariş Edileceğini Seçin
4. Görüntülenecek Gönderi Kategorisini Seçin
5. Görüntülenecek Gönderi Sayısı
6. Gönderi Tarihini Açın ve Kapatın

2. Kısa kod

Kısa Kod bloğunu kullanarak mevcut bir eklentinin kısa kodunu ekleyin.

3. Arşivler.

Sitenizin arşivlerine bağlantı içeren bir widget ekleyin.

1. Widget'ı Hizala
2. Açılır ve Gönderi Sayılarını Açın ve Kapatın

4. Kategoriler

Gönderi kategorilerine bağlanan bir widget ekleyin.

1. Widget'ı Hizala
2. Görüntü ayarları

5. Yorumlar

Yorumlar bloğu ile en son yorumları içeren bir widget görüntüleyin.

1. Widget'ı Hizala
2. Görüntü ayarları

34 WordPress Gutenberg Gömme Blokları

WordPress Gutenberg blokları, bir ton farklı kaynaktan bağlantı yerleştirmeyi de kolaylaştırır. Şu anda resmi olarak desteklenen 34 yerleştirme var, genellikle aynı şekilde davranacakları için her bir yerleştirmeyi ayrı ayrı ele almayacağız. Ancak, şu anda mevcut olan gömme bloklarını listeleyeceğiz.

• WordPress
• Göm
• Youtube
• Spotify
• ekran görüntüsü
• heyecan
• Facebook
• Instagram
• Ses bulutu
• Flickr
• video
• animasyon
• bulutlanma
• KolejMizah
• Günlük hareket
• Komik ya da Öl
• hulu
• imgur
• Issuu
• Kickstarter
• Meetup.com
• karışık bulut
• fotoğraf kovası
• Pollbaba
• Reddit
• ReverbNation
• karalama
• Slayt paylaşımı
• Kendini beğenmişKupa
• Hoparlör Destesi
• TED
• Tumblr
• VideoBasın
• WordPress.tv

Bonus: 7 Gutenberg Editör Kısayolu

İş akışıma klavye kısayolları eklemeyi her zaman severim, bir gönderiyi bitirmek için gereken süreyi azaltabilirler.

Kısa kod	Mac	Linux/Windows
Kısayolu Görüntüle	Cmd+Seçenek+H	Üst Karakter+Alt+H
Ayarlar Kenar Çubuğunu Göster/Gizle	Üst Karakter+Cmd+,	Ctrl+Üst Karakter+,
Blok Gezinme Menüsünü Açın	Ctrl+Seçenek+O	Üst Karakter+Alt+O
Editörün Sonraki Bölümüne Git	Ctrl+` veya Shift+Seçenekler+N	Ctrl+` veya Shift+Alt+N
Önceki Bölüme Git Editörün	Ctrl+ÜstKrktr+` veya Shift+Option+P	Ctrl+ÜstKrktr+` veya Üst Karakter+Alt+P
En Yakın Araç Çubuğuna gidin	Seçenek+F10	Alt+F10
Görsel Düzenleyici ve Kod Düzenleyici arasında geçiş yapın	Cmd+Üst Karakter+Seçenek+M	Ctrl+Üst Karakter+Alt+M

WordPress Gutenberg Blokları Özeti

WordPress 5.0, yeni düzenleyicide kullanabileceğiniz çok çeşitli bloklara sahiptir, ancak gelecekte yeni blok türleri görmeyi beklemektedir. WordPress, üçüncü taraf geliştiricilerin kendi bloklarını oluşturmalarına izin vermek için Blok API'sini oluşturdu. WordPress topluluğunun neler yaratabileceğini görmek beni heyecanlandırıyor!