WordPress och Child Themes

Child themes (eller “barnteman”) i WordPress kan verka krĂ„ngliga och onödiga för den oerfarne. Jag fick en förfrĂ„gan om jag kunde skriva en artikel om just child themes, och sjĂ€lvklart kan jag göra det.

Sanningen Ă€r att child themes inte Ă€r sĂ„ krĂ„ngliga som mĂ„nga tror, och det finns flera fördelar med dem. I den hĂ€r artikeln kommer jag berĂ€tta vad child themes Ă€r och dess fördelar, men Ă€ven vilka nackdelar det finns med dem. Sedan kommer jag gĂ„ igenom hur de fungerar och till slut hur man skapar ett child theme — allt förklarat pĂ„ ett sĂ€tt som Ă€r barnsligt enkelt att förstĂ„.

Vad Àr child themes?

Vi ska börja med att klargöra vad child themes inte Àr; att ett tema kallas för just barntema betyder inte att det har nÄgot med barn att göra, utan pekar istÀllet pÄ var i hierarkin temat ligger. Jag skulle hellre kalla dessa teman för underteman som faktiskt sÀger lite mer om vad det Àr för nÄgot, men eftersom att bÄde child theme och barntema anvÀnds flitigt sÄ ska Àven jag göra det.

Ett child theme Àr med andra ord ett tema som utgÄr frÄn ett vanligt tema, vanligtvis kallat för förÀlder- eller huvudtema. Det Àr den enklaste formen av WordPress-tema, och att göra Àndringar genom ett child theme istÀllet för direkt i huvudtemat har flera fördelar:

• NĂ€r huvudtemat uppdateras sĂ„ försvinner inte dina Ă€ndringar.
• GĂ„r (ofta) snabbare att jobba med.
• Enklare att jobba med för nybörjare.

Men, som med det mesta, sÄ finns det Àven nackdelar:

• Man anvĂ€nder sig oftast av @import, vilket Ă€r dĂ„ligt för webbplatsens prestanda.
• Vid mĂ„nga Ă€ndringar blir stilmallarna onödigt lĂ„nga.

Ifall man har höga krav pÄ prestandan och har tÀnkt göra vÀldigt mÄnga Àndringar sÄ Àr det med andra ord bÀttre att göra ett vanligt tema Àn ett barntema. För de flesta gÄr det dock alldeles utmÀrkt att köra med ett barntema.

VÀrt att veta Àr att det inte gÄr att skapa ett barntema med ett annat barntema som förÀlder.

Hur fungerar child themes?

I mina exempel kommer jag utgĂ„ frĂ„n ett barntema som vi kallar “Mitt tema”. Hur du skapar ett barntema kommer jag berĂ€tta mer om senare i denna artikel.

I “Mitt tema” har vi endast följande filer:

• style.css
• header.php
• footer.php
• functions.php

NÀr man arbetar med child themes finns det frÀmst tvÄ saker man ska komma ihÄg:

• De PHP-filer som inte finns i barntemat hĂ€mtas istĂ€llet frĂ„n huvudtemat.
• Undantaget Ă€r functions.php dĂ€r bĂ„da hĂ€mtas — först frĂ„n barntemat, dĂ€refter frĂ„n huvudtemat.

För att göra detta Ànnu enklare att förstÄ sÄ har jag gjort nedanstÄende illustration med vÄrt exempel.

WordPress tittar först om filen finns i barntemat — ifall den inte finns sĂ„ hĂ€mtas den istĂ€llet frĂ„n huvudtemat. Detta innebĂ€r att nĂ€r du arbetar med barnteman ska du bara kopiera över de PHP-filer som du har tĂ€nkt Ă€ndra nĂ„got i. NĂ€r det i framtiden kommer en uppdatering till huvudtemat sĂ„ kan du lugnt hĂ€mta uppdateringen utan att de Ă€ndringar du gjort försvinner.

Och functions.php?

Som jag berĂ€ttade tidigare sĂ„ hĂ€mtas filen functions.php först frĂ„n barntemat och sedan frĂ„n huvudtemat. Detta gör sĂ„ att du kan ersĂ€tta funktioner i huvudtemat med dina egna.

I ett vanligt tema kan en funktion i filen till exempel se ut sÄ hÀr:

if(!function_exists('do_something'))
{
    function do_something()
    {
        //Gör nÄgot
    }
}

Eftersom koden kontrollerar sĂ„ att funktionen do_something() inte redan existerar, och för att koden kommer köras efter vĂ„r egen functions.php, sĂ„ kan vi enkelt ersĂ€tta funktionen med vĂ„r egen:

function do_something()
{
    //Gör nÄgot annat
}

Hur skapar man ett child theme?

Att skapa ett barntema Ă€r vĂ€ldigt enkelt. Öppna mappen /wp-content/themes/ och skapa en ny mapp dĂ€r. Det Ă€r en god vana att döpa mappen för ett barntema till det samma som huvudtemat med “-child” i slutet, och eftersom “Mitt tema” kommer ha “Twenty Thirteen” som huvudtema sĂ„ döper vi mappen till twentythirteen-child.

Stilmallen

I mappen skapar vi en ny fil vid namn style.css med följande innehĂ„ll:

/*
 Theme Name:   Mitt tema
 Template:     twentythirteen
*/

/* Importera stilmallen frÄn huvudtemat */
@import url('../twentythirteen/style.css');

Observera att Template: twentythirteen Àr det som anger att det hĂ€r Ă€r ett barntema till “Twenty Thirteen”, vars mapp heter twentythirteen.

Mer Àn sÄ behövs inte. Om du sparar filen, loggar in i din admin-panel och gÄr till Utseende > Teman sÄ kommer du se ditt nya barntema dÀr och kan aktivera det. Eftersom du hittills inte har gjort nÄgra Àndringar sÄ kommer du dock inte sÄ nÄgon skillnad mellan barntemat och huvudtemat.

Raden med @import sĂ€ger Ă„t webblĂ€saren att hĂ€mta en annan stilmall, i det hĂ€r fallet rör det sig om originalstilmallen frĂ„n huvudtemat. Alla Ă€ndringar du gör i stilmallen mĂ„ste ske efter importen, annars kommer de inte gĂ€lla.

För att hitta det du vill Àndra i stilmallar rekommenderar jag utvecklingsverktyget som finns inbyggt i din webblÀsare.

PHP-filer

SĂ€g att du vill Ă€ndra nĂ„gon HTML-kod i sidhuvudet pĂ„ din webbplats. DĂ„ kopierar du först twentythirteen/header.php till twentythirteen-child/header.php, dĂ€refter gör du dina Ă€ndringar i den nya kopian. Som jag förklarade tidigare sĂ„ kommer WordPress nu att hĂ€mta header.php frĂ„n ditt barntema och resten av alla PHP-filer frĂ„n huvudtemat.

Slutord

Det Àr faktiskt inte svÄrare Àn sÄ att skapa ett barntema. Om du vill fördjupa dig mer sÄ finns resten vÀl dokumenterat.

Vad föredrar du att jobba med — barnteman eller vanliga teman?