Özel bir web sitesi oluşturma konusunda WordPress Gutenberg eğitimi

Bu, yeni blok düzenleyicisini kullanarak WordPress web siteleri oluşturma konusunda önemli deneyime sahip web geliştiricileri tarafından yazılmış bir WordPress Gutenberg öğreticisidir.

Bu kılavuzda, içerik şablonları, arşivler ve özel bir arama içeren karmaşık bir web sitesinin nasıl oluşturulacağını göstereceğiz. Web sitesini oluşturmak için Gutenberg ve Araç Seti Blokları olarak bilinen WordPress Blok Düzenleyicisini kullanacağız.

Gutenberg neden şimdi web siteleri oluşturmanın harika bir yolu?

Gutenberg yaklaşık bir yıldır piyasada ve yeterince olgunlaştı ki, artık planladığınız web sitesini tam olarak tasarlamanın harika ve güvenilir bir yolu.

Gutenberg, sayfalarınızı oluşturmak için bloklar kullanır. Bloklar, mizanpajlarınızı oluşturabilmeniz için farklı içerik türleri içeren öğelerdir.

Blok düzenleyici hala gelişiyor, ancak zaten inanılmaz derecede sezgisel ve esnek. İçerik oluşturmak için kodlama uzmanı olmanıza gerek yok. Ayrıca, bunu Araç Seti Blokları gibi eklentilerle birleştirdiğinizde, harika görünen karmaşık web sitelerini kolayca oluşturabilirsiniz.

Gutenberg'in mobilde kullanımı da öncekine göre çok daha kolay. Cep telefonlarımızda yaptığımız artan iş miktarı göz önüne alındığında, doğru yönde atılmış önemli bir adımdır.

Gutenberg ile kullanılacak en iyi tema türleri

Gutenberg Blok Düzenleyici ile uyumlu ve ayrıca diğer premium eklentileri destekleyen bir dizi premium WordPress teması vardır.

Gutenberg ile uyumlu WordPress temaları listemize göz atarak en iyi temaları hızlıca inceleyebilirsiniz.

Gutenberg ile kullanmak için en iyi blok eklentisi

Gutenberg'in bir yıldan fazla bir süre önce piyasaya sürülmesinden bu yana, yeni WordPress editörünü tamamlayan bir dizi mükemmel eklenti yayınlandı.

WordPress Gutenberg eğitimimiz için, WordPress web sitemizi oluşturmak için Gutenberg ile birlikte Araç Seti Bloklarını kullanacağız. Araç Seti Blokları, hem kodlayıcıların hem de kodlayıcı olmayanların web sitelerini hızlı bir şekilde tasarlamasını ve uygulamasını kolaylaştıracak bir dizi avantaj sunar:

• İş akışınız çok daha basit olacak . Artık sayfalarınızı tasarlamanıza ve ardından uygulamanıza gerek yok. Bunları basitçe WordPress'te oluşturabilir ve nasıl görüneceklerini anında görebilirsiniz.
• Arka uç ve ön uç arasında geçiş yapmanıza gerek yok . Bunun yerine şablonlarınızı arka uçta kolayca tasarlayabilir ve nasıl görüneceklerini anında görebilirsiniz.
• Geliştirici olmayanlar hayallerindeki web sitelerini kurabilirler . İstediğiniz web sitesini oluşturmak için artık bir kodlama uzmanı olmanıza gerek yok. Bloklarla, html veya css olmadan karmaşık öğeleri kendiniz kolayca ekleyebilirsiniz.
• Belgeleri okumak için daha az zaman harcayın . Araç Seti Bloklarının basit ve sezgisel doğası, belirli öğelerin nasıl oluşturulacağını anlamak için yığınla belge okumanıza gerek olmadığı anlamına gelir. Blokların çoğu, neyi başarabileceğinizi ve kolayca kullanılabileceğini ve denenebileceğini açıklar.
• Herhangi bir üçüncü taraf eklentisi ile daha fazla entegrasyon yok . Klasik WordPress düzenleyici ile bir sayfa oluşturucu ve ek uyumlu eklentiler yüklemeniz gerekirdi. Bu, web sitenizi önemli ölçüde yavaşlatarak şişirebilir. Ayrıca, eklentilerini güncelleyen ve onları güvende tutan üçüncü taraflara da güveniyorsunuz. Araç Seti Blokları, Gutenberg ve WordPress ile entegre olduğundan aynı sorunlara neden olmaz.
• WordPress çekirdeğiyle aynı iş akışını izleyin . Yeni WordPress düzenleyicisiyle çalışma şeklinizi değiştirme konusunda endişelenmenize gerek yok.

Blokları kullanarak özel bir web sitesinin nasıl oluşturulacağına dair WordPress Gutenberg eğitimi

