Geliştiriciler için WordPress Gutenberg Eğitimi – Tam Bir Web Sitesi Tasarlayın

Burada, geliştiriciler için WordPress Gutenberg eğitimini ele alıyoruz. En devrim niteliğindeki güncellemeyi tanıttıktan sonra, çoğu WordPress geliştiricisi bununla mücadele ediyor. Web sitesi oluşturucularının, müşterileri için muhteşem web sitesi tasarlama konusunda onlara çok yardımcı olduğunu anlıyoruz.

Bununla birlikte, bazen inşaatçılar web sitesinin yüklenmesini yavaşlatır ve Google'dan yapılan son güncellemelerde, daha düşük yükleme hızına sahip web siteleri önemli ölçüde düşer. Öte yandan, Gutenberg'in basitliği ile artık onu kullanarak çok daha hızlı yüklenen herhangi bir web sitesi oluşturabilirsiniz.

Johannes Gensfleisch zur Laden zum Gutenberg bir Alman kuyumcu, mucit, yazıcı bekledi! İnsan Gutenberg'den bahsetmiyoruz; WordPress platformundaki harika blok düzenleyici Gutenberg'den bahsediyoruz.

Bu, web sitesi oluşturma deneyimini fırtına gibi alan WordPress platformunun en son blok editörüdür. Gutenberg ile bir web sitesini düzenlemek ve özelleştirmek hiç olmadığı kadar kolay.

Gutenberg ile sıfırdan bir web sitesi de oluşturabilirsiniz. Ve Gutenberg'de çalışmak için kodlama bilmenize gerek yok. Gutenberg, acemi olsanız bile bir web sitesi geliştirmenize yardımcı olacak süper kolay özelliklerle birlikte gelir.

Ancak, Gutenberg WordPress blok düzenleyicisi ile bir web sitesi oluşturmanın ayrıntılı sürecini biliyorsanız, tüm deneyim sizin için daha kolay hale gelecektir. Bu düşünceyle, geliştiriciler için ayrıntılı bir WordPress Gutenberg öğreticisi yazacağız.

Bir web sitesi oluşturmak için Gutenberg'i nasıl kullanabileceğinizin ayrıntılarına girmeden önce, Gutenberg'in yararları hakkında daha fazla tartışmak istiyoruz. Gutenberg'in önemine ve geliştiriciler için gerçekten nasıl yararlı olabileceğine ışık tutacaktır.

Neden Bir Web Sitesi Oluşturmak İçin Gutenberg'i Kullanmalısınız?

Aşağıda, bir web sitesi oluşturmak için Gutenberg kullanmanın neden önemli olduğunu tartışacağız. Bir geliştiricinin Gutenberg kullanarak elde edeceği faydaları göstereceğiz.

Kolay Özelleştirme

Gutenberg ile web sitesinin özelleştirilmesi çok kolay hale getirildi. Gutenberg, web sitenizi kolayca özelleştirmenize yardımcı olacak, gezinmesi kolay birçok özellik ile birlikte gelir. Düşünün, tek bir kod satırı yazmanıza gerek yok ve yine de harika bir web sitesine sahip oluyorsunuz. Bu, Gutenberg'in yardımıyla mümkün olabilir.

Güçlü Eklentiler

Gutenberg birçok güçlü eklentiyle birlikte gelir. Bu eklentiler, tüm Gutenberg deneyiminde gezinmeyi kolaylaştırır. Bu eklentiler, sıfırdan bir web sitesi tasarlarken çok önemli olabilecek farklı özelliklere sahiptir. Uygun eklentilerin entegrasyonu ile kolaylıkla çarpıcı bir web sitesi oluşturabileceksiniz. Örneğin, bu yazıda, Gutenberg ile birlikte Araç Seti Blokları gibi bir aracın nasıl kullanılabileceğini ve kaliteli bir web sitesi oluşturulabileceğini göstereceğiz.

Basit İş Akışı

Gutenberg ile tüm iş akışı çok sorunsuz olacak. Editör, işleri herkes için kolaylaştırmak üzere tasarlanmıştır. Eklentilerden gelen farklı özellikler ve ek seçenekler ile çok basit ve yapılandırılmış bir iş akışına sahip olacaksınız.

Geliştirici Olmayanlar Dostu

Gutenberg ile geliştirici olmayanlar da fayda sağlayabilir. Editörün genel süreci, geliştirici olmayanların web tasarımına girmesini sağlar. Birçok özellik ve blok ile, kodlamayı bilmiyor olsanız bile, yine de kaliteli bir web sitesi ile karşılaşabilirsiniz.

WordPress Uyumluluğu

