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.
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.
På følgende billede sammenlignes forsiden med en arkivside.
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.
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"
}
]
},
}
}
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.
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.
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:
- Systemskrifttype –
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 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.
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.
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).
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.
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 og 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.
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.
Du finder de tilsvarende HTML-filer i Twenty Twenty Twenty-Threes templates og parts-mapper.
Billedet nedenfor viser templatedelen Comments i redigeringstilstand:
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.
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
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 version af standardstilen, der bruger skrifttypen Inter-fontfamilien af Rasmus Andersson.
- Canary bruger en enkelt skriftstørrelse og en smal kolonnebredde. Den bruger også en interessant border-radius-effekt.
- 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
- Grapes blev valgt på grund af den behagelige kombination af farvepalet og font.
- Aubergine er en iøjnefaldende split-color baggrund, der er mørkere.
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.
Når du er tilfreds med dine ændringer, skal du finde Create Block Theme under Appearance (Udseende) i WordPress-administrationsmenuen.
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.
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
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.
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.
Skriv et svar