Twenty Twenty-Three er det helt nye standard WordPress-tema, der lanceres med WordPress 6.1.

Det er et minimalistisk tema uden billeder eller yderligere funktionalitet. Det giver sit bedste som et startertema til at bygge templates og stilvariationer og også teste alle de funktioner, der er indført med de nyeste versioner af WordPress. Temaet kan ses som et rigtigt udviklings- og testmiljø, selvom den minimalistiske stil, responsivitet og lethed gør det til et godt valg til at skabe blogs og websteder, der er velegnede til en lang række formål.

I sin introduktion til Twenty Twenty-Two-temaet skrev Kjell Reigstad om fremtiden for standardtemaer:

Innovationer som theme.json, blokskabeloner og blokmønstre gør udviklingen af temaer langt enklere og giver brugerne nye måder at tilpasse deres websteder på. Der er grund til at tro, at fællesskabet kan udnytte alt dette til at bygge hyppigere og mere varierede tema- og tilpasningsløsninger til vores brugere i de kommende år.

Og Channing Ritter kom med følgende forslag:

Hvad hvis vi i stedet for at fremhæve selve temaet fremhævede et sæt af stilvariationer, der er designet af medlemmer af fællesskabet? Vi kunne bruge Twenty Twenty-Two som grundlag for et nyt tema, der er afstemt og minimalistisk — et tomt lærred, der kan lade en bred vifte af stilvariationer skinne.

Og det er det, der sker med det nye Twenty Twenty-Three-standardtema. Fællesskabet er blevet opfordret til at deltage aktivt i udformningen af standard WordPress-temaet, og det kan vi godt lide, fordi det gør det nye tema til et resultat af et ægte arbejde fra de involverede.

Twenty Twenty-Three preview
Twenty Twenty Twenty-Three preview
Letvægts, fleksibelt og med et sæt af fantastiske stilvariationer fra fællesskabet 👩‍🎨 Mød Twenty Twenty-Three, det nye standard WordPress-tema, der lander med WordPress 6.1 🛬Klik for at Tweete

Men før vi afdækker de stilvariationer, der kommer i bundt med det nye WordPress-standardtema, skal vi finde ud af de grundlæggende funktioner i Twenty Twenty-Three, og hvad det kan passe til.

Sidelayouts og stilarter

Som nævnt ovenfor er Twenty Twenty-Three en nedtonet version af Twenty Twenty-Two. Det, der er slående ved det nye standardtema, er dets enkelhed og lethed. Twenty Twenty-Three er fleksibel og perfekt egnet til Gutenbergs nyeste funktioner til redigering af websteder, såsom redigering af skabeloner, Global Styles-variationer, Fluid Typography og blokmønstre.

Så det vil ikke være nogen overraskelse, at du på de skærmbilleder, der vises i denne artikel, vil se minimale sider uden noget tegn på speciel layout, men perfekt egnet til tilpasning og test.

For at give dig et eksempel på det, viser billedet nedenfor single post-sider med og uden fremhævede billeder.

Forhåndsvisning af enkelt indlæg med og uden fremhævet billede i Twenty Twenty-Three
Forhåndsvisning af enkelt indlæg med og uden fremhævet billede i Twenty Twenty-Three

På følgende billede sammenlignes forsiden med en arkivside.

Hjemmeside sammenlignet med arkivside i Twenty Twenty-Three
Hjemmeside sammenlignet med arkivside i Twenty Twenty-Three

Selv om det nye tema er en forenklet version af Twenty Twenty Twenty-Two, er der nogle vigtige forskelle i Twenty Twenty-Three i forhold til det tidligere standardtema.

For det første er størrelsen på overskrifterne blevet reduceret, og standardserifskrifttypen er blevet erstattet af en system-los serif-skrifttype.

Overskriftsstørrelser i Twenty Twenty-Three
Overskriftsstørrelser i Twenty Twenty-Three

Der er også blevet anvendt en anden farvepalet. Du kan se den nye Twenty Twenty-Three paletdefinition i følgende kode fra 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 standardfarver
Twenty Twenty Twenty-Three standardfarver

