Yirmi Yirmi Bir Tema İncelemesi: İyi Tasarlanmış ve Son Teknoloji

0
21

Başka bir yıl sona eriyor (ve ne yıldı), bizi karşılayan yeni bir WordPress varsayılan teması. Ve bunun şu anlama geldiğini biliyorsunuz: Derinlemesine bir Yirmi Yirmi Bir tema incelemesi zamanı.

En son güncelleme olan 5.6 ile piyasaya sürüldü ve bugün indirilebilir.

Kaputun altına bir göz atmaya hazır mısınız? O zaman bunu yapalım!

Yirmi Yirmi Bir: Genel Bakış

Pekala, bu incelemeye yeni Twenty Twenty-One’ın ne hakkında olduğuna dair kuş bakışı başlayalım.

Minimalist Tasarım

Yirmi Yirmi Bir’in görünümü ve verdiği his, doğası gereği oldukça minimalisttir. Tek sütunlu bir düzen, widget’lı bir altbilgi ve menüler için iki konumla birlikte gelir.

Selefi Twenty Twenty gibi, yeni varsayılan tema başka bir temanın üzerine inşa edildi. Yirmi Yirmi Bir durumunda, temel, Automattic tarafından yayınlanan bir tema olan Seedlet tarafından sağlanır.

seedlet tema tasarımı

Bu seçim, ata temasının, web geliştiricilerinin onu değiştirmesini kolaylaştırmak için CSS’yi kullanma biçiminden dolayı kasıtlı olarak yapılmıştır. Buna aşağıda daha ayrıntılı olarak gireceğiz.

Twenty Twenty-one, temel düzenin yanı sıra pastel tonlara dayalı basit bir renk paleti sunuyor çünkü tasarım lideri Mel Choyce-Dawn’ın dediği gibi “Pasteller ve sessiz renkler şu anda güzel.” Varsayılan yeşildir ancak siyah ve beyaz dahil ek seçenekleriniz de vardır.

yirmi yirmi bir renk paleti

Erişilebilirliğe Odaklanın

Minimalist tasarımın yanı sıra, Twenty Twenty-One erişilebilirliğe büyük önem veriyor. Bu temada, tüm yeteneklere sahip kullanıcılara sunulması sadece sonradan düşünülen değil, ana özelliktir. Geliştiriciler onu WCAG 2.1 uyumlu hale getirmeyi hedefliyor.

Bunu başarmak için en ilginç özelliklerden biri karanlık mod desteğidir. Bununla ilgili daha fazlası aşağıda.

Gutenberg’in tüm avantajlarından yararlanın

Daha önceki diğer varsayılan temalar gibi, Yirmi Yirmi Bir, Gutenberg ile kullanılmak üzere tasarlanmıştır. Yalnızca kullanıcıların blok düzenleyiciyi kullanarak ihtiyaçlarına göre özelleştirebilecekleri temel bir tuval sağlamak içindir.

Bu amaçla, aşağıdakiler dahil blok özellikleri için geniş bir destekle birlikte gelir:

Özel blok yazı tipi boyutları ve satır yüksekliği Yazı tipi rengi, arka plan rengi (degradeler dahil) ve bağlantı rengi için kontroller Duyarlı ortam yerleştirmeleri

Tema ayrıca, bu yazıda tanıyacağınız bir dizi blok modeliyle birlikte gelir.

Kolay Özelleştirilebilirlik

Twenty Twenty-One, tipografisi için sistem yazı tiplerini kullanır, bu performans nedenleriyle iyi bir seçimdir.

Bilmiyorsanız, sistem yazı tipleri, kullanıcıların işletim sistemlerine yüklenen yazı biçimleridir. Özel yazı tiplerinin aksine, sayfalarınıza dahil etmek için onları uzak bir web sunucusundan indirmenize gerek yoktur. Bunun yerine, tarayıcı bunları doğrudan yerel sabit sürücüden çekebilir.

Ayrıca Mel Choyce-Dawn, amacının nötr yazı tipleri sağlamak olduğunu, böylece temanın birçok amaç için kullanılabileceğini ve bir çocuk teması oluşturmayı kolaylaştırmak olduğunu söyledi. Yukarıda bahsedilen CSS işaretlemesi, bu yöne doğru atılan başka bir adımdır.

