Att använda barntema (childtheme) i Divi

17 mars, 2023 | Tips & tricks

Detta inlägg publicerades i original på min hemsida https://joolo.se och är här återigen uppdaterat för divi.se

Ett WordPress child theme (barntema på svenska) är vad man kan kalla ett undertema av ett annat WordPress-tema. Det använder helt enkelt stommen av det andra temat, men möjliggör mer personlig anpassning, som dessutom inte försvinner när huvudtemat uppdateras. Med ett barntema kan du skapa anpassade filer för att inkludera kod, egna formatmallar osv

Ofta vill man anpassa färg och form och att göra det i ett ordinarie tema ökar risken att den sk stilmallen skrivs över och du får börja om från början. Med ett barntema skapar du en egen stilmall som ärvs in i temat och ”slår ut” de delar du anpassar i ordinarie temas stillmall, och den påverkas inte heller av framtida uppdateringar.

Minimum för att skapa ett barntema är stilmallen, men man brukar även inkludera functions.php för att ärva in stilmallen korrekt. Så följande filer rekommenderas att du använder för att komma igång. Skapa upp dem i din favoriteditor och lägg dem i en mapp med samma namn som ditt önskade temanamn, vi kan kalla mappen ”Divi barntema”:

style.css
functions.php

Vill du ha hjälp med att skapa upp filerna till ditt barntema kan du testa denna gratistjänst från Elegant Marketplace som mejlar filerna till din e-post (helt gratis!) och hoppa direkt till Installera & Aktivera

För att få ditt barntema att hämta stöd från ordinarie tema behöver du inleda filen style.css med åtminstone följande rader där du givetvis ersätter tema-namn med ditt eget barntemanamn samt template med det huvudtema du vill använda, i detta fall Divi från Elegant Themes, (länken är en sk affiliatelänk som ger mig en viss ersättning om du köper någon av deras licenser)

/*
Theme Name: Divi barntema
Template: Divi
*/

Du kan ha med även ditt namn och din webbplats för support. Ett tips är ocså att inkludera version. Versionsnummer hjälper diverse cachetillägg att få information om att din CSS är uppdaterad.
Då lägger du bara in dessa rader under Template: Divi

Author: Henrik
Author URI: https://divi.se
Version: 1.0.0

Om du vill ha mer avancerad information om barnteman rekommenderar jag dig att läsa vidare på WordPress hemsida för en fullständig referens.

När style.css är klar är det bara att börja fylla den med den anpassade CSS du vill lägga in för din hemsida. jag brukar t ex hantera typsnitt och fontstorlekar här för att enklare ha koll på dem och kunna hantera olika skärmstorlekar. Så här kan t ex en anpassning se ut (ibland kan man behöva addera !important efter vissa klasser för att ”tvinga” dem att slå igenom).

/* Anpassning typsnitt och fontstorlekar */

/* fontstorlek att utgå ifrån i body */
body {
font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
font-size: 18px;
line-height: 1.4em;
}

/* media query för datorer  */
@media all and (min-width: 981px) {

h1 {
font-size: 3em !important; // Fontstorlek
color: #333!important; // Textfärg
font-family: 'Source Sans Pro',Helvetica, Arial, Lucida, sans-serif; //Typsnitt
line-height: 1.2em !important; //Linjehöjd
text-transform: uppercase; // VERSALER
font-weight: bold; // Fet stil
}

h2 {
font-size: 3em !important; 
font-family: 'Source Sans Pro', Helvetica, Arial, Lucida, sans-serif; 
line-height: 1.2em !important; 
}

h3 {
font-size: 1.5em !important;
line-height: 1.2em !important;
}

/* media query för mobiler */
@media all and (max-width: 980px) {
body { font-size: 17px; }

h1 {
font-size: 2em !important;
color: #333!important; 
font-family: 'Source Sans Pro',Helvetica, Arial, Lucida, sans-serif; line-height: 1.2em !important; 
text-transform: uppercase;
font-weight: bold;
}

h2 {
font-size: 1.5em !important; 
font-family: 'Source Sans Pro', Helvetica, Arial, Lucida, sans-serif; 
line-height: 1.2em !important; 
}

h3 {
font-size: 1.5em !important; 
line-height: 1.2em !important;
}
}

Nu är det dags att ge dig på steg 2. Skapa en tom fil som du döper

functions.php

och addera följande kod:

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

Denna kod gör att ditt barntema ”köas in”  korrekt. Spara filerna för nu är det dags att installera ditt barntema.

Installera & aktivera barntemat

För att installera barntemat kan du antingen ladda upp det via FTP eller ladda upp direkt i WP-admin
Använder du FTP så kopiera din mapp till samma ställe där du installerade Divi-temat, wp-content/themes. Se till så du har huvudtemat (Divi) på plats så ditt tema kan ärva egenskaper från det.

För att installera i wp-admin. Zippa ihop mappen och gå till Utseende > Teman och klicka på ”Lägg till nytt”. I nästa steg kan du välja ”Ladda upp tema”.

När du fått mappen på plats, så gå in i din WordPress-admin och aktivera ditt nya tema. Utseende > Teman och ”Aktivera”. Det brukar vara bra att tömma sin cache sedan för att se de nya anpassningarna.
Om något skulle gå helt fel är det enklast att ansluta med FTP och byta namn på mappen eller helt enkelt ta bort den och börja om igen.

Ändringar i färg och form kan du nu enkelt göra i stilmallen (style.css) i ditt barntema.

 

Om sidan

Om sidan

Divi.se ägs och drivs av Henrik Rossini som driver webbyrån Joolo Webbdesign.
Sidan visar svensk information samt tips & trix för premium-temat Divi för WordPress. Divi.se har inga kopplingar till temats leverantör Elegant Themes. Divi samt Elegant Themes är registrerade varumärken som tillhör Elegant Themes, Inc.

Vissa länkar på denna webbplats är sk ”affiliate länkar” vilket innebär att om du klickar på länken och köper en produkt på de sidan så kommer jag att erhålla en viss ersättning.

Söker du hjälp med Divi så kontakta mig via min webbyrå Joolo Webbdesign

Läs även

4 plugins för custom post types i WordPress

4 plugins för custom post types i WordPress

Ibland finns behov av att bygga ett register på sin webbplats, med anpassade fält just för dig och din verksamhet. Här kommer jag tipsa om fyra olika plugins som du kan använda i WordPress för detta ändamål.

Den ultimata guiden till Divi tema-anpassare

Den ultimata guiden till Divi tema-anpassare

I Divi temat ställer du enkelt in din design med hjälp av den sk tema-anpassaren. Det kan vara menyer, färger, typografi, CSS och en hel del annat. Du hittar Divi Anpassaren i menyn under Divi > Tema-Anpassare. Elegant Themes har en väldig lättförståelig guide för...

Hur du skapar mikroanimeringar på ikoner och blurbs

Hur du skapar mikroanimeringar på ikoner och blurbs

Mikroanimeringar är ett kul sätt att utöka synligenheten för ikoner och blurbs på din sida. Det kan vara att de pulserar, skakar, roterar eller liknande för att väcka uppmärksamheten för dina besökare. https://www.youtube.com/watch?v=vcLNc_I_BSI