Men det vigtigste træk ved det nye standardtema er dets sæt af stilvariationer. Twenty Twenty-Three leveres med ti globale stilvariationer, som hver især viser en anden kombination af farver, font familie og skriftstørrelser.

Twenty Twenty-Three Global Styles
Twenty Twenty Twenty-Three Global Styles

Du finder de tilsvarende JSON-filer i mappen Twenty Twenty Twenty-Three styles.

Fuldstændige forhåndsvisninger af sideskemaer, stilarter og stilvariationer af Twenty Twenty-Three er tilgængelige på Figma.

Forhåndsvisning af Twenty Twenty Twenty-Three Style Variations på Figma
Forhåndsvisning af Twenty Twenty Twenty-Three Style Variations på Figma

Twenty Twenty Twenty-Three typografi

I et minimalt tema som Twenty-Three spiller typografien en vigtig rolle for at gøre teksten læsbar, webstedet tiltalende og i sidste ende give de besøgende en givende browseroplevelse, uanset enhed og skærmstørrelse.

Til dette formål leveres Twenty Twenty-Three med et nyt sæt skrifttypefamilier og bruger Fluid Typography, der blev introduceret med WordPress 6.1.

Skrifttyper

Twenty Twenty-Three har et nyt sæt skrifttyper, der bruges i stilvariationer og er kendetegnet ved enkelhed og variation:

  • Systemskrifttypevar(--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 er en del af IBM Plex-skrifttypesættet, den nye IBM-skrifttype, der er udgivet under SIL Open Font License (OFL). Du kan se en forhåndsvisning af den på Adobe Fonts og IBM’s websteder.

IBM Plex Mono gallery
IBM Plex Mono gallery on ibm.com

Inter er en gratis og open source-skrifttypefamilie, der er udformet og designet til computerskærme af Rasmus Andersson. Du kan få vist og downloade skrifttypefamilien på Rasmus Anderssons websted eller på Google Fonts.

Inter typeface
Inter typeface preview on Rasmus Andersson’s website

Source Serif Pro er en skrifttype fra Adobe Originals, og du kan bruge den gratis med en Adobe Fonts-konto (læs mere om Adobe-licensering af skrifttyper).

Source Serif Pro preview
Source Serif Pro preview på fonts.adobe.com

DM Sans er en anden skrifttype, der er licenseret under SIL Open Font License (OFL), som blev bestilt af Google hos Colophon Foundry, og som er designet af Colophon Foundry, Jonny Pinhorn og Indian Type Foundry.

DM Sans preview
DM Sans preview på Google Fonts

Flydende typografi og spacing

Twenty Twenty-Three bruger Fluid Typography og Spacing Presets, der blev introduceret med WordPress 6.1.

Det nye standard WordPress-tema giver et godt eksempel på implementering af flydende typografi i WordPress-temaer, og du kan bruge det som en skabelon til at tilføje understøttelse af denne funktion i dine temaer.

Den følgende kode viser settings.typography.fluid og settings.typography.fontSizes[] egenskabsdefinitioner 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"
				}
			}
		]
	}
}

Indstillingen typography.fluid tilføjer understøttelse af flydende typografi, mens typography.fontSizes[].fluid indstiller den mindste og maksimale værdi for skriftstørrelse.

Ud over flydende typografi understøtter Twenty-Three også fluid spacing.

Før WordPress 6.1 var det kun muligt at indstille brugerdefinerede afstandsværdier i editoren. Det betyder, at før WordPress 6.1 kunne temaforfattere ikke angive faste værdier for padding, margin og gap. Dette resulterede i flere begrænsninger. Det var f.eks. ikke muligt nemt at overføre afstandsindstillinger mellem forskellige temaer eller at bevare afstandsværdierne ved kopiering og indsættelse af indhold og blokmønstre mellem forskellige websteder.

Temaer kan erklære understøttelse af Fluid Spacing ved hjælp af de nye indstillinger spacing.spacingScale e spacing.spacingSizes (læs mere i Theme.json: Add spacing size presets). I Twenty Twenty-Three gøres dette med følgende indstillinger:

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

