Egna anpassningar – använd Child theme!

Innehåll på den här sidan:
Child theme i wordpress
Gör så här för att skapa ett child theme
Dags att ändra utseende med css i ditt child theme
Tips att ändra utseende med CSS i ditt tema
Skapa en illustration till ditt tema
Dags att ändra i temats php-filer

Child theme i wordpress

När man vill göra egna anpassningar av utseende eller funktioner i WordPress så använder man numera konceptet Child theme.

Det betyder att man tekniskt sett låter grundtemat vara orört, men gör stora eller små anpassningar i ett annat tema (”barntemat”) som läses in efter huvudtemat, så att dessa ändrade filer ”tar över” de ordinarie filerna som ligger kvar oförändrade.

Detta har gigantiska fördelar vad gäller arbetsflöde och framåtkompatibilitet om grundtemat uppdateras. Det minimerar också risken för allvarliga problem orsakade av fel i de ändrade filerna.

Man skapar enklast sitt childtheme från grunden i en texteditor och laddar upp med ftp. När temat sen är installerat, vilket sker inifrån WordPress, kan man välja att editera filerna i WordPress inbyggda editor, eller att fortsätta med att editera filerna lokalt och sedan ladda upp med ftp. Man kan också skapa sitt child theme helt och hållet mha plugins men det rekommenderas inte alls just nu, då det vore ett mindre  lärorikt arbetsätt.

Gör så här för att skapa ett child theme

Aktuell info hittar du alltid här http://codex.wordpress.org/Child_Themes

Detta är föränderligt så det är bäst att gå till ovanstående länk för att se senaste sättet.

Här finns en aktuell video guide som visar steg efter steg hur du går iväg.

https://youtube.com/watch?v=1bteZYFHdek%3Fstart%3D708%26feature%3Doembed

Dags att ändra utseende med CSS i ditt child theme

