Lav et WordPress Child Theme – Hvordan og hvorfor

Hvad er et WordPress Child Theme, og hvorfor skal man lave det?

Hvis man har lyst til at lave ændringer i sit WordPress tema, kan det gøres ved at rette direkte i .PHP og .CSS filerne.

Desværre vil disse ændringer blive overskrevet, hvis du på et tidspunkt installerer en opdatering til dit tema.

Løsningen er at lave et Child Theme.

Hvorfor og hvordan laver du et WordPress Child Theme

Et Child Theme er som udgangspunkt fuldstændig magen til original temaet, men det er muligt at lave ændringer i temaet uden at rette i originalfilerne.

Derved sikres det, at originalen ikke overskrives, ved en eventuel opdatering af temaet.

Derudover har et Child Theme den fordel, at man lettere kan overskue og holde styr på sine tilretninger.

Skulle noget gå galt efter en tilføjelse i dit Child Theme, kan du blot slette den seneste tilføjelse, og da der ikke er ændret i original filen, vil alt være ok igen.

I eksemplet her opretter vi et Child Theme til TwentyTen temaet, men principperne er de samme til alle temaer.

Hvad kræver det at lave et Child Theme

Filerne skal rettes i en egnet editor. Jeg bruger Notepad++ da den er gratis, og rimelig enkel at arbejde med.

Derudover vil en smule grundlæggende forståelse for .PHP og .CSS være at foretrække. Det er dog ikke sværere end, at de fleste sagtens kan være med.

Du skal have adgang til dine WordPress filer, der ligger hos dit webhotel. Det er lidt forskelligt hvordan det foregår, alt efter hvilket webhotel du benytter. Jeg bruger UnoEuro, og her er adgang via FTP program eller UnoEuro’s kontrolpanel. Spørg dit webhotel, hvis du er i tvivl.

Hvordan gør man

Når du har adgang til WordPress filerne, skal du finde din themes mappe der ligger i mappen wp-content.

I themes mappen ligger de temaer, du har installeret, og her skal du oprette en mappe til Child Theme.

I eksemplet her kalder vi mappen twentyten-child, men det er helt op til dig, hvad du vil kalde mappen.

Lav et WordPress Child Theme - Hvordan og hvorfor

I denne mappe skal du oprette en ny fil og kalde den style.css. Filen skal i første omgang indeholde disse linjer. Du kan evt. lave en kopi af style.css filen fra original temaet, slette alt andet end det der er vist her, og derefter tilrette oplysningerne.

Du kan nøjes med at oprette linjerne Theme Name og Template, men det  giver god mening at oprette dem alle.

Theme Name: Navn på child mappen
Theme URI: Din Blog side (valgfri)
Description: Beskrivelse (valgfri)
Author: Dit navn (valgfri)
Author URI: Din hjemmeside (valgfri)
Template: Navn på original temaet
Version: Versionsnr. (valgfri)
Import url: Importerer originale style.css. Denne linje skal med, da den henter den originale style.css fil.

Et Child Theme skal som minimum indeholde style.css. Det er muligt at tilføje andre filer, men mere om det senere.

Nu kan du gå ind i Temaer i kontrolpanelet i WordPress, og vælge dit nye tema, som vi kaldte twentyten-child.

Du vil se at oplysningerne du indtastede i style.css fremgår af temaet.

Hvis du vil have vist et billede af dit Child Theme, kan du lave en .png fil med størrelsen 300×225 pixels, og uploade den til Child mappen.

Da der endnu ikke lavet nogen ændringer i style.css filen, tages alle indstillinger fra det originale tema, og du vil ikke kunne se nogen forskel på din side.

Alt hvad der tastes i dit Child Theme, overstyrer det originale tema.

Når du har aktiveret dit nye tema kan du rette i style.css filen i WordPress editoren i kontrolpanelet under Udseende/Editor. Du kan også installere Notepad++, som tidligere nævnt, og bruge den til at lave rettelserne.

Eksempler til inspiration

(søg mere på nettet. Der findes tonsvis af sider om emnet)