Videoen nedenfor viser Fluid Typography i aktion i Twenty Twenty Twenty-Three.

Du kan tjekke typografi- og afstandsforudsætninger i Design Specification.

Templated og templatedele

Med Twenty Twenty-Three ser du i aktion alle de funktioner og forbedringer af webstedsredigering, der kommer med WordPress 6.1.

Det gælder især med templates og templatedele.

Twenty Twenty-Three Templates
Twenty Twenty-Three Templates

Når du starter Site Editor med Twenty Twenty-Three kørende på dit websted, vil du se en liste med elleve templates og fire templatedele.

Billedet nedenfor viser 404-skabelonen i webstedseditoren.

Twenty Twenty-Three 404 sideskabelon
Twenty Twenty Twenty-Three 404-sideskabelon

Du finder de tilsvarende HTML-filer i Twenty Twenty Twenty-Threes templates og parts-mapper.

Twenty Twenty-Three Templatedele
Twenty Twenty Twenty-Three Templatedele

Billedet nedenfor viser templatedelen Comments i redigeringstilstand:

Redigering af Comments templatedel
Redigering af Comments templatedel

Du finder brugerdefinerede templates og templatedelen defineret i theme.json.

Brugerdefinerede templates

Ud over standard templates tilbyder Twenty Twenty-Three følgende brugerdefinerede templates:

  • Blank
  • Blog (alternativ)
  • 404
  • Med fremhævede billede
  • Med omslagsblok

Disse templates er defineret i theme.json som følger:

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

Templatedele

Templatedele er defineret som følger.

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

Globale stilarter og stilvariationer

Som nævnt ovenfor kan temaforfattere fra WordPress 6.0 pakke flere sæt stilarter sammen med deres temaer, så brugerne kan skifte mellem stilvariationer uden at ændre deres tema.

Denne fantastiske WordPress-funktion er det vigtigste kendetegn ved det nye standardtema, da Twenty Twenty-Three giver ti præfabrikerede stilkombinationer at vælge imellem.

Twenty Twenty-Three Global Styles
Twenty Twenty Twenty-Three Global Styles

Du kan gennemse disse stilarter i Global Style-grænsefladen i din Site Editor. Her kan du

  • Skift global stil fra panelet Gennemse stilarter.
  • Tilpas typografiske indstillinger – tekst, links, headers og knapper
  • Rediger standardfarver eller ændre farven på specifikke elementer
  • Tilpas layoutet af det primære indholdsområde
  • Tilpas udseendet af specifikke elementer
Tilpasning af tekst, farver og layout i Twenty Twenty-Three
Tilpasning af tekst, farver og layout i Twenty Twenty-Three

Det er igen værd at bemærke, at i forbindelse med oprettelsen af så mange stilvariationer var det afgørende, at fællesskabet blev inddraget. Efter kickoff af Twenty Twenty Twenty-Three-projektet blev der modtaget 38 indsendelser fra 19 bidragydere fra 8 forskellige lande (du kan udforske alle projekterne på GitHub).

Ud af de 38 er 10 stilvariationer blevet udvalgt:

Pitch er en mørk variation af Twenty Twenty-Three
Pitch er en mørk variation af Twenty Twenty-Three
  • Canary bruger en enkelt skriftstørrelse og en smal kolonnebredde. Den bruger også en interessant border-radius-effekt.
Canary bruger en enkelt skriftstørrelse og en smal kolonnebredde
Canary bruger en enkelt skriftstørrelse og en smal kolonnebredde
  • Electric bruger en fed farve til al typografi på hele webstedet.
  • Pilgrimage er en farvet mørk version af basistemaet.
  • Marigold er en blød og behagelig variation af grundstilen.
  • Block-Out har en duotone-effekt på billeder.
  • Whisper fremviser nogle brugerdefinerede elementer, som f.eks. grænsen rundt om kanten af siden, knapstilarter og unikke linkunderstregninger.
  • Sherbet har et unikt lyst og farverigt look
Sherbet har et unikt farverigt udseende
Sherbet har et unikt farverigt udseende
  • Grapes blev valgt på grund af den behagelige kombination af farvepalet og font.

