Skapa ett barntema

Modul 5: Teman och tillägg · Lästid: 9 minuter

Lärandemål: Efter den här lektionen kan du skapa ett barntema (child theme) och vet du när du behöver ett och när inte.

Nyckelbegrepp: barntema (child theme), föräldratema, Template: i style.css, functions.php, wp_enqueue_style, skriva över mall, theme.json i ett barntema, Create Block Theme

Problemet som ett barntema löser

Säg att du vill ändra rubriken i ditt klassiska tema lite, och att du därför redigerar header.php i temamappen. Det fungerar. Tre veckor senare kommer det en uppdatering av temat, som du låter installeras automatiskt (som det bör, lektion 7.2). Uppdateringen ersätter alla temats filer, och din ändring är borta.

Ett barntema (child theme) är ett litet tema som säger: "använd allt från det där andra temat (föräldratemat), förutom det jag själv har." Du lägger dina anpassningar i barntemat. Föräldratemat fortsätter du att uppdatera som vanligt, och dina anpassningar finns kvar.

När ja och när nej

Du behöver ett barntema om du vill anpassa eller komplettera filer i ett tema:

• du vill ha en mall (vid ett klassiskt tema en PHP-fil, vid ett blocktema en HTML-mall) annorlunda;
• du vill ha egen CSS som är för stor för CSS-rutan;
• du vill ha egen PHP-kod som hör ihop med utformningen (ett extra bildformat, en extra menyplats).

Du behöver inget barntema om:

• du anpassar ett blocktema i Webbplatsredigeraren: de ändringarna finns i databasen och överlever en uppdatering (lektion 5.1);
• du bara lägger till lite CSS via Extra CSS (i Anpassaren vid ett klassiskt tema, eller under Stilar i Webbplatsredigeraren);
• du vill lägga till en funktion som inte har med utformningen att göra (ett formulär, en koppling). Den hör hemma i ett tillägg, så att den överlever ett temabyte.

Ett barntema för ett klassiskt tema

Ett barntema är en mapp i wp-content/themes/ med minst en fil: style.css. Säg att ditt föräldratema finns i wp-content/themes/hoofdthema/. Skapa då en mapp wp-content/themes/hoofdthema-child/ med denna style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Egna anpassningar för example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

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

Den viktigaste raden är Template:. Där anger du namnet på mappen för föräldratemat (inte namnet som visas i administrationen). Stämmer det inte exakt (stora bokstäver, bindestreck), meddelar WordPress under Utseende > Teman att föräldratemat saknas.

Dessutom skapar du en functions.php för att ladda stilmallarna. Det korrekta sättet:

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

Om föräldratemat laddar sin egen stilmall själv varierar beroende på tema. Kolla i dokumentationen för ditt föräldratema; vissa ber dig att i barntemat också ladda föräldrans stilmall med get_template_directory_uri() . '/style.css'. Fungerar din webbplats utan formatering efter aktiveringen, laddas inte föräldrans stilmall.

Vill du anpassa en mall, kopiera då den enskilda filen (till exempel header.php) från föräldern till ditt barntema och ändra kopian. WordPress tittar först i barntemat, sedan i föräldratemat. Kopiera inte alla filer: då får du inte längre föräldratemats förbättringar.

functions.php i barntemat ersätter inte föräldratemats, utan laddas före den. Båda körs.

Ett barntema för ett blocktema

Vid ett blocktema fungerar det på samma sätt, med blockfiler:

• style.css med samma rubrik och Template:;
• eventuellt en egen theme.json: den slås samman med föräldrans, så du anger bara det du vill ändra (till exempel färgpaletten);
• eventuellt mallar i templates/ och parts/ som ersätter föräldrans.

En functions.php behövs ofta inte vid ett blocktema, eftersom WordPress laddar stilarna från theme.json själv.

Det finns ett officiellt tillägg, Create Block Theme, som skapar ett barntema åt dig utifrån Webbplatsredigeraren, inklusive dina anpassningar i databasen. Praktiskt om du har anpassat ett blocktema och vill spara de ändringarna i filer (till exempel för att ta med dem till en annan webbplats).

Så lägger du upp det på din webbplats

1. Skapa mappen och filerna på din egen dator och kontrollera mappnamnet på föräldratemat.
2. Ladda upp mappen till wp-content/themes/ med Filhanteraren eller via SFTP. Eller packa mappen som en zip och ladda upp den under Utseende > Teman > Nytt tema > Ladda upp tema.
3. Gå till Utseende > Teman. Ditt barntema finns med i listan. Aktivera det.
4. Kontrollera din webbplats: menyer och widgetar kan behöva kopplas om vid byte till ett barntema; inställningar från Anpassaren gäller per tema, så dem ställer du in på nytt eller exporterar med ett tillägg.
5. Föräldratemat måste finnas kvar. Ta inte bort det; barntemat fungerar inte utan det.

Gör detta helst först i en testmiljö (staging) (lektion 8.3), eftersom ett temabyte på en livewebbplats med mycket trafik kan bli lite stökigt en stund.

Sammanfattning

• Ett barntema sparar dina ändringar i temafiler utanför föräldratemat, så att uppdateringar inte skriver över dem.
• Du behöver det inte för ändringar i Webbplatsredigeraren eller lite Extra CSS; funktioner hör hemma i ett tillägg.
• Minimum: en mapp med style.css där Template: exakt anger föräldratemats mappnamn.
• Kopiera bara de mallar du faktiskt ändrar; barntemats functions.php läggs till vid sidan av föräldratemats.
• Föräldratemat finns kvar och fortsätter att uppdateras.

Quiz

Uppgift

Uppgift A5.2: Kontrollera ditt barntema. Skapa ett barntema för ditt tema, på din testwebbplats eller i en testmiljö (staging) (lektion 8.3), och aktivera det. Fyll i webbplatsens adress och mappnamnet på barntemat. Programmet hämtar wp-content/themes/<mapp>/style.css och kontrollerar: filen finns, det står en Theme Name: och en Template: i den, föräldrans style.css i den mappen finns också, och startsidan pekar på barntemat (det är alltså aktivt).

Uppgift D5.2: Vad har du ändrat och varför? Anteckna vilka filer som finns i ditt barntema, vad du har ändrat i varje fil och varför det inte gick att göra i Webbplatsredigeraren, i Extra CSS eller i ett tillägg. Bocka av att föräldratemat fortfarande är installerat och har automatiska uppdateringar.

Läs mer

Dessa artiklar beskriver stegen i WebOkés paneler; i andra paneler fungerar det på liknande sätt.

• DirectAdmin-guide 11.1: Öppna Filhanteraren: mapparna i ditt paket
• DirectAdmin-guide 11.2: Ladda upp och ladda ner filer
• DirectAdmin-guide 11.7: Ansluta med FileZilla (FTP, FTPS och SFTP)
• Child themes (developer.wordpress.org, engelska): https://developer.wordpress.org/themes/advanced-topics/child-themes/