Şimdiye kadar her şey temiz mi? O halde temanın neler sunabileceğine daha derin dalalım.

Yirmi Yirmi Bir İnceleme: Tema Özelleştirme Seçenekleri

Derinlemesine incelemenin ilk adımı olarak, Yirmi Yirmi Bir’in birlikte gönderdiği özelleştirme seçeneklerine bir göz atacağız. Hepsini, Görünüm> Özelleştir altındaki WordPress Özelleştiricide bulabilirsiniz.

Site Kimliği ve Özel Logo

Site Kimliği altında, özel bir logo, site simgesi (diğer adıyla favicon) ayarlayabilir ve site başlığının ve etiket satırının başlığın içinde görüntülenip görüntülenmeyeceğini belirleyebilirsiniz.

yirmi yirmi bir özelleştirme seçeneği incelemesi: site kimliği ayarları

Bu oldukça standarttır. Eklediğiniz herhangi bir logo, site başlığının, etiket satırının ve menünün üzerinde ortalanmış olarak görünür.

yirmi yirmi bir logo etkinleştirildi

Ancak, etiket satırını ve site başlığını devre dışı bıraktığınızda, sola doğru hareket eder ve gezinme menüsüyle aynı satırda görünür.

Site başlığı ve sloganı olmadan yirmi yirmi bir logo konumu

Logo resmi için en uygun boyut 300 x 100 pikseldir. En iyi sonuçlar için şeffaf bir arka plan veya web sitenizle aynı arka plan rengini de kullanmalısınız.

Renkler ve Koyu Mod

Bu panelin altında, basit bir renk seçiciden arka plan rengini seçebilirsiniz. Yukarıda bahsedilen önceden ayarlanmış renk şemaları alt kısımda yer almaktadır. Varsayılan’a tıklamak sizi başlangıçtaki pastel yeşile geri götürür.

Yirmi Yirmi gibi, yazı tipi rengi de okuma için yeterli kontrastı korumak için arka plan rengindeki değişikliklere otomatik olarak ayarlanır.

Ancak buradaki en ilginç ayar, Koyu Mod desteğini etkinleştirmek için onay kutusudur. Etkinleştirildiğinde, web sitenizin koyu arka planlı ve açık renkli metinli bir sürümüne geçmek için sitenizin köşesine bir geçiş düğmesi ekleyecektir.

ön uçta yirmi yirmi bir karanlık mod etkinleştirildi

Geçiş, kullanıcı aşağı kaydırdığında kaybolur. Karanlık mod, bir ziyaretçinin cihazı etkinleştirdiğinde de otomatik olarak etkinleştirilecektir (bunun nasıl yapılacağını öğrenmek için Kablolu’daki bu gönderiye bakın).

Bu özelliği kullanmayı planlıyorsanız, sitenizin karanlık modda nasıl göründüğünü kontrol ettiğinizden emin olun. Özellikle logoların görünürlüğüne, kontrastına, görüntü parlaklığına vb. Bir bakın.

Karanlık mod, 2020 web tasarım trendlerinden biridir, bir WordPress varsayılan temasında böylesine kusursuz bir entegrasyon görmek harika.

Gezinme Menüleri

Temanın iki menü konumu vardır: üstbilgi bölümünün altındaki birincil gezinme ve altbilginin içinde diğeri.

yirmi yirmi bir altbilgi menüsü

İkincisi ayrıca bir sosyal menüyü de destekler. Bu, sosyal ağlara bağlantılar eklediğinizde, Twenty Twenty-One’ın bunları otomatik olarak ilgili simgelere dönüştürdüğü anlamına gelir.

yirmi yirmi bir sosyal menü

Bu, Yirmi Ondokuz’da zaten mevcut olan bir şey ama yeni temanın da onu desteklediğini bilmek güzel.

Yirmi Yirmi Bir Editör Seçenekleri

Gutenberg işlevselliği bu sürümün ana odak noktalarından biri olduğu için, elbette Twenty Twenty-One’ın burada neler sunduğunu da gözden geçirdik.

