Yirmi Yirmi İki ve WordPress Blok Temalarına Derin Bir Bakış

Başlangıçta planlanandan biraz daha geç olsa da, yeni bir WordPress varsayılan teması alıyoruz. Adı Yirmi Yirmi İki!

Yeni WordPress varsayılan teması, yaklaşmakta olan WordPress 5.9 sürümüyle birlikte gelir. Yeni tema hakkında daha fazlasını öğrenmek istedik, bu yüzden Twenty Twenty-Two'yu WordPress 5.9 çalıştıran yerel bir geliştirme ortamına kurduk ve test ettik.

Size yeni WordPress temasının giriş ve çıkışlarına ilişkin derinlemesine bir genel bakış sunmak için düşüncelerimizi tamamlamadan önce sonuçlarımızı göstereceğiz.

Twenty Twenty-Two, şimdiye kadarki en esnek, hafif ve özelleştirilebilir varsayılan tema olacak şekilde tasarlanmıştır. Blokları, kalıpları ve şablonları test etmek için harika bir oyun alanı sağlar.

Bir blok teması olarak, WordPress 5.9 ile gelen en çok beklenen özellikler olan Tam Site Düzenleme, Global Stiller, Gezinme blokları ve yeni resim galerilerini daha iyi keşfetmenize yardımcı olacaktır.

Twenty Twenty-Two'nun ilk varsayılan blok teması olduğunu hemen söylemeliyiz!

Yeni temanın en iddialı hedeflerinden biri de kullanıcıları güçlendirmek . Kutudan çıkan çok sayıda desen ve şablonla, kullanıcılar yalnızca birkaç tıklamayla karmaşık düzenler oluşturabilir. Gerisi sadece stil özelleştirmesidir.

Teknik açıdan bakıldığında, Twenty Twenty-Two hakkında yazmak, WordPress 5.9 ile gelen en yeni ve en güçlü özellikler hakkında yazmaktan çok farklı değildir. Ancak Twenty Twenty-Two, yeni site düzenleme özelliklerini daha iyi değerlendirmemiz ve platformun geleceği hakkında daha iyi bir fikir edinmemiz için bize bir büyüteç sağlıyor.

Bu yüzden burada sizi yeni temayla tanıştıracağız.

İlk olarak, kullanıcıların WordPress 5.9 ve Twenty Twenty-Two ile deneyimleyecekleri yeni site düzenleme akışını keşfedeceğiz.

Bundan sonra, Twenty Twenty-Two'da uygulanan ana blok tema özelliklerine dalacağız. Global Stilleri , blok kalıplarını , şablonları ve şablon parçalarını tanıyacaksınız.

Ancak Twenty Twenty-Two ve WordPress blok temaları hakkında söylenecek daha çok şey var. Bu nedenle, bonus bir bölüm olarak, Twenty Twenty-Two'nun özelliklerinin theme.json dosyasından yararlanarak nasıl genişletileceğine dair hızlı bir genel bakış sunacağız.

İşte bir sonraki WordPress varsayılan temasına ilk bakış! @jffng ile birlikte bu projenin ortak liderliğini yapmaktan heyecan duyuyorum ve ikimizin de buna katkıda bulunacağınızı ve/veya onu kullanmaktan keyif alacağınızı umuyoruz! https://t.co/covjrpgFIO

— kjellr (@kjellr) 6 Ekim 2021

Hemen çalışmaya başlayalım ve yepyeni Twenty Twenty-Two WordPress varsayılan temasına dalalım.

Yirmi Yirmi İki Yeni Bir Site Düzenleme Akışı Getiriyor

Birkaç Tam Site Düzenleme özelliği, WordPress 5.9 ile birlikte çekirdeğe gelir. Twenty Twenty-Two gibi bir blok teması kurulu olan en son WordPress sürümünü kullanan site sahipleri yakında şunları yapabilecek:

• Daha fazla blok ve kalıp kullanarak gönderiler ve sayfalar oluşturun ve düzenleyin
• Global Styles arayüzü aracılığıyla theme.json dosyasında tanımlanan ayarları ve stilleri özelleştirin
• Sayfalar ve gönderiler için şablonlar oluşturun ve düzenleyin
• Üstbilgi, altbilgi ve diğer şablon alanları için şablon bölümleri oluşturun ve düzenleyin

Tüm bu özellikler çekirdeğe birleştirilirken, WordPress'in ana katkıda bulunanları bilgi mimarisinin gelişimini tartışıyor ve tüm Site Düzenleme Akışını yeniden tasarladı.

