Twenty Twenty-Three är det helt nya standardtemat för WordPress som lanseras med WordPress 6.1.
Det är ett minimalistiskt tema utan bilder eller ytterligare funktioner. Det fungerar utmärkt som ett starttema för att bygga mallar och stilvariationer och även testa alla funktioner som införs med de senaste versionerna av WordPress. Temat kan ses som en riktig utvecklings- och testmiljö, även om den minimalistiska stilen, responsiviteten och lättheten gör det till ett bra alternativ för att skapa bloggar och webbplatser som lämpar sig för många olika ändamål.
I sin introduktion till Twenty Twenty-Two-temat skrev Kjell Reigstad om framtiden för standardteman:
Innovationer som theme.json, blockmallar och blockmönster gör utvecklingen av teman mycket enklare och ger användarna nya sätt att anpassa sina webbplatser. Det finns anledning att tro att WordPress community kan utnyttja allt detta för att bygga mer frekventa och varierande tema- och anpassningslösningar för våra användare under de kommande åren.
Och Channing Ritter lade fram följande förslag:
Tänk om vi i stället för att betona själva temat skulle framhäva en uppsättning stilvariationer som har utformats av medlemmar i vårt community? Vi skulle kunna använda Twenty Twenty-Two som grund för ett nytt tema som är avskalat och minimalistiskt – en tom duk för att låta en mängd olika stilvariationer få glänsa.
Och det är vad som händer med det nya standardtemat Twenty Twenty-Three. WordPress community har uppmanats att aktivt delta i utformningen av standardtemat för WordPress, och vi uppskattar detta eftersom det gör det nya temat till resultatet av ett verkligt deltagande arbete.
Men innan vi avslöjar de stilvariationer som inkluderas i det nya standardtemat för WordPress, ska vi ta reda på de grundläggande funktionerna hos Twenty Twenty-Three och vad det kan passa för.
Sidlayouter och stilar
Som nämnts ovan är Twenty Twenty-Three en avskalad version av Twenty Twenty-Two. Det som är slående med det nya standardtemat är dess enkelhet och lätthet. Twenty Twenty-Three är flexibelt och passar perfekt för Gutenbergs senaste funktioner för redigering av webbplatser, som t.ex. redigering av mallar, variationer av globala stilar, flytande typografi och blockmönster.
Så det kommer inte att vara någon överraskning att du i skärmdumparna som visas i den här artikeln ser minimala sidor utan några krusiduller, men som är perfekt lämpade för anpassning och testning.
Som ett exempel på detta visar bilden nedan enstaka inläggssidor med och utan utvalda bilder.
I följande bild jämförs startsidan med en arkivsida.
Även om det nya temat är en förenklad version av Twenty Twenty Twenty-Two, så uppvisar Twenty Twenty-Three några viktiga skillnader jämfört med det tidigare standardtemat.
För det första har storleken på rubrikerna minskats och standardtypsnittet med serif har ersatts av ett seriffritt systemtypsnitt.
Dessutom har en annan färgpalett använts. Du kan se den nya palettdefinitionen för Twenty Twenty-Three i följande kod från 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"
}
]
},
}
}
Men den viktigaste funktionen hos det nya standardtemat är dess uppsättning stilvariationer. Twenty Twenty-Three har tio globala stilvariationer, som var och en visar upp en annan kombination av färger, typsnittsfamiljer och typsnittsstorlekar.
Du hittar motsvarande JSON-filer i mappen Twenty Twenty-Three styles.
Fullständiga förhandsvisningar av sidmallar, stilar och stilvarianter av Twenty Twenty-Three finns tillgängliga på Figma.
Twenty Twenty-Three’s typografi
I ett minimalt tema som Twenty-Three spelar typografin en viktig roll för att göra texten läsbar, webbplatsen tilltalande och i slutändan ge besökarna en givande surfupplevelse, oavsett enhet och skärmstorlek.
För detta ändamål kommer Twenty Twenty-Three med en ny uppsättning av typsnittsfamiljer och använder Flytande Typografi som introducerades med WordPress 6.1.
Typsnitt
Twenty Twenty-Three har en ny uppsättning typsnitt som används i stilvariationer och som kännetecknas av enkelhet och variation:
- System Font –
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 är en del av typsnittet IBM Plex, det nya IBM-företagets typsnitt som släppts under SIL Open Font License (OFL). Du kan se en förhandsgranskning av detta på Adobe Fonts och IBM:s webbplatser.
Inter är en typsnittsfamilj med fri och öppen källkod som är skapad och utformad för datorskärmar av Rasmus Andersson. Du kan förhandsgranska och ladda ner typsnittsfamiljen på Rasmus Anderssons webbplats eller på Google Fonts.
Source Serif Pro är ett typsnitt från Adobe Originals och du kan använda detta kostnadsfritt med ett Adobe Fonts-konto (läs mer om licensiering av Adobe-teckensnitt).
DM Sans är ett annat typsnitt som är licensierat enligt SIL Open Font License (OFL), som beställdes av Google från Colophon Foundry och utformades av Colophon Foundry, Jonny Pinhorn och Indian Type Foundry.
Flytande typografi och avstånd
Twenty Twenty-Three använder Flytande Typografi och Förinställda Mellanrum som introducerades med WordPress 6.1.
Det nya standardtemat för WordPress ger ett bra exempel på implementering av flytande typografi i WordPress-teman och du kan använda detta som en mall för att lägga till stöd för den här funktionen i dina teman.
Följande kod visar settings.typography.fluid och settings.typography.fontSizes[] egenskapsdefinitioner i 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"
}
}
]
}
}Inställningen typography.fluid lägger till stöd för flytande typografi medan typography.fontSizes[].fluid anger minsta och högsta värde för teckensnittsstorleken.
Förutom flytande typografi har Twenty Twenty-Three även stöd för flytande Mellanrum.
Innan WordPress 6.1 var det endast möjligt att ställa in anpassade avståndsmått i redigeraren. Detta betyder att innan WordPress 6.1 kunde temaförfattare inte ange fasta värden för utfyllnad, marginal och mellanrum. Detta resulterade i flera begränsningar. Det var exempelvis inte möjligt att enkelt överföra avståndsinställningar mellan olika teman eller att behålla avståndsvärden när man kopierade och klistrade in innehåll och blockmönster mellan olika webbplatser.
Teman kan deklarera stöd för Flytande Mellanrum med hjälp av de nya inställningarna spacing.spacingScale och spacing.spacingSizes (läs mer i Theme.json: Förinställningar för mellanrumsstorlek). I Twenty Twenty-Three görs detta med följande inställningar:
"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"
]
}
}I videon nedan visas Flytande Typografi i Twenty Twenty-Three.
Du kan kontrollera förinställningar för typografi och avstånd i Design Specitikationer.
Mallar och malldelar
Med Twenty Twenty-Three ser du i praktiken alla funktioner och förbättringar av webbplatsredigering som inkluderas i WordPress 6.1.
Detta gäller särskilt när det gäller mallar och malldelar.
När du startar Webbplatsredigeraren med Twenty Twenty-Three igång på din webbplats ser du en lista med elva mallar och fyra malldelar.
Bilden nedan visar 404-mallen i webbplatsredigeraren.
Du hittar motsvarande HTML-filer i Twenty Twenty-Three’s mappar för mallar och delar.
Bilden nedan visar malldelen Kommentarer i redigeringsläge:
Du hittar definierade anpassade mallar och malldelar i theme.json.
Anpassade mallar
Utöver standardmallarna tillhandahåller Twenty Twenty-Three följande anpassade mallar:
- Blank
- Blogg (alternativ)
- 404
- Med bild
- Med omslagsblock
Dessa mallar definieras i theme.json på följande sätt:
{
"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"
}
],
}Malldelar
Malldelar definieras på följande sätt.
{
"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"
}
]
}Globala stilar och stilvariationer
Som nämnts ovan kan temaförfattare från och med WordPress 6.0 kombinera flera uppsättningar stilar med sina teman, vilket gör det möjligt för användare att växla mellan stilvariationer utan att ändra sitt tema.
Den här fantastiska WordPress-funktionen är den viktigaste egenskapen hos det nya standardtemat, eftersom Twenty Twenty-Three erbjuder tio förbyggda stilkombinationer att välja mellan.
- Du kan bläddra bland dessa stilar i gränssnittet Global Style i din webbplatsredigerare. Här kan du
- Byt global stil från panelen Bläddra stilar.
- Anpassa typografiska inställningar – text, länkar, rubriker och knappar
- Redigera standardfärger eller ändra färgen på specifika element
- Anpassa layouten för det huvudsakliga innehållsområdet
- Anpassa utseendet på specifika element
Det är värt att återigen notera att när så många stilvariationer skapades var WordPress community’s engagemang avgörande. Efter projektstarten för Twenty Twenty-Three mottogs 38 bidrag från 19 bidragsgivare från 8 olika länder (du kan utforska alla projekt på GitHub).
Av dessa 38 har 10 stilvariationer valts ut:
-
- Pitch är en mörk version av standardstilen som använder typsnittsfamiljen Inter av Rasmus Andersson.
- Canary använder en enda typstorlek och en smal kolumnbredd. Den använder även en intressant kantradie-effekt.
- Electric använder en fet färg för all typografi på hela webbplatsen.
- Pilgrimage är en färgad mörk version av bastemat.
- Marigold är en mjuk och behaglig variant av grundstilen.
- Block-Out har en duotoneffekt på bilderna.
- Whisper visar upp några anpassade element, som gränsen runt sidans kant, knappstilar och unika länkunderstrykningar.
- Sherbet har ett unikt ljust och färgglatt utseende
- Grapes valdes för sin tilltalande kombination av färgpalett och typsnitt.
- Aubergine är en iögonfallande delad bakgrund som är mörkare.
Det häftigaste med stilvariationer är att du inte nödvändigtvis behöver vara en frontend-utvecklare för att skapa dina stilar.
Om du känner dig bekväm med kodning kan du välja en av de .json-filer som finns i mappen Twenty Twenty-Three styles och använda den som mall för att bygga din stilvariation.
Men om kodning inte är din grej kan du använda det officiella pluginet Create Block Theme, som du kan ladda ner kostnadsfritt från WordPress.org:s pluginkatalog.
Installera och aktivera först pluginet och navigera sedan till stilredigeraren. När du är här anpassar du färger, typografi och layout enligt dina önskemål och sparar dina ändringar.
När du är nöjd med dina ändringar, hitta Skapa blocktema under Utseende i WordPress admin-menyn.
Kontrollera det sista objektet längst ner i listan: Skapa en stilvariation. Du kommer att bli ombedd att ge stilvariationen ett namn. Ange namnet och klicka på Skapa tema. Detta kommer att skapa en ny .json-fil i temats stilmapp.
Nu kan du anpassa din stil ytterligare och till och med exportera den till andra WordPress-installationer.
Pluginet Create Block Theme är ett värdefullt verktyg för att dra full nytta av de funktioner för skapande av teman och mallar som finns tillgängliga i de senaste versionerna av WordPress. När du ändå håller på kan du ta en titt på alla de andra alternativen:
- Exportera Twenty Twenty-Three
- Skapa ett barntema till Twenty Twenty-Three
- Klona Twenty Twenty-Three
- Skriv över Twenty Twenty-Three
- Skapa ett tomt tema
- Skapa en stilvariation
Sammanfattning
Även om det nya standardtemat för WordPress vid första anblicken kan se ut som en slags tom låda utan funktioner, är det vid närmare granskning mycket mer än så. Det låter dig nämligen utnyttja de senaste funktionerna för redigering av WordPress-webbplatser på bästa sätt.
I Twenty Twenty-Three ser du många mallar och malldelar som du kan anpassa, en uppsättning med 10 stilvariationer som du kan använda som grund för att skapa unika webbplatser och stöd för alla nya funktioner som finns i WordPress 6.1. Detta inkluderar bland annat Flytande Typografi och ett Förbättrat Mallsystem.
Med Twenty Twenty-Three blir skillnaden mellan webbplatsens utseende och funktionalitet väldigt markant. Temats enda funktion är att reglera webbplatsens utseende, och att lämna tillägget av funktionaliteter till plugins. Och ur denna synvinkel gör Twenty Twenty-Three ett utmärkt jobb och erbjuder WordPress-användare alla de senaste Gutenberg-funktionerna för redigering av webbplatser. Att anpassa utseendet på en webbplats har aldrig varit enklare.
Det är upp till dig nu. Har du redan använt det nya temat i en testmiljö? Har du provat att skapa egna stilvariationer? Dela dina tankar med oss i kommentarerna nedan.
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
Lämna ett svar