Använd ditt barntema i WordPress

Använd ditt barntema i wordpress

Det första jag gör när jag har installerat ett tema åt en kund är att skapa ett barntema i WordPress. På så vis kan jag justera webbplatsens utseende, utan att mina kodändringar blir överskrivna när modertemat får en uppdatering.

I detta inlägg kan du lära dig hur du använder ditt barntema för att ändra ditt hemsidas utseende och funktioner.

Vill du läsa mer om barnteman och dess fördelar? Läs mitt tidigare inlägg ”Vad är ett barntema

Ändra aldrig i originalkoden

Jag ska berätta en liten hemlighet, det finns en extra anledning till att använda ett barntema. Om jag lägger till kod i mitt barntema, trycker på spara och inte gillar resultatet, så kan jag bara ta bort koden igen. Webbplatsen återgår direkt till att använda modertemats kod och allt blir återställt.

Om jag istället hade sparat över originalkoden, blir det mycket svårare att återställa. Speciellt om du ändrar i koden som ligger live på din webbplats, vilket du aldrig bör göra.

Visst går det att återställa. Du kan ladda ned en ny version av ditt tema, hitta koden du ändrade, klippa och klistra in den. Men det är mycket extra jobb, speciellt om du är ovan vid kod. Därför säger jag ändra aldrig i originalkoden. Använd ett barntema.

Nu ska vi istället lära oss hur vi använder vårt bartema som vi skapade i föregående blogginlägg.

Har du inte läst förra inlägget? Läs guiden om hur du kan ”Skapa ett barntema till WordPress”

Vad behöver jag för att ändra i mitt barntema?

Ja, först och främst behöver du ett barntema. I många köpeteman så skickar utvecklaren med ett färdigt barntema som du installerar och aktiverar på samma sätt som du installerade modertemat. Om inte, följ min guide här ovan för att skapa ditt barntema.

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

  • En allmän förståelse av att ändra i css-kod
  • Admin-rättigheter för din WordPress-installation
  • Webbläsare Google Chrome (kan även fungera med andra, men denna används här)
  • Viss förståelse filerna inuti ett barntema, främst stilmallsfilen ”style.css”

Använda ditt barntema

  1. Vårt mål är att ändra länkfärgen i ditt tema. Öppna först en flik i din webbläsare där vi ser din webbplats. Hitta en textlänk. Kom ihåg att vi nu ändrar färgen på alla länkar som har denna färg.
  2. Högerklicka på din länk och välj ”Inspektera”.
    Inspektera din kod för att använda ditt barntema
  3. Du får nu upp en ny ruta i din webbläsare där html-koden som hör till din länk är markerad. Prova gärna att föra musen över de andra kodraderna och se hur delar av din webbplatser blir markerade. Det signalerar att koden du står över kontrollerar den delen av din webbplats.
  4. För tillbaka musen till länkens kod. Har du problem att hitta den igen, återupprepa föregående steg.
  5. Titta nu till höger i den nya rutan. Där finns all stilmallskod som kontrollerar utseendet av din webbplats. Det är den vi vill åt.
  6. Den stilmallskod (css) som vi vill ha hamnar oftast högst upp i den högra kolumnen. Men om du är osäker på vilken kod som kontrollerar det du vill ändra, så kan du här ändra i css-koden fritt för att se om något händer. Men var lugn, detta syns bara hos dig i din webbläsare. Vill du ha tillbaka det som det var behöver du bara uppdatera webbläsarens flik.
  7. I css-kod kontrolleras länkar av bokstaven ”a” (kallas för selector i kodspråk) som syns här på skärmbilden. Markera din version av den kod jag har markerat, högerklicka och välj kopiera.
  8. Nu loggar du in på din WordPress-sida och går till Utseende -> Redigerare. Detta val ser du endast om du har administratörsrättigheter.
  9. Nu klistrar du in den kod du just kopierat, under kodraden som börjar ”@Import url(….”
  10. Nu är det dags att ändra färgen. Färgkoder på webben kan se ut så här: #fc6b0a och kallas för hex-koder. Detta är den delen av koden som du ska byta ut.
  11. Gå till w3schools.com och välj en färg och kopiera hex-koden.
  12. Markera den nuvarande hex-koden och klistra in din nya. Kom ihåg att avsluta kodraden med en ; som fanns där innan. Det stänger kodraden, och utan den kommer det inte att fungera.
  13. Tryck sedan på ”uppdatera fil”.
  14. Du har nu bytt ut färgen på dina länkar. Om de inte ändras, kolla först att koden är den samma som i guiden, töm sedan din webbplats och webbläsares cache-minne och uppdatera sidan igen.

Så för att sammanfatta. För att lägga till ny kod i ditt barntema så:

  • Öppnar du din webbplats
  • Högerklickar på det du vill ändra och välj ”inspektera”
  • Avgör vilken css-kod som kontrollerar elementet du vill ändra.
  • Kopiera css-koden
  • Klistra in den i ditt barntema stilmall
  • Gör din ändring
  • Spara

I en perfekt värld skulle du göra dina ändringar i din stilmalls-fil lokalt på din dator och sedan ladda upp den, då det är bättre att göra ändringar lokalt för minska risken att något går fel. Men för enkelhetens skull visar jag er detta sätt. Ni kan såklart även göra det på det andra sättet om ni känner er bekväma med det.

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

Eller vill du fortsätta läsa fler tips?

planera blogginlägg med wordpress editorial calendarVad sägs om ”Planera blogginlägg med WordPress editorial calendar

Read More

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