Yirmi Yirmi İki'yi etkinleştirdikten sonra fark edebileceğiniz ilk şey, site düzenleyicisine giriş noktasının artık WordPress kontrol panelinizin ana menüsünde yer almadığı, ancak Görünüm menüsünün altına taşındığıdır.

Şablon ve stil düzenleme özelliklerini aynı Görünüm menüsü altına getirmek, düzenleme deneyimini kolaylaştırmalıdır. Erişmekte olduğunuz özelliklerin sayfalarınızın sunumuyla ilgili olduğunu anlamayı kolaylaştırmalıdır.

Düzenleyici menü öğesi, sitenin ana sayfa şablonunu açar. Okuma ayarlarınıza bağlı olarak bu, en son gönderiler sayfanız veya statik bir sayfa olabilir.

Şimdi, sol üst köşedeki WordPress simgesine tıklamak, üç menü öğesi içeren yeni bir site düzenleyici gezinme menüsü görüntüler: Site , Şablonlar ve Şablon Parçaları .

Hadi daha yakından bakalım.

Site seçeneği, ana sayfa şablonunu açar (en son blog makaleleri veya statik ana sayfa).

Şablonlar menü öğesinden, mevcut şablonların bir listesini alırsınız. Düzenleyicide başlatmak için listedeki herhangi bir şablona tıklayabilirsiniz.

Bu yazı itibariyle, Twenty Twenty-Two, 11 şablon sunmaktadır.

Sağdaki üç nokta ( ︙ ) simgesine tıklamak özelleştirmelerinizi temizlemenizi sağlar.

Tema şablonlarından farklı olarak, özel şablonlar yalnızca yeniden adlandırılabilir veya kaldırılabilir (ancak özel şablonları gönderi düzenleyicide düzenleyebilirsiniz).

Şablon Parçaları menü öğesi, özelleştirmeleriniz için düzenleyicide açabileceğiniz kullanılabilir şablon parçalarını listeler.

Varsayılan olarak Yirmi Yirmi İki'ye eklenen dört şablon parçası bulacaksınız. İmleci değiştirilmiş bir şablonun üzerine getirdiğinizde, şablonun özelleştirildiğini size bildiren bir araç ipucu görüntülenir.

Sağdaki üç nokta ( ︙ ) simgesine tıklayarak bu özelleştirmeleri temizleyebilirsiniz.

Şablonları ve Şablon Parçalarını Düzenleme

Düzenleyici , şablonlarınızın ve şablon parçalarınızın yapısını özelleştirmek için arabirim sağlar.

Burada blokları ve kalıpları kolayca ekleyebilir veya düzenleyebilirsiniz ve değişiklikleriniz bu şablonu kullanan her sayfaya otomatik olarak uygulanacaktır.

Aşağıdaki resim, düzenleyicideki 404 sayfa şablonunu göstermektedir. Yalnızca bir başlık, bir paragraf ve bir arama kutusu içeren oldukça basit bir şablon. Yine de, kullanıcı arayüzünün nasıl çalıştığını iyi anlamamızı sağlar.

Burada, ihtiyaçlarınıza en uygun şekilde düzenlemeler yapabilir ve şablonları özelleştirebilirsiniz. Örneğin, ziyaretçilerinizin katılımını artırmak ve onları web sitenizin içeriğine göz atmaya davet etmek için bir resim gönderileri kalıbı eklemek isteyebilirsiniz.

Şablon düzenleyicinin üst kısmındaki başlık açılır menüsü, kullanılabilir Şablon alanlarının bir listesini görüntüler. Aynı liste, Ayarlar kenar çubuğundaki Şablon sekmesinde de görünür.

Herhangi bir şablon alanına (örn. Başlık) tıklayarak, doğrudan düzenlemek istediğiniz şablon bölümüne yönlendirileceksiniz.

Sağdaki üç nokta simgesine tıklarsanız, Yalıtılmış şablon parçası düzenleyicisine erişirsiniz.

Şablon parçası düzenleyicisi ayrıca, şablonun farklı ekran çözünürlüklerinde nasıl davrandığını kontrol etmenize olanak tanıyan bir çift sürüklenebilir tutamaç sağlar.

Değişikliklerinizden memnun kaldığınızda, düzenlemelerinizi kaydedin ve nihai sonucu kontrol etmek için ana şablon düzenleyiciye geri dönün.