Artık özel web sitemizi oluşturmaya başlayabiliriz. Örnek olarak, bölgenizdeki en iyi spor salonunu veya kişisel antrenörü aramak için kullanabileceğiniz bir demo web sitesi oluşturacağız.

İşte bu WordPress Gutenberg eğitiminde ele alacağımız şeyler:

• Blok ekleme, düzenleme, taşıma ve silme
• İçeriği yan yana göster
• Bloklarınız arasında gezinme
• Blok Düzenleyici Tasarımlarınızda Alanları Görüntüleme
• Bir resim galerisi görüntüleme
• Düzenleyicide Araç Seti bloklarını şekillendirme
• Tipografi kontrolleri
• Şablon oluşturma
• Arşiv sayfalarınızı oluşturma
• Özel içerik listeleri oluşturma
• Özel arama ekleme

Başlayalım!

Blok ekleme, düzenleme, taşıma ve silme

İ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.

3. Blok için içerik bilgilerinizi girin. Örneğin, buraya “Başlık” bloğunu ekledik ve bunun için bir başlık ekleyeceğiz.
4. Her bloğun solunda, bloklarınızı hareket ettirmek için kullanabileceğiniz bir dizi kontrol göreceksiniz.

5. Seçtiğiniz blok için seçenekleri değiştirmek için sağ kenar çubuğunu kullanın. Örneğin yazı tipi rengini, görüntü boyutunu veya metin hizalamasını değiştirebilirsiniz.
6. Üç nokta seçeneğine tıklarsanız, Kaldır bloğu gibi ek seçenekleri görebilirsiniz.

İçeriğinizi yan yana nasıl görüntüleyebilirsiniz?

Sütun bloğunu kullanarak içeriğinizi sayfanızda yan yana kolayca görüntüleyebilirsiniz.

1. + düğmesini seçin.
2. Sütunlar bloğunu arayın ve ekleyin.

3. Artık normal olarak blok ekleyebileceğiniz iki sütun görebilirsiniz.

4. Sütun bloğunu seçip sağdaki çubuktaki sayıyı değiştirerek sütun sayısını artırın.

Bloklarınız arasında gezinme

Sitenizi oluştururken bazı tasarımlarınız ve şablonlarınız çok sayıda blok içerecektir. Düzenlemek istediğinizi seçmenin en kolay yollarından biri, editörün üst kısmındaki Blok Gezinme düğmesini kullanmak ve birlikte çalışmak istediğiniz bloğu seçmektir.

Blok düzenleyici tasarımlarınızda alanları görüntüleme

Gönderi alanlarından (başlık, gövde vb.) veya Araç Seti Bloklarını kullanarak oluşturmuş olabileceğiniz özel alanlardan bilgileri görüntüleyebilirsiniz.

WordPress Gutenberg Eğitiminin bir parçası olarak aşağıda ana hatlarıyla açıklayacağımız alanlarınızı görüntülemenin üç yolu vardır:

1. Blok içeriğini alan değerlerinden gelecek şekilde ayarla

Araç Seti Blokları kitaplığındaki her blok, içeriğini alanlardan ayarlamanıza izin verir. Örneğin, herhangi bir başlık metnini bir gönderi alanından veya bir Araç Takımı özel alanından gelecek şekilde ayarlayabilirsiniz.

Kişisel eğitmenlerimiz için Araç Seti Başlık bloğuna bir gönderi alanından başlık metni ekleyerek nasıl çalıştığını aşağıda görelim.

1. Yeni bir İçerik Şablonu oluşturun ve görüntülemek istediğiniz özel gönderi türünü seçin.
2. + düğmesini seçin.
3. Araç Seti Başlık bloğunu ekleyin.

4. Dinamik Başlık Metni'ni açın.

5. Görüntülemek istediğiniz gönderi alanını seçin. Aşağıda Yazı Başlığını seçtim.

Artık belirli bir özel gönderi türüyle ilgili gönderilerin her biri için doğru başlığı görebileceksiniz.

2. Alanları ayrı bloklar olarak görüntüleyin

Araç Seti kullanılarak oluşturulan herhangi bir gönderi alanını veya bireysel özel alanı bir blok olarak görüntüleyebilirsiniz. Örneğin, aşağıda spor salonlarımız için şablonumuza ana gönderi içeriğini ekliyoruz.

1. Tek Alan bloğunu seçin.
2. Sağ taraftaki çubukta Alan Türü altında Standart alanını seçin.
3. Gönderi Alanı altında Gönderi İçeriği (gövde) seçeneğini seçin.

Spor salonlarının her birinin açıklaması artık ilgili gönderilerinde görünecek.

3. Alanları metinle tek bir blokta birleştirin

