Skapa ett barntema (child theme) till WordPress

Skapa barntema (child theme) för wordpress

Vill du skapa ett barntema i WordPress? Har du läst ”Vad är ett barntema?” så vet du redan varför det är en bra idé. Men för dig som är ny på sidan, så kan du läsa en kort återblick.

Ett barntema är en samling av filer som du kan använda för att skräddarsy ditt temas utseende och funktioner. Dessa ändringar blir inte överskrivna när ditt huvudtemas filer uppdateras. Ett barntema kan du använda för att helt ändra utseendet på ditt tema, eller för att göra små ändringar som bakgrundsfärg och typsnittsval.

Vad behöver jag för att skapa ett barntema?

Den enklaste versionen av ett barntema består av en mapp som ligger bredvid mappen med ditt modertema hos ditt webbhotell. I mappen finns en fil vid namn ”style.css” som är kopplat till ditt huvudtema. Denna fil är ditt barntemas stilmall och skapar din hemsidas utseende. Det är den vi ska skapa idag.

För att förstå denna tutorial behöver du:

  • En basal förståelse av html/css.
  • En viss förståelse av mappsystemet som bygger upp publiceringsverktyget WordPress.
  • Ftp-programmet Winscp (gratis), som vi kommer använda för att ladda upp ditt färdiga barntema till samma plats där din webbplats filer ligger. Ett ftp-progam fungerar och ungefär ut som utforskaren i Windows. Programmet ger oss tillgång till filerna som bygger upp din WordPress-installation. Du kan gratis ladda ned FTP-programmet ”Winscp” via Winscp’s offciella webbplats.

Vill du inte skapa ett barntema, men fortfarande ha en plats för kod som kan ändra ditt temas utseende?

Läs inlägget ”Vad är ett barntema?” Där ger jag tips på ett plugin som kan vara till hjälp.

Överkurs om barnteman

Ett barntema fungerar genom att du lägger till dubbletter av filer som finns i ditt modertema i ditt barntemas mapp. WordPress läser barntemats mapp först och därmed syns dina ändringar i filerna snarare än original-koden. Därför kan man även lägga dubbletter av andra filer från ditt huvudtema som du vill ändra i. Med vissa undantag för ”functions.php”-filen som behöver andra kopplingar. Men för att ditt barntema ska fungera måste du först skapa filen ”style.css”, då det är den filen som kopplar barntemat till modertemat.

Extra tips: Redigera aldrig kod live på din webbplats

Som allt annat gällande din hemsida, ändra aldrig i kod som ligger live din webbplats, utan skapa allt nytt lokalt på din dator innan du laddar upp det. Ta också alltid en komplett backup av din webbplats filer och databas innan du gör ändringar. Om du inte vet hur du gör, fråga ditt webbhotell.

