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

Lägg en bloggkategori i WordPress meny

lägga bloggkategori i wordpress meny

Idag vill jag dela med mig av ett litet men värdefullt tips för nybörjaren; att lägga en bloggkategori i wordpress huvudmeny. Detta är ett enkelt sätt att snabbt visa din användare till dina mest populära kategorier, eller att använda din blogg till mer än ett syfte.

Du slipper även slösa plats i hemsidans sidospalt eller liknande för en eller två kategorier.Men det jag gillar mest med den här enkla lösningen är hur snyggt det blir, kategorin ser ut som alla de andra menyknappar, en katt bland hermelinerna, och genom att klicka på den så skickas du direkt till kategorins alla blogginlägg.

Själv använder jag den här funktionen för att dela upp företagets portfolio mellan textmaterial och hemsidor. En portfolio som skapats med WordPress bloggfunktion. Dessa två menyval i min huvudmeny är kategorier, men såklart inte min bloggs enda kategorier.

Men genom att lägga dessa två i menyn kan jag skilja dem från resten av mitt företags bloggande och enkelt göra dem tillgängliga tillsammans med min hemsidas sidor.

Hur lägger jag till en bloggkategori i wordpress huvudmeny?

Allt du behöver för att lägga till en kategori i din huvudmeny är en publicerad kategori och en huvudmeny att lägga den i. Det är klart på 4 steg.

  1. Klicka på utseende -> menyer i WordPress huvudmeny
  2. Klicka fram dina kategorier i menyredigerarens sidospalt. Där ser du nu alla din huvud- och underkategorier
  3. Välj nu en kategori genom att bocka i dess ruta och klicka på ”Lägg till i meny
  4. Kategorin läggs nu till i menyn och du kan dra den till vart du vill lägga den. Såklart kan du lägga den som en undersida till sin huvudkategori eller till en ny eller existerande sida.

Klart!

Gillade du detta enkla tipset och vill läsa fler i samma andra? Skriv gärna då en kommentar under inlägget.

Read More