Det fedeste ved stilvariationer er, at du ikke nødvendigvis behøver at være en front-end-udvikler for at skabe dine stilarter.

Hvis du føler dig fortrolig med kodning, kan du vælge en af de .json-filer, der findes i Twenty Twenty-Three styles-mappen, og bruge den som skabelon til at bygge din stilvariation.

Men hvis kodning ikke er din ting, kan du bruge det officielle Create Block Theme-plugin, som du kan downloade gratis fra WordPress.org-plugin-mappen.

Installer og aktiver først pluginet, og naviger derefter til stilredigeringsprogrammet. Når du er her, kan du tilpasse farver, typografi og layout efter dine præferencer og gemme dine ændringer.

Tilpasning af stilarter i grænsefladen Global Styles
Tilpasning af stilarter i grænsefladen Global Styles

Når du er tilfreds med dine ændringer, skal du finde Create Block Theme under Appearance (Udseende) i WordPress-administrationsmenuen.

Create Block Theme menupunkt
Create Block Theme menupunkt

Tjek det sidste punkt nede på listen: Opret en stilvariation. Du vil blive bedt om at tildele et navn til din stilvariation. Indtast navnet, og klik på Opret tema. Dette vil oprette en ny .json-fil i temaets stilmappe.

Opret en stilvariation
Opret en stilvariation

Nu kan du tilpasse din stil yderligere og endda eksportere den til andre WordPress-installationer.

Plugin’et Create Block Theme er et værdifuldt værktøj til at drage fuld fordel af de funktioner til oprettelse af temaer og skabeloner, der er tilgængelige med de nyeste versioner af WordPress. Mens du er i gang, kan du tage et kig på alle de andre muligheder:

  • Eksport af Twenty Twenty-Three
  • Opret child af Twenty Twenty-Three
  • Klon Twenty Twenty-Three
  • Overskriv Twenty Twenty-Three
  • Opret et tomt tema
  • Opret en stilvariation
En brugerdefineret stilvariant vises i stilbrowseren
En brugerdefineret stilvariant vises i stilbrowseren

Opsummering

Mens det nye standard WordPress-tema ved første øjekast kan ligne en slags funktionsløs tom kasse, er det ved nærmere eftersyn meget mere end det, da det giver dig mulighed for at få mest muligt ud af de nyeste WordPress-webstedsredigeringsfunktioner.

I Twenty Twenty-Three vil du se mange skabeloner og skabelondele, der kan tilpasses, et sæt af 10 stilvariationer, der kan bruges som grundlag for at skabe unikke websteder, og understøttelse af alle de nye funktioner, der er tilgængelige i WordPress 6.1, begyndende med Fluid Typography og Improved Template System.

Med Twenty Twenty-Three er følelsen, at forskellen mellem webstedets udseende og funktionalitet nu er markant. Temaets eneste funktion er at regulere webstedets udseende, mens tilføjelsen af funktionalitet overlades til plugins. Og fra dette synspunkt gør Twenty Twenty-Three et godt stykke arbejde og tilbyder WordPress-brugere alle de nyeste Gutenberg-webstedsredigeringsfunktioner. Det har aldrig været nemmere at tilpasse udseendet af et websted.

Det er op til dig nu. Har du allerede brugt det nye tema i et testmiljø? Har du prøvet at oprette brugerdefinerede stilvariationer endnu? Del dine tanker med os i kommentarerne nedenfor.


Få alle dine applikationer, databaser og WordPress websteder online og under ét tag. Vores funktionsspækkede, højtydende cloudplatform inkluderer:

  • Nem opsætning og administration i MyKinsta-dashboardet
  • 24/7/ ekspert support
  • Den bedste Google Cloud Platform-hardware og -netværk, drevet af Kubernetes for maksimal skalerbarhed
  • En Cloudflare-integration på virksomhedsniveau for hastighed og sikkerhed
  • Globalt publikumsrækkevidde med op til 35 datacentre og 275+ PoPs på verdensplan

Test det selv med 20 Usd i rabat på din første måned på Applikation Hosting eller Database Hosting. Udforsk vores planer eller tal med salgsteamet for at finde din bedste pasform.