Skapa ett barntema:

  1. Det första vi behöver är en kopia av mappen med ditt modertema. Det kan vi ladda ner från ditt webbhotell till din dator via ett ftp-program. Så det första vi gör är att ladda ned programmet ”Winscp” från deras officiella webbplats.
  2. Nu behöver vi ta reda på dina ftp-inloggningsuppgifter. Dessa kan få från ditt webbhotell. Fråga efter ditt ftp-login eller skapa ett via ditt webbhotells kontrollpanel. De uppgifter du behöver är: värdnamn, användarnamn och lösenord.
  3. Nu kan du starta Winscp, klicka på ”New site”, välja File protocol; FTP och fyll i dina uppgifter och logga in.skapa ett barntema och logga in i ftp-programmet Winscp
  4. Nu ska vi ladda ned en kopia av din webbplats modertema och här kan det se lite olika ut. Du kan se en mapp som heter ”Public html” eller så är du direkt inne i den och ser en mapp som heter ”wp-content”. Klicka på dig in i ”wp-content” och sedan på mappen ”themes”. Klicka där inne på mappen med ditt temas namn och dra över den till din dator. Detta kan ta en liten stund beroende på din internetuppkoppling.
    skapa ett barntema och ladda upp i ftp-programmet Winscp
  5. Skapa ny en ny mapp bredvid ditt tema-mappen du just laddat ned och döp den till ”ditt-tema-namn barntema”. För mig blir ”Sparkling barntema” då min webbplats använder temat Sparkling.
  6. Nu ska du skapa din stilmall, alltså css-fil. Öppna ett anteckningsprogram, exempelvis Notepad, och skapa en fil.
  7. Klistra in denna kod i mallen:

    /*
    Theme Name: Sparkling barntema
    Theme URI: http://www.annalerneryd.se/
    Description: Ett Sparkling Barntema
    Author: Copy & Kod
    Author URI: http://www.annalerneryd.se
    Template: sparkling
    Version: 1.0.0*/

    @import url(”../sparkling/style.css”);

    skapa ett barntema i notepad

  8. Nu ska du byta ut viss information i denna kod till din egen. Den mesta är självförklarande, men det som är viktigt är raden ”Template: sparkling” Denna rad säger till WordPress att detta är ett barntema till ditt huvudtema. Denna text är känslig för små och stora bokstäver och måste vara skriven på exakt samma sätt som på din modertemas mapp. Så se hur det är skrivet på den och härma.
  9. Sista raden ”@import url(”../sparkling/style.css”);” är också viktig för det är den som kopplar ihop ditt barntema med ditt modertema. Byt även här ut ”sparkling” till ditt egna modertemats namn.
  10.  Nu är vi så gott som klara, och det är dags att ladda upp det, så öppna Winscp igen.
  11.  Nu ska du ladda upp mappen ”ditt-tema-namn barntema” via ftp och det gör du på samma sätt som du laddade ned din modertema-mapp. Lägg ditt barntema precis bredvid mappen som innehåller ditt modertema. Titta gärna på den första bilden igen hur mitt ligger. Dra från den vänstra delen av Winscp (där du ser din lokala filer) och släpp den på högra sidan. Modertema kan du behålla lokalt som en backup.
  12.  Om allt har gått har du nu ett barntema uppladdat. Och du kan nu logga in på din webbplats och gå till Utseende → Tema och aktivera det. Du kommer inte se någon skillnad då vi inte lagt till någon ny kod. Det tar vi i nästa tutorial.

Var något oklart? Kontakta mig gärna. Jag svarar på alla frågor.

lägga bloggkategori i wordpress menyEller vill du fortsätta läsa fler tips? Vad sägs om ”Lägg till en bloggkategori i din WordPress huvudmeny

5 kommentarer på “Skapa ett barntema (child theme) till WordPress

    1. Hej Göran

      Vad glad jag blir att du tyckte min beskrivning var klar och tydlig. Det var det jag siktade på när jag skrev inlägget. Kom gärna tillbaka till bloggen nästa vecka när jag kommer skriva om hur man använder sitt barntema för att göra enklare ändringar i sin hemsidas utseende.

  1. Tack! Det låter bra, jag ska genast testa det. Jag behöver barntemat för att kunna integrera woocommerce. Men det är en senare fråga. Har du tips om även den biten kanske?

    1. Hej Christina.

      Det beror lite på vad du vill ändra i din Woocommerce. Det du bör tänka på är att Woocommerce i sig är ett plugin, inte ett tema och följer gärna med Woocommerce-anpassade teman. Om du vill ändra färg och form, så är det precis som ovan du gör. Om du vill ändra i struktur, så behöver du flytta över den filen där du vill ändra strukturen och lägga den på ”samma plats” i ditt barntema som originalfilen ligger i ditt huvudtema och sedan göra din ändring i php-koden. Om du däremot vill ändra i funktioner blir det lite pilligare då du behöver kopiera över functions.php-filen till ditt barntema och det gör man på ett lite annat sätt än vad som beskrivs här ovan. Så skriv gärna tillbaka eller skicka mig ett mail på anna@annalerneryd.se om du behöver extra hjälp med detta.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *