Twenty Twenty-Three: O nouă temă WordPress implicită din comunitate

Twenty Twenty-Three este noua temă implicită WordPress lansată cu WordPress 6.1.

Este o temă minimalistă, fără imagini sau funcționalități suplimentare. Oferă tot ce e mai bun ca temă de pornire pentru a construi șabloane și variații de stil și, de asemenea, pentru a testa toate caracteristicile introduse cu cele mai recente versiuni de WordPress. Tema ar putea fi văzută ca un mediu real de dezvoltare și testare, deși stilul minimalist, receptivitatea și ușurința o fac o opțiune bună pentru crearea de bloguri și site-uri web potrivite pentru o mare varietate de scopuri.

În introducerea sa la tema Twenty Twenty-Two, Kjell Reigstad a scris despre viitorul temelor implicite:

Inovații precum theme.json, șabloanele de bloc și modelele de bloc fac dezvoltarea temelor mult mai simplă și oferă utilizatorilor noi modalități de a-și personaliza site-urile. Există motive să credem că comunitatea poate valorifica toate acestea pentru a construi soluții de temă și personalizare mai frecvente și diverse pentru utilizatorii noștri în următorii ani.

Și Channing Ritter a făcut următoarea propunere:

Ce se întâmplă dacă, în loc să subliniem tema în sine, am evidenția un set opinie de variații de stil concepute de membrii comunității? Am putea folosi Twenty Twenty-Two ca bază pentru o nouă temă care este redusă și minimală - o pânză goală pentru a lăsa o gamă variată de variații de stil să strălucească.

Și asta se întâmplă cu noua temă implicită Twenty Twenty-Three. Comunitatea a fost chemată să participe activ la proiectarea temei WordPress implicite și asta ne place pentru că face ca noua temă să fie rezultatul muncii cu adevărat participative.

Dar înainte de a descoperi variațiile de stil care vin în pachet cu noua temă implicită WordPress, să aflăm caracteristicile de bază ale Twenty Twenty-Three și pentru ce se potrivește.

Aspecte de pagină și stiluri

După cum am menționat mai sus, Twenty Twenty-Three este o versiune redusă a lui Twenty Twenty-Two. Ceea ce este izbitor la noua temă implicită este simplitatea și ușurința sa. Twenty Twenty-Three este flexibil și se potrivește perfect cu cele mai recente funcții de editare a site-ului Gutenberg, cum ar fi editarea șabloanelor, variațiile Global Styles, Fluid Typography și modelele de bloc.

Așadar, nu va fi o surpriză că în capturile de ecran prezentate în acest articol, veți vedea pagini minime fără clopoței și fluiere, dar perfect potrivite pentru personalizare și testare.

Pentru a vă oferi un exemplu în acest sens, imaginea de mai jos arată pagini de postare cu și fără imagini prezentate.

Următoarea imagine compară pagina de pornire cu o pagină de arhivă.

Chiar dacă noua temă este o versiune simplificată a lui Twenty Twenty-Two, în comparație cu tema implicită anterioară, Twenty Twenty-Three prezintă câteva diferențe cheie.

În primul rând, dimensiunea titlurilor a fost redusă, iar fontul serif implicit a fost înlocuit cu un font sistem sans serif.

De asemenea, a fost aplicată o paletă de culori diferită. Puteți vedea noua definiție a paletei Twenty Twenty-Three în următorul cod din theme.json :

 { "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" } ] }, } }

Dar principala caracteristică a noii teme implicite este setul său de variații de stil. Twenty Twenty-Three vine cu zece variații globale de stil, fiecare dintre acestea prezentând o combinație diferită de culori, familie de fonturi și dimensiuni de font.

Veți găsi fișierele JSON corespunzătoare în folderul Twenty Twenty-Three de stiluri .

Previzualizări complete ale șabloanelor de pagină, stilurilor și Variațiilor de stil din Twenty Twenty-Three sunt disponibile pe Figma.

Tipografie Douăzeci și douăzeci și trei

Într-o temă minimală precum Twenty-Three, tipografia joacă un rol cheie în a face textul lizibil, site-ul atrăgător și, în cele din urmă, oferă vizitatorilor o experiență de navigare plină de satisfacții, indiferent de dispozitiv și dimensiunea ecranului.

În acest scop, Twenty Twenty-Three vine cu un nou set de familii de fonturi și utilizează Fluid Typography introdus cu WordPress 6.1.

Fonturi

Twenty Twenty-Three prezintă un nou set de fonturi care sunt utilizate în variații de stil și sunt caracterizate prin simplitate și varietate:

• Font de sistem – 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 face parte din setul de fonturi IBM Plex, noua fontă corporativă IBM lansată sub SIL Open Font License (OFL). Puteți vedea o previzualizare a acestuia pe site-urile Adobe Fonts și IBM.

Inter este o familie de fonturi cu sursă deschisă gratuită, creată și concepută pentru ecranele computerelor de către Rasmus Andersson. Puteți previzualiza și descărca familia de fonturi pe site-ul Rasmus Andersson sau pe Google Fonts.

Source Serif Pro este un tip de literă de la Adobe Originals și îl puteți folosi gratuit cu un cont Adobe Fonts (citiți mai multe despre licențierea fonturilor Adobe).

DM Sans este un alt tip de licență cu licență SIL Open Font License (OFL), care a fost comandat de Google de la Colophon Foundry și proiectat de Colophon Foundry, Jonny Pinhorn și Indian Type Foundry.

Tipografie fluidă și spațiere

Twenty Twenty-Three utilizează tipografie fluidă și presetări de spațiere introduse cu WordPress 6.1.

Noua temă implicită WordPress oferă un exemplu excelent de implementare fluidă a tipografiei în temele WordPress și o puteți folosi ca șablon pentru a adăuga suport pentru această caracteristică în temele dvs.

Următorul cod arată definițiile proprietăților settings.typography.fluid și settings.typography.fontSizes[] în theme.json :

 "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" } } ] } }

Setarea typography.fluid adaugă suport pentru tipografia fluidă, în timp ce typography.fontSizes[].fluid setează valoarea minimă și maximă a dimensiunii fontului.

Pe lângă tipografia fluidelor, Twenty-Three acceptă și spațierea fluidelor.

Înainte de WordPress 6.1, era posibil doar setarea valorilor de spațiere personalizate în editor. Aceasta înseamnă că înainte de WordPress 6.1 autorii temei nu puteau specifica valori fixe pentru umplutură, marjă și decalaj. Acest lucru a dus la mai multe limitări. De exemplu, nu a fost posibil să se transfere cu ușurință setările de spațiere între diferite teme sau să se păstreze valorile de spațiere la copierea și lipirea conținutului și blocarea modelelor între diferite site-uri.

Temele pot declara suport pentru Fluid Spacing folosind noile setări spacing.spacingScale e spacing.spacingSizes (citiți mai multe în Theme.json: Adăugați presetări de dimensiune spațiere). În Twenty Twenty-Three acest lucru se face cu următoarele setări:

 "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" ] } }

Videoclipul de mai jos arată tipografia fluidă în acțiune în Twenty Twenty-Three.

Puteți verifica presetări de tipografie și spațiere în Specificația de proiectare.

Șabloane și părți de șabloane

Cu Twenty Twenty-Three, veți vedea în acțiune toate funcțiile și îmbunătățirile de editare a site-ului care vin cu WordPress 6.1.

Acest lucru este valabil mai ales pentru șabloane și părți de șablon.

Când lansați Editorul de site cu Twenty Twenty-Three rulând pe site-ul dvs. web, veți vedea o listă de unsprezece șabloane și patru părți de șabloane.

Imaginea de mai jos arată șablonul 404 din editorul site-ului.

Veți găsi fișierele HTML corespunzătoare în șabloanele și folderele părți ale Twenty Twenty-Three.

Imaginea de mai jos afișează partea șablon Comentarii în modul de editare:

Veți găsi șabloane personalizate și părți de șablon definite în theme.json .

Șabloane personalizate

Pe lângă șabloanele implicite, Twenty Twenty-Three oferă următoarele șabloane personalizate:

• Gol
• Blog (alternativă)
• 404
• Cu imagine prezentată
• Cu bloc de acoperire

Aceste șabloane sunt definite în theme.json după cum urmează:

 { "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" } ], }

Piese de șablon

Părțile șablonului sunt definite după cum urmează.

 { "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" } ] }

Stiluri globale și variații de stil

După cum am menționat mai sus, începând cu WordPress 6.0, autorii de teme pot combina mai multe seturi de stiluri cu temele lor, permițând utilizatorilor să comute între variațiile de stil fără a-și schimba tema.

Această caracteristică excelentă WordPress este principala caracteristică a noii teme implicite, deoarece Twenty Twenty-Three oferă zece combinații de stil prefabricate din care să alegeți.

Puteți răsfoi aceste stiluri în interfața Stil global a Editorului dvs. de site. Aici poti

