Lage et undertema (child theme)

Modul 5: Temaer og utvidelser · Lesetid: 9 minutter

Læringsmål: Etter denne leksjonen kan du lage et undertema (child theme), og du vet når du trenger ett og når ikke.

Nøkkelbegreper: undertema (child theme), foreldretema, Template: i style.css, functions.php, wp_enqueue_style, overskrive mal, theme.json i et undertema, Create Block Theme

Problemet et undertema løser

Si at du vil ha toppen av det klassiske temaet ditt litt annerledes, og du tilpasser header.php i temamappen for det. Det fungerer. Tre uker senere kommer det en oppdatering av temaet, som du lar installere automatisk (slik det bør, leksjon 7.2). Oppdateringen erstatter alle filene i temaet, og tilpasningen din er borte.

Et undertema (child theme) er et lite tema som sier: «bruk alt fra det andre temaet (foreldretemaet), bortsett fra det jeg selv har.» Du legger tilpasningene dine i undertemaet. Foreldretemaet fortsetter du bare å oppdatere, og tilpasningene dine blir stående.

Når trenger du det, og når ikke

Du trenger et undertema hvis du vil tilpasse eller supplere filer i et tema:

• du vil ha en mal annerledes (hos et klassisk tema en PHP-fil, hos et blokktema en HTML-mal);
• du vil ha egen CSS som er for stor for CSS-boksen;
• du vil ha egen PHP-kode som hører til utformingen (et ekstra bildeformat, en ekstra menyplassering).

Du trenger ikke et undertema hvis:

• du tilpasser et blokktema i Nettstedsredigereren: de tilpasningene ligger i databasen og overlever en oppdatering (leksjon 5.1);
• du bare legger til litt CSS via Ekstra CSS (i Tematilpasseren hos et klassisk tema, eller under Stiler i Nettstedsredigereren);
• du vil legge til en funksjon som ikke har noe med utformingen å gjøre (et skjema, en kobling). Den hører hjemme i en utvidelse (plugin), slik at den overlever et temabytte.

Et undertema for et klassisk tema

Et undertema er en mappe i wp-content/themes/ med minst én fil: style.css. Si at foreldretemaet ditt ligger i wp-content/themes/hoofdthema/. Lag da en mappe wp-content/themes/hoofdthema-child/ med denne style.css:

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

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

Den viktigste linjen er Template:. Der skal det stå navnet på mappen til foreldretemaet (ikke navnet du ser i administrasjonen). Stemmer det ikke nøyaktig (store bokstaver, bindestreker), melder WordPress under Utseende > Temaer at foreldretemaet mangler.

I tillegg lager du en functions.php for å laste stilarkene. Den ryddige måten:

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

Om foreldretemaet laster sitt eget stilark selv, varierer fra tema til tema. Se i dokumentasjonen til foreldretemaet ditt; noen ber deg også laste stilarket til foreldretemaet i undertemaet med get_template_directory_uri() . '/style.css'. Fungerer nettstedet ditt uten formatering etter aktivering, blir ikke stilarket til foreldretemaet lastet.

Vil du tilpasse en mal, kopier da den ene filen (for eksempel header.php) fra foreldretemaet til undertemaet ditt og tilpass kopien. WordPress ser først i undertemaet, deretter i foreldretemaet. Ikke kopier alle filene: da får du ikke lenger forbedringene fra foreldretemaet.

functions.php i undertemaet erstatter ikke den i foreldretemaet, men lastes før den. Begge kjøres.

Et undertema for et blokktema

Hos et blokktema fungerer det på samme måte, med blokkfiler:

• style.css med samme topptekst og Template:;
• theme.json: den slås sammen med den fra foreldretemaet, så du setter bare inn det du vil endre (for eksempel fargepaletten);
• templates/ og parts/ som erstatter dem fra foreldretemaet.

En functions.php er hos et blokktema ofte ikke nødvendig, fordi WordPress laster stilene fra theme.json selv.

Det finnes en offisiell utvidelse, Create Block Theme, som lager et undertema for deg ut fra Nettstedsredigereren, inkludert tilpasningene dine i databasen. Praktisk hvis du har tilpasset et blokktema og vil forankre de tilpasningene i filer (for eksempel for å ta dem med til et annet nettsted).

Slik setter du det opp på nettstedet ditt

1. Lag mappen og filene på din egen datamaskin og kontroller mappen til foreldretemaet.
2. Last opp mappen til wp-content/themes/ med File Manager eller via SFTP. Eller pakk mappen som en zip-fil og last den opp under Utseende > Temaer > Legg til > Last opp tema.
3. Gå til Utseende > Temaer. Undertemaet ditt står der. Aktiver det.
4. Kontroller nettstedet ditt: menyer og widgeter kan trenge å kobles på nytt når du bytter til et undertema; innstillinger fra Tematilpasseren gjelder per tema, så dem setter du opp på nytt eller eksporterer med en utvidelse.
5. Foreldretemaet må bli stående. Ikke slett det; undertemaet fungerer ikke uten.

Gjør dette helst først i et testmiljø (staging) (leksjon 8.3), for å bytte tema på et travelt livenettsted kan bli litt rotete en stund.

Oppsummering

• Et undertema bevarer tilpasningene dine i temafiler utenfor foreldretemaet, slik at oppdateringer ikke overskriver dem.
• Du trenger det ikke for tilpasninger i Nettstedsredigereren eller litt Ekstra CSS; funksjoner hører hjemme i en utvidelse.
• Minimum: en mappe med style.css der Template: nøyaktig angir mappen til foreldretemaet.
• Kopier bare de malene du faktisk tilpasser; functions.php i undertemaet kommer ved siden av den i foreldretemaet.
• Foreldretemaet blir stående og fortsetter å bli oppdatert.

Quiz

Oppgave

Oppgave A5.2: Kontroller undertemaet ditt (child theme). Lag et undertema for temaet ditt, på testnettstedet ditt eller i testmiljø (staging) (leksjon 8.3), og aktiver det. Fyll inn adressen til nettstedet og mappenavnet til undertemaet. Programmet henter wp-content/themes/<mappe>/style.css og kontrollerer: filen finnes, det står en Theme Name: og en Template: i den, style.css til foreldretemaet i den mappen finnes også, og forsiden viser til undertemaet (det er altså aktivt).

Oppgave D5.2: Hva har du endret, og hvorfor? Noter hvilke filer som ligger i undertemaet ditt, hva du har tilpasset i hver fil og hvorfor det ikke kunne gjøres i Nettstedsredigereren, i Ekstra CSS eller i en utvidelse. Kryss av at foreldretemaet fortsatt er installert og har automatiske oppdateringer.

Les mer

Disse artiklene beskriver trinnene i kontrollpanelene til WebOké; i andre kontrollpaneler fungerer det på lignende måte.

• DirectAdmin-veiledning 11.1: Åpne File Manager: mappene i pakken din
• DirectAdmin-veiledning 11.2: Laste opp og laste ned filer
• DirectAdmin-veiledning 11.7: Koble til med FileZilla (FTP, FTPS og SFTP)
• Child themes (developer.wordpress.org, engelsk): https://developer.wordpress.org/themes/advanced-topics/child-themes/