Gutenberg ve Smart Slider 3: WordPress'e Slider Nasıl Eklenir

Yayınlanan: 2018-09-05

Yakında Gutenberg editörü resmi olarak WordPress çekirdeğinin bir parçası olacak. Bu, WordPress'teki kaydırıcılar için ne anlama geliyor? Pekala, bunun birkaç anlamı var: Gutenberg kaydırıcılarını sayfalara ve gönderilere eklemek her zamankinden daha kolay olacak ve tüm kaydırıcılarınızı Gutenberg düzenleyicisinde önizleyebilirsiniz.

Bu yazıda, nasıl çalıştığını görebilmeniz için size Gutenberg'in temellerini anlatacağım ve ardından Gutenberg editörünü kullanarak bir gönderiye nasıl kaydırıcı ekleyeceğinizi göstereceğim. Son olarak, Gutenberg'i kullanarak ekleyebileceğiniz ve gönderilere harika eklemeler yapan farklı kaydırıcı türlerinden bazılarına göz atacağız.

Gutenberg nedir?

Gutenberg yakında WordPress'in yeni görsel editörü olacak. WordPress'in 2003'te ilk kez piyasaya sürülmesinden bu yana mevcut görsel düzenleyici pek değişmedi. O zamandan beri, diğer platformlar WordPress'i eski moda gösteren basitleştirilmiş yazma deneyimleri ile birlikte geldi. Temel olarak, Gutenberg, WordPress'in havalı çocukları yakalama girişimidir.

Klasik editör ve Gutenberg editörü yan yana şöyle görünür:

Klasik WordPress editörü ve Gutenberg editörü
Klasik WordPress editörü ve Gutenberg editörü

Gutenberg ile bir sayfa veya gönderi oluşturduğunuzda, temelde metin, başlık, resim ve diğer medya blokları olan “içerik blokları” kullanırsınız. Bloklarla, aksi takdirde kısa kodlar veya özel HTML gerektirebilecek şeyleri elde edebilirsiniz.

Gutenberg üzerindeki çalışmalar 2017'nin başlarında başladı ve hala devam eden bir çalışma. WordPress.org'dan eklenti olarak indirebilir ve deneyebilirsiniz. WordPress 5.0 ile piyasaya sürülmesi planlanıyor ancak belirli bir tarih yok. Bazıları bu yılın sonlarında veya hatta gelecek yılın başlarında piyasaya sürülebileceğini söylüyor.

Şimdiye kadar yorumlar karışıktı; insanlar onu ya seviyor ya da nefret ediyor. Aslında, incelemeler ortalama 2,5 yıldızla ortada bölünmüş durumda.

Kesinlikle “seviyorum” kampındayım. Gutenberg'i birkaç aydır siteme yükledim ve arayüzün her güncellemede nasıl değiştiğini görmek çok güzeldi.

WordPress ile uzun yıllardır çalışan bir yazar olarak, Gutenberg'in yeni bir soluk olduğunu ve geç kalındığını düşünüyorum.

Demek istediğim, neden WordPress'in kullanımı Medium kadar kolay olmasın?

Gutenberg ve Content Blocks ile Çalışmak

Gutenberg'i kurduktan ve etkinleştirdikten sonra, WordPress siteniz için varsayılan görsel düzenleyici olacaktır. Kenar çubuğunun altında bir demo içeren (aşağıda inceleyeceğiz) yeni bir Gutenberg menü öğesi göreceksiniz.

Kenar çubuğunda Gutenberg menüsü
Kenar çubuğunda Gutenberg menüsü

Ayrıca gönderilerinizin altında Gutenberg ve klasik düzenleyici arasında geçiş yapmanızı sağlayan bağlantılar da göreceksiniz.

Gönderinizi Klasik Düzenleyici'de düzenleyin
Gönderinizi Klasik Düzenleyici'de düzenleyin

Henüz kullanmadıysanız, demo gönderisini kullanarak nasıl çalıştığına bir göz atalım:

Sağ tarafta, kenar çubuğunun klasik düzenleyiciden kopyalandığını göreceksiniz. O kadar fazla değişmedi ve hala görünürlüğü güncelleme, saat ve tarih gönderme gibi tüm olağan seçenekleri içeriyor. Altında, kategoriler, etiketler ve öne çıkan görselin yanı sıra alıntı ve tartışma için meta kutuları göreceksiniz.

"Yayınla" düğmesi sağ üste taşındı ve yayınları önizlemeye devam edebilirsiniz. Tıklama dişlisine tıkladığınızda, kenar çubuğunu gizler, böylece yazmak için daha fazla yer kalır.

Gutenberg Editörü
Gutenberg Editörü

Kod düzenleyiciye nasıl geçeceğinizi merak ediyorsanız, sağ üstteki üç noktayı tıklamanız yeterli, seçeneği orada göreceksiniz. Tüm bu tanıdık şeyler aradan çekilince, hadi içerik bloklarıyla çalışmaya başlayalım.

İçerik Bloklarını Kullanma

Sol tarafta yazmak için büyük bir eski alanınız var. Klasik editörün hantal arayüzünü kullanmakta zorlanan dizüstü bilgisayar kullanıcıları ( benim gibi! ) için özellikle uygundur.

İçerik bloğuna erişmek için sol üstteki “+” simgesine tıklayın. İlk önce "en çok kullanılan" blokların görüntülendiğini göreceksiniz, ancak aşağı kaydırdığınızda, YouTube ve Twitter'dan Spotify ve SoundCloud'a kadar her şey için biçimlendirme, düzen, widget'lar ve bir ton farklı yerleştirme için diğer bloklara erişebilirsiniz.

