Tove teması: Tam Site Düzenleme ile uyumlu bir WordPress temasının sunumu

Hamilton, Hitchcock, Chaplin, Miyazaki: Bu isimler muhtemelen size ünlüleri hatırlatıyor, özellikle de spor ve sinema denince akla.

Ancak bunların WordPress ile de bir ilgisi olduğunu biliyor muydunuz? Evet, gerçekten. Ancak düşündüğünüz gibi değil: Lewis Hamilton, son Grand Prix'nin son turunda 2021 dünya şampiyonluğunu kaybettikten sonra WP web tasarımına girmeye karar vermedi .

Bununla birlikte, bunun üzerine psikopata girebilir (merhaba Alfred) ama asıl noktayı kaçırıyorsunuz. Aslında, bu 4 ünlü soyadı aynı zamanda üretken ve yaratıcı Anders Noren tarafından oluşturulan WordPress temalarıdır .

Adamın resmi rehberinde bunlardan 20'den fazla var ve bugün Tove adlı son bebeğine odaklanacağız .

İsim aynı zamanda bir ünlüyle de ilişkilendiriliyor – buna daha sonra döneceğiz – ama hepsinden önemlisi WordPress 5.9 sürümündeki küçük bir devrimle yakından bağlantılı.

Onun adı? Tam Site Düzenleme (FSE). Kabul et, daha fazlasını öğrenmek için can atıyorsun, değil mi? Işıklar, kamera, aksiyon: Tove'u keşfetmek için benimle gelin… ve aynı zamanda, bir araya geldikleri için biraz da FSE!

En iyi WordPress projelerinizin en iyi ana bilgisayara ihtiyacı var!

WPMarmite, Bluehost'u önerir: harika performans, harika destek. Harika bir başlangıç ​​için ihtiyacınız olan her şey.

Bluehost'u deneyin

Tove teması nedir?