İyi Yürütülmüş Editör Stilleri

Göze çarpan ilk şey, temanın editör stil sayfalarından tam anlamıyla yararlanmasıdır. Düzenleme deneyimi, özel arka plan rengi dahil, ön ucunuzla aynı görünür.

yirmi yirmi bir editör stili örneği

Bu, karanlık modu içerir. Ön uçta bu özelliği açıp kapattığınızda, Gutenberg için de geçerlidir.

yirmi yirmi bir karanlık mod editör stili örneği

Çok Çeşitli Blok Desenleri

Bahsedildiği gibi, Yirmi Yirmi Bir varsayılan teması, ağırlıklı olarak Gutenberg blok desenlerinin kullanımına odaklanır. Bunları, yeni bir blok eklemek için artı sembolüne tıklayarak, Tümüne gözat’ı ve ardından Kalıplar sürücüsünü seçerek bulabilirsiniz.

wordpress'te blok desenleri nasıl eklenir

İşte temanın dokunulduğunda sahip olduğu şeyler:

Büyük metin – Tam olarak adın söylediği gibi. Tüm içerik alanı boyunca uzanan büyük bir başlık bloğu (yazı tipi boyutu varsayılan olarak Gigantic olarak ayarlanmıştır) Bağlantılar alanı – Sosyal ağlara veya bir e-posta adresine bağlantılar içeren başlık / harekete geçirici mesaj Medya ve makale başlığı – Soldaki resim, sağda başlık, ayırıcı ve paragraf. Üst üste binen resimler – Dikey olarak hizalanmış üst üste binen üç resim. İki resim vitrini – Solda daha büyük medya ve metin bloğu, sağda daha küçük, çerçeveli resim – Üst üste binen dikey öğeler, her ikisi Portfolio listesi – Ayırıcılara bölünmüş küçük resimleri içeren projelerin listesi İletişim bilgileri – Kişi bilgileri ve sosyal medya profilleri için üç sütun.

İşte bir sayfadaki tüm blok kalıpları (hepsinin örnek içerikle nasıl geldiğine dikkat edin):

yirmi yirmi bir blok desen örneği

Elbette, her şey tamamen özelleştirilebilir ve düzenleyici ayrıca Özelleştiricide görüldüğü gibi aynı renk paletlerini sunar. Bu şekilde, renklerin birbirine uyduğundan emin olabilirsiniz.

wordpress editörü içindeki renk ayarları

Bu arada, kendi blok desenlerinize katkıda bulunmak istiyorsanız, bunu buradan yapabilirsiniz (Github’a giriş yapmanız gerekir).

Yirmi Yirmi Bir’in Geliştirici Dostu Özellikleri

İncelemenin başında da belirtildiği gibi Twenty Twenty-One, menşe teması nedeniyle web geliştiricileri ve tasarımcıları için ilginç özellikler de sunuyor. Bu, stil sayfasını açtığınızda hemen görünür.

yirmi yirmi bir gözden geçirme: stil sayfası css değişkenleri

Gördüğünüz gibi, CSS özel özellikleriyle, yani değişkenlerle dolu.

Değişkenlere aşina değilseniz, bunlar tekrar eden değerlerin yerine geçer. Böylece, örneğin siteniz için stil sayfasının başında aşağıdaki gibi bir ana renk tanımlayabilirsiniz:

–global – renkli birincil: # 28303d;

Şimdi bu rengi bir elemana eklemek istediğinizde, renk bildirimi yerine değişkeni kullanabilirsiniz.

.navigation {renk: var (- global – renk-birincil); }

Diğer değişkenlere bir değişken atamak da mümkündür:

–global – renk sınırı: var (- global – renk-birincil);

Avantajı: Temanızda farklı bir ana renk ayarlamak gibi geniş değişiklikler yapmak istiyorsanız, tüm dosya boyunca arama yapmak ve değiştirmek yerine yalnızca tek bir yeri değiştirmeniz gerekir.

Bu, temanızı veya alt temanızı çok daha rahat ve daha hızlı özelleştirmenizi sağlar. Daha önce de belirtildiği gibi, bu Yirmi Yirmi Bir’in arkasındaki ana fikirlerden biridir.