Gutenberg Editöründeki Bloklar
Gutenberg Editöründeki Bloklar

Şimdi bu blokların nasıl çalıştığına bir göz atalım. Demonun zaten bir başlığı var ve üzerine geldiğinizde metni düzenlemek için blok içinde herhangi bir yere tıklayabilirsiniz. Bloğun üzerine tıklamak, gönderinin kalıcı bağlantısını düzenleme seçeneğini de getirir.

Gönderinin kalıcı bağlantısını düzenleyin
Gönderinin kalıcı bağlantısını düzenleyin

Başlığın altında, WordPress için yeni bir konsept olan bir kapak resmi bloğu bulunur. Bu blok türü, bir görüntü üzerinde metni veya yalnızca metin içermeyen bir görüntüyü görüntülemenizi sağlar. Bu bloğa tıkladığınızda, değiştirme ve hizalama dahil olmak üzere görüntüyü düzenlemek için en üstte seçenekler görüntülenir.

Metni kalın, italik hale getirmek veya bir bağlantı eklemek için düzenlemek için seçenekler de açılır. Garip bir şekilde, üstü çizili eklemek için dördüncü bir seçenek var.

Metni Gutenberg'de düzenleme
Metni Gutenberg'de düzenleme

Metin eklemek ve düzenlemek son derece sezgiseldir. Gutenberg, metnin her paragrafını ayrı bir blok olarak değerlendirir, bu nedenle bir şey yazıp 'enter' tuşuna bastığınızda, yazmaya devam edebilmeniz için otomatik olarak yeni bir paragraf bloğu oluşturulur.

Bir metin paragrafına tıkladığınızda, metni hizalama ve biçimlendirme ile bağlantı ve üstü çizili ekleme seçenekleri elde edersiniz.

Gutenberg'deki metninize bir bağlantı ekleme
Gutenberg'deki metninize bir bağlantı ekleme

Genel olarak, Gutenberg'in kullanımı gerçekten çok kolay ve nasıl kullanılacağını bulmak hiç zaman almıyor. Canlı sitenize eklemeden önce bir hazırlama sitesine yüklemenizi öneririm, böylece canlı sitenizde yayınla oynamaya başlamadan önce nasıl çalıştığına dair bir fikir edinebilirsiniz.

WordPress'e Gutenberg Kaydırıcıları Ekleme

Smart Slider 3 ekibi, Gutenberg'in kaydırıcıların uyumlu olmasını sağlamak için duyurulmasından bu yana çok çalışıyor.

Ve size Smart Slider 3'ün Gutenberg ile uyumlu olduğunu söylemekten mutluluk duyuyorum! SS3'ü güncellediğinizde, Gutenberg'i bir sonraki kullanışınızda yeni bir kaydırıcı içerik bloğu göreceksiniz.

Yeni Smart Slider 3 içerik bloğunu kullanarak Gutenberg kaydırıcılarını WordPress'e nasıl ekleyeceğiniz aşağıda açıklanmıştır:

1. İlk önce, Smart Slider 3'ü yükleyin (veya güncelleyin), böylece en son sürümü çalıştırırsınız.
2. Kenar çubuğunda Akıllı Kaydırıcıya tıklayın, Yeni bir proje oluşturun ve Şablonla Başlat seçeneğini seçin.

Akıllı Kaydırıcıda bir şablonu içe aktarın
Akıllı Kaydırıcıda bir şablonu içe aktarın

3. Kullanmak istediğiniz şablonu seçin. Basit bir görüntü kaydırıcıya gideceğim.

Akıllı Kaydırıcı Şablonları
Akıllı Kaydırıcı Şablonları

4. İçe aktarılan kaydırıcınız için düzenleme ekranına yönlendirileceksiniz. Devam edin ve kaydırıcınızda herhangi bir değişiklik yapın.

5. Kaydırıcınızı gönderinize eklemeye hazır olduğunuzda, onu Gutenberg'de açın ve içerik blokları simgesini tıklayın. Smart Slider 3'ün “En Çok Kullanılan” blok listenize eklendiğini göreceksiniz.

Gutenberg'de Akıllı Kaydırıcı 3 bloğu
Gutenberg'de Akıllı Kaydırıcı 3 bloğu

6. Tıkladığınızda, gönderinize yeni bir kaydırma bloğu eklenecektir. Gönderinizde şu anda seçili bir blok yoksa, varsayılan olarak kaydırıcınız gönderinin altına eklenecektir. Seçtiğiniz bir blok varsa, vurgulanan bloğunuzun altına eklenecektir.

Gutenberg bloğunda kaydırıcıyı seçin
Gutenberg bloğunda kaydırıcıyı seçin

7. Kaydırıcı Seç'e tıklayın ve Smart Slider 3 için kaydırıcılarınız görüntülenecektir. Kaydırıcınızı seçin ve gönderinizde görünecektir.

Gutenberg gönderisindeki kaydırıcı
Gutenberg gönderisindeki kaydırıcı

8. Gönderinize kaydırıcı eklemenin bir kolay yolu daha var: Yeni bir paragraf içerik bloğu eklediğinizde, bloğun sol alt kısmında Smart Slider 3 simgesi de dahil olmak üzere üç küçük simge göreceksiniz. Üzerine tıkladığınızda, bir kaydırıcı ekleyebilirsiniz.

Gutenberg kullanarak bir gönderiye kaydırıcı eklemek için yapmanız gereken tek şey bu . Bana sorarsanız, bir kısa kodu kopyalayıp yapıştırmaktan bile daha kolay!