Forestil dig at ændre én farve i theme.json, og hele WordPress-sitet skifter stil. Frontend, editor og blokke følger med uden ekstra arbejde. Én ændring, alt opdateret.
Theme.json er den centrale kilde for bloktemaer og Global Styles i WordPress FSE. Den bestemmer funktioner og udseende samme sted, så designet holder en fast linje på tværs af sitet. Ved arbejde med Full Site Editing står filens styrke klart. Den giver ensartethed og gør designstyring overskuelig.
Guiden tager en praktisk vinkel uden at overbelaste med tekniske detaljer. Læseren får praktisk erfaring med theme.json og lærer præcist, hvordan filen styrer globale stilarter på sitet.
Hvor du finder theme.json, og hvordan struktur og hierarki fungerer
Theme.json ligger normalt i mappen /wp-content/themes/{dit-tema}/theme.json, hvor {dit-tema} er navnet på det aktive block theme. Bruges et child theme, kan der også ligge en theme.json der, som overskriver eller tilføjer indstillinger fra parent-temaet. Det gør ændringer mulige uden at røre originalfilerne.
Den grundlæggende struktur er enkel. En minimumsopsætning kunne se sådan ud: { “$schema”: “https://schemas.wp.org/trunk/theme.json”, “version”: 3, “settings”: { }, “styles”: { } }. Version afhænger af WordPress-installationen, ofte 2 eller 3, så vælg den schema-URL, der passer til dit setup.
WordPress læser styles og indstillinger i et bestemt hierarki:
- Core (WordPress’ standarder) har laveste prioritet
- Temaets theme.json ligger over core
- Child theme kan overskrive parent-temaets værdier
- Brugeren kan ændre Global Styles i editoren via databasen
- Brugerens stylesheet (CSS) står øverst i prioritet
Konsekvensen er enkel. Temaet kan sætte standardfarver og skrifter globalt, men brugeren kan finjustere senere uden konflikt. Cascading virker sådan: en farve sat globalt under styles.color.text gælder hele sitet. En anden farve angivet specifikt for blokken core/paragraph under styles.blocks[“core/paragraph”].color.text vinder for afsnit. Ændres farven senere i Global Styles, vinder brugerindstillingen til sidst.
Settings og Styles i theme.json, som du bruger i praksis
I theme.json fungerer settings som tænd/sluk for funktioner og som stedet, hvor designets byggesten, tokens, defineres. Her sættes farvepaletter, skrifttyper, afstandsenheder og hjørneradier. Under settings.color.palette angives de farver, der skal være tilgængelige på hele sitet. settings.typography.fontFamilies afgør, hvilke skrifttyper brugeren får vist. Pointen er at lægge faste rammer for funktion og visuel identitet.
Styles tager over og gør udseendet konkret. De virker som standardvalg for baggrundsfarver, tekststørrelser og padding, enten globalt eller pr. blok og element. Brug af en palette-farve i styles.color.background via dens slug, for eksempel “primary”, giver et ensartet udtryk på tværs af sitet. Værdier gentages ikke flere steder, og vedligehold bliver enklere.
Style variations giver flere designprofiler i samme tema. Brugeren skifter profil i Global Styles-editoren uden at skifte tema. Det passer godt til sites, der kræver forskelligt udtryk under samme motor.
Et typisk problem opstår, når styles refererer til farvenavne, som ikke er defineret i settings.palette. Resultatet er fejl som “unknown token” og manglende farvechips i editoren. Det skaber rod og forlænger designarbejdet.
Sådan bygger du et workflow fra design-tokens til blokke uden ekstra CSS
- Start med at definere design-tokens i settings i theme.json. Navngiv palette, fontFamilies, fontSizes og spacing konsekvent. Både slug og navn skal være tydelige og genkendelige, så farver og størrelser er nemme at finde og bruge på tværs af sitet.
- Sæt globale standarder under styles. Begynd med basale HTML-elementer som links, overskrifter og knapper. Læg typografi, baggrundsfarve og link-stil her, så alt får et ensartet udgangspunkt før blokspecifikke justeringer.
- Finjustér pr. blok i styles.blocks. “core/heading” kan få forskellige fontSize-værdier pr. niveau, h1, h2 osv. “core/button” kan få sin egen baggrundsfarve eller hjørneradius for mere personlighed, uden ekstra CSS.
- Test ændringerne i Site Editor. Skift mellem style variations for at sikre, at tokens vises korrekt i editorens UI. Farvechips skal vises, skrifttyper skal være tilgængelige i dropdownen, og frontend skal matche det forventede udtryk.
- Versionér med små commits, hver gang tokens eller styles i theme.json ændres. Brug en JSON-linter og WordPress’ schema til validering, så fejl opdages tidligt. Det gør det nemt at rulle tilbage, hvis noget driller.
Hvornår du bruger editoren, og hvornår du gemmer i theme.json
Når valget står mellem theme.json og WordPress’ FSE-editor, giver editoren mening til hurtige justeringer og tests. Her skiftes farver og typografi, feedback kommer med det samme, og ændringer ses live uden bøvl. Når designet skal stå fast og fungere som standard, hører det hjemme i theme.json. Så bliver ændringer versionstyret, lette at deploye på tværs af miljøer og bevares ved opdateringer.
I et teammiljø giver theme.json klare rammer for udviklere, mens indholdsfolk trygt arbejder videre i editoren uden at bryde designregler. Den centrale styring gør samarbejdet smidigt. Alle arbejder i samme visuelle sprog uden uventede afvigelser.
Ydelsen får et løft med theme.json. I stedet for mange små CSS-regler fordelt på blokke samler filen ét stylesheet baseret på settings og styles. Resultatet er mindre kode, kortere loadtid og en hurtigere oplevelse for brugeren.
For sites med flere brands eller multisite-opsætninger giver style variations i theme.json en nem måde at håndtere forskellige designprofiler på samme platform. Variationer kan eksporteres som separate JSON-filer, så vedligehold forbliver overskuelig, også i komplekse setups.
Næste skridt: Lav en tjekliste over områder med manuel CSS, for eksempel farver, spacing, typografi og knapper. Planlæg en systematisk migrering af reglerne ind i settings-, styles- og blocks-sektionerne i theme.json. Det giver et mere stabilt setup, som bevarer designet over tid.
Skriv et svar