Sådan laver du et child theme (undertema)

Modul 5: Temaer og plugins · Læsetid: 9 minutter

Læringsmål: Efter denne lektion kan du lave et child theme, og du ved hvornår du har brug for et, og hvornår ikke.

Nøglebegreber: child theme, forældretema, Template: i style.css, functions.php, wp_enqueue_style, overskrive skabelon, theme.json i et child theme, Create Block Theme

Det problem et child theme løser

Lad os sige: du vil have en lidt anden header på dit klassiske tema, og du tilpasser derfor header.php i tema-mappen. Det virker. Tre uger senere kommer der en opdatering af temaet, som du lader installere automatisk (som det bør være, lektion 7.2). Opdateringen erstatter alle temaets filer, og din tilpasning er væk.

Et child theme (undertema) er et lille tema der siger: "brug alt fra det andet tema (forældretemaet), undtagen det jeg selv har." Du lægger dine tilpasninger i child theme'et. Forældretemaet bliver du bare ved med at opdatere, og dine tilpasninger forbliver intakte.

Hvornår ja, og hvornår nej

Du har brug for et child theme, hvis du vil tilpasse eller supplere filer fra et tema:

• du vil ændre en skabelon (ved et klassisk tema en PHP-fil, ved et bloktema en HTML-skabelon);
• du vil have din egen CSS, som er for stor til CSS-feltet;
• du vil have din egen PHP-kode, der hører til designet (et ekstra billedformat, en ekstra menuplacering).

Du har ikke brug for et child theme, hvis:

• du tilpasser et bloktema i Webstedseditoren: de tilpasninger ligger i databasen og overlever en opdatering (lektion 5.1);
• du kun tilføjer lidt CSS via Ekstra CSS (i Tilpasseren ved et klassisk tema, eller under Formgivning i Webstedseditoren);
• du vil tilføje en funktion, der ikke har noget med design at gøre (en formular, en integration). Den hører hjemme i en plugin, så den overlever et temaskift.

Et child theme til et klassisk tema

Et child theme er en mappe i wp-content/themes/ med mindst én fil: style.css. Lad os sige dit forældretema ligger i wp-content/themes/hoofdthema/. Lav så en mappe wp-content/themes/hoofdthema-child/ med denne style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Egne tilpasninger til example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Din egen CSS kommer herunder. */
.site-header { border-bottom: 3px solid #e8a33d; }

Den vigtigste linje er Template:. Der skal stå navnet på mappen til forældretemaet (ikke det navn du ser i administrationen). Passer det ikke præcist (store/små bogstaver, bindestreger), melder WordPress under Udseende > Temaer, at forældretemaet mangler.

Derudover laver du en functions.php til at indlæse stylesheets. Den pæne måde:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Om forældretemaet selv indlæser sit eget stylesheet, varierer fra tema til tema. Se i dokumentationen til dit forældretema; nogle beder dig også indlæse forældrens stylesheet i child'et med get_template_directory_uri() . '/style.css'. Virker dit websted uden formatering efter aktivering, bliver forældrens stylesheet ikke indlæst.

Vil du tilpasse en skabelon, så kopiér den ene fil (for eksempel header.php) fra forældren til dit child theme og tilpas kopien. WordPress kigger først i child'et, derefter i forældren. Kopiér ikke alle filer: så får du ikke længere forældrens forbedringer.

functions.php i child'et erstatter ikke forældrens, men bliver indlæst før den. Begge bliver kørt.

Et child theme til et bloktema

Ved et bloktema fungerer det på samme måde, med blokfiler:

• style.css med samme toptekst og Template:;
• theme.json: den bliver sammenlagt med forældrens, så du sætter kun det du vil ændre (for eksempel farvepaletten);
• templates/ og parts/, der erstatter forældrens.

En functions.php er ved et bloktema ofte ikke nødvendig, fordi WordPress selv indlæser stilene fra theme.json.

Der findes en officiel plugin, Create Block Theme, som laver et child theme for dig ud fra Webstedseditoren, inklusive dine tilpasninger i databasen. Praktisk, hvis du har tilpasset et bloktema og vil have de tilpasninger skrevet ned i filer (for eksempel for at tage dem med til et andet websted).

Sådan sætter du det op på dit websted

1. Lav mappen og filerne på din egen computer, og kontrollér mappen til forældretemaet.
2. Upload mappen til wp-content/themes/ med Filhåndtering eller via SFTP. Eller pak mappen som zip og upload den under Udseende > Temaer > Tilføj > Upload tema.
3. Gå til Udseende > Temaer. Dit child theme står der. Aktivér det.
4. Kontrollér dit websted: menuer og widgets kan have brug for at blive koblet sammen igen ved skift til et child theme; indstillinger fra Tilpasseren gælder pr. tema, så dem sætter du op igen, eller du eksporterer dem med en plugin.
5. Forældretemaet skal blive stående. Slet det ikke; child theme'et virker ikke uden det.

Gør helst dette først i et testmiljø (staging) (lektion 8.3), for et temaskift på et travlt live-websted kan godt give lidt rod et øjeblik.

Opsummering

• Et child theme gemmer dine tilpasninger af temafiler uden for forældretemaet, så opdateringer ikke overskriver dem.
• Du har ikke brug for det til tilpasninger i Webstedseditoren eller lidt Ekstra CSS; funktioner hører hjemme i en plugin.
• Minimum: en mappe med style.css, hvor Template: peger præcist på forældretemaets mappe.
• Kopiér kun de skabeloner, du reelt tilpasser; functions.php i child'et kommer ved siden af forældrens.
• Forældretemaet forbliver installeret og bliver fortsat opdateret.

Quiz

Opgave

Opgave A5.2: Kontrollér dit child theme. Lav et child theme til dit tema, på dit testwebsted eller i et testmiljø (staging) (lektion 8.3), og aktivér det. Indtast webstedets adresse og mappenavnet på child theme'et. Programmet henter wp-content/themes/<mappe>/style.css og kontrollerer: filen findes, der står en Theme Name: og en Template: i den, style.css fra forældretemaet findes også i den mappe, og forsiden peger på child theme'et (det er altså aktivt).

Opgave D5.2: Hvad har du tilpasset, og hvorfor? Notér hvilke filer der ligger i dit child theme, hvad du har tilpasset i hver fil, og hvorfor det ikke kunne gøres i Webstedseditoren, i Ekstra CSS eller i en plugin. Kryds af, at forældretemaet stadig er installeret og har automatiske opdateringer.

Læs mere

Disse artikler beskriver trinene i WebOkés kontrolpaneler; i andre kontrolpaneler fungerer det på lignende vis.

• DirectAdmin vejledning 11.1: Åbn Filhåndtering: mapperne i din pakke
• DirectAdmin vejledning 11.2: Upload og download filer
• DirectAdmin vejledning 11.7: Opret forbindelse med FileZilla (FTP, FTPS og SFTP)
• Child themes (developer.wordpress.org, engelsk): https://developer.wordpress.org/themes/advanced-topics/child-themes/