Välkommen, just nu i Art till salu!

Välkommen till

Ett av mina publicerade inlägg

Att skapa barntema

Publicerat 2018-11-12.
Skapa ett barntema (child theme) i WordPress
Vad är ett barntema? Det enkla svaret är att ett barntema (child theme) är en plats där du kan spara kodändringar du gjort till ditt WordPress-temas filer. En plats som är säker och som inte kommer skrivas över när du uppdaterar ditt modertema.
I det här inlägget kan du läsa vad ett barntema är och varför det är så viktigt. I slutet ger jag också ett för dig som vill ha ett barntema, men inte känner dig bekväm med kodning, så läs till slutet, eller hoppa direkt dit!
Förstå bakgrunden till barnteman
För att förstå varför barnteman, eller ett child theme som det heter på engelska, är så viktiga kan det vara vettigt att först förstå att varje WordPress -webbplats är uppbyggd av minst tre delar:
• WordPresskärnan
Ett paket av filer som utgör basen på varje webbplats. Dessa filer krävs för att en WordPress-webbplats ska existera. Filerna skapar ditt användargränssnitt när du loggar in och ger din sida sitt grundläggande utseende/tema.
• Teman
Ett tema ger din webbplats det utseende och funktioner som du vill visa utåt till dina besökare.
• Plugins
Ett plugin kan ge dig extra funktioner som ditt tema saknar.
Dessa tre delar är uppbyggda av en mängd filer som skrivs över varje gång du klickar på ”uppdatera” inuti WordPress. Därför är det så viktigt att du skapar ett barntema (child theme). Du kan även installera ett plugin som skapar en säker plats för din nya kod. Men dessa plugins är endast för CSS kod, kod som kontrollerar utseendet av ditt tema.
Vad är ett barntema och varför ska jag ha ett?
Det finns flera bra anledningar till att använda barnteman.
1. Om du gör dina ändringar i ett barntema kan du när som helst avaktivera och/eller tar bort temat utan att dess föräldratema påverkas.
2. Om du gör ändringar i ett tema och temat uppdateras kommer dina ändringar att försvinna. Gör du ändringarna i ett barntema bevaras ändringarna även om dess föräldratema uppdateras.
3. Det är ett snabbt och smidigt sätt att börja bekanta sig med temautveckling för WordPress.
Håll dina ändringar säkra i ett barntema
Att skapa en plats för din egna kod är betydligt enklare än det låter. Men om du endast vill ändra utseendet av ditt tema, och inte dess funktioner behöver du inte skapa ett barntema. Då räcker det att installera ett plugin för att lägga till din stilmalls-kod, alltså den kod som påverkar ditt temas färg och form.
Jag vill tipsa om ett sådant plugin, men du som är nyfiken på att skapa ett komplett barntema, så läser du bara vidare i detta inlägg ”Hur man skapar ett barntema”. Ett barntema behövs om du vill lägga till eller ändra ditt temas funktioner (kommer att ta upp mer om det i ett framtida inlägg).
Om du nu inte vill göra ett barntema så kan du använda Custom-css plugin, så här gör du.
Installera ett Custom-css plugin
1. Klicka på Tillägg -> Lägg till nytt.
2. Sök på ”Advanced css editor” och installera det som är skapat av Hardeep Asrani
3. Klicka på Installera och Aktivera
4. Klicka på Utseende -> Anpassa. Där syns en ny knapp vid namn ”Advanced css editor”.
Klicka där och du har en ny liten ruta, där du kan lägga egen kod som är personligt bunden till ditt tema, men inte blir överskriven när ditt modertema uppdateras. Som bonus kan denna css editor även simulera hur din sida ser ut i en platta eller mobiltelefon och du kan lägga till kod som endast ska gälla för antingen dator, platta eller mobil.
Jag vill ha ett barntema, se nedan hur du gör.
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 mapp systemet som bygger upp publiceringsverktyget WordPress.
• Ett Ftp-program, 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 (se andra förslag på min tis och trix sida).
Lite information 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.
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 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 din Ftp, klicka på ”New site”, välja File protocol; FTP och fyll i dina uppgifter och logga in.
Bild 1
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.
Bild 2
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 ”Understrap child theme” då min webbplats använder temat Understrap.
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: Understrap Child Theme
Theme URI: http://www.XXXXXXXX.se/
Description: Ett Understrap child theme
Author: Copy & Kod
Author URI: http://www.XXXXXXXX.se
Template: understrap
Version: 1.0.0*/
@import url(”../understrap/style.css”);
Bild 3
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: understrap” 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(”../understrap/style.css”);” är också viktig för det är den som kopplar ihop ditt barntema med ditt modertema. Byt även här ut ”Understrap” 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.
Prova nu att ändra i ditt barntema
Om du nu loggar in på WordPress-webbplatsens adminpanel och går till Utseende > Teman kommer du att se Understrap Child Theme i listan. Bara för att bekräfta att allt har fungerat som det ska, gör två radbrytningar under kodblocket i style.css och klistra in följande kod:
* { color: #CA2017 !important; }
Spara filen. Gå till WordPress-installationens Tema-sida igen och aktivera Understrap Child theme. Öppna webbplatsens startsida. Om all text på sidan nu har en mörkröd färg vet du att barntemat fungerar som det ska, och att du kan fortsätta experimentera med temats design i barntemats style.css-fil. Du bör nog börja med att radera raden vi precis lade till.
Lycka till nu!


Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

10 − tio =