Vad är theme.json-filen i WordPress och hur använder man den

theme.json-filen är en viktig del av WordPress blockteman och styr många aspekter av din webbplats utseende och funktionalitet. Om du nyligen har bytt från ett klassiskt tema till ett blocktema kanske du undrar vad den här filen handlar om och om du bör redigera den.

Du är inte ensam. Vi och många WPBeginner-användare har också undrat exakt samma sak. Så vi bestämde oss för att dyka djupt in i detta ämne för att ge en omfattande guide.

I den här artikeln förklarar vi vad en theme.json-fil är, varför den är viktig och hur du kan använda den för att anpassa din WordPress-webbplats. 

Vad är WordPress theme.json-filen?

Filen theme.json är en speciell temafil som introducerades i WordPress 5.8. Den spelar en nyckelroll i upplevelsen av fullständig webbplatsredigering (FSE), vilket gör att du visuellt kan anpassa varje aspekt av ditt WordPress blocktema.

I grund och botten fungerar theme.json-filen som en ritning som styr styling och funktionalitet för ditt blocktema. Den innehåller kod som talar om för WordPress hur olika element som färger, typografi, layouter och mallar ska se ut och bete sig.

Varför behöver WordPress blockteman en theme.json-fil?

Att redigera ett blocktema i WordPress skiljer sig från att redigera ett klassisk tema.

Klassiska teman använder filen functions.php för att aktivera funktioner som anpassade menyer eller utvalda bilder med funktionen add_theme_support(). Sedan kan du styla dessa funktioner med CSS-regler i CSS-stilbladet (style.css) filen.

I blockteman fungerar theme.json som ett centralt nav för allt som definierar utseendet och känslan i ditt blocktema. Det låter dig definiera saker som typsnitt, färger och layoutalternativ på ett ställe, vilket ersätter behovet av add_theme_support() i functions.php.

Det är därför functions.php-filen i blockteman ofta är mindre än motsvarigheten i klassiska teman.

Att ha en dedikerad theme.json-fil erbjuder några stora fördelar jämfört med det tidigare systemet med klassiska teman.

Först, theme.json fungerar hand i hand med WordPress fullständiga webbplatsredigerare. Detta gör att du enkelt kan anpassa ditt temas stilar och inställningar direkt i redigeraren utan att behöva röra någon kod.

Dessutom syftar theme.json till att skapa en konsekvent upplevelse för både utvecklare och användare. Vissa användare tycker att det är väldigt frustrerande när de behöver byta tema eftersom de måste lära sig helt nya layouter och stylingalternativ.

Med theme.json blir byte av teman en smidigare process eftersom allt är organiserat på ett liknande sätt.

Slutligen, genom att använda theme.json, kan temautvecklare och användare framtidssäkra sitt arbete i takt med att WordPress fortsätter att utöka sina funktioner för redigering av hela webbplatsen.

Nu när vi har gått igenom vad en theme.json-fil är, låt oss fördjupa oss i ämnet. Du kan använda snabblänkarna nedan för att navigera i den här guiden:

• Var hittar du WordPress theme.json-filen?
• Hur ser filen theme.json ut?
• Vad du bör göra innan du redigerar filen theme.json
• Hur man redigerar WordPress theme.json-fil
• Bonustips: Använd WPCode för att lägga till anpassad kod i ditt tema

Var hittar du WordPress theme.json-filen?

Filen theme.json finns i din temakatalog på din webbserver. Den typiska filsökvägen skulle vara public_html » wp-content » themes » ditt-temanamn » theme.json.

För att komma åt den måste du först ansluta till din webbplats via FTP eller din värdkontos filhanterare.

Om du använder Bluehost, kan du logga in och växla till fliken 'Webbplatser'. Klicka sedan på knappen 'Inställningar' under din webbplats.

Se nu till att stanna kvar på fliken 'Översikt'.

Rulla sedan ner och klicka på knappen 'File Manager'.

När du öppnar filhanteraren på det här sättet kommer du automatiskt att vara inne i din webbplats rotmapp.

Leta här efter katalogen ‘wp-content’ och öppna den. Där hittar du mappen ‘themes’ som innehåller alla dina installerade WordPress-teman.

Öppna mappen för det specifika blocktemat du använder. Filen theme.json finns direkt i den här temamappen tillsammans med andra temafiler.