Gutenberg'in WordPress ile uyumluluğu çok belirgindir. Aracın genel iş akışı da WordPress'e oldukça benzer. WordPress ile iş akışındaki benzerlik, Gutenberg'i hemen popüler hale getirdi. Öyle ki birçok tema geliştiricisi, yalnızca Gutenberg ile uyumlu temalar oluşturmaya başladı. WordPress ile genel jöle için Gutenberg, WordPress kullanan kişiler için baş editörlerden biri haline geldi.

Gutenberg'in WordPress topluluğunda güçlü bir editör olarak popülaritesinin artmasının nedenleri bunlar. Aşağıda, Gutenberg'in farklı unsurlarını ve kapsamlarını inceleyeceğiz ve Gutenberg editörünü kullanarak nasıl bir web sitesi oluşturabileceğiniz konusunda size rehberlik edeceğiz.

Blokları Kullanarak Özel Bir Web Sitesi Oluşturma Konusunda WordPress Gutenberg Eğitimi

Gutenberg ile özel bir web sitesinin nasıl oluşturulacağını pratik olarak göstermek için, anlamanızı kolaylaştıracak bir demo web sitesi geliştireceğiz. Tüm öğrenme deneyimi aşağıdaki konuları kapsayacaktır.

• WordPress'te blok eklemek, düzenlemek, taşımak ve silmek için Gutenberg nasıl kullanılır?
• Gutenberg kullanarak yan yana içerik nasıl görüntülenir?
• Farklı bloklar arasında gezinme konusunda Gutenberg WordPress öğreticisi.
• Gutenberg WordPress ile blok düzenleyicide alanları görüntüleyin.
• Bir resim galerisinin nasıl görüntüleneceği konusunda geliştiriciler için Gutenberg öğreticisi.
• Gutenberg WordPress ile blokları şekillendirmek için Gutenberg WordPress öğreticisi.
• Gutenberg WordPress kullanarak tipografi nasıl kontrol edilir?
• Geliştiriciler için şablon oluşturma konusunda WordPress Gutenberg öğreticileri.
• Özel arama eklemeyle ilgili Gutenberg WordPress öğreticisi.

Bu ayrıntılı öğeleri öğrenerek, Gutenberg WordPress ile nasıl bir web sitesi oluşturacağınızı anlamanız daha kolay olacaktır.

WordPress'te Blokları Eklemek, Düzenlemek, Taşımak ve Silmek için Gutenberg Nasıl Kullanılır?

İlk önce, bloklarınızı nasıl oluşturacağınız ve kaldıracağınızla ilgili temel bilgileri gözden geçirelim. Bloklar, web sitesi oluşturmanın tamamen yeni bir yoludur, ancak bunlara alışmak yalnızca birkaç dakika sürer.

1. Bir sayfada veya gönderide + düğmesini tıklayın.
2. Eklemek için kullanmak istediğiniz bloğu arayın ve tıklayın.

Gutenberg'in yapı taşları kelimenin tam anlamıyla bloklardır! İlk öğrenme, WordPress'te blok eklemek, düzenlemek, taşımak ve silmek için Gutenberg'in nasıl kullanılacağı hakkındadır. Bunu yapmak için aşağıdakileri yapmanız gerekecektir:

• Bir sayfada veya gönderide “+” düğmesine tıklayın.
• Eklemek istediğiniz bloğu arayın ve başlamak için üzerine tıklayın.

• İstediğiniz bloğu ekledikten sonra içeriği bloğa girebilirsiniz. Örneğin, bloga bir başlık ekleyebiliriz ve bu blok için bir başlık sağlayacağız.
• Herhangi bir bloğun soluna bakarsanız, blogun konumunu kontrol eden bir dizi tutamaç göreceksiniz. Gereksinimlerinize göre blok etrafında hareket etmek için bu kontrol setlerini kullanabilirsiniz.

• Sağ taraftaki kenar çubuğundan bloğu ihtiyacınıza göre değiştirebilirsiniz. Bu düzenleyiciden, seçtiğiniz bloğun rengini, boyutunu ve metin hizalamasını değiştirebilirsiniz.
• Üç nokta seçeneğine tıklayarak blok için ek seçenekler elde edebilirsiniz.

Gutenberg Kullanarak Yan Yana İçerik Nasıl Görüntülenir?

Bir web sitesi tasarlıyorsanız, içeriğini yan yana görüntülemek isteyebilirsiniz. Bunu Gutenberg blok düzenleyicisi ile kolayca yapabilirsiniz. İçeriği web sayfasında yan yana göstermek için Gutenberg'deki sütun bloğunu kullanmanızı öneririz. Bunu yapmak için aşağıdakileri yapmanız gerekecektir.

• + düğmesine tıklayın ve sütun bloklarını arayın.
• Bulduğunuzda, bloğa tıklayın, sütunlar sayfada görünecektir.