Tasarımlarınıza bir alan ve metin karışımı eklemeniz gerekebilir. Örnek olarak, özel alanlarınızın yanına etiketler eklemeniz gerekebilir.

1. Alanlar ve metin bloğunu seçin.

2. Eklemek istediğiniz etiketi yazın. Örneğin, her spor salonunun 5 üzerinden puanını gösteren Derecelendirme özel alanı için sonuçları görüntülemek istediğim için “Derecelendirme” ekledim.

3. Ne tür içerik eklemek istediğinizi simgelerden seçin. Alan, form veya koşullu çıktı ekleyebilirsiniz. Bizim durumumuzda, bir alan eklemek istiyoruz.

4. Eklemek istediğiniz içeriği seçin (benim durumumda bu Derecelendirme alanıdır) ve Kısa Kod Ekle'ye tıklayın.

Bir resim galerisi göster

Ayrıca blokları kullanarak gönderilerinize birden fazla resim ekleyebilirsiniz.

1. Yinelenen alanı/Galeri bloğunu seçin.

2. Görüntülemek istediğiniz özel alan grubunu seçin.
3. Görüntülemek istediğiniz özel alanı seçin.

Bloklarınızı düzenleyicide şekillendirme

Aklınızdaki web sitesini oluştururken bloklarınızı biçimlendirmeniz gerekecek. Örneğin, bloklarınızın yazı tipini, renklerini, arka planını veya kenar boşluklarını değiştirmek isteyebilirsiniz.

Bloklarınızı şekillendirmenin iki yolu vardır:

1. Arayüzü kullanarak öğeleri şekillendirme

1. Stil vermek istediğiniz bloğu seçin. Örneğin daha önce eklediğim Ratings bloğunu seçtim.
2. Kenar çubuğundaki Stil Ayarları bölümünü genişletin.
3. Burada arka plan renginizi, dolgunuzu, kenarlığınızı ve çok daha fazlasını ayarlayabilirsiniz.

Elbette her blok farklı stil seçenekleri sunacak. Örneğin, görüntü bloğu görüntünün konumunu ayarlama yeteneği, bulanıklık veya ne kadar döndüğü gibi bir dizi ek özelleştirme özelliği içerecektir.

2. Konteyner bloğunu kullanma

Container Block, yalnızca Araç Seti Blokları ile bulabileceğiniz bir bloktur. Her bir gönderi için görüntülenecek belirli blokları ve her birine belirli stilleri gruplamak için Konteyner Bloğu'nu kullanın.

Örneğin, bir kişisel antrenör için ilgili tüm bilgileri resim, unvan, derecelendirme ve çok daha fazlasını içeren tek bir bölümde bir arada görüntülemek için bir Konteyner Bloğu ekledim. Artık, Kişisel Antrenör gönderilerimin her birinin aynı stilleri göstermesi için Konteyner Bloğuna stil verebilirim.

Bunu bir kez daha sağ taraftaki kenar çubuğunu kullanarak yapabilirim.

Tipografi kontrolleri

Araç Seti Blokları ile Tipografi bölümünü kullanarak metninizi kolayca biçimlendirebilir ve biçimlendirebilirsiniz.

Ayarlayabileceğiniz şeylerin bir listesi:

• Yazı tipi - çok sayıda yazı tipi arasından seçim yapın
• Yazı tipi boyutu, satır yüksekliği ve harf aralığı
• Yazı stili
• Metin dönüştürme – büyük harf, büyük harf, küçük harf
• Metin rengi
• Metin gölgesi

Özel gönderileri görüntülemek için şablonlar nasıl oluşturulur?

Özel bir web sitesi için oluşturmanız gereken en önemli özelliklerden biri şablondur. Bir şablon oluşturduğunuzda, aynı özel gönderi türü için tüm gönderilerin aynı düzen ve tasarıma sahip olacağı anlamına gelir.

Örneğin, “Spor Salonları” özel yazı tipimizin bir parçası olarak görüntülemek istediğimiz spor salonlarının her biri için bir şablon tasarlayabiliriz.

1. Araç Seti->Dashboard'a gidin ve şablon tasarlamak istediğiniz gönderi türü için İçerik Şablonu Oluştur seçeneğini tıklayın.

2. Daha önce yaptığımız gibi şablonunuza alanlar eklemeye başlayabilirsiniz. Aşağıda, tümü alan içeren Başlık, Görüntü ve Tek Alan bloğu dahil olmak üzere bir dizi farklı blok ekledim.

3. Şablonunuzu kaydedip yayınladıktan sonra, o özel gönderi türü için gönderilerinizin her biri aynı düzeni ve stili gösterecektir.

Arşiv sayfalarınızı oluşturma