När du har hittat den kan du visa filen theme.json med en kodredigerare.

Hur ser filen theme.json ut?

Filen theme.json har en specifik struktur som organiserar alla globala inställningar för ditt WordPress-blocktema.

Beroende på hur komplext eller enkelt ditt tema ser ut, kan filen vara mycket kort eller lång. Du kan dock enkelt dela upp denna fil i 7 sektioner på toppnivå:

{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {},
"patterns": []
}

Här är en förenklad genomgång:

Schema

Den här delen är faktiskt valfri att ha i blockteman, så du kanske ser den i ditt eller inte.

Schemaegenskapen länkar URL:en till WordPress JSON-schemat, som definierar de globala inställningarna, stilarna och andra konfigurationer för ditt tema.

Version

Detta avsnitt anger vilken API-version av theme.json-formatet som används av filen och säkerställer att den följer rätt struktur.

Vid tidpunkten för skrivandet av denna artikel är API:et i version 2.

Inställningar

Denna egenskap definierar alternativen och kontrollerna som är tillgängliga för användare att anpassa sitt tema. Dessa inkluderar förinställningar för tematets färgpalett, typografi, avstånd, gradienter, skuggor, kanter och så vidare.

Här är ett mycket enkelt exempel på hur inställningsegenskapen ser ut:

{
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "base",
          "color": "#ffffff",
          "name": "White"
        },
        {
          "slug": "contrast",
          "color": "#222222",
          "name": "Dark"
        },
        {
          "slug": "accent",
          "color": "#f08080",
          "name": "Pink"
        },
        {
          "slug": "accent-2",
          "color": "#90ee90",
          "name": "Light Green"
        },
        {
          "slug": "accent-3",
          "color": "#e0ffff",
          "name": "Light Blue"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Open Sans, sans-serif",
          "slug": "open-sans",
          "name": "Open Sans"
        },
        {
          "fontFamily": "Arial, sans-serif",
          "slug": "arial",
          "name": "Arial"
        },
        {
          "fontFamily": "Times New Roman, serif",
          "slug": "times-new-roman",
          "name": "Times New Roman"
        }
      ],
      "fontSizes": [
        {
          "name": "Extra Small",
          "slug": "xx-small",
          "size": "0.75rem"
        },
        {
          "name": "Small",
          "slug": "small",
          "size": "0.875rem"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "1rem"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "1.125rem"
        },
        {
          "name": "Extra Large",
          "slug": "x-large",
          "size": "1.25rem"
        },
        {
          "name": "XX-Large",
          "slug": "xx-large",
          "size": "1.5rem"
        }
      ],
      "spacing": {
        "units": ["rem"],
        "values": {
          "small": "1rem",
          "medium": "1.5rem",
          "large": "2rem"
        }
      }
    }
  }
}

Om du tittar på koden är språket som används ganska lätt att förstå. Du kan se att inställningarna definierar färger, teckensnittsfamiljer, teckenstorlekar och avstånd som används i temat.

Om det finns några referenser här eller i ditt tema som du inte förstår, kan du titta i den officiella WordPress-inställningsreferensen.

Vissa element, som färger och typsnittsfamiljer, har sluggar, som denna:

{
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "base",
          "color": "#ffffff",
          "name": "White"
        },

Dessa kommer att vara användbara för stilavsnittet senare för att skapa förinställningar, vilket vi kommer att förklara i nästa del.

Stilar

Medan inställningsavsnittet definierar temats standardanpassningsalternativ, tillämpar stilavsnittet dem på temat.

Här kan du tillämpa anpassningsinställningarna på hela webbplatsen eller på blocknivå med hjälp av förinställningar.

Låt oss titta på exemplet nedan:

{
  "settings": {
    // Existing settings from the previous example
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "elements": {
      "link": {
        "color": {
          "text": "var(--wp--preset--color--accent-2)"
        }
      },
      "h1": {
        "fontSize": "var(--wp--preset--font-size--xx-large)",
        "lineHeight": "1.2",
        "marginBottom": "1rem"
      },
      "h2": {
        "fontSize": "var(--wp--preset--font-size--x-large)",
        "lineHeight": "1.2",
        "marginBottom": "1rem"
      },
      "h3": {
        "fontSize": "var(--wp--preset--font-size--large)",
        "lineHeight": "1.2",
        "marginBottom": "1rem"
      }
    }
  }
}

