Blok Düzenleyiciyi Kullanarak Web Sitemizi Nasıl Oluşturduk

Fark etmediyseniz, web sitemizin görünümü biraz değişti . Yazı tiplerini, stilleri, renk paletini güncelleyerek web sitemizi yeniden şekillendirdik… bundan hareketle:

buna:

Ancak bu değişikliklerle ilgili en ilginç şey nasıl göründükleri değil - tamamen blok tabanlı bir site haline gelebilmesi için web sitemizi sıfırdan yeniden oluşturmaya karar verdik. Bugün size, sayfa şablonlarına dayalı özel yapım bir temadan her şey için WordPress bloklarına dayanan tamamen kişiselleştirilmiş başka bir temaya nasıl geçeceğimizi açıklamak istiyorum.

Nereden Geliyoruz

Üç yıl önce Nelio Content'i piyasaya sürdüğümüzde, tüm web sitelerimizi tamamen yeniden düzenlemeye ve çevrimiçi varlığımızı tek bir alan ve marka altında merkezileştirmeye karar verdik: neliosoftware.com . Mantıken, yaptığımız görevlerden biri, yeni web sitemizin imajını tasarlamamıza yardımcı olması için Silo Creativo ile iletişime geçmekti. Burada yaptıkları ilk tekliflerden birini görebilirsiniz:

Bu ilk tasarıma onay verdiğimizde ve taleplerimizi takiben, Ricardo ve Veronica çalışmaya başladılar ve web sitemizin farklı bölümleri için gerekli tüm şablonlarla özel yapım bir tema uyguladılar: ana sayfa, blog , gönderiler, yardım sayfalar, … Her şeyi onlar tasarladı ve her tasarım bir sayfa şablonuna uygulandı. Düzenlemesi zahmetli olan hızlı bir sayfamız vardı.

Sonra Gutenberg geldi.

Web Sitemizin İçeriğini Anlama

Yeni WordPress blok düzenleyicisi Gutenberg , WordPress'te içerik oluşturmaya yönelik bir paradigma kaymasıdır. Şimdiye kadar, sayfa oluşturucu kullanmıyorsanız, sayfa oluşturmak kullanıcılar için sıkıcı ve dostça olmayan bir süreçti. Ancak Gutenberg , koltuğunun altında bir sözle geldi : WordPress'te görsel olarak çekici içerik oluşturmak herkesin ulaşabileceği bir yerde olmalıdır. Bu iddiayı test etmek ve gerçekten sadece Gutenberg'e dayanan güzel bir web sitesi oluşturup oluşturamayacağımızı görmek istedik.

Daha önce sahip olduğumuz web'i gördüyseniz, basit ve zarif bir tasarıma sahip olduğunu bileceksiniz , aşağıdaki unsurlar dahil:

• İlk kıvrımı alan öne çıkan görsele sahip sayfalar
• Açıklayıcı metin ve resimler ve/veya video içeren bloklar
• İletişim formları
• Yasal sayfalar
• Fiyat tabloları
• Kullanıcılarımızdan Görüşler
• Özellik listeleri

Çok süslü bir şey yok, ama yine de ilginç. Bütün bunları Gutenberg'de yaratabilir miyiz? Biz de öyle düşündük ve denedik. Yaptığımız ve bulduğumuz şey bu.

Yeni Temamız

Yeni web sitesini tasarlamak için yaptığımız ilk şey, sıfırdan bir tema oluşturmaktı. Bunun için iyi bilinen başlangıç ​​teması olan “alt çizgiler”den başlamaya karar verdik. Çalışan bir WordPress temasına sahip olmak için minimum ve gerekli şablonlarla birlikte gelen süper temel bir temadır ve iyi belgelenmiştir ve iyi organize edilmiştir.

Alt çizgileri uyarlama

Her WordPress teması, tüm WordPress kurulumlarında ortak olan ve web sitenizde hangi içeriği oluşturduğunuzdan bağımsız olarak bir dizi sayfaya sahiptir. Örneğin, son gönderilerin göründüğü blog sayfasından, tek bir gönderinin düzeninden, 404 hata sayfasından, arama sonuçları sayfasından vb. bahsediyorum. Dolayısıyla WordPress bloklarını kullanarak temamızı oluşturmanın ilk adımı , alt çizgileri kendi stilimize uyarlayın, böylece bu "jenerik"ler istediğimiz görünüme ve hisse sahip olur. Ve biz de öyle yaptık.

Bir önceki ekran görüntüsüne bakarsanız, temayı _sassify! seçeneği etkinleştirilir, bu nedenle tema stillerle SASS formatında indirilir, birden çok dosya halinde düzenlenir ve düzenlemeyi son derece kolaylaştırır. Birkaç saat CSS yazmamız ve functions.php dosyasında bazı PHP özelleştirmeleri yapmamız gerekti, ancak temayı tam olarak elde edebildik:

Yapı Taşları Olarak WordPress Blokları

Kendimizi rahat hissettiğimiz bir başlangıç ​​temamız olduğunda (bizim durumumuzda, alt çizgilerden oluşturduğumuz tema, ancak sizin durumunuzda bu, wordpress.org bulduğunuz bir tema olabilir, bir süre satın aldığınız premium bir tema olabilir. önce, hatta bizimki gibi özel olarak tasarlanmış bir tema), tüm sayfalarımızı WordPress bloklarını kullanarak düzenlemenin zamanı geldi .

Lafı fazla uzatmadan, bu aşamada karşılaştığımız tüm “zorluklara” ve WordPress bloklarını kullanarak her şeyi nasıl uyguladığımıza bir göz atalım.

Varsayılan Bloklar

