Hvorfor skal jeg bruge et child theme?

Hvis du vil lave kodeændringer i dit WordPress-tema, skal du lave et child theme, eller “undertema”. Årsagen hertil er, at hvis du laver ændringer direkte i et kendt tema, og forfatteren til temaet laver opdateringer til det, så vil det overskrive dine ændringer – spildt arbejde. Vi gider ikke spildt arbejde, så vi laver et child theme.

Du kan finde lange, forklarende opskrifter til dette på nettet, men herunder giver jeg en helt kort opskrift.

 

Ingredienser

• Tema-mappe indeholdende:
  • style.css
  • functions.php
  • screenshot.png
• Kopier tema-indstillingerne fra Tilpasser

Lad os komme igang!

 

Ny tema-mappe

Lav en ny mappe i /wp-content/themes/ med det samme navn, som det tema, du bruger i dag, postfixed med “-child”. Bruger du fx twentytwelve-temaet, skal din mappe hedde twentytwelve-child. 

 

style.css

Der skal oprettes en stylesheet-fil kaldet style.css. WordPress læser denne fil og den indeholder bl.a. navnet på dit tema og, i dette tilfælde, mest vigtigt, navnet på det tema, som dette er et child af.

Opret en tekstfil kaldet style.css i din nye mappe. Indholdet af tekstfilen skal som minimum indeholde følgende:

/*
Theme Name: Twenty Twelwe Child
Template: twentytwelve
*/

• Theme Name må du selv bestemme, men “<Parent Theme> Child” er igen en god navnekonvention.
• Template skal matche mappenavnet på dit parent theme. Dette er linket til hovedtemaet og det, der gør dit tema til et child theme.

Jeg vil dog anbefale at bruge flere informationer her. Mit child theme’s style.css ser således ud:

/*
Theme Name: Twenty Twelwe Child
Theme URI: https://svendk.dk
description: Twenty Twelwe Child Theme. Screenshot copyright: Team behind WordPress
Author: Svend Koustrup
Author URI: https://koustrupit.dk
Template: twentytwelve
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-twelwe-child
*/

 

functions.php

Herefter skal vi have oprettet functions.php. I denne fil ligger de kodefunktioner, som WordPress kan benytte sig af.

Opret en ny tekstfil med navnet functions.php i temamappen med følgende indhold:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Tidligere benyttede man sig af @import url('../twentytwelve/style.css'); men dette får browseren til at hente to filer, style.css og hovedtemaets style.css, hvilket kan forringe loadtiden. Med koden ovenfor sørger serveren for at kombinere de to filer til én, hvorved siden loader hurtigere.

 

screenshot.png

Nu mangler vi blot et skærmbillede, der bliver vist i WordPress Admin under Temaer. Uden denne fil bliver der ikke vist et billede, og det er da synd. Jeg kopierer blot screenshot.png fra hovedtemaet ind i undertemaets mappe. Jeg er usikker på copyright-reglerne her, men eftersom jeg skriver det i undertemaets description-felt, så går det nok. (Undernote: Description-feltet kan ikke indeholde linjeskift.)

Du kan også lave dit eget billede, hvis du lyster. WordPress -Codex anbefaler 1200 x 900 pixels (b x h).

Nu har vi tre filer i vores undertema-mappe:

 

Tilpasser-indstillinger

Hvis du laver et undertema til et tema, der allerede er sat op og tilpasset via WordPress Tilpasseren, så vil indstillinger såsom header-billede ikke blive taget fra hovedtemaet. Hvert tema, også undertemaer, har sine egne tilpassede indstillinger.

Den nemmeste måde at kopiere disse ting, er at bruge et plugin. Jeg bruger Customizer Export/Import lavet af The Beaver Builder Team. Blot hent det via WordPress Admin under Plugins. Du kan blot slette pluginet igen bagefter.

Når du har installeret det, ligger det under Udseende, Tilpas og herefter under Eksport/Import.

Sørg for, at du har dit hovedtema aktivt under Udseende, Temaer og lav en eksport. Skift til dit nye undertema og så lav en import. Sørg for at vælge “download og hent billeder”-checkboksen. Voila, alle indstillinger fungerer nu på dit undertema.

 

Nu kan du nyde dit værk ved at gå til din hjemmeside, hvor der forhåbentligt ikke skulle være sket noget overhovedet. Nu kan du begynde at lave ændringer i fx style.css eller functions.php for at lave de ændringer, du kom hertil for at lave i første omgang.

Jeg håber, at du synes denne lille guide har været din tid værd. Du er velkommen til at skyde mig en kommentar herunder.