• Comutați stilul global din panoul Răsfoiți stiluri .
• Personalizați setările de tipografie - text, linkuri, titluri și butoane
• Editați culorile implicite sau modificați culoarea anumitor elemente
• Personalizați aspectul zonei principale de conținut
• Personalizați aspectul elementelor specifice

Merită remarcat din nou că în crearea atâtor variații de stil, implicarea comunității a fost crucială. După lansarea proiectului Twenty Twenty-Three, au fost primite 38 de propuneri de la 19 colaboratori din 8 țări diferite (puteți explora toate proiectele pe GitHub).

Din 38, au fost selectate 10 variante de stil:

• Pitch este o versiune întunecată a stilului implicit care folosește familia de fonturi Inter de Rasmus Andersson.

• Canary folosește o singură dimensiune de tip și o lățime îngustă a coloanei. De asemenea, folosește un efect interesant de rază de margine.

• Electric folosește o culoare îndrăzneață pentru toată tipografia de pe site.
• Pelerinajul este o versiune întunecată colorată a temei de bază.
• Gălbenele este o variație moale și plăcută a stilului de bază.
• Block-Out are un efect duoton asupra imaginilor.
• Whisper prezintă câteva elemente personalizate, cum ar fi chenarul din jurul marginii paginii, stilurile de butoane și sublinierea unică a linkurilor.
• Sherbet are un aspect unic luminos și colorat

• Strugurii a fost selectat pentru combinația plăcută de paletă de culori și tip de font.

Cel mai tare lucru despre variațiile de stil este că nu trebuie să fiți neapărat un dezvoltator front-end pentru a vă crea stilurile.

Dacă vă simțiți confortabil cu codificare, puteți alege unul dintre fișierele .json care se găsesc în folderul Twenty Twenty-Three stiluri și îl puteți utiliza ca șablon pentru a vă construi variația de stil.

Dar dacă codarea nu este treaba ta, poți folosi pluginul oficial Create Block Theme, pe care îl poți descărca gratuit din directorul de pluginuri WordPress.org.

Mai întâi, instalați și activați pluginul, apoi navigați la editorul de stil. Odată ajuns aici, personalizați culorile, tipografia și aspectul în funcție de preferințele dvs. și salvați modificările.

Odată ce sunteți mulțumit de modificările dvs., găsiți Creare temă bloc sub Aspect din meniul de administrare WordPress.

Verificați ultimul element din listă: creați o variație de stil . Vi se va cere să atribuiți un nume variației dvs. de stil. Introduceți numele și faceți clic pe Creare temă . Aceasta va crea un nou fișier .json în folderul de stiluri al temei.

Acum vă puteți personaliza și mai mult stilul și chiar îl puteți exporta în alte instalări WordPress.

Pluginul Create Block Theme este un instrument valoros pentru a profita din plin de funcțiile de creare de teme și șabloane disponibile cu cele mai recente versiuni de WordPress. În timp ce sunteți la asta, s-ar putea să aruncați o privire la toate celelalte opțiuni:

• Export Twenty Twenty-Tree
• Creați un copil de Twenty Twenty-Three
• Clona Douăzeci și douăzeci și trei
• Suprascrie douăzeci și douăzeci și trei
• Creați o temă goală
• Creați o variație de stil

rezumat

Deși la prima vedere noua temă implicită WordPress poate arăta ca un fel de cutie goală fără caracteristici, la o inspecție mai atentă, este mult mai mult decât atât, deoarece vă permite să profitați la maximum de cele mai recente funcții de editare a site-ului WordPress.

În Twenty Twenty-Three, veți vedea multe șabloane și părți de șabloane de personalizat, un set de 10 variații de stil pe care să le folosiți ca bază pentru crearea de site-uri web unice și suport pentru toate noile funcții disponibile în WordPress 6.1, începând cu Fluid Typography și Sistem de șabloane îmbunătățit.

Cu Twenty Twenty-Three, sentimentul este că diferența dintre aspectul și funcționalitatea site-ului este acum puternică. Singura funcție a temei este de a regla aspectul site-ului, lăsând adăugarea de funcționalități la plugin-uri. Și din acest punct de vedere, Twenty Twenty-Three face o treabă grozavă, oferind utilizatorilor WordPress cele mai recente funcții de editare a site-ului Gutenberg. Personalizarea aspectului unui site web nu a fost niciodată mai ușoară.

Depinde de tine acum. Ați folosit deja noua temă într-un mediu de testare? Ați încercat încă să creați variații de stil personalizate? Împărtășiți-vă gândurile cu noi în comentariile de mai jos.