Tove, tamamen WordPress içerik düzenleyicisi (Gutenberg) tarafından kullanılan bloklara dayanan ücretsiz, çok amaçlı bir WordPress temasıdır. WordPress 5.9 (25 Ocak 2022'de yayınlandı) ile yayınlanan Tam Site Düzenleme projesinin gereksinimlerine uyacak ve bunları karşılayacak şekilde tasarlanmıştır.

Eylül 2021'de piyasaya sürülen Tove, yazı yazılırken çok gizli kalıyor. "Yalnızca" 400'den fazla etkin kuruluma sahiptir, bunun başlıca nedeni basit bir nedendir: yalnızca WordPress 5.9 veya Gutenberg eklentisinin en son sürümlerinden biri ile kullanılabilir.

WordPress Tove temasının özellikleri arasında, geliştiricisi Anders Noren tarafından vurgulandığı gibi aşağıdaki noktalar öne çıkıyor:

• Tove, kod açısından çok hafif , bu da yükleme hızı ve sunabileceği kullanıcı deneyimi açısından gerçek bir artı.
• Noren, restoran ve kafeler için özel olarak tasarlandı , "ancak Tove'u istediğiniz türde bir web sitesi için kullanabilirsiniz" diyor. Tove ayrıca esnekliği ile karakterizedir.
• Tove teması, örneğin kullanıma hazır bir üstbilgi ve altbilgiye sahip olmak için sayfalarınıza tek bir tıklamayla eklenebilen yaklaşık 40 blok desene sahiptir.

Bu, FSE uyumlu temaların şu anda ekosistemde çok yaygın olmadığını bilerek, onu değerli bir çalışma konusu haline getiriyor.

Bir yandan, deneysel olarak oluşturulmuş birkaç tane bulacaksınız (Armando, Q, TT1 Blokları).

Öte yandan, Blockbase, Hansen veya Aino gibi FSE dalgasını diğerlerinden önce sürme kararını alan temalarla karşılaşacaksınız.

Tam Site Düzenleme hakkında konuşuyorum, ancak bu terim size tamamen Yunanca gelebilir. Bunu daha iyi anlamanıza yardımcı olmak için size bu sıcak konuyla ilgili bazı ipuçları vereceğim.

Tam Site Düzenleme Nedir?

WordPress 5.9 ile kullanılabilen Tam Site Düzenleme projesi, içerik düzenleyici bloklarını (Gutenberg) kullanarak bir sitenin tüm yapısını (üstbilgi, altbilgi, menü ve sayfa şablonları dahil, yalnızca içeriği değil) oluşturmanıza ve düzenlemenize olanak tanır.

Bu makalede ayrıntılı olarak açıklandığı gibi, başlık veya 404 sayfası gibi genellikle tema tarafından yönetilen temel öğeler artık, örneğin yazılarınızı yazmak için zaten kullandığınız içerik düzenleyici blokları kullanılarak ele alınabilir.

Bu, WordPress içerik düzenleyicisini bir sayfa oluşturucunun çalışma biçimine yaklaştıran büyük bir değişikliktir.

Ayrıca FSE ve bunun WordPress tema mağazaları üzerindeki etkisi ile ilgili ayrıntılı çalışmamıza da göz atabilirsiniz.

Artık FSE hakkında her şeyi biliyorsunuz! Tove temasının geliştiricisi Anders Noren'a odaklanarak devam edelim.

Tove teması: Anders Noren'in dokunuşu

WordPress haberlerini yakından takip ederseniz, Anders Noren adı mutlaka bir zil çalmalıdır.

Stockholm merkezli bu İsveçli geliştirici ve web tasarımcısı, tümü resmi dizinde ücretsiz olarak sunulan WordPress temalarıyla ünlendi.

Toplamda 22 tanesini sunuyor ve yaklaşık 4 milyon indirme oldu . Çoğu, esas olarak blog yazmaya adanmıştır, ancak bazılarını bir portföy veya çevrimiçi mağaza oluşturmak için de bulabilirsiniz.
Kılavuz genellikle aynıdır: minimalist ve temiz bir görünüm.

Bunun ötesinde Noren, WordPress Core'un geliştirilmesine de katkıda bulunuyor. Bir örnek? WordPress 5.3 ile birlikte gelen yerel Twenty Twenty temasını tasarladı .

Bu küçük temalar ordusunun ortasında, Noren tarafından oluşturulan ilk %100 FSE uyumlu tema olan Tove var. Bu ilk nabız kontrolünden sonra, bu yenilikçi temaya bir göz atmanın zamanı geldi.

Tove adı, Vikipedi'ye göre çoğunlukla çocuk kitapları yazarı olarak bilinen Finli yazar, ressam ve karikatürist Tove Jansson'dan geliyor. Özellikle beyaz trollerden oluşan bir aile olan Moumines'i yarattı.

Tove teması neye benziyor?

Tove temasının demo sunumuna dayanarak, birkaç ana özelliği görebiliriz:

• Pembe, mavi ve sarı ağırlıklı pastel ve gösterişli renkler .
• Başlıktaki farklı öğeler : sosyal ağlara yönlendirilen simgeler, çalışma saatleri (temanın kafelere ve restoranlara ayrılmış olduğunu unutmayın) ve hatta harekete geçirici mesaj düğmesi. Logo, başlığın ortasında bulunur.
• Görseller tam ekran olarak görüntülenir.
• Dikdörtgen ve kare şekilli içerik blokları .
• Nefes almaya izin vermek ve havadar tarafı vurgulamak için boş alanlar .
• “DM Sans” tipografi, geometrik ve sans serif kullanımı .

Demo, size temanın tamamlanmış bir görsel yönünü vermek için var, ancak elbette canavarla oynayarak temel özelliklerini (renkler, tipografi, blok türleri, vb.) değiştirebilirsiniz.

Bir sonraki bölümde odaklanacağımız şey bu.

WPMarmite abonelerine katılın

Son WPMarmite gönderilerini (ve ayrıca özel kaynakları) alın.

ŞİMDİ ABONE OL

WordPress'te Tove teması nasıl özelleştirilir?

site editörü

Tove temasını etkinleştirdikten sonra Görünüm > Düzenleyici'ye gidin. Site Editörü WordPress 5.9 ile birlikte geldi.

Burası, Tove'u ve daha sonra yükleyeceğiniz diğer blok tabanlı temaları özelleştirebileceğiniz yerdir.

Gördüğünüz gibi, Widget'lar menüsü ve Özelleştirici menüsü kayboldu.

Artık her şey sitenizin tüm alanlarını oluşturmak ve beslemek için Gutenberg bloklarını kullanan bu ünlü site düzenleyicide gerçekleşiyor.

Varsayılan olarak, tüm blog yayınlarınızı listeleyen bir "Dizin" şablonuna ulaşırsınız.

İlk başta, biraz kafa karıştırıcı olabilir. Artık her şeyin sihirli bir şekilde düzenlenebileceğini göreceksiniz. Bunu takdir etmek için farenizi sayfadaki herhangi bir öğenin üzerine getirmeniz yeterlidir.

Üzerine tıklamak sizi, ayarlamalar yapabileceğiniz içerik düzenleyici araç çubuğuna götürecektir:

şablonlar

Standart sayfaların oluşturulmasını kolaylaştırmak için Tove ayrıca 5 şablon sunar. "Tüm şablonlara göz at" seçeneğine tıklayarak bunlara erişebilirsiniz:

Bu şablonlar arasında şunlar yer alır:

• Tek gönderi , gönderi sayfasının görüntülenmesini yönetmek için (özellikli resim, meta etiketler vb.).
• Page , bir gönderide yaptığınız gibi tek bir sayfanın sunumunu düzenlemek için.
• Dizin , tüm yayınlarınızı listeleyen Blog sayfanızın organizasyonunu özelleştirmek için.
• Başlıksız Sayfa , başlıksız bir sayfa tasarlamak için.
• 404 , özel bir 404 sayfası oluşturmak için.

Küresel stiller

Global Stillere bakarak sitenizin genel ayarlarının konusuna devam edelim. Bu, elbette Tove temasının kullandığı WordPress 5.9'daki yeni bir özelliktir .

Bu global stiller ile artık sitenizdeki belirli blokların renklerini, tipografisini, düzenini ve hatta görünümünü tek seferde değiştirebilirsiniz.

Artık her bir öğeyi tek tek değiştirmek için zaman alan süreçten geçmenize gerek yok.

Temel olarak amaç, tüm temayı yönetmek ve stil ayarlarını engellemek için bir yer sağlayarak Özelleştirici aracını değiştirmektir.

Bu seçeneğe erişmek ve Tove'un görsel görünümünü değiştirmek için - pembe renk stil kılavuzunuza uymayabilir - site düzenleyici araç çubuğunun sağ üst kısmındaki küçük düğmeyi tıklayın:

Buradan, renk seçimi gibi farklı öğelerin ayarlarını yönetebilirsiniz. Dilerseniz kendi paletinizi bile oluşturabilirsiniz.

Blok stilleri

Her seferinde bir öğenin üzerinden mi geçmek istiyorsunuz? Her blok ayrı mı? Bazı özel blok stilleri sunan Tove temasıyla da mümkündür.
Onları keşfetmek için, seçtiğiniz bloğa tıklamanız yeterlidir.

Seçilen bloğa bağlı olarak, bir veya birkaç stil önerilecektir . Örneğin, "Alıntı" bloğu, yazı tipi boyutunu değiştiren "Düz" bir stil ve "Büyük" bir stil sunar:

“Görüntü” bloğu iki stil seçeneği sunar: “Yuvarlak” veya “Gölgeli”.

Blok desenleri

Son olarak, Tove temasıyla, blok kalıpların eklenmesi sayesinde sayfalarınızın ve gönderilerinizin içeriğini sıfırdan oluşturabileceğinizi bilin.

Bunlar, birkaç Gutenberg bloğundan yapılmış, kullanıma hazır içerik bölümleridir . WordPress içerik düzenleyicisindeki “Desenler” sekmesine tıklayarak bunları içeriğinize çok kolay bir şekilde ekleyebilirsiniz.

Desenler WordPress 5.5 ile tanıtıldı. Bilginize, içerik düzenleyiciye ek olarak, bunları resmi WordPress web sitesinde belirli bir dizinde de bulabilirsiniz. Bunları kullanmak için, ilgilendiğiniz blok desenini doğrudan içerik düzenleyiciye kopyalayıp yapıştırmanız yeterlidir.

Anders Noren, Tove temasında neredeyse 40 blok desen sunuyor. 7 kategoriye ayrılırlar:

• Harekete geçirici mesaj , yatay veya dikey bir harekete geçirici mesaj oluşturmak için 2 şablonla.
• Blog , Blog sayfanızın görünümünü, özellikle ızgara veya liste olarak özelleştirmek için (toplamda 5 şablon).
• 6 farklı başlık şablonu sunan başlık.

• Genel , burada referansları, fiyat tablolarını, bilgilendirici afişleri ve diğer sosyal ağ simgelerini görüntülemek için 11 şablon bulacaksınız.
• Bir arka plan, bir başlık, düğmeler ve bir metin görüntülemek için 4 şablon içeren Hero .
• Restaurant , restoranlara özel 8 kullanıma hazır şablona sahip: menü, çalışma saatleri, pratik bilgiler, rezervasyon butonu.

• Altbilgi , krediler ve düzen (örneğin sütunlarla) dahil olmak üzere altbilginizi özelleştirmek için 7 şablonla.

Artık Tove'u nasıl manipüle edeceğinizi ve özelleştireceğinizi biliyorsunuz. Devam etmeden önce, bu temanın işlenmesiyle ilgili hislerim.

Genel olarak konuşursak, Tove temasının kullanımı kolaydır ve bu büyük bir avantajdır. İlk başta WordPress site düzenleyicisine alışmanız gerekse de – özellikle bu makaleyi 2022'nin başlarında okuyanlar için – özellikle içerik düzenleyiciyi zaten biliyorsanız, onu çabucak kavrayacaksınız.
Blokları kullanmaktan bıktınız mı? O zaman Tove'un senin için bir sırrı olmayacak.

Son olarak, tema özelleştirmeyle ilgili bu bölümü kapatmak için Tove'u bir sayfa oluşturucu ile birleştirebileceğinizi bilin.

WordPress site düzenleyicisiyle birlikte kullanılmak üzere tasarlandığından, temanın asıl amacı bu değildir. Ancak hiçbir şey, örneğin bir Elementor ile birleştirerek onu bir başlangıç ​​noktası olarak kullanmanızı engellemez.

Elementor ile web sitenizi oluşturun

Ünlü sayfa oluşturucu ile WordPress web sitenizin görünümünü ve verdiği hissi kolayca tasarlayın. Elementor'u deneyin

Elementor'u deneyin

Hala odaklandın mı? O zaman, ilginizi çekmesi gereken birkaç konuyu kapsayan makalenin bir sonraki bölümüne geçelim.

Performans, SEO, duyarlı: 3 ana yönü yakınlaştırın

WordPress Tove temasının performansı

Web yöneticilerinin odaklanma eğilimindeki ilk yönü - ve haklı olarak - sitelerinin yüklenme hızıdır.

Popüler inanışın aksine, SEO üzerinde çok daha az , kullanıcı deneyimi üzerinde bir etkisi olduğu için bu açıkça dikkate alınması gereken bir şeydir.

Sitenizin sayfalarının yüklenme hızını birkaç faktör değiştirebilir: resimlerinizin ağırlığı, kullandığınız eklentiler, web barındırıcınız, PHP sürümünüz vb.

Bunların arasında sizin temanız da var. Ne kadar hafif ve iyi kodlanmışsa, hızlı bir siteye sahip olma olasılığınız o kadar yüksek olur.

Bu açıdan Tove mükemmel bir öğrencidir. Gereksiz unsurlarla aşırı yüklenmemiştir ve sunum sayfasında belirtildiği gibi, Tam Site Düzenleme projesi etrafında inşa edildiğinden Tove “basit ve incedir. Gerçekten ince. Tema 200 kilobaytın biraz üzerinde ve bu baytların çoğu yer tutucu resimlerden ve tema ekran görüntüsünden geliyor” .

Tema demosunu WebPageTest gibi bir performans ölçüm aracında test ederseniz bunu fark edeceksiniz.

Bu arada, siteniz biraz gecikiyorsa, örneğin mükemmel premium eklenti WP Rocket'i (bağlı kuruluş bağlantısı) etkinleştirerek sitenizi biraz güçlendirme fırsatını yakalayın.

SEO

Sayfalarınızın yüklenme hızı konusunda endişeli misiniz? O zaman vicdanlı bir site yaratıcısı olarak, SEO'nuz için kesinlikle endişelenmelisiniz.

İçeriğinizin arama motoru sonuçlarının ilk sayfasındaki iyi sıralamasının, daha fazla trafik ve bununla ilgili her şey (satışlar, indirmeler, bülten abonelikleri, form doldurma, teklif talebi vb.) için çok önemli olduğu doğrudur.

Bir sayfanın Google'da ve diğerlerinde doğru bir şekilde sıralanması için şematik olarak şunları yapmanız gerekir:

• Hedef sorgular (anahtar kelimeler) etrafında sitenizin içeriği üzerinde çalışın .
• Diğer sitelerden bağlantılar alın (ünlü geri bağlantılar).
• Sitenizin mimarisine dikkat edin .

İyi SEO uygulamalarına saygı duyan iyi kodlanmış bir tema, Tove temasında olduğu gibi sağlam temeller üzerinde başlamanıza izin verecektir.

Site içi SEO'nuzu (içerik optimizasyonu) yönetmek için Anders Noren'in temasıyla belirli bir seçeneğiniz olmayacak.

WordPress içerik düzenleyicide, istediğiniz başlık etiketlerini (h1, h2, h3, h4, h5) seçebilecek ve bunları farklı başlıklarınıza uygun şekilde uygulayabileceksiniz.

Geri kalanı için Yoast SEO gibi genel bir SEO eklentisi kullanmanızı öneririm. Arama sonuçları sayfalarında otomatik olarak konum kazanmanızı sağlamaz.

Ancak, doğru şekilde yapmanız koşuluyla, SEO'nuzun bazı önemli yönlerini doğru şekilde yapılandırabilmenizi sağlayacaktır.

Bunun için WPMarmite blogunda en ünlü SEO eklentisi hakkındaki kılavuzumuza gidin.

duyarlı

Sitenizin performansına ve SEO'ya özen göstermek harikadır. Ancak, mobil uyumlu olmayan bir siteyle mahvetmeyin. Tam olarak, buna “duyarlı” diyoruz. tasarım".

Yine, özellikle ziyaretçilerinizin çoğunluğu WordPress sitenize bir akıllı telefon veya tablet ile geliyorsa, bu gerçekten dikkat edilmesi gereken bir şeydir.

İpucu: Ziyaretçilerinizin ne tür bir cihaz kullandığını öğrenmek için Google Analytics: Kitle > Mobil > Genel Bakış'a gidin.

Anders Noren, temalarını tanıtmak için agresif bir pazarlamanın hayranı değil, bu nedenle tema sunum sayfasında Tove'un duyarlı olduğunu onaylayan büyük şatafatlı eklerle karşılaşmazsınız.

Günümüzde, her şeyin yolunda olduğundan emin olmak için muhtemelen bazı ayarlamalar yapmanız gerekse bile, kendine saygılı herhangi bir WordPress teması büyük ölçüde duyarlı olmalıdır.

Çoğu durumda, resmi dizinde bulacağınız WP temaları varsayılan olarak duyarlıdır.

Bunu manuel olarak sağlamak için iki şekilde ilerleyebilirsiniz:

1. İçeriğin birbirinin altına doğru şekilde oturduğunu kontrol etmek için tarayıcı pencerenizi sola veya sağa daraltın . Tove için durum böyle: pencere daraldıkça her şey kusursuz bir şekilde görüntüleniyor.
2. Google tarafından sunulan ücretsiz bir araç kullanın : Mobil Uyumluluk Testi. Bunu doğru şekilde yapmak için Tove'un demo sayfasını teste tabi tuttum. Google bunda yanlış bir şey bulamadı:

İşte buradayız: duyarlı, SEO ve performans, bu zor kısımla işimiz bitti. Bu temanın incelemesinin sonuna geldiğimize göre, tasarı hakkında konuşalım mı?

Tove fiyatı ve kullanıcı desteği

Tove ile, fiyatlandırma söz konusu olduğunda hiçbir sürpriz ve hiçbir gizli maliyet yoktur: Anders Noren tarafından tasarlanan diğer temalar gibi %100 ücretsizdir .

Bu her zaman güzeldir, ancak bilirsiniz, ücretsiz tema azaltılmış destek anlamına gelir.

Evet, hayatta her şeye sahip olamazsın. Tove ile takılırsanız veya teknik bir sorun yaşarsanız, özel kullanıcı desteğiniz olmayacaktır.

İsteklerinizi her zaman Tove genel destek forumunda deneyebilir ve gönderebilirsiniz. Ve işte iyi haber: Anders Noren'in oldukça reaktif olduğunu ve kendisine sorulan soruları çoğu zaman yanıtladığını fark edeceksiniz.

Bununla birlikte, pratikte, karşılaşabileceğiniz sorunların çoğunun WordPress site düzenleyicisiyle ilgili olması gerekeceğini, buna bağlı olan Tove ile değil.

Ve bunun için mucizevi bir tarif yok: Hayvanı evcilleştirmek ve bir şef gibi ustalaşmak için pratik yapman gerekecek .

Tam Site Düzenleme yeni bir proje olduğu için - yazma zamanına dayalı olarak - tüm incelikleri anlamak için konuyu okumanız gerekebilir.

Bunun için Noren, WordPress Core'a katkıda bulunan Carolina Nymark'ın web sitesini önerir: fullsiteediting.com.

Tove teması hakkındaki düşüncemiz

İşte burdayız. Tove tadımı bitti. Bütün bunları sindirmenin ve sorgulamanın zamanı geldi. Bu yazının başından beri üzerinden geçtiğimiz her şeyi özetleyelim.

Tam Site Düzenleme projesinin gereksinimlerini karşılayan Tove, öncü bir WordPress temasıdır. Şu anda, çoğu mağaza ve diğer tema tasarımcıları, WP ile site oluşturma ve düzenlemenin geleceğini temsil eden şeyi yakalayamadı.

Kullanımı basit, hoş ve kodlama gerektirmeden kullanımı kolay Tove, doğal olarak yeni başlayanlar için tasarlanmış bir temadır.

Gerçekten de bu tür bir profile uygun olabilir, özellikle yemek yapıyorsanız ve bir Blog veya basit bir vitrin web sitesi oluşturmak istiyorsanız, ancak bana göre WordPress ve site düzenleyicisi hakkında zaten bilgili kişiler için daha uygun görünüyor .

Nitekim blok kalıplar, sayfalarınıza kolayca kullanıma hazır şablonlar eklemenize izin verse bile, anahtar sayfalarınızın (Blog, 404, vb.) tasarımını ve mimarisini şekillendirmeniz gerekeceğini unutmayın. .).

Ayrıca, resmi dizindeki diğer ünlü temalarla karşılaştırırsak, Tove kişiselleştirme seçenekleri açısından çok daha hafif kalır (amacı bu olmadığı için mantıklıdır).

Bu nedenle, yeni başlayan bir web tasarımcısı, kendisini A'dan Z'ye yönlendiren ve şablonlarla ve Astra, GeneratePress, Kadence veya Blocksy gibi diğer stil seçenekleriyle dolu temalarla kesinlikle daha rahat hissedecektir.

Her durumda, Tove geleceğe bağlıdır . FSE'nin gelişmesiyle genişlemeye devam etmeli ve belki de önümüzdeki aylarda olmazsa olmaz bir tema haline gelecek. O halde yakından takip edilmelidir.

Tove temasını indirin:

Bu konu hakkında ne düşünüyorsun? Zaten FSE ve Tove temasını seçmeyi planlıyor musunuz?

Cevaplarınızı aşağıdaki yorumlara bekliyorum.