Tools

WordPress theme.json generator

Bouw een geldige theme.json — en zie welke helft je site echt verandert.

Draait in je browser. Er wordt niets geüpload.

Lay-out

contentSize is de standaard kolombreedte; wideSize is wat een blok krijgt bij ‘Brede breedte’.

Contentbreedte (px) Brede breedte (px)

Palet

Deze worden CSS custom properties en verschijnen in elke kleurkiezer in de editor.

Contrast (tekst)

Basis (achtergrond)

Accent (links)

Opties

Vloeiende typografieGenereert lettergroottes met clamp() die meeschalen met de viewport in plaats van te springen op breakpoints. appearanceToolsZet in één regel de instellingen voor randen, ruimte, typografie en kleur aan, in plaats van ze stuk voor stuk in te schakelen. Pas de styles ook toeVoegt een styles-blok toe zodat het palet ook echt op de front-end wordt weergegeven. Zonder dit worden de kleuren alleen in de editor aangeboden. AfstandsschaalGenereert een afstandspreset met 7 stappen zodat padding- en margin-instellingen zinnige waarden hebben.

settings vs styles

theme.json

Sla dit op als theme.json in de root van je thema. Het wordt bij elke paginaweergave gelezen, dus geen buildstap en geen cache om te legen.

Over de WordPress theme.json generator

Een WordPress theme.json generator die een geldig version 3-bestand maakt: lay-outbreedtes, een kleurenpalet, vloeiende typografie en een afstandsschaal. Hij maakt ook het verschil zichtbaar waar iedereen over struikelt: settings biedt waarden aan de editor aan, styles past ze toe op de front-end, en een palet alleen verandert niets tot iets het gebruikt.

Gerelateerd

Andere tools die je misschien nodig hebt

WordPress afbeeldingsformaten-lab

Sleep een afbeelding erin. Zie elke kopie die WordPress ervan maakt.