WordPress'in varsayılan olarak içerdiği bloklar biraz sınırlıdır: paragraflar, resimler, galeriler… Hiçbir şey çok süslü değil - hepsi sayfa düzenlerinden daha çok blog gönderileri oluşturmaya odaklanmış görünüyor.

Ama sorun değil.

Sorun değil çünkü yeni başlayanlar için bir web sitesinde blog gönderilerine benzeyen çok sayıda sayfa var. Örneğin, yasal bilgiler veya gizlilik politikası ve tanımlama bilgileri içeren sayfalar, bir blog gönderisine ilk düşündüğünüzden daha yakındır.

Ama aynı zamanda sorun değil çünkü son derece basit bileşenlerle güzel sayfalar oluşturabiliyoruz. Örneğin, metin ve videoları birleştirebiliriz. Bu, Medya ve Metin bloklarıyla kolayca elde edebileceğimiz bir şeydir:

Oldukça yakın, ha?

Varsayılan Blokları Birleştirme

Basit bloklar birleştirildiğinde son derece güçlü olabilir. Örneğin, bir özellik listemizin bulunduğu aşağıdaki ekran görüntüsünü göz önünde bulundurun:

Bunun üstesinden nasıl gelinir? Dikkatli ve mantıklı bir şekilde bakarsanız, her özelliğin bir resim ve bir metnin birleşimi olduğunu göreceksiniz (bu tanıdık geliyor mu?). Ardından, açıkça üç sütunumuz olduğunu göreceksiniz, yani… Medya ve Metin bloklarını bir Sütun bloğu ile birleştirirsek ne olur?

Fena değil, oldukça yakınız! Blokları birleştirirken akıllı olmalısınız. Tek bir Sütun bloğu kullanmak, her bir sütun diğerinden bağımsız olarak düzenlendiğinden, özelliklerin yatay olarak düzgün şekilde hizalanmayabileceği anlamına gelir. Bu sorunu çözmek için biraz kurnaz olmalısınız: her sütuna birden çok özellik içeren tek bir Sütun bloğu eklemek yerine, her sütunda yalnızca bir özellik olduğundan emin olmak için birden çok Sütun bloğu oluşturalım:

Ve BUM! Şimdi, düzgün hizalanmış satırlara sahip üç özellik sütunumuz var.

Steroidli Varsayılan Bloklar

Varsayılan blokların istediğimize yeterince yakın olduğu ancak doğru görünmediği durumlar vardır. Görsel bir sorunla karşı karşıyaysak, büyük olasılıkla CSS kullanarak çözebiliriz ve en iyi yanı Gutenberg'in CSS sınıflarıyla son derece iyi çalışmasıdır.

Örneğin, görüntü bloklarımızın (isteğe bağlı) bir gölgeye sahip olmasını istiyorsak, görüntüye gölge ekleyen basit bir CSS sınıfı oluşturabilir ve ardından söz konusu sınıfı görüntü bloğunun Gelişmiş bölümünü kullanarak uygulayabiliriz:

Bu çözümle ilgili sorun, kullanıcı arabirimini uygulama ayrıntılarıyla (bir CSS sınıfının adı) karıştırıyor olmamızdır. Bir görüntüye shadow ekleyen gölge adında bir sınıf olduğunu neden bileyim ki? Bunun da basit bir çözümü var.

WordPress blok düzenleyicisinin programlama arayüzü, adından da anlaşılacağı gibi, registerBlockStyle adlı bir işlevi kayıt blok stillerine sunar. Şu kadar basit bir şey:

 registerBlockStyle ( 'core/image', { name: 'image-with-shadow', label: __( 'Shadow', 'nelio' ), } );

Uygulandığında, görüntü bloğunun has-style-image-with-shadow sınıfına sahip olmasına neden olan Shadow adlı görüntü bloğu ( core/image ) için yeni bir stil kaydetmemize izin verir:

Özel Bloklar

Son olarak, hiçbir varsayılan bloğun onu kesmediği durumlarda kendi bloğunuzu oluşturabilirsiniz (veya zaten var olan bir üçüncü taraf bloğunu kullanabilirsiniz). Bu çözümü birkaç durumda uyguladık: Nelio Content ve Nelio A/B Testing fiyatlandırma tablolarında, iletişim sayfamızda görünen harita (bu arada, bir bloğun nasıl oluşturulacağına ilişkin yazımızda ayrıntılı olarak gösterilmiştir), ve kullanılabilirlik açısından sonuçlar etkileyici:

Kendi bloklarınızı nasıl oluşturmak istemiyorsanız veya bilmiyorsanız, size birçok şey için ek bloklar içeren bazı eklentiler bırakacağım:

• GhostKit
• Atom Blokları
• CoBlock'lar
• Kadans Blokları

Tecrübemiz

Birkaç ay önce web sitemizi biraz yenilememiz ve Gutenberg'i kullanarak uygulamamız gerektiğine karar verdik. Amacımız iki yönlüydü: bir yandan web sitesini biraz güncellemek ve daha taze bir hava vermek istedik. Öte yandan, hem kullanıcı düzeyinde hem de geliştirici düzeyinde Gutenberg hakkında daha fazla bilgi edinmek istedik. Sonunda tüm ağı Gutenberg'e taşımayı başardık ve sonuç mutlak bir başarı oldu. Sizi de bunu yapmaya teşvik ediyoruz ve herhangi bir sorunuz varsa, bunları yorumlarda bırakmaktan çekinmeyin.

Bu arada, bugünkü yazı WordCamp Lizbon 2019'da yaptığım konuşmadan ilham aldı. İşte slaytlarım:

Unsplash'ta Samuel Zeller tarafından öne çıkan görsel .