Yirmi Yirmi Üç: Topluluktan Yeni Bir Varsayılan WordPress Teması

Twenty Twenty-Three, WordPress 6.1 ile başlatılan yepyeni varsayılan WordPress temasıdır.

Resim veya ek işlevsellik içermeyen minimalist bir temadır. Şablonlar ve stil varyasyonları oluşturmak için bir başlangıç ​​teması olarak elinden gelenin en iyisini verir ve ayrıca WordPress'in en son sürümleriyle sunulan tüm özellikleri test eder. Tema gerçek bir geliştirme ve test ortamı olarak görülebilir, ancak minimalist tarzı, duyarlılığı ve hafifliği onu çok çeşitli amaçlara uygun bloglar ve web siteleri oluşturmak için iyi bir seçenek haline getirir.

Kjell Reigstad, Twenty Twenty-Two temasına girişinde varsayılan temaların geleceği hakkında şunları yazdı:

theme.json, blok şablonları ve blok kalıpları gibi yenilikler, tema geliştirmeyi çok daha basit hale getiriyor ve kullanıcılara sitelerini özelleştirmeleri için yeni yollar sunuyor. Topluluğun, önümüzdeki yıllarda kullanıcılarımız için daha sık ve çeşitli tema ve özelleştirme çözümleri oluşturmak için tüm bunlardan yararlanabileceğine inanmak için nedenler var.

Ve Channing Ritter şu teklifi yaptı:

Temanın kendisini vurgulamak yerine, topluluk üyeleri tarafından tasarlanan bir dizi düşünceli stil varyasyonunu vurgulasak ne olur? Geriden sıyrılan ve minimal olan yeni bir temanın temeli olarak Yirmi Yirmi İki'yi kullanabiliriz - çok çeşitli stil varyasyonlarının parlamasına izin vermek için boş bir tuval.

Ve yeni Twenty Twenty-Three varsayılan temasında olan da budur. Topluluk, varsayılan WordPress temasını tasarlamaya aktif olarak katılmaya çağrıldı ve yeni temayı gerçekten katılımcı bir çalışmanın sonucu haline getirdiği için bunu seviyoruz.

Ancak, yeni WordPress varsayılan temasıyla birlikte gelen stil varyasyonlarını ortaya çıkarmadan önce, Twenty Twenty-Three'nin temel özelliklerini ve ne için uygun olabileceğini öğrenelim.

Sayfa Düzenleri ve Stilleri

Yukarıda bahsedildiği gibi, Twenty Twenty-Three, Twenty Twenty-Two'nun sadeleştirilmiş bir versiyonudur. Yeni varsayılan tema hakkında çarpıcı olan şey, sadeliği ve hafifliğidir. Twenty Twenty-Three esnektir ve şablon düzenleme, Global Stil çeşitleri, Akışkan Tipografi ve blok desenler gibi Gutenberg'in en son site düzenleme özelliklerine mükemmel şekilde uygundur.

Bu nedenle, bu makalede gösterilen ekran görüntülerinde, herhangi bir ıslık olmadan, ancak özelleştirme ve test için mükemmel şekilde uygun olan minimal sayfalar görmeniz şaşırtıcı olmayacaktır.

Size buna bir örnek vermek gerekirse, aşağıdaki resim, öne çıkan resimler içeren ve içermeyen tek gönderi sayfalarını göstermektedir.

Aşağıdaki resim, ana sayfayı bir arşiv sayfasıyla karşılaştırmaktadır.

Yeni tema, Twenty Twenty-Two'nun basitleştirilmiş bir versiyonu olsa bile, önceki varsayılan tema ile karşılaştırıldığında, Twenty Twenty-Three bazı önemli farklılıklar sunuyor.

İlk olarak, başlıkların boyutu küçültülmüş ve varsayılan serif yazı tipinin yerini bir sistemsiz serif yazı tipi almıştır.

Ayrıca farklı bir renk paleti uygulanmış. Yeni Twenty Twenty-Three palet tanımını theme.json'daki aşağıdaki kodda görebilirsiniz:

 { "settings": { "appearanceTools": true, "color": { "palette": [ { "color": "#ffffff", "name": "Base", "slug": "base" }, { "color": "#000000", "name": "Contrast", "slug": "contrast" }, { "color": "#9DFF20", "name": "Primary", "slug": "primary" }, { "color": "#345C00", "name": "Secondary", "slug": "secondary" }, { "color": "#F6F6F6", "name": "Tertiary", "slug": "tertiary" } ] }, } }

Ancak yeni varsayılan temanın ana özelliği, stil varyasyonları kümesidir. Twenty Twenty-Three, her biri farklı bir renk, yazı tipi ailesi ve yazı tipi boyutu kombinasyonu sergileyen on küresel stil varyasyonu ile birlikte gelir.

Karşılık gelen JSON dosyalarını Yirmi Yirmi Üç stil klasöründe bulacaksınız.

Sayfa şablonları, stiller ve Twenty Twenty-Three Stil Varyasyonlarının tam önizlemeleri Figma'da mevcuttur.

Yirmi Yirmi Üç Tipografi

Twenty-Three gibi minimal bir temada tipografi, metni okunabilir, siteyi çekici hale getirmede önemli bir rol oynar ve sonuçta, cihaz ve ekran boyutundan bağımsız olarak ziyaretçilere tatmin edici bir tarama deneyimi sunar.

Bu amaçla Twenty Twenty-Three, yeni bir font ailesi seti ile birlikte gelir ve WordPress 6.1 ile sunulan Fluid Typography'yi kullanır.

yazı tipleri

Twenty Twenty-Three, stil varyasyonlarında kullanılan ve sadelik ve çeşitlilik ile karakterize edilen yeni bir yazı tipi seti içerir:

• Sistem Yazı Tipi – var(--wp--preset--font-family--system-font)
• IBM Plex Mono – var(--wp--preset--font-family--ibm-plex-mono)
• Inter – var(--wp--preset--font-family--inter)
• Source Serif Pro – var(--wp--preset--font-family--source-serif-pro)
• DM Sans – var(--wp--preset--font-family--dm-sans)

IBM Plex Mono , SIL Open Font License (OFL) kapsamında yayınlanan yeni kurumsal IBM yazı tipi olan IBM Plex font setinin bir parçasıdır. Adobe Fonts ve IBM web sitelerinde bunun bir önizlemesini görebilirsiniz.

Inter , Rasmus Andersson tarafından bilgisayar ekranları için hazırlanmış ve tasarlanmış ücretsiz ve açık kaynaklı bir yazı tipi ailesidir. Font ailesini Rasmus Andersson'ın web sitesinde veya Google Fonts'ta önizleyebilir ve indirebilirsiniz.

Source Serif Pro , Adobe Originals'tan bir yazı tipidir ve bir Adobe Fonts hesabıyla ücretsiz olarak kullanabilirsiniz (Adobe font lisansı hakkında daha fazla bilgi edinin).

DM Sans , Google tarafından Colophon Foundry'den görevlendirilen ve Colophon Foundry, Jonny Pinhorn ve Indian Type Foundry tarafından tasarlanan SIL Açık Yazı Tipi Lisansı (OFL) kapsamında lisanslanan başka bir yazı biçimidir.

Akışkan Tipografisi ve Aralığı

Twenty Twenty-Three, WordPress 6.1 ile sunulan Akışkan Tipografi ve Aralık Ön Ayarlarını kullanır.

Yeni varsayılan WordPress teması, WordPress temalarında akıcı tipografi uygulamasının harika bir örneğini sunar ve temalarınızda bu özellik için destek eklemek için onu şablon olarak kullanabilirsiniz.

Aşağıdaki kod, theme.json içindeki settings.typography.fluid ve settings.typography.fontSizes[] özellik tanımlarını gösterir:

 "settings": { ... "typography": { "fluid": true, "fontSizes": [ { "fluid": { "min": "0.875rem", "max": "1rem" }, "size": "1rem", "slug": "small" }, { "fluid": { "min": "1rem", "max": "1.125rem" }, "size": "1.125rem", "slug": "medium" }, { "size": "1.75rem", "slug": "large", "fluid": false }, { "size": "2.25rem", "slug": "x-large", "fluid": false }, { "size": "10rem", "slug": "xx-large", "fluid": { "min": "4rem", "max": "20rem" } } ] } }

typography.fluid ayarı, akışkan tipografisi için destek eklerken, typography.fontSizes[].fluid , minimum ve maksimum yazı tipi boyutu değerini ayarlar.

Akışkan Tipografiye ek olarak, Yirmi Üç, akışkan aralığını da destekler.

WordPress 6.1'den önce, düzenleyicide yalnızca özel boşluk değerleri ayarlamak mümkündü. Bu, WordPress 6.1'den önce tema yazarlarının dolgu, kenar boşluğu ve boşluk için sabit değerler belirtemedikleri anlamına gelir. Bu, birkaç sınırlamaya neden oldu. Örneğin, farklı temalar arasında boşluk ayarlarını kolayca aktarmak veya içerik kopyalayıp yapıştırırken boşluk değerlerini korumak ve farklı siteler arasında kalıpları engellemek mümkün değildi.

Temalar, yeni spacing.spacingScale e spacing.spacingSizes ayarlarını kullanarak Fluid Spacing desteği bildirebilir (Theme.json'da daha fazlasını okuyun: Aralık boyutu ön ayarları ekleme). Yirmi Yirmi Üç'te bu, aşağıdaki ayarlarla yapılır:

 "settings": { "spacing": { "spacingScale": { "steps": 0 }, "spacingSizes": [ { "size": "clamp(1.5rem, 5vw, 2rem)", "slug": "30", "name": "30" }, { "size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)", "slug": "40", "name": "40" }, { "size": "clamp(2.5rem, 8vw, 6.5rem)", "slug": "50", "name": "50" }, { "size": "clamp(3.75rem, 10vw, 7rem)", "slug": "60", "name": "60" }, { "size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)", "slug": "70", "name": "70" }, { "size": "clamp(7rem, 14vw, 11rem)", "slug": "80", "name": "80" } ], "units": [ "%", "px", "em", "rem", "vh", "vw" ] } }

Aşağıdaki video, Twenty Twenty-Three'de çalışırken Akışkan Tipografisini göstermektedir.

Tasarım Belirtimi'nde tipografi ve boşluk ön ayarlarını kontrol edebilirsiniz.

Şablonlar ve Şablon Parçaları

Twenty Twenty-Three ile WordPress 6.1 ile gelen tüm özellikleri ve site düzenleme geliştirmelerini iş başında göreceksiniz.

Bu, özellikle şablonlar ve şablon parçaları için geçerlidir.

Web sitenizde Twenty Twenty-Three ile Site Editor'ü çalıştırdığınızda, on bir şablon ve dört şablon parçasından oluşan bir liste göreceksiniz.

Aşağıdaki resim, site düzenleyicisindeki 404 şablonunu göstermektedir.

İlgili HTML dosyalarını Twenty Twenty-Three'nin şablon ve parça klasörlerinde bulacaksınız.

Aşağıdaki resim, düzenleme modunda Yorumlar şablonu bölümünü gösterir:

theme.json içinde tanımlanmış özel şablonlar ve şablon parçaları bulacaksınız.

Özel Şablonlar

Twenty Twenty-Three, varsayılan şablonlara ek olarak aşağıdaki özel şablonları sağlar:

• Boşluk
• Blog (Alternatif)
• 404
• Öne Çıkan Görselle
• Kapak Bloklu

Bu şablonlar theme.json'da şu şekilde tanımlanır:

 { "customTemplates": [ { "name": "blank", "postTypes": [ "page", "post" ], "title": "Blank" }, { "name": "blog-alternative", "postTypes": [ "page" ], "title": "Blog (Alternative)" }, { "name": "404", "postTypes": [ "page" ], "title": "404" }, { "name": "with-featured-image", "postTypes": [ "page", "post" ], "title": "With Featured Image" }, { "name": "with-cover-block", "postTypes": [ "page", "post" ], "title": "With Cover Block" } ], }

Şablon Parçaları

Şablon parçaları aşağıdaki gibi tanımlanır.

 { "templateParts": [ { "area": "header", "name": "header", "title": "Header" }, { "area": "footer", "name": "footer", "title": "Footer" }, { "area": "uncategorized", "name": "comments", "title": "Comments" }, { "area": "uncategorized", "name": "post-meta", "title": "Post Meta" } ] }

Global Stiller ve Stil Varyasyonları

Yukarıda bahsedildiği gibi, WordPress 6.0'dan başlayarak, tema yazarları temalarıyla birden fazla stil grubunu bir araya getirerek, kullanıcıların temalarını değiştirmeden stil varyasyonları arasında geçiş yapmalarını sağlar.

Twenty Twenty-Three, aralarından seçim yapabileceğiniz on önceden oluşturulmuş stil kombinasyonu sağladığından, bu harika WordPress özelliği yeni varsayılan temanın ana özelliğidir.

Bu stillere Site Düzenleyicinizin Global Stil arayüzünde göz atabilirsiniz. Burada yapabilirsin

• Stillere gözat panelinden global stili değiştirin.
• Tipografi ayarlarını özelleştirin - metin, bağlantılar, başlıklar ve düğmeler
• Varsayılan renkleri düzenleyin veya belirli öğelerin rengini değiştirin
• Ana içerik alanının düzenini özelleştirin
• Belirli öğelerin görünümünü özelleştirin

Bu kadar çok stil varyasyonunun yaratılmasında topluluk katılımının çok önemli olduğunu tekrar belirtmekte fayda var. Yirmi Yirmi Üç projesinin başlangıcından sonra, 8 farklı ülkeden 19 katılımcıdan 38 başvuru alındı ​​(tüm projeleri GitHub'da inceleyebilirsiniz).

38'den 10'u stil varyasyonu seçildi:

• Pitch, Rasmus Andersson'un Inter yazı tipi ailesini kullanan varsayılan stilin karanlık bir versiyonudur.

• Canary, tek bir tür boyutu ve dar bir sütun genişliği kullanır. Ayrıca ilginç bir sınır yarıçapı efekti kullanır.

• Elektrik, site genelindeki tüm tipografi için cesur bir renk kullanır.
• Hac, temel temanın renkli koyu bir versiyonudur.
• Marigold, temel stilin yumuşak ve hoş bir çeşididir.
• Block-Out, görüntüler üzerinde çift tonlu bir efekt sunar.
• Fısıltı, sayfanın kenarındaki kenarlık, düğme stilleri ve benzersiz bağlantı alt çizgileri gibi bazı özel öğeleri gösterir.
• Şerbetin kendine has parlak ve renkli bir görünümü vardır.

• Üzüm, renk paleti ve yazı tipinin keyifli kombinasyonu için seçildi.

Stil varyasyonlarıyla ilgili en havalı şey, stillerinizi oluşturmak için mutlaka bir ön uç geliştirici olmanıza gerek olmamasıdır.

Kodlama konusunda kendinizi rahat hissediyorsanız, Twenty Twenty-Three stiller klasöründe bulunan .json dosyalarından birini seçebilir ve stil varyasyonunuzu oluşturmak için şablon olarak kullanabilirsiniz.

Ancak kodlama sizin işiniz değilse, WordPress.org eklenti dizininden ücretsiz olarak indirebileceğiniz resmi Create Block Theme eklentisini kullanabilirsiniz.

Önce eklentiyi kurun ve etkinleştirin, ardından stil düzenleyiciye gidin. Burada bir kez, tercihlerinize göre renkleri, tipografiyi ve düzeni özelleştirin ve değişikliklerinizi kaydedin.

Değişikliklerinizden memnun kaldığınızda, WordPress yönetici menüsünde Görünüm altında Blok Teması Oluştur'u bulun.

Listedeki son öğeyi kontrol edin: Bir stil varyasyonu oluşturun . Stil varyasyonunuza bir ad atamanız istenecektir. Adı girin ve Tema Oluştur'a tıklayın. Bu, temanın stiller klasöründe yeni bir .json dosyası oluşturacaktır.

Artık stilinizi daha da özelleştirebilir ve hatta diğer WordPress kurulumlarına aktarabilirsiniz.

Create Block Theme eklentisi, WordPress'in en son sürümlerinde bulunan tema ve şablon oluşturma özelliklerinden tam olarak yararlanmak için değerli bir araçtır. Bu sırada, diğer tüm seçeneklere bir göz atabilirsiniz:

• Yirmi Yirmi Üçü Dışa Aktar
• Yirmi Yirmi Üç'ün çocuğunu yarat
• Klon Yirmi Yirmi Üç
• Yirmi Yirmi Üçün Üzerine Yaz
• Boş tema oluştur
• Bir stil varyasyonu oluşturun

Özet

İlk bakışta, yeni varsayılan WordPress teması, bir tür özelliksiz boş kutu gibi görünse de, daha yakından incelendiğinde, en son WordPress site düzenleme özelliklerinden en iyi şekilde yararlanmanıza izin verdiği için bundan çok daha fazlasıdır.

Twenty Twenty-Three'de, özelleştirilecek birçok şablon ve şablon parçası, benzersiz web siteleri oluşturmak için temel olarak kullanılacak 10 stil varyasyonu seti ve Akışkan Tipografi ile başlayan WordPress 6.1'deki tüm yeni özellikler için destek göreceksiniz. Geliştirilmiş Şablon Sistemi.

Twenty Twenty-Three ile, site görünümü ve işlevsellik arasındaki farkın artık çok belirgin olduğu hissi var. Temanın tek işlevi, eklentilere işlevsellik eklenmesini bırakarak sitenin görünümünü düzenlemektir. Ve bu açıdan bakıldığında, Twenty Twenty-Three, WordPress kullanıcılarına en yeni Gutenberg site düzenleme özelliklerinin tümünü sunarak harika bir iş çıkarıyor. Bir web sitesinin görünümünü özelleştirmek hiç bu kadar kolay olmamıştı.

Artık sana kalmış. Yeni temayı zaten bir test ortamında kullandınız mı? Henüz özel stil varyasyonları oluşturmayı denediniz mi? Aşağıdaki yorumlarda düşüncelerinizi bizimle paylaşın.