Som du kan se finns det den här kodraden som dyker upp i hela detta utdrag: var(--wp--preset--xxx). Dessa är förinställningar, som är genvägar i stilavsnittet som refererar tillbaka till värdena som definierats i inställningsavsnittet.

Till exempel, överväg {"slug": "base", "color": "#ffffff", "name": "White"} i inställningsavsnittet. Här är "base" sluggen, och motsvarande förinställning för denna färg är var(--wp--preset--color--base).

Därför säger koden "color": {"background": "var(--wp--preset--color--base)" i styles att bakgrundsfärgen i detta tema är vit.

Anpassade mallar

I WordPress blocktemautveckling kan utvecklare skapa fördefinierade layouter för anpassade sidor, inlägg eller anpassade inläggstyper som användare kan använda.

Till exempel har temat Twenty Twenty-Four flera anpassade mallar definierade i filen theme.json: Page No Title, Page With Sidebar, Page with wide Image och Single with Sidebar.

Du kan använda någon av dessa för att skapa ditt innehåll.

],
"customTemplates": [
  {
    "name": "page-no-title",
    "postTypes": ["page"],
    "title": "Page No Title"
  },
  {
    "name": "page-with-sidebar",
    "postTypes": ["page"],
    "title": "Page With Sidebar"
  },
  {
    "name": "page-wide",
    "postTypes": ["page"],
    "title": "Page with wide Image"
  },
  {
    "name": "single-with-sidebar",
    "postTypes": ["post"],
    "title": "Single with Sidebar"
  }
]

En sak att notera är att filen theme.json endast refererar till mallarna med namn och tillhandahåller metadata om dem, såsom deras titel och de inläggstyper de är avsedda för.

Det faktiska utseendet och funktionaliteten hos de anpassade mallarna definieras dock i separata mallfiler inuti temamappen.

För att se dem kan du gå till public_html » wp-content » themes » ditt-teman-namn » templates.

Mall-delar

Mallkomponenter är återanvändbara områden som du kan använda i dina anpassade mallar. Dessa är element som rubriker, sidfot, sidofält och så vidare.

Här är hur dessa mall-delar ser ut registrerade i theme.json:

"templateParts": [
  {
    "area": "header",
    "name": "header",
    "title": "Header"
  },
  {
    "area": "footer",
    "name": "footer",
    "title": "Footer"
  },
  {
    "area": "sidebar",  // Removed "uncategorized"
    "name": "sidebar",
    "title": "Sidebar"
  },
  {
    "area": "post-meta",  // Removed "uncategorized"
    "name": "post-meta",
    "title": "Post Meta"
  }
]

Precis som anpassade mallar refererar theme.json-filen bara till mallarna.

Deras faktiska utseende definieras i deras egna malldelar i mappen parts.

Mönster

Mönster är fördefinierade samlingar av block som låter dig skapa anpassade innehållslayouter på dina sidor, inlägg eller var som helst annars i ditt tema.

När du öppnar redigeraren för hela webbplatsen kanske du märker menyn Mönster. Det är här du hittar alla tillgängliga mönster för ditt Gutenberg-blocktema.

Med theme.json kan temautvecklare referera till mönster från den publika mönsterkatalogen. Det är ett utmärkt sätt att erbjuda fler anpassningsmöjligheter utan att designa dessa återanvändbara block själv.

Till exempel refererar Twenty Twenty-Four-temat till två mönster från den officiella katalogen: tre kolumner med tjänster och en kundsektion:

"patterns": [
  "three-columns-of-services",
  "clients-section"
]

Vi vet detta eftersom dessa mönster finns i menyn Mönster i redigeraren för hela webbplatsen.

De finns dock inte i mappen patterns inuti temakatalogen.

Vad du bör göra innan du redigerar filen theme.json

Eftersom theme.json är en kärntemafil, medför redigering av den direkt på din live WordPress-webbplats en viss risk. Oavsiktliga misstag kan potentiellt skada ditt tema eller din webbplats.

Ett säkrare tillvägagångssätt är att använda ett barn-tema.

