Ett barntema (child theme på engelska) är ett tema som ärver funktionalitet och stil (utseende) från ett annat tema, ett så kallat parent theme (originaltema/föräldratema). Det gör det möjligt för användare att anpassa och ändra sitt WordPress-tema utan att redigera de ursprungliga tema- och kodfilerna. På så sätt kan du behålla dina ändringar/anpassningar även när originaltemat (parent theme) uppdateras.
Ett barntema är idealiskt för att göra specifika ändringar i ett tema, eftersom det minskar risken för att förlora dessa ändringar vid framtida uppdateringar. Dessutom kräver användningen av barnteman grundläggande kunskaper i WordPress-temastruktur, samt viss kodning i PHP och CSS. Trots detta är själva skapandet av ett barntema relativt enkelt. Slutligen, genom att använda ett barntema, kan du alltså anpassa din webbplats på ett säkert och effektivt sätt.
Fyra olika metoder att skapa ett barntema
- Den första metoden är att skapa ett barntema manuellt. Det innebär att du skapar en ny mapp i din WordPress-temakatalog och lägger till en style.css-fil och en functions.php-fil. I style.css-filen anger du information om barntemat och importerar stilmallen från originaltemat. I functions.php-filen lägger du till kod som säkerställer att föräldratemats stilmall och funktioner laddas in korrekt.
- Den andra metoden är att använda ett tillägg. Det finns flera tillägg som förenklar skapandet av ett barntema genom att automatisera processen. De genererar de nödvändiga filerna och mapparna åt dig och gör det enkelt att komma igång utan att behöva skriva någon kod..
- Den tredje metoden är att använda ett starter theme. Ett starter theme är en grundläggande temamall som du kan anpassa efter dina behov. Det är ett bra alternativ om du vill ha en snabb och enkel startpunkt för ett child theme, och det kräver ofta mindre anpassning än att skapa ett barntema från grunden.
- Många teman har också färdiga barnteman som man kan ladda ner, antingen från utvecklarens egen webbplats eller från andra webbplatser på nätet.
Skapa ett eget barntema (child theme)
Innan du börjar, se till att du har följande:
- Ett överordnat originaltema. Kontrollera att originaltemat du vill anpassa är installerat och aktivt på din WordPress-webbplats. Jag kommer att använda temat Astra i det här exemplet.
- Tillgång till dina WordPress-filer. Du kan antingen använda ditt webbhotells filhanterare eller en FTP-klient som FileZilla för att kunna ladda ner och ladda upp de nödvändiga filerna.
- Säkerhetskopiering av webbplats. Skapa en säkerhetskopia av din WordPress-webbplats innan du gör några ändringar för att undvika oavsiktlig dataförlust.
- Ett program för att skriva kod. Det fungerar ofta vilken textredigerare som helst, men det finns dedikerade kodredigerare som underlättar för dig att skriva kod. I exemplet använder jag en kodredigerare som heter Brackets. Brackets är en lätt, men ändå kraftfull, modern textredigerare. Det används en del visuella verktyg i redigeraren så att du får rätt hjälp när du vill ha det utan att det står i vägen för din kreativa process.
Filezilla – ftp
Anslut till webbplatsen med ett ftp-program eller webbhotellets filhanterare. I exemplet använder jag ftp-klienten Filezilla, som du kan ladda ner gratis på webben. Anslut till servern med de uppgifter du har fått från webbhotellet.
Vi börjar med att skapa den underordnade temamappen där du ska lagra barntemats filer.
I WordPress rotkatalog går du till wp-content >> themes.
Skapa en ny mapp och döp mappen. Namnet kan vara något som liknar ditt nuvarande tema (originaltemat) eller kanske har ditt företagsnamn. I exemplet döper jag mappen till astra-child.
Skapa en formatmall (stylesheet)
Formatmallen, style.css, styr designen och layouten för ditt WordPress-tema. Det är också där du definierar relationen med originaltemat och åsidosätter dess stilar.
Öppna din kodredigerare, t.ex. Brackets. Skapa en ny fil som du döper till style.css. Skriv in följande kod i den filen. Ersätt informationen ditt faktiska överordnade temas detaljer och spara sedan ändringarna. Den rad som är extra viktig är den som heter Template. Där måste du ange originaltemats namn exakt som mappen med originaltemat heter.
/*
Theme Name:Astra Child
Theme URI:https://exempel.se/astra-child/
Description: Mitt fantastiska barntema
Author: Ditt namn
Author URI: http://exempel.se
Template: astra
Version: 1.0.0
*/
/* Lägg till dina egna stiländringar här */
Spara filen på din dator (style.css). Kopiera filen från din dator till barntemamappen på webbservern.
Skapa functions.php filen och ladda in formatmallen
Filen functions.php är ryggraden för ditt temas funktioner. Det låter dig lägga till anpassad funktionalitet som inte finns eller ändra befintliga funktioner i originaltemat. Den här filen ser också till att det överordnade, originaltemats stilar och skript laddas och fungerar korrekt.
Skapa en ny functions.php-fil i din barntemamapp och lägg till följande kodavsnitt för att importera stilar från det överordnade temat.
<?php
// Your code to enqueue parent theme styles
function enqueue_parent_styles() {
wp_enqueue_style( ’parent-style’, get_template_directory_uri() . ’/style.css’ );
}
add_action( ’wp_enqueue_scripts’, ’enqueue_parent_styles’ );
?>
Spara filen och kopiera den till barntemamappen på webbservern.
Aktivera barntemat
Om du skapat style.css- och functions.php-filerna korrekt bör du kunna se barntemat på din WordPress-webbplats under Utseende >> Teman. Klicka på Aktivera för att aktivera barntemat på webbplatsen.
Lägga till en profilbild
Som du kan se visas det ingen bild för temat i adminpanelen. Om du vill kan du lägga till en bild. Det gör att temat känns mer som ditt.
Bilden som du ska lägga till ska ha storleken 1200 x 900 px. Skapa en bild i den storleken i valfritt program. Det kan vara t.ex. Photoshop, Affinity Photo eller Canva. I exemplet använder jag gratisversionen av Canva.
Gå till https://www.canva.com/ och logga in. Du kan skapa ett nytt konto eller logga in med t.ex. ditt Google-konto.
Klicka på knappen Skapa en Design och välj Anpassad storlek i fönstret som dyker upp. Skriv in 1200 x 900 px och klicka på Skapa ny design.
I menyn till vänster kan du välja bakgrundsfärger eller foton, element som symboler och tecknad grafik och skriva text. Titta gärna på vår kurs i Canva om du vill lära dig använda det här smidiga verktyget för att skapa snygg grafik.
När du är klar klickar du på Dela (uppe till höger) och väljer Ladda ned. Döp dokumentet till screenshot och spara i filformatet png.
Ladda upp bilden till samma mapp som du laddat upp style och funktions-filerna.
Om du uppdaterar webbläsaren ska du kunna se bilden inne i WordPress.
Byta namn på barntemat
Att byta namn på ditt barntema i WordPress är enkelt. Allt du behöver göra är att ändra mappens namn och och uppdatera style.css-filen. Här är en steg-för-steg-guide:
Anslut till din WordPress-webbplats via FTP eller filhanteraren på ditt webbhotell.
Gå till mappen /wp-content/themes/.
Leta upp mappen för ditt nuvarande barntema och byt namn på mappen till det nya namn du önskar.
I exemplet heter mappen ”astra-child”. Jag byter namn på mappen till pastakungen (som är samma namn jag använde på screenshotten).
Uppdatera style.css-filen:
Inuti den nyligen omdöpta mappen letar du upp filen style.css.
Ladda ner och öppna style.css-filen för redigering i t.ex. Brackets eller annat text/kodredigeringsprogram.
I början av filen hittar du temats information.
CSS
/*
Theme Name: Mitt Tema Child
Template: astra
*/
Ändra det som står efter Theme Name till ditt önskade namn för barntemat. I det här exemplet kallar jag det för Pastakungen. Se till att du inte ändrar något annat i filen.
CSS
/*
Theme Name: Pastakungen
Template: astra
*/
Det är viktigt att ”Template:” värdet inte ändras. Det ska fortfarande hänvisa till originaltemats mappnamn. (I exemplet använder jag temat Astra, men du kanske har ett annat namn på originaltemat och mappen det ligger i).
Spara och ladda upp till webbservern på nytt. Nu har ditt barntema ett nytt namn.
Skapa barnteman med tillägg
Att skapa ett child theme manuellt är inte särskilt komplicerat, men det finns tillägg som kan göra processen ännu enklare. Dessa tillägg automatiserar ofta de grundläggande stegen och kan spara tid.
Några exempel på tillägg som kan skapa barnteman:
Child Theme Configurator: Detta tillägg är mycket populärt och ger ett användarvänligt gränssnitt för att skapa och hantera child themes. Det kan också hjälpa till att analysera och hantera stilmallar.
WP Child Theme Generator: Ett enkelt sätt att skapa ett barntmea
Dessa tillägg kan vara särskilt användbara för nybörjare eller för de som vill ha en snabb och enkel lösning. Det är dock viktigt att komma ihåg att förstå grunderna med barnteman, child themes, även om man använder ett tillägg.
Behöver du använda ett barntema?
Alla webbplatser behöver inte ett barntema i WordPress. Det finns flera anledningar till varför du inte behöver skapa eller skaffa ett barntema.
- Enkla CSS-ändringar:
- Om du bara behöver göra mindre justeringar av webbplatsens utseende, som att ändra färger eller typsnitt, kan du ofta göra detta direkt via WordPress anpassningsverktyg. Många teman erbjuder omfattande anpassningsalternativ, vilket minskar behovet av att ändra i koden.
- Dessutom kan du använda ”Ytterligare CSS”-funktionen i WordPress anpassningsverktyg. Där kan du skriva egna CSS-regler utan att röra temats filer. Om ändringarna är små och begränsade till CSS, kan detta vara ett snabbt och enkelt alternativ.
- Teman med inbyggda anpassningsalternativ:
- Vissa premiumteman är utformade med flexibilitet i åtanke och erbjuder ett brett utbud av anpassningsalternativ direkt i temainställningarna. Dessa teman kan ha inbyggda funktioner för att ändra layout, färger, typsnitt och andra designelement, vilket eliminerar behovet av ett barntema.
- Inga planerade kodändringar:
- Om du är nöjd med temat som det är och inte planerar att göra några ändringar i temats kodfiler, behöver du förmodligen inte ett barntema. Om du bara använder plugins för att lägga till funktioner, och inte redigerar temats PHP-filer, är risken för att förlora ändringar vid en temauppdatering minimal.
- Användning av sidbyggare:
- Med populära sidbyggare som Elementor, Beaver Builder eller Divi kan du skapa anpassade layouter och design utan att behöva skriva kod. Dessa verktyg ger dig visuell kontroll över webbplatsens utseende, vilket minskar behovet av att redigera temafiler direkt.
Sammanfattning – barnteman
Så nu vet du varför man använder barnteman, child themes, när du ska använda ett barntema och när du inte behöver ett. Dessutom har du lärt dig hur du skapar och aktiverar ett barntema på egen hand eller med hjälp av ett tillägg.
Vill du lära dig mer om WordPress?
Klassrumskurser och distanskurser
Ansvarig utgivare