Arşivler, WordPress'in sizin için oluşturduğu her özel gönderi türü için içerik listesidir. Arşiv sayfalarınızın her birinin nasıl göründüğünü özelleştirmek için Araç Seti Bloklarını ve Gutenberg'i kullanabilirsiniz.

Aşağıda WordPress Gutenberg eğitiminin bir parçası olarak “Spor Salonu” özel yazı tipim için bir arşiv oluşturdum.

1. Araç Seti->Dashboard'a gidin ve arşiv oluşturmak istediğiniz gönderi türünün yanındaki Arşiv Oluştur seçeneğine tıklayın.

2. Blok Düzenleyici'de artık her gönderi için görüntülemek istediğiniz farklı öğeleri ekleyebilirsiniz. Örneğin, Araç Seti Bloklarını kullanarak tüm standart ve özel alanlarınızı ("Spor Salonum" özel gönderi türlerim için oluşturduğum Derecelendirmeler, Adres ve Gönderi Başlıkları gibi) görüntüleyebilirsiniz.

3. Sütun sayısını değiştirmek için Gezinmeyi Engelle seçeneğine tıklayın ve WordPress arşiv döngüsünü seçin.
4. Döngü Stili altında sütun sayısını ayarlayabilirsiniz.

5. Ayrıca, WordPress Arşiv bloğu altında sayfalandırma, sıralama ve çok daha fazlası gibi arşivler için varsayılan ayarlarda bir dizi değişiklik yapabilirsiniz.

6. Ayrıca, gönderilerinizi gösterecek olan ana arşiv döngüsünden önce veya sonra özel metinler ve diğer bloklar ekleyebilirsiniz. Bloklarınızı veya metninizi eklemek için döngüden önce veya sonra + simgesine tıklamanız yeterlidir.

Özel içerik listelerini görüntüleyin

Araç Seti Bloklarını ve Gutenberg'i kullanarak gönderilerinizi istediğiniz sırayla liste halinde görüntüleyebilirsiniz. Ayrıca listeyi ızgara, basit HTML, tablo veya başka herhangi bir şekilde istediğiniz şekilde tasarlayabilirsiniz. Araç Setinde bu tür listelere Görünüm adı verilir.

Bu liste daha sonra herhangi bir sayfaya eklenebilir. Örneğin, aşağıda ana sayfaya öne çıkan spor salonlarının bir listesini ekledim.

1. Görünümünüzü eklemek istediğiniz sayfadaki + düğmesine tıklayın.
2. Görünümler bloğunu ekleyin ve adlandırın.
3. Görünümünüzün görüntülemesini istediğiniz içeriği seçin. Örneğin, spor salonlarımı görüntülemek istiyorum.

4. Görüntülemek istediğiniz blokları Görünümünüzün bir parçası olarak ekleyin.
5. Gezinmeyi Engelle'yi tıkladığınızda, Görünümünüzü seçip kenar çubuğunu kullandığınızda, hangi içeriğin görüntüleneceğini ve daha fazlasını düzenleyebilirsiniz.

6. Görünüm Döngüsü altında, sütun sayısı da dahil olmak üzere tüm Görünüm için bir dizi ayarı değiştirebilirsiniz.

Özel arama ekle

Kullanıcılarınızın ön uçta ilgilendikleri içeriği daraltmalarına olanak tanıyan kendi aramanızı Görünümünüze ekleyebilirsiniz. Örneğin, kullanıcılarınızın kendilerine en yakın olan en iyi spor salonunu bulmaları için bir arama oluşturabilirsiniz.

1. Görünüm bloğunu sayfanıza yerleştirin.
2. Görünüm oluşturma sihirbazında Ara seçeneğini etkinleştirin.

3. Ardından Görünümler düzenleme alanına Arama Alanları, Arama Düğmeleri ve çok daha fazlasını ekleyebilirsiniz.

4. Bu arama alanı seçeneklerini ayarlamak için sağ kenar çubuğunu kullanabilirsiniz. Bu, ana alan ayarlarını ve etiket ve stil seçeneklerini içerir.

En iyi spor salonu için özel aramamızın ön uçta nasıl göründüğü aşağıda açıklanmıştır.

Özel web sitenizi bugün oluşturmaya başlayın!

Artık bu WordPress Gutenberg eğitimini okuduktan sonra temel bilgileri öğrendiğinize göre, kendi özel web sitenizi tasarlamaya ve oluşturmaya başlayabilirsiniz. Kendi web sitenizi oluşturmanın sizin için ne kadar kolay olduğunu görmek için WordPress ve Araç Seti Bloklarını bugün indirebilirsiniz.

Herhangi bir düşünceniz veya sorunuz varsa, lütfen aşağıdaki yorumlarda bize bildirin!