Style.css – Hvis du kigger den originale style.css igennem, vil du få mange flere idéer til, hvordan du kan style din blog.

Ændring af baggrundsfarve:
body{
background: #99CCFF;
}

Ændring af side titel (størrelse, skriftfarve, fed og understreget)
#site-title a {
font-size: 72px;
color: #FF0000;
font-weight: bold;
text-decoration: underline;
}

Ændrer farve på links og besøgte links
a:link {
color: #FF0000;
}

a:visited {
color: #FFFF00;
}

Ændrer baggrundsfarve på menuen
#access {
background: #A4A4A4;
}

Det er muligt at rette i .PHP filerne også.

Vil du f.eks. ændre størrelsen på header billedet i TwentyTen kan du let gøre det.

I dette eksempel er størrelsen ændret til 800×100 pixels, men du kan selvfølgelig selv vælge en anden størrelse.

Opret en ny fil i din Child Theme mappe med disse kodelinjer, og kald den for functions.php.

Lav et WordPress Child Theme - Hvordan og hvorfor


Header billedet har nu ændret størrelse.

God fornøjelse med at style din blog. Smid gerne et link til bloggen, så vi kan se resultatet.

Lær mere om WordPress

Hvis du vil lære mere om WordPress, kan jeg anbefale at læse WordPress manualen (annoncelink), der er en god guide til de mange funktioner.

Hvis du vil lære mere om WordPress, kan jeg anbefale at læse WordPress manualen
WordPress manualen

9 kommentarer til “Lav et WordPress Child Theme – Hvordan og hvorfor”

  1. Hej,
    Hvis man helst vil undgå at rode med child theme osv., kan man blot undlade at opdatere sit tema? Eller giver det nogle andre ulemper senere?
    Pfh tak for svar.

    • Hej Camilla
      Jo, du kan godt undlade at opdatere, men kommer du til at gøre det alligevel, så er du på den. Der findes en anden løsning, som du måske skal overveje. Du kan ændre dit tilrettede standard tema, og gøre det til dit “eget” tema. Derved undgår du opdateringer i fremtiden.
      Kopier hele din tema mappe der ligger i /wp-content/themes og giv den et nyt navn f.eks. Camillas-Tema. I den nye mappe åbner du style.css og retter navnet (Theme Name: Camillas-Tema). Dernæst går du ind i kontrolpanel under udseende og aktiverer Camillas-Tema. Du har nu dit eget tema som aldrig bliver opdateret.
      Håber du kan bruge svaret.
      Venlig hilsen Stig

      • Hej Stig
        Hvis jeg laver mit “eget” tema, hvad så i fremtiden, vil der så blive et tidspunkt, hvor mit eget tema er så forældet at det ikke kan bruges mere (lidt lige som problemer med opdateringer på gamle ipads/iphones)? Hvis ja, er childtheme så en bedre løsning?
        Vh Jonna

        • Hej Jonna

          Hvis du laver dit eget tema, er du selv herre over opdateringer og rettelser. Et childtheme bruges hvis du vil lave tilretninger til et tema, du har downloadet på nettet. Hvis du ændrer direkte i temaets kode, vil ændringerne gå tabt, når producenten af temaet udgiver en opdatering. Det undgår ved at lave ændringerne i et childtheme.

          Hilsen
          Stig – Helpdesken.dk

  2. Pingback: Child themes til Wordpress og hvorfor det er best practise
  3. Vil gerne lære noget mere om “child theme” fordi det indeholder de unikke brugermuligheder jeg søger.
    Har du / I nogle gode links vil jeg være meget taknemmelig.
    Er en ældre here med en god brugerflade og ikke meget mere.

    Mvh.
    A. Eriksen.

  4. Jeg vil ikke rode med Child Theme, og har derfor kopieret hele mit tema og givet det et nyt navn. I den nye mappe har jeg åbnet style.css og rettet navnet der også. -Men SKAL jeg også tilføje: Import url: Importerer originale style.css. ?
    (Du skriver i tråden, at denne linje skal med, da den henter den originale style.css fil.)

Der er lukket for kommentarer.