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

Read More

Vad är ett barntema och varför det är så viktigt för din wordpress-hemsida

Barntema childtheme vad är det

Vad är ett barntema? Det enkla svaret är att ett barntema (childtheme) ä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 snabbt plugin-tips 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 childtheme 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 (childtheme). 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?

Ett tema är det som ger din webbplats sitt utseende. Men ibland vill du ändra temats färg, form eller funktion. Detta kan du ibland göra i temats egna inställningar utan kodkunskap. Men det händer att du behöver ändra saker som inte finns där. Då kan du skapa ett barntema och lägga till egen kod:

Ett barntema är ett undertema som ärver modertemat funktionalitet och stil. Där kan du säkert kan göra ändringar, utan att de blir överskrivna när modertemats kod uppdateras. Ändra alltså aldrig i modertemats filer, de kommer bli överskrivna.

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, kan läsa en guide till i mitt nästa inlägg ”Hur man skapar ett barntema”. Ett barntema behövs om du vill lägga till eller ändra ditt temas funktioner.

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.

 Sammanfattning

Så varför är ett barntema viktigt? Jo, ett barntema håller dina egna kodändringar säkra. Ändra aldrig kod i hemsidans modertema. Denna kod skrivs över varje gång ditt modertema får en uppdatering. I nästa inlägg beskriver jag hur du skapar ett komplett barntema, för dig som vill veta hur man gör det.

Var något här krångligt? Något du inte förstod? Skriv en kommentar eller en fråga, så svarar jag gärna på den.

 

Read More

Är gratis alltid gott?

ar-gratis-verkligen-godare

Den vanligaste frågan jag ser i olika webbforum är:

”Är det någon som vet om ett bra plugin/tema som gör allt detta men fortfarande är gratis?”

Många verkar alltså vilja ha det bästa, men vill inte betala för det. I alla fall inte i första hand. Jag har förstås förståelse för det. Sidan du är på just nu är faktiskt baserad på ett gratistema från WordPress.org.

Med andra ord, jag har inga problem med gratisprodukter. Men baserat på hur ofta jag ser frågan om ”gratis” på sista tiden så kan jag inte låta bli att undra över detta. Det finns många bra gratisprodukter på marknaden. Mitt gratistema är ett av dem. då företaget bakom erbjuder superb support och uppdateringar även till sina gratisteman. I ett senare blogginlägg vill jag gärna gå in på fler positiva egenskaper med gratisprodukter, speciellt WordPressteman, och varför jag väljer att behålla mitt gratistema.

Men tillbaka till ämnet… Jag kan förstå att man i första hand letar efter en gratislösning på sitt problem. Men den frågan tär ändå lite på mig.

Får vår gratiskultur oss att nöja oss med mindre än ideala lösningar bara för att de är gratis? När vi kunde ha fått en perfekt skräddarsydd lösning om vi bara hade öppnat vår plånbok lite? En lösning som antagligen skulle hålla längre och erbjuda support ifall något skulle gå fel?

En gratisversion finns alltid?

Så varför söker vi oss till gratisalternativen och mer än så; varför förväntar vi oss att de ska finnas? Jag har själv blivit irriterad när funktionen jag har velat använda funnits bakom en betalvägg. Varför räknade jag med att den skulle vara gratis?

Detta problem verkar vara störst i den digitala världen, då det finns en uppfattning att digitala varor är värda mindre bara för att de inte ”finns i verkligheten”. Som skribent och webbdesigner har jag själv råkat ut för detta och det är ett vidsträckt problem för alla vi som erbjuder digitala tjänster. En bra sak för oss alla att minnas, inklusive mig, är att det ligger samma mängd arbetstimmar bakom en digital produkt som en konkret.

Så ja, leta gärna efter den billigaste produkten, kanske även gratisalternativet. Det är bra att de finns för dig som vill prova på, kanske är en nystartad företagare med en tajtare budget. Men samtidigt är det viktigt att förstå att du då kanske inte kan eller bör få alla funktioner som betalversionen av produkten erbjuder.

Read More