Ett barn-tema ärver alla stilvariationer och funktioner från ditt föräldratema (blocktemat du använder) men låter dig anpassa saker utan att ändra själva föräldratemat. På så sätt, om föräldratemat får uppdateringar, kommer dina anpassningar inte att skrivas över.

Du kan läsa vår guide om hur man skapar ett child theme i WordPress för mer information. Den här artikeln visar en enkel metod med pluginet Create Block Theme, som automatiskt genererar en ny theme.json-fil endast för ditt child theme.

För att säkerställa en smidig redigeringsupplevelse och undvika driftstopp på webbplatsen, rekommenderar vi också att du skapar en ny säkerhetskopia av din WordPress-webbplats. På så sätt, om något går fel, kan du enkelt återställa din webbplats till sitt tidigare tillstånd.

Vi rekommenderar att använda ett plugin som Duplicator för en snabb och pålitlig säkerhetskopieringslösning.

Det rekommenderas också att arbeta i en lokal WordPress-utvecklingsmiljö eller en staging-miljö. Detta skapar en kopia av din live-webbplats där du säkert kan testa ändringar utan att påverka dina besökare.

Här är några fler tips att tänka på:

• Börja med mindre redigeringar i din theme.json-fil och testa dem noggrant innan du gör mer komplexa ändringar.
• Om du är osäker på någon specifik egenskap eller inställning i theme.json-filen, konsultera den officiella WordPress-dokumentationen.
• Tveka inte att söka hjälp från temautvecklarens supportteam eller WordPress.org:s supportforum om du stöter på problem. Läs vår guide om hur man ber om WordPress-support på rätt sätt för mer information.

Hur man redigerar WordPress theme.json-fil

Baserat på vår forskning och tester har vi upptäckt två sätt att redigera en WordPress theme.json-fil: genom att använda fullständiga webbplatsredigeraren eller genom att använda kod. Det första alternativet är mycket enklare och säkrare och låter dig se dina ändringar från webbplatsens framsida.

Under tiden rekommenderas det andra valet om du är bekväm med avancerad WordPress-utveckling.

Redigera theme.json utan kod (för nybörjare)

För att redigera din theme.json-fil utan att röra koden direkt kan du använda pluginet Create Block Theme. Detta plugin publicerades av det officiella WordPress.org-teamet för att låta användare skapa ett anpassat blocktema, redigera det och/eller spara stilvariationer av sitt blocktema.

Installera först WordPress-pluginet i ditt adminområde. Öppna sedan redigeraren för hela webbplatsen genom att gå till Utseende » Redigerare.

Du kommer nu att se flera menyer för att redigera ditt tema.

Välj här 'Stilar'.

Klicka sedan på pennikonen ‘Redigera stilar’.

Detta tar dig till blockredigeraren för att redigera din webbplats globala inställningar och stilar.

Nu kan du ändra stilen på ditt tema som vanligt. Du kan läsa avsnittet om hur du ändrar din webbplats globala stilar i vår guide för redigering av hela WordPress-webbplatsen för mer information.

Låt oss försöka skapa en anpassad färgpalett som ett exempel.

Färgpaletten eller schemat är en uppsättning standardfärger för element som text, bakgrunder och knappar. Det säkerställer ett sammanhängande utseende på hela din webbplats.

Element som använder samma färguppsättning kommer alltid att matcha, så att din webbplatsdesign ser polerad och professionell ut.

För att redigera paletten, välj 'Färger' i sidofältet för Stilinställningar.

På nästa skärm ser du några inställningar för att anpassa ditt temas färger.

Klicka här på färgerna i sektionen 'Palett'.

I det här exemplet har temat Twenty Twenty-Four redan definierat 5 färger i paletten, men du kan ändra vilken som helst av dem för att skapa en anpassad från grunden.

För att göra det, klicka på en av färgerna under 'Tema'. Välj sedan en färg i färgvalsverktyget.

Nu, om du förhandsgranskar din webbplats, kommer du att se att de specifika blocken eller elementen som använde den tidigare färgen har ersatts med den färg du just valde i din palett.

Du kan upprepa samma steg för varje färg. Klicka sedan på ‘Spara’.

Efter att ha sparat dina ändringar, klicka på knappen Skapa blocktema (skiftnyckelikonen).

Välj sedan ‘Spara ändringar i tema.’

På nästa skärm måste du skrolla ner.

Klicka sedan på ‘Spara ändringar’. Detta kommer att uppmana WordPress att lagra alla ändringar du har gjort i ditt tema i filen theme.json.

När du har gjort det kommer blockredigeraren att uppdateras.

Klicka nu på knappen Skapa blocktema igen och välj ‘Visa theme.json.’

För att se koden för din anpassade färgpalett, leta efter palette som är nästlad inuti color och settings, så här:

"settings": {
  // Some code...
  "color": {
    // Some code...
    "palette":  
  }
}

Under den bör du se de nya hexkoderna för din anpassade färgpalett.

Redigera theme.json med kod (avancerade användare)

Denna metod rekommenderas om du är en blivande WordPress-temautvecklare eller har viss erfarenhet av kod.

Öppna först din blocktemas theme.json-fil i din WordPress-katalog. Du kan antingen använda kodredigeraren i din webbvärds filhanterare eller ladda ner filen, redigera den på din dator och ladda upp den tillbaka till din server.

Vi kommer att använda temat Twenty Twenty-Four och Bluehosts filhanterare för demonstrationsändamål. Om du är en Bluehost-användare och använder filhanteraren, kan du helt enkelt högerklicka på din theme.json-fil och klicka på 'Redigera'.

Om du använder FTP kan du läsa vår guide om hur man använder FTP för att ladda upp filer till WordPress.

Låt oss prova ett enkelt exempel på att redigera din theme.json-fil: skapa egna teckenstorlekar.

Kom återigen ihåg att inställningsegenskapen anger ditt temas standardstilar, medan stilegenskapen implementerar dem. Av denna anledning kommer vi att redigera inställningsegenskapen i filen theme.json.

Om du använder ett barn-tema kan du helt enkelt kopiera och klistra in följande kod i din theme.json-fil och ändra teckenstorlekarna i pixlar som du anser lämpligt:

{
  "settings": {
    "typography": {
      "fluid": false,
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "16px"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "24px"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "40px"
        },
        {
          "name": "Extra Large",
          "slug": "x-lagrge",  // Typo fixed (large -> large)
          "size": "48px"
        }
      ]
    }
  }
}

Notera: Om du redigerar din förälders tema direkt, måste du hitta koden som säger fontSizes.

Den bör vara nästlad inuti typography och settings, så här:

{
  "settings": {
    // Some code...
    "typography": {
      // Some code...
      "fontSizes": [
        // Font size definitions here
      ]
    }
  }
}

Ersätt därefter dessa kodrader med kodavsnittet ovan. Se bara till att det inte finns några syntaxfel i det.

När du är klar, spara filen och förhandsgranska din webbplats för att se dina ändringar. För Bluehost-användare kan du helt enkelt klicka på 'Spara ändringar' i filhanterarens kodredigerare.

Om du vill redigera din theme.json ytterligare, uppmuntrar vi starkt till att du bekantar dig mer med filens struktur som förklaras i föregående avsnitt.

Vi föreslår också att du läser den officiella WordPress-inställningsreferensen, som innehåller en fullständig lista över tillgängliga inställningsegenskaper och instruktioner för hur du använder dem.

Bonustips: Använd WPCode för att lägga till anpassad kod i ditt tema

I den här guiden har du lärt dig om theme.json och dess potential för temaanpassning. Men det kan fortfarande kännas lite överväldigande att redigera direkt.

Lyckligtvis finns det ett annat användarvänligt alternativ för att lägga till anpassad kod och göra avancerade anpassningar: WPCode.

Med WPCode kan du infoga anpassade kodavsnitt utan att någonsin behöva röra dina temafiler. Detta minskar risken avsevärt för att bryta din webbplats under anpassning.

Om du vill lära dig mer om detta kodsnutt-plugin, kolla in vår fullständiga WPCode-recension.

Här är också några hjälpsamma handledningar för att komma igång med WPCode:

• Användbara WordPress-kodavsnitt för nybörjare (expertval)
• Hur man markerar nya inlägg för återkommande besökare i WordPress
• Hur man markerar text i WordPress
• Hur man enkelt lägger till skuggning i WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig om theme.json-filen i WordPress. Du kanske också vill kolla in vår nybörjarguide om hur man redigerar en WordPress-webbplats och vårt experttips om bästa dra-och-släpp-sidbyggare för WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.