Ayrıca, CSS değişkenleri nispeten yeni bir özellik olsa da, tarayıcı desteği mükemmel olduğundan kullanımları güvenlidir.

css değişkenleri için tarayıcı uyumluluğu

Geleceğe Bir Bakış: Ön Uç Düzenleme

Aklınızı uçurmaya hazır mısınız? Pekala, hazırlanın.

Twenty Twenty-One’ın Twenty Twenty-One Blocks adlı ikinci bir geliştirme sürümü var. Yirmi Yirmi ve Yirmi Ondokuz için Blocl sürümleriyle birlikte Github’da bulabilirsiniz.

Gutenberg Editor eklentisinin en son sürümüyle birlikte Twenty Twenty-One Blocks indirir, kurar ve etkinleştirirseniz, WordPress kontrol panelinde Site Editörü adlı yeni bir seçenek bulacaksınız.

wordpress panosundaki yeni site düzenleyici menü öğesi

Tıklandığında, sitenizin ön ucunu Gutenberg editörü benzeri bir arayüzle düzenleyebileceğiniz bir ekrana yönlendirirsiniz.

yirmi yirmi bir incelemesi: wordpress tam site düzenleme deneyi

Menüye sosyal simgeler eklemek, ayırıcı eklemek ve kaldırmak, öğelerin konumunu değiştirmek ve daha fazlası gibi şeyler yapabilirsiniz. Daha önce bir WordPress sayfa oluşturucuyla çalıştıysanız, bu çok tanıdık gelecektir.

Ayrıca, sayfa şablonu bazında değişiklikler de yapabilirsiniz. Bu şekilde, tek tek gönderilerin, sayfaların, kategori arşivlerinin veya 404 hata sayfanızın tasarımını düzenleyebilirsiniz. Aynısı, üstbilgi ve altbilgi gibi şablon bölümleri için de mümkündür.

wordpress tam site düzenleme deneyinde sayfa şablonunu düzenle

Ek olarak, renkler, yazı tipleri gibi genel stilleri ve hatta mevcut bloklar için varsayılan stilleri değiştirebilirsiniz.

wordpress tam site düzenleme genel stilleri değiştir

Kısacası, sitenizin görünümünü herhangi bir kodlama olmadan tamamen değiştirmenize olanak tanır. Oldukça havalı, değil mi?

Ancak bunun, gelecek sürümde onu WordPress çekirdeği haline getirmeyecek deneysel bir özellik olduğunu unutmayın. Yine de, WordPress platformunda gelecekteki potansiyel deneyime bir göz atmak için bir şans.

Son Düşünceler: Yirmi Yirmi Bir İnceleme

Yeni bir WordPress varsayılan temasının yayınlanması her zaman heyecan vericidir. Sınıfının en iyisi teknolojiye, web tasarımındaki trendlere ve WordPress platformunun yeni yeteneklerine göz atmak için bir fırsat.

Yirmi Yirmi Bir hayal kırıklığına uğratmaz. Basit ve bastırılmış bir dış cephenin altında pek çok işlevsellik yatar. Blok desenleri, karanlık mod desteği ve CSS değişkenlerine ve erişilebilirliğe odaklanma, Twenty Twenty-One’ı WordPress ekosferinin ve genel olarak web’in mevcut durumunun ön saflarına yerleştiren önemli noktalardan sadece birkaçı. Ek olarak, Block sürümü size WordPress tam site düzenlemesinin olası geleceği hakkında heyecan verici bir görünüm sunar.

Genel olarak, kolayca özelleştirilebilen modern, şık ve teknolojik olarak gelişmiş bir temadır. Başkalarının bundan ne çıkaracağını görmekten heyecan duyuyoruz. Tema 8 Aralık 2020 (WordPress 5.6 ile birlikte) için planlandı.

Twenty Twenty-One ile ilgili görüşünüz nedir? Bu tema incelemesinde özellikle heyecanlandığınız bir şey var mı? Aşağıdaki yorumlar bölümünde bize bildirin!

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz