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.

Twenty Twenty Twenty-Three förhandsgranskning
Twenty Twenty Twenty-Three förhandsgranskning
Lättviktigt, flexibelt och med en uppsättning fantastiska stilvariationer från WordPress community 👩‍🎨 Möt Twenty Twenty-Three, det nya standardtemat för WordPress som lanseras med WordPress 6.1 🛬Klicka för att tweeta

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.

Förhandsgranskning av ett enda inlägg med och utan utvald bild i Twenty Twenty-Three
Förhandsgranskning av ett enda inlägg med och utan utvald bild i Twenty Twenty-Three

I följande bild jämförs startsidan med en arkivsida.

Startsida jämfört med arkivsida i Twenty Twenty-Three
Startsida jämfört med arkivsida i Twenty Twenty-Three

Ä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.

Storleken på rubrikerna i Twenty Twenty-Three
Storleken på rubrikerna i Twenty Twenty-Three

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"
				}
			]
		},
	}
}
Twenty Twenty Twenty-Three’s standardfärger
Twenty Twenty Twenty-Three’s  standardfärger

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.

Twenty Twenty-Three’s globala stilar
Twenty Twenty-Three’s globala stilar

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 Twenty-Three’s förhandsgranskningar av stilvariationer i Figma
Twenty Twenty Twenty-Three’s förhandsgranskningar av stilvariationer i 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 Fontvar(--wp--preset--font-family--system-font)
  • IBM Plex Monovar(--wp--preset--font-family--ibm-plex-mono)
  • Intervar(--wp--preset--font-family--inter)
  • Source Serif Provar(--wp--preset--font-family--source-serif-pro)
  • DM Sansvar(--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.

IBM Plex Mono’s galleri på ibm.com
IBM Plex Mono’s galleri på ibm.com

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.

Förhandsgranskning av Inter typsnigg på Rasmus Anderssons webbplats
Förhandsgranskning av Inter typsnigg på Rasmus Anderssons webbplats

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).

Förhandsgranskning av Source Serif Pro på fonts.adobe.com
Förhandsgranskning av Source Serif Pro på fonts.adobe.com

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.

Förhandsgranskning av DM Sans på Google Fonts
Förhandsgranskning av DM Sans på Google Fonts

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 e 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.

Twenty Twenty-Three Mallar
Twenty Twenty-Three Mallar

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.

Twenty Twenty-Three 404 sidmall
Twenty Twenty-Three 404 sidmall

Du hittar motsvarande HTML-filer i Twenty Twenty-Three’s mappar för mallar och delar.

Twenty Twenty-Three Malldelar
Twenty Twenty-Three Malldelar

Bilden nedan visar malldelen Kommentarer i redigeringsläge:

Redigering av malldelen Kommentarer
Redigering av malldelen Kommentarer

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.

Twenty Twenty-Three Globala stilar
Twenty Twenty-Three Globala stilar
  • 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

 

Anpassa text, färger och layout i Twenty Twenty-Three
Anpassa text, färger och layout i Twenty Twenty-Three

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 variant av Twenty Twenty-Three
Pitch är en mörk variant av Twenty Twenty-Three

 

  • Canary använder en enda typstorlek och en smal kolumnbredd. Den använder även en intressant kantradie-effekt.
Canary använder en enda typstorlek och en smal kolumnbredd
Canary använder en enda typstorlek och en smal kolumnbredd
  • 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
Sherbet har ett unikt färgstarkt utseende
Sherbet har ett unikt färgstarkt utseende
  • Grapes valdes för sin tilltalande kombination av färgpalett och typsnitt.

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.

Anpassning av stilar i gränssnittet Globala Stilar
Anpassning av stilar i gränssnittet Globala Stilar

När du är nöjd med dina ändringar, hitta Skapa blocktema under Utseende i WordPress admin-menyn.

Skapa Blocktema menyalternativ
Skapa Blocktema menyalternativ

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.

Skapa en stilvariation
Skapa en stilvariation

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
En anpassad stilvariation visas i stilbläddraren
En anpassad stilvariation visas i stilbläddraren

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.


Få alla dina applikationer, databaser och WordPress-webbplatser online och under ett tak. Vår funktionsspäckade, högpresterande molnplattform inkluderar:

  • Enkel installation och hantering i MyKinsta-instrumentpanelen
  • Expertsupport dygnet runt
  • Den bästa hårdvaran och nätverket från Google Cloud Platform, drivet av Kubernetes för maximal skalbarhet
  • En Cloudflare-integrering på enterprise-nivå för snabbhet och säkerhet
  • Global målgruppsräckvidd med upp till 35 datacenter och 275+ PoPs över hela världen

Testa själv med $20 rabatt på din första månad på Applikationshosting eller Databashosting. Utforska våra planer eller prata med säljteamet för att hitta ditt bästa val.