1. Prova först att göra någon uppenbar ändring så du märker vad som händer. Tänk på att du måste vara minst lika specifik som huvudtemat.
   Om du skriver
   h1 {color:red;}
   i ditt barntemas style.css och huvudtemats style.css skrivit t.ex.
   h1.sitetitle {color:#00f;}
   så fortsätter huvudrubriken att vara blå…
2. Testa:p {font-size:3em;}
3. Om dettta inte fungerar så testa något annat. Alla teman är ju olika. Nu när du sett att det fungerar ska du radera detta och skriva in några ändringar som du verkligen vill göra.TIPS: Ett mycket bra sätt att få lika starka/specifika selektorer är att använda webbläsarna för att se vad huvudtemat skrivit och kopiera det in i barntemat, men med de anpassningar du vill göra.
   Instruktioner för hur man jobbar så följer här:
4. Vårt exempel blir att byta färg bakom förstoringsglaset högst upp till höger. Högerklicka på förstoringsglaset och välj ”inspect element” (eller motsvarande i din webbläsare t.ex. Chrome, Safari, Firefox med Firebug) 
5. Leta upp vilken css-regel som ger den nuvarande färgen och kopiera både selektor och egenskap: värde direkt i ”inspektorn”.
   Klistra in i style.css i ditt childtheme. Ändra färgkoden till nåt du föredrar.
   Tänk på: Om du inte hittar den färgen du vill ändra direkt när du högerklickar så leta dig fram i kodhierarkin i inspektorn tills du hittar kodelement som är det som färgen är knuten till.
6. Spara och kolla. 
7. För musen över och du ser att det finns minst ett ställe till att leta upp där du ska byta färg på detta sätt. Fortsätt vidare med hjälp av inspektorn ELLER så kan du prova att ladda hem originaltemats css och leta upp  den gröna färgen som du vill ändra i den filen. Tänk på att du INTE ska ändra i den filen. Då försvinner hela idén med child theme, men du kan leta i den och kopiera koder ur den som ett komplement till att leta upp allt med firebug eller element inspector

Tips att ändra utseende med CSS i ditt tema

Använd din gransknings/inspect/web-developer tool att välja rätt CSS selektor. Glöm inte att rensa cachen när du har gjort ändringar eller avaktivera cachen i din developer-tool. Kolla upp vilka regler som faktiskt används och om det är något annat som skriver över din regel (i värsta fall kan du alltid använda !important regeln).

I WordPress kan olika sidor, typer av sidor eller templates identifieras med specifika klasser som finns i body elementet. Det är ett utmärkt sätt att skapa regler som gäller bara på vissa sidor.

T. ex. när du vill dölja ett element på den ena sida men samma element ska fortfarande synas på de andra sidor:

Skapa en illustration till ditt tema

1. Nu går vi vidare till att ge ditt tema en illustrativ skärmdump precis som de riktiga temana och att ändra lite i en php-fil. Du kan sen komma tillbaka och ändra så mycket du vill i din style.css
2. Du tillverkar illustrationen genom att ta en skärmdump av din sidas nya utseende, spara i png-format som screenshot.png och placera med hjälp av ftp i mappen med ditt child theme.
3. Om du nu går till Appearance> themes så borde ditt tema se mer professionellt ut genom att det har en egen bild. 

Dags att ändra i temats php-filer

Man kan ändra allt om man börjar ändra i temats php-filer. Det är ju dessa som pusslar ihop varje sida och post och bestämmer vad som ska finnas med och i vilken ordning. Principen är densamma, man ändrar inte i huvudtemat utan skapar en ny version av filen och lägger i barntema-mappen. Då läses den in efteråt och tar över. Om något blir helt fel kan man kasta bort filen (med hjälp av ftp) och allt fungerar igen.

Exempel 1: En sida utan sidebar

Här kan du läsa om hur man skapar egna sidmallar http://codex.wordpress.org/Page_Templates#Custom_Page_Template

Men följ med så ser du hur det kan gå till. Vi använder temat Twentyfourteen som redan från början innehåller några olika sidmallar

När man skapar en sida kan man välja bland flera mallar att basera sidan på

Vi kan med hjälp av vårt child theme lägga till egna mallar, som dyker upp som alternativ i denna meny.

Börja med att ladda hem huvudtemats page.php med hjälp av din ftp-klient

Du kopierar alltså filen från ditt huvudtema till din egen dator, till den mapp där du har den lokala versionen av ditt barntema.

OBS! Kom ihåg att du kanske uppdaterat style.css inifrån wordpress. Din lokala style.css är kanske föråldrad. Ladda inte upp den av misstag.

Nu ska vi ändra page.php och byta namn. Vi vill inte ersätta den vanliga page.php som ligger i originaltemat, utan skapa en till version av sidmallen att välja på när vi skapar nya sidor (eller redigerar gamla).

Öppna filen i din lokala texteditor

Högst upp i filen står lite information. Vi ska ändra detta för att ange att detta är en ny sidmall

Sen ska vi leta upp stället där vi vill ändra koden

Temat Twentyfourteen har stöd för flera olika sidebars. Den som ligger till höger på sidan är ”vanliga” sidebar. Content sidebar är den som ligger till vänster (syns bara när man gett den ngt innehåll).

Vi provar att radera get_sidebar( );

Sen sparar vi filen under ett nytt namn. Den kan inte heta riktigt vad som helst (namnet får inte börja på page-), men t.ex. my-custom-page.php går bra. När vi laddar upp den ska den läggas i mappen med ditt child theme.

Nu dags att att återgå till din sidas administrationsgränssnitt. När du gör en ny sida, eller ändrar en befintlig, så finns din egen mall där

Kolla hur sidan blev.

Det funkade. Om du vill finputsa koden i my-custom-page.php så kan du göra det antingen i din lokala textdeditor och ladda upp igen. Eller gå in i wordpress inbyggda editor och hitta sidan där.

MEN OM du råkar ta bort nåt väsentligt från koden så sidan kraschar, så går du bara in via ftp och tar bort den felaktiga filen och allt återgår till hur det var innan. Puh!

Exempel 2: Poster utan featured images i twentyfourteen

Detta exempel är lite specifikt för twentyfourteen, och för att du ska fatta nyttan kanske du faktiskt måste ha gjort de tidigare övningarna här på sajten som har med detta tema att göra?

2. Nu ska du kopiera filen content.php från huvudtemats mapp och lägga i din barntema-mapp. Detta är en av de filer som bestämmer hur en standardpost (inlägg) byggs upp.  Öppna filen i din texteditor.
3. Vårt exempel handlar om att ta bort featured images från att visas vid själva bloggposten. Vi la till dem förra veckan för att få en fin startsida, men det ser lite ”mycket” ut på bloggsidan, där vi hellre vill lägga in eventuella bilder som vanligt inuti posten.
4. Du ska leta upp den php-kod som visar upp ”featured images” i bloggposten och radera i den fil som hör till ditt eget barntema.
   Ofta behöver man läsa på för att veta vad man letar efter, men man kan också försöka läsa koden och gissa och testa. Leta upp<?php twentyfourteen_post_thumbnail(); ?>och radera.content.php – Förecontent.php – Efter 
5. Spara. Ladda upp med ftp. Titta på resultatet. 
6. Blev det fel så försök igen. Blev det väldigt fel så radera hela filen från ditt barntema och börja om med en ny kopia från huvudtemat.
7. Slut på guiden för denna gång. Du har nu ett fungerande tema med hittills tre filer. Bygg gärna vidare på egen hand.