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

Kommentera

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