Yeni bilgi mimarisine daha derinden dalmak istiyorsanız, aşağıdaki makalelere göz atmak isteyebilirsiniz:

• Site düzenleme IA kavramları: Yeni özelliklere nasıl erişilir ve erişilir
• Site Düzenleme iA kavramları – Bölüm 2

Özünde Yirmi Yirmi İki: theme.json'a Hızlı Bir Bakış

Twenty Twenty-Two ve blok temalarının (Bricky gibi) nasıl çalıştığını tam olarak anlamak için, theme.json dosyasına dayalı yeni tema yapılandırmasına ve stil mekanizmasına bir göz atalım.

WordPress 5.8 ile tanıtılan bu yeni mekanizma, tema geliştiricilerinin düzenleyiciyi yapılandırmasına ve merkezi bir yapılandırma noktasından özellik desteği eklemesine olanak tanır.

Twenty Twenty-Two'da theme.json dosyası aşağıdaki yapıya sahiptir:

 { "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }

Her bölüme hızlıca bir göz atalım.

sürüm

version alanı, şu anda 2 olan belirtim sürümünü tanımlar.

Ayarlar

settings bölümü, ayarları global veya blok düzeyinde tanımlar. En üst düzeyde tanımlanan ayarlar tüm blokları etkiler, ancak bloklar tek tek genel ayarları geçersiz kılabilir. Yirmi Yirmi İki'de aşağıdaki ayarları bulacaksınız:

 { "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }

Varsayılan ayarlara hazır ayarlar denir ve belirli bir adlandırma kuralına dayalı olarak CSS özel özellikleri ve sınıf adları oluşturmak için kullanılır:

• CSS özel özelliği: --wp--preset--{preset-category}--{preset-slug}
• CSS sınıf adı: .has-{preset-slug}-{preset-category}

Bir tema kendi ön ayarlarını tanımladıktan sonra, styles bölümündeki bloklara ve öğelere stil vermek için karşılık gelen CSS özel özellikleri kullanılabilir.

stiller

styles bölümü, temaların blok ve öğe varsayılan stillerini tanımladığı yerdir. Örneğin, çekirdek Düğme bloğu için aşağıdaki Yirmi Yirmi İki stiline bakın:

 { "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }

Özellik bildirimlerinde kullanılan CSS özel özelliklerini fark edeceksiniz.

Özel Şablonlar

customTemplates bölümü, bir temanın kendi özel şablonlarını bildirdiği yerdir. name ve title alanları zorunludur. Temalar, postTypes özelliğini ayarlayarak şablonu hangi yazı tipinin kullanabileceğini de bildirebilir.

Twenty Twenty-Two, dört özel şablon sağlar:

 { "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }

İlgili .html dosyalarını blok şablonlar klasöründe bulacaksınız.

Şablon Parçaları

templateParts bölümü, şablon parçası tanımlarını içerir:

 { "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

name ve title alanları zorunludur. Temalar, şablon bölümünün düzenleyicide oluşturulacağı bir area terimi de bildirebilir.

Şablon parçaları .html dosyaları, şablon-parçalar klasöründe bulunur.

Artık Twenty Twenty-Two'nun theme.json dosyası hakkında daha fazla bilgi sahibi olduğunuza göre, temanın özelliklerini ve yeni düzenleme arayüzünü daha kapsamlı bir şekilde keşfedebiliriz.

Haydi Yirmi Yirmi İki'nin Global Tarzlarına dalalım .

Yirmi Yirmi İkide Global Tarzlar

Twenty Twenty-Two' style.css dosyasına bakarsanız, minimum sayıda CSS bildirimi içerdiğini fark ettiğinizde şaşırabilirsiniz. Bunun nedeni, stillerin theme.json dosyasında blok tabanlı temalarda bildirilmesidir .

WordPress 5.9, blok teması kullanıcılarının Global Stiller adlı bir kullanıcı arayüzünden site öğelerinin görünümünü özelleştirmesini sağlayan yeni bir özellik sunarak işleri bir adım daha ileriye taşıyacak.

Global Stiller arayüzüne, Editörün sağ üst köşesine yerleştirilen yeni Stiller simgesinden erişilebilir (ayrıca bkz. Global Stiller Arayüzü).

Bu simgeye tıklamak, üç ayrı panel içeren yeni bir Stiller kenar çubuğu görüntüler:

• Özelleştirmelerinizin bir önizlemesini gösteren bir Önizleme paneli
• Tipografi , Renkler ve Düzen için belirli kontrol gruplarına erişim sağlayan Global Stiller paneli
• Blok düzeyinde stil ayarlarına erişim sağlayan bir Bloklar öğesi

Yirmi Yirmi İki'nin Renk Paleti

Renkler paneli, kullanılabilir paletleri düzenlemenize ve Arka Plan , Metin veya Bağlantılar için renkleri atamanıza veya değiştirmenize yardımcı olabilir.

Palet panelinde, Tema veya Varsayılan paletleri özelleştirebilir ve hatta özel paletinizi oluşturabilirsiniz.

Renk kontrollerini oluşturan kodu henüz bulamadınız mı?

Değilse, favori kod düzenleyicinizde Twenty Twenty-Two'nun theme.json dosyasını açın. Aşağıdaki renk paleti bildirimlerini bulacaksınız:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }

Aşağıdaki resim, yukarıdaki kodun Twenty Twenty-Two'nun renk paletiyle nasıl eşleştiğini göstermektedir.

Şimdi, belirli bir blok için varsayılan arka plan rengini değiştirmek istediğinizi varsayalım. Bloğun arka planı için farklı bir renk seçmek, öğenin background-color özelliğine farklı bir CSS değişkeni atayacaktır. Aşağıdaki resim bunun bir örneğini sunmaktadır:

Ve hepsi bu! Özelleştiriciye tek bir satır özel CSS kodu eklemeniz veya bunun için bir alt tema oluşturmanız gerekmez.

Ama bazı ek örneklerle Twenty Twenty-Two'nun Global Stillerini keşfetmeye devam edelim.

Tipografi Ayarları

Tipografi paneli, web sitenizin Metin ve Bağlantılar öğeleri için tipografi stillerini küresel düzeyde özelleştirebileceğiniz yerdir.

Her öğe, yazı tipi ailesini, boyutunu ve satır yüksekliğini özelleştirmeniz için bir grup denetime erişim sağlar.

Bu kontrolleri hangi kodun oluşturduğunu merak ediyor musunuz?

Twenty Twenty-Two'nun theme.json dosyasını açın ve typography bölümünü bulun. Aşağıdaki ayarları göreceksiniz:

 { "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }

Yukarıdaki koddan iki yazı tipi ailesi ve beş yazı tipi boyutu görmeyi bekleyebilirsiniz. Ve doğru tahmin ederdin.

Yukarıdaki kodun Global Stiller Tipografi ayarlarına nasıl çevrildiği aşağıda açıklanmıştır:

Satır yüksekliği kontrolünü hangi ayarın oluşturduğunu tahmin edebilirsiniz. Yirmi Yirmi İki'de, bunun için belirli bir ayar bulamazsınız çünkü bu, birkaç ayar bildirimi için bir kısayol olan appearanceTools özelliği tarafından etkinleştirilmiştir (sonraki bölüme bakın).

Düzen ve Görünüm Araçları

Genel Stiller kenar çubuğundaki son öğe Düzen'dir . Bu yazının yazıldığı sırada yalnızca bir padding kontrolü içerir.

Yirmi Yirmi İki'de, Düzen paneli, aynı anda birkaç ayarı etkinleştirmek için kullanılabilen bir boole olan appearanceTools ayar özelliği tarafından etkinleştirilir:

 { "settings": { "appearanceTools": true } }

"appearanceTools": true , yalnızca aşağıdaki bildirim bloğunun yerini alır:

 { 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }

Tamam — artık theme.json dosyasında belirtilen ayarların ilgili Global Stiller kontrolleriyle nasıl eşleştiğini anlamışsınızdır.

Yeni WordPress varsayılan temasının tam resmini elde etmek için hala bulmacamızın bir parçası eksik: blok desenleri .

Yirmi Yirmi İki Blok Desen

Yirmi Yirmi İki'nin çoğunlukla bir desen koleksiyonu olduğu söylenebilir - ve hemen hemen öyle. Twenty Twenty-Two'da, web sayfalarınız için şaşırtıcı ve öngörülemeyen iç içe blok yapıları oluşturmak için aralarından seçim yapabileceğiniz tonlarca kullanıma hazır blok deseni bulacaksınız.

Buradaki anahtar terim, kullanıcı yetkilendirmesidir . Bu da uyuyor çünkü blok kalıplarla çekici bir portföyden tek sayfalık bir tanıtım web sitesine kadar her türlü şeyi oluşturabilirsiniz, HTML veya CSS hakkında hiçbir bilginiz olmasa bile!

Ve WordPress 5.9, kalıplara tam ekran bir modda göz atmanıza izin veren bir araç olan yeni Kalıp Gezgini ile kalıp sistemine önemli iyileştirmeler getiriyor.

Yeni araç ayrıca blok kalıplarını doğrudan Kalıp Dizininden hızlı ve kolay bir şekilde içe aktarmanıza olanak tanır. Bu, hem WordPress kullanıcıları hem de geliştiriciler için yeni olanaklar açar, bu nedenle kullanımının gelecekte önemli ölçüde artması muhtemeldir.

Twenty Twenty-Two, beş kategoride çok sayıda kalıp (65'in üzerinde) içerir.

Bu sağlam desen seti, yeni varsayılan temayla birlikte gelen şablonlar ve şablon parçalarıyla mükemmel bir şekilde eşleşerek gerçekten şaşırtıcı bir düzenleme deneyimi sunar.

Henüz blok kalıpları deneme şansınız olmadıysa, basit bir örnekle neden bu kadar güçlü araçlar olarak kabul edildiğini size göstereceğiz.

Varsayılan altbilgiyi Dizin ve Tek Gönderi şablonlarından kaldırmak ve onu farklı bir Yirmi Yirmi İki blok kalıbıyla değiştirmek istediğinizi varsayalım.

Dizin şablonunu özelleştirmek için Görünüm menüsünden veya WordPress ön uç araç çubuğu düğmesinden Site Düzenleyicisini başlatın.

Sayfada bulunan şablon alanlarının listesini gösteren başlık açılır menüsünü görüntülemek için Dizin düğmesine tıklayın. Altbilgi'nin yanındaki üç nokta düğmesini ve ardından Altbilgiyi Düzenle'yi tıklayın.

Yukarıda belirtildiği gibi, bu, yalıtılmış şablon parçası düzenleyicisini başlatacaktır.

Şimdi blok yerleştiriciyi açın ve Patterns üzerine tıklayın.

Yeni Desen Gezgini aracını başlatın, Yirmi Yirmi İki Altbilgi kategorisini seçin ve istediğiniz altbilgiyi seçin.

Şimdi blokları ihtiyaçlarınıza göre ekleyin ve düzenleyin.

Başlığı kaydedin ve değişikliklerinizden memnun kaldığınızda sitenizi yeniden kontrol edin.

Aşağıdaki resim, farklı üstbilgi ve altbilgi özelleştirmeleriyle üç şablonu (Dizin, Tek Gönderi ve Ayırıcısız Tek Gönderi) karşılaştırmaktadır:

Yirmi Yirmi İkiyi Çocuk Temasıyla Genişletme

Bir blok tema için bir alt tema oluşturmak, klasik bir tema için bir alt tema oluşturmaktan oldukça farklıdır.

Ancak bir kez bir blok temasının yapısını iyi anladığınızda, Yirmi Yirmi İki veya başka herhangi bir blok tema için bir alt tema oluşturmayı zor bulmayacaksınız.

Öyleyse, Twenty Twenty-Two tabanlı web sitenizin görünümünü ve verdiği hissi nasıl özelleştireceğinizi bulalım.

1. Yirmi Yirmi İki İçin Bir Alt Tema Ayarlama

/wp-content/themes dizininizde yeni bir klasör oluşturun ve onu istediğiniz gibi adlandırın (tema geliştirme standartlarına göre). Bu örnekte, alt tema klasörünü yirmitwentytwo-child olarak adlandırdık.

Şimdi bir style.css dosyasına ihtiyacınız var. Favori kod düzenleyicinizi açın ve aşağıdaki stil sayfasını oluşturun:

 /* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */

Her zaman olduğu gibi, alanları ihtiyaçlarınıza göre düzenleyebilirsiniz.

Alt temanız artık önizleme için hazır. Görünüm > Temalar yönetici ekranından etkinleştirebilirsiniz.

2. Genel Ayarları Özelleştirme

WordPress 5.9'dan beri, theme.json dosyasına sahip alt temalar, ana temanın ayarlarını devralır. Çocuğun theme.json'ı bir stil kümesi tanımlarsa, bu stiller ebeveynin stillerinin üzerine uygulanır.

Böylece, tüm orijinal seçimlerimizi yeniden tanımlamak yerine, yalnızca küçük bir özel ayar bloğu ve stil tanımları içeren bir theme.json dosyası oluşturabiliriz.

Özel Renk Paleti Nasıl Bildirilir

Twenty Twenty-Two için bir alt tema oluştururken en kolay iş renk paletini değiştirmektir. Tek yapmanız gereken, aşağıda gösterildiği gibi çocuğunuzun theme.json dosyasında yeni bir renk paleti tanımlamaktır:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }

Dosyanızı kaydedin ve site düzenleyicisine geri dönün. Yukarıda tanımlanan renk paleti, varsayılan Yirmi Yirmi İki'nin renk paletinin yerini almış olmalıdır.

Renkler paletin kendisinde sırayla gösterilecek ve isimleri Github'da tartışılan en iyi uygulamaları ve adlandırma kurallarını takip etmelidir.

Carolina Nymark tarafından hazırlanan bu kapsamlı genel bakışta theme.json renk seçenekleri hakkında daha fazla bilgi edinebilirsiniz.

Özel Çift Ton Filtreleri Nasıl Bildirilir

Ayrıca varsayılan çift tonlu renkleri özel filtre setinizle değiştirebilirsiniz.

Bunu yapmak için, aşağıdaki kodu palette özelliğiyle aynı seviyede çocuğunuzun theme.json ayarlarına eklemeniz yeterlidir:

 { "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }

Dosyanızı kaydedin ve sonucu blok düzenleyicide kontrol edin. Yalnızca tek bir çift tonlu filtre görmelisiniz.

3. Blok Stillerini Özelleştirme

Daha önce de belirttiğimiz gibi, WordPress 5.9 ile artık Global Styles arayüzünden theme.json ayarlarını ve stillerini özelleştirebilirsiniz.

Blok stilleri, Global Stiller arayüzünden yalnızca blok , ilgili block.json dosyasında belirli işlevsellik için destek beyan ederse özelleştirilebilir. Ancak alt temanızın theme.json dosyasındaki varsayılan engelleme ayarlarını geçersiz kılabilirsiniz.

Şimdi, Gönderi Başlığı ve Grup blok stillerini geçersiz kılmak istediğinizi varsayalım. Tek yapmanız gereken eklemek veya geçersiz kılmak istediğiniz stilleri aşağıda gösterildiği gibi tanımlamaktır:

 { "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } }

Yukarıdaki örnekte, core/post-title için yazı tipi ailesini, arka plan rengini ve dolgu değerlerini ve ayrıca core/group için üst ve alt kenar boşluklarını değiştirdik.

Aşağıdaki resim, sonucu genel sitede göründüğü gibi göstermektedir:

Ve inceleme için bu kadar!

Bu yazının kapsamını aşacağı için şimdilik çocuk temalarına daha fazla dalmayacağız. Bu arada, Github'da Twenty Twenty-Two alt temalarının daha fazla örneğini bulacaksınız.

Özet

Yeni WordPress varsayılan teması Twenty Twenty-Two ve (onu şimdiye kadar piyasaya sürülen en esnek varsayılan tema yapan) özelliklerine daha yakından bakarken, WordPress 5.9 ile tanıtılan yeni bilgi mimarisini açıkladık. Hatta yeni Global Styles arayüzüne bir göz attık.

Yolda birçok heyecan verici yeni özellik var ve yeni düzenleme ortamının zamanla daha sağlam, güvenilir ve işlevsel hale geldiği açık görünüyor.

Birçok yeni WordPress özelliği yoldayken, diğerleri kayboluyor veya önemi azalıyor. Pek çok kullanıcı, Özelleştiriciye ne olacağını ve mevcut temalarla geriye dönük uyumluluğu en iyi şekilde nasıl koruyacağını merak ediyor.

Ancak, temaları tek bir sınırda engellemek için aniden geleneksel temalardan atlamayı beklememelisiniz. Şu anda seçebileceğiniz dört farklı tema türü var:

• Blok temaları : FSE için tasarlanmış temalar
• Evrensel temalar : Hem Özelleştirici hem de Site Düzenleyici ile çalışan temalar
• Karma temalar : theme.json gibi FSE özelliklerini destekleyen klasik temalar
• Klasik temalar : PHP şablonları, function.php vb. içeren temalar.

Bu nedenle, şimdilik korkmayın - henüz blok temalarına geçmeye hazır hissetmiyorsanız, aralarından seçim yapabileceğiniz birçok çözüm var.

Ve şimdi size kalmış! Büyük bir sıçrama yapmaya ve şu anda blok temaları kullanmaya hazır mısınız? Aşağıdaki yorumlarda düşüncelerinizi bizimle paylaşın.