• Blok yerleştirdikten sonra içerikleriyle düzenlenebilen blokları yan yana görebileceksiniz.
• Sütun sayısını artırmak istiyorsanız, sütun bloğunu seçip sağ kenar çubuğundan sayıyı değiştirerek bunu kolayca yapabilirsiniz.
  

Farklı Bloklarda Gezinme Üzerine WordPress Gutenberg Eğitimi

Belirli bir blok üzerinde çalışıyorsanız ve özelleştirme için başka bir bloğa geçmek istiyorsanız, bunu düzenleyicinin en üstündeki Blok Gezinti düğmesi ile kolayca yapabilirsiniz. Ayrıntılı bir şablonla çalışırken ve farklı bloklar arasında gezinirken, diğer bloklar arasında gezinmek için gezinme menüsünü kullanabilirsiniz.

Gutenberg WordPress ile Blok Düzenleyicide Alanları Görüntüle

Farklı bloklar üzerinde çalışırken bloğun farklı alanlarına ek bilgiler ekleyebilirsiniz. Örneğin, başlık, gövde vb. gibi gönderi alanlarından bilgi ekleyebilirsiniz. Ayrıca, önceden oluşturduğunuz farklı bloklardan alanlar da ekleyebilirsiniz.

Genel olarak, alanları görüntülemenin üç ana yolu vardır; bunu aşağıda detaylandıracağız.

Bloğun Alan Değerinden İçerik Getirin

Toolset Blocks kitaplığına ait her blok, size alanlardan içerik ayarlama özgürlüğü verir. Bir gönderi alanından getirilecek herhangi bir başlık metni sağlayabilir veya Araç Takımı özel alanını kullanabilirsiniz. Bunu yapmak için aşağıdaki adımları izlemeniz gerekecek:

• Yeni bir İçerik Şablonu oluşturun.
• Görüntülenmesini tercih edeceğiniz özel gönderi türünü seçin.
• “+” düğmesini seçin
• Araç Seti Başlık bloğunu ekleyin

• Dinamik Başlık Metni kutusunu açın

• Görüntülenmesini tercih ettiğiniz gönderi alanını seçin. Verilen örnekte Post Title'ı seçtik.

Şu andan itibaren, belirli bir özel gönderi kategorisiyle ilgili tüm gönderilerin başlığını görme ve düzeltme olanağına sahip olacaksınız.

Alanları Bireysel Bloklar Olarak Görüntüle

Aşağıdaki adımlarla, alanları ayrı bloklar olarak da görüntüleyebileceksiniz. Bunu yapmak için aşağıda belirtilen basit adımları uygulamanız gerekecektir:

• Tek Alan Bloğu'nu seçin
• Alan Türü'nün altında bulunan sağ taraftaki çubuktan Standart Alan seçeneğini seçin.
• Gönderi Alanı seçeneğinin altından İçeriği Gönder (Gövde) seçeneğini seçin.

İlgili açıklama artık alanların her birinin altında görünecektir.

Tek Blokta Metinli Alanlar Arasında Bir Karışım Oluşturun

Web sayfasında bir alan ve metin karışımı oluşturmak istiyorsanız, bunu Gutenberg WordPress ile de yapabilirsiniz. Lütfen aşağıda belirtilen adımları uygulayınız.

• “+” düğmesine tıklayın
• Alanları ve Metin bloğunu seçin

• Dahil etmek istediğiniz etiketi yazın.
• Ayrıca ne tür içerik eklemek istediğinize ilişkin simgeler arasından seçim yapabilirsiniz. Örneğin, bir alan, form ve hatta koşullu çıktı ekleyebilirsiniz. Verilen örnekte bir alan ekledik.
• Ardından, eklemeyi tercih ettiğiniz içeriği seçin ve ardından Kısa Kod Ekle'ye tıklayın.

Bir Resim Galerisinin Nasıl Görüntüleneceğine İlişkin Geliştiriciler için WordPress Gutenberg Eğitimi

WordPress Gutenberg kullanarak bir resim galerisi oluşturmak istiyorsanız, bunu kolayca yapabilirsiniz. Bunu yapmak için şu adımları izleyin:

• Bloklar seçeneğinden Yinelenen Alan/galeri bloğunu seçin.
• Bloğu seçtikten sonra, hangi özel alan grubunu görüntülemeyi tercih edeceğinizi belirleyebilirsiniz.
• Ardından, görüntülenmesini istediğiniz özel alanı seçebilirsiniz.

Bunu yaptıktan sonra, web sayfanıza kolaylıkla bir resim galerisi ekleyebileceksiniz.

Gutenberg WordPress ile Styling Blocks için Gutenberg WordPress Eğitimi

Bloklarınızı şekillendirmek ve özelleştirmek, web tasarımının ayrılmaz bir parçasıdır. Gutenberg WordPress ile blokların stilini Gutenberg ile çok kolay bir şekilde yapabilirsiniz. Detaylandıracağımız rehberi takip ederek blogunuzun yazı tipini, rengini, arka planını ve kenar boşluklarını değiştirebilirsiniz.

Arayüzü Kullanarak Şekillendirme Blokları

• Özelleştirmek istediğiniz bloğu seçin.
• Kenar çubuğundan Stil Ayarları seçeneğini genişletin.
• Arka plan rengi, kenarlık, dolgu ve web sitesinin çok daha fazlası gibi farklı seçenekleri özelleştirebilirsiniz.

Konteyner Bloğunun Kullanılması

Araç Seti Bloklarını kullanıyorsanız kapsayıcı bloğuna erişebilirsiniz. Belirli blokları birlikte kategorize etmek ve tüm bu bloklar için belirli bir stil seçmek için bu seçeneği kullanabilirsiniz. Sağ taraftaki kenar çubuğundan, mevcut stil seçeneğiyle bloğunuzu stillendirme seçeneğine sahip olacaksınız. Bu seçenek, birden fazla bloğu birlikte şekillendiriyorsanız uygundur.

Gutenberg WordPress Kullanarak Tipografi Nasıl Kontrol Edilir?

Araç Seti Bloklarını kullanırken, web sitenizde görüntülenecek yazı tiplerini biçimlendirmek ve biçimlendirmek için Tipografi bölümüne gidin. Tipografi bölümünden, yazı tiplerinin aşağıdaki öğelerini özelleştirebilirsiniz.

• Yazı tipi, boyutu ve stili
• Büyük harf, büyük harf ve küçük harf seçenekleriyle metni dönüştürme
• Metinlerin rengini değiştirme
• Metinlere gölge ekleme

Geliştiriciler için Şablon Oluşturma Konusunda WordPress Gutenberg Eğitimleri.

Bir şablon, herhangi bir web sitesi için önemli bir unsurdur. Bu nedenle, web sitenizin şablonunu nereden özelleştirebileceğinizi bilmek çok önemlidir. Bir şablon oluşturmak, sayfanızın tüm gönderilerinin ve özel gönderilerinin şablondaki tasarım ve düzen tasarımını izleyeceği anlamına gelir. Belirli bir şablon oluşturmak için aşağıdakileri yapın:

• Araç Seti > Gösterge Tablosu seçeneğine gidin.
• Tasarlamak istediğiniz gönderi türü için İçerik Şablonu Oluştur'a tıklayın.
• Önceki sefere benzer şekilde, şablona alanlar ekleyerek başlayabilirsiniz. Örnekten, başlık, resim, tek alan blok alanı ve daha fazlasını içeren birkaç farklı bloğu nasıl eklediğimizi görebilirsiniz.

• Şablonu kaydedip yayınladıktan sonra, ilgili tüm gönderiler aynı tasarım ve düzene sahip olacaktır. Bu araç, birçok blok ve öğeyi birlikte özelleştiren bir şablon oluşturmaya yardımcı olur.

WordPress Gutenberg Eğitimi Özel Arama Ekleme

Web sitenize bir arama seçeneği ekleyerek ziyaretçileriniz içerikleri kolayca bulabilecekler. Aradıkları içeriği ve öğeleri aramak için bu arama seçeneğini kullanabilirler. Özel bir arama eklemek için aşağıdaki adımları uygulamanız gerekir:

• Görünüm bloğunu sayfanıza ekleyin.
• Görünüm Oluşturma Sihirbazı'nda arama seçeneğini etkinleştirin.

• Blokta, düzenleme alanından Arama Alanları ve Arama Düğmeleri ekleyebilirsiniz. Ayrıca gerekirse özelleştirebilirsiniz.

• Sağ kenar çubuğundan bu seçeneğe daha fazla alan ayarı, etiket ve stil ekleyebilirsiniz. Gerekli özelleştirmeyi tamamladığınızda, görsel olarak çekici bir arama bölümü elde edeceksiniz.

Bunlar, Gutenberg'i tamamen sıfırdan kullanarak bir web sitesi tasarlamak için atabileceğiniz farklı adımlardır. Eğiticiden bunun web siteniz için kullanımı kolay sayfa oluşturuculardan biri olduğunu görebilirsiniz. Geliştiriciler için WordPress Gutenberg Eğitimimizi uygularsanız, eskisi gibi herhangi bir web sitesini kolayca oluşturabileceğinize inanıyoruz.

Umarız makaleyi değerli ve faydalı bulmuşsunuzdur. Blogumuza göz atmayı unutmayın.