Divi Layouts Header Barntema

Barntema till WordPress

2 maj, 2020
Chrille Hedberg
Barntema | Freebie

I den här artikeln ska vi gå igenom vad ett barntema är, när det behövs och hur man skapar ett. Längst ner på denna sida har du också möjlighet att ladda ner ett färdigt barntema med en specialanpassning för inloggningsskärmen (/wp-admin).

Vad är ett barntema?

Ofta uppmanas folk att skapa eller installera ett barntema innan de fortsätter. Divi är ett exempel på ett tema. WordPress har också ett par teman som följer med installationen, t.ex. TwentyTwenty och TwentyNineteen. Dessa teman kallar man då för ”moderteman” så fort man börjar blanda in termen ”barnteman”.

Ett barntema ärver funktioner och stil från modertemat, men tillåter samtidigt att du gör egna ändringar i koden. Skulle du göra ändringar i modertemats kod kommer dessa ändringar att skrivas över nästa gång temat uppdateras. Eftersom ett barntema inte uppdateras (såvida du inte gör det) så ligger dina förändringar kvar säkert.

Kort förklarat hämtar alltså barntemat sitt utseende och funktioner från modertemat. För du in ändringar i barntemats filer kommer dessa att åsidosätta modertemats funktioner, och dina ändringar visas istället.

När behövs ett barntema?

Det är långt ifrån alla gånger ett barntema behövs. Härifrån och framåt kommer vi nu skilja på utseende och funktioner:

Utseende känns ganska självförklarande; kort sagt är det sådant som rör webbplatsens utseende när det gäller färg och form.
Funktioner ger, tar bort eller ändrar hur din webbplats fungerar.

Sedan finns det lite olika ”luringar”, för ingenting kan ju någonsin vara lätt! Ett exempel på en ”luring” är att man kan välja att dölja webbplatsens logotyp. Detta görs med en snutt CSS-kod, som faller under kategorin utseende. Man kan också välja att dölja visningen av antalet produkter i kategorierna i WooCommerce – detta faller dock under kategorin funktioner.

Hur som helst! För att förändra webbplatsens utseende behövs generellt inte ett barntema. Genom att gå till temaanpassaren (Utseende > Anpassa) så finns ofta alternativet ”Extra CSS” eller ”Custom CSS” längst ner i anpassaren. Använder du Divi kan du också gå till Divi > Temainställningar så har du fältet ”Anpassad CSS” längst ner på sidan.

Fältet ”Anpassad CSS” i Divi och ”Extra CSS” i temaanpassaren är samma sak. Det spelar alltså ingen roll var du anger den extra CSS-koden – samma sak visas på bägge ställena.

Anger du CSS-kod i något av dessa fält kommer din kod att sparas i databasen. Därmed är den också säker vid en uppdatering, eftersom det inte är några filer i modertemat som förändras.

Vill du däremot lägga till, ta bort eller ändra funktioner – då behöver du ett barntema! Inget snack om den saken.

Skapa ett barntema manuellt

Jag, personligen, föredrar att skapa mitt barntema själv. Det finns god dokumentation på WordPress Developers om hur man skapar ett grundläggande barntema.

  1. Börja med att skapa en ny mapp för ditt barntema. Denna mapp skall ligga i wp-content/themes och en god idé är att ge den suffix -child. Gör du ett barntema till TwentyTwenty kan du alltså kalla mappen twentytwenty-child.
  2. Sedan skapar vi filen styles.css som är för temats stil och utseende. I styles.css måste det finnas ett huvud med obligatorisk information:
    /*
     Theme Name:   TwentyTwenty Barntema
     Theme URI:    http://www.itprojekt.se/twentytwenty-child/
     Description:  Barntema för TwentyTwenty
     Author:       Chrille Hedberg
     Author URI:   http://www.itprojekt.se
     Template:     twentytwenty
     Version:      1.0.0
     License:      GNU General Public License v2 or later
     License URI:  http://www.gnu.org/licenses/gpl-2.0.html
     Tags:         blogg, en kolumn, anpassad bakgrund, anpassade färger, anpassad logotyp, custom-menu, stilmall för redigerare, utvalda bilder, sidfotwidgetar, fullbreddsmall, rtl-language-support, klistrat inlägg, temainställningar, threaded-comments, translation-redy, block-styles, wide-blocks, tillgänglighetsanpassat
     Text Domain:  twentytwentychild
    */

    Theme Name och Template är obligatoriska och måste finnas med!

    /* */ och // används för att lägga in kommentarer. Allt som sätts MELLAN /*  */ eller efter // kommer inte läsas in som kod.

    /* Denna text är bortkommenterad */
    // Det är denna också

  3. Slutligen behöver vi filen functions.php. I denna fil behövs följande kod:
    <?php
    add_action( 'wp_enqueue_scripts', 'itprojekt_barntema_enqueue_styles' );
    function itprojekt_barntema_enqueue_styles() {
     
        $parent_style = 'parent-style'; // Detta hämtar 'twentytwenty-style' från tema TwentyTwenty.
     
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        );
    }

Det var faktiskt allt – det är dessa två filer som behövs för ett barntema.

Om du nu går till Utseende > Teman kommer du se att du har ett nytt tema som heter TwentyTwenty Barntema. Precis som andra teman måste du aktivera det för att det ska fungera.

Nu är saker valfritt: CSS-kod kan du lägga in i temaanpassaren, som jag nämnde ovan. Men du kan också lägga in den i filen styles.css som du skapat. Var du lägger in koden spelar egentligen ingen större roll – den kommer fungera oavsett, men det är en god idé att lägga alla ägg i samma korg. Att pilla lite här och pilla lite där är aldrig en god idé. Behöver man någonsin felsöka något är det bra om koden finns på ETT ställe, så man inte behöver ödsla tid på att sitta och söka bara för att hitta koden…

När du sedan vill göra en förändring av en funktion så lägger du in detta i functions.php.

Skapa barntema med ett plugin

Det finns flera sätt att skapa ett barntema på. Ett sätt du kan göra det är med hjälp av ett tillägg som t.ex. Child Theme Configurator av Lilea Media. Här är en liten video från utvecklaren som visar hur tillägget fungerar.

Avancerade barnteman

Det vi skapat ovan är det mest grundläggande av grundläggande barnteman. Det finns också riktigt avancerande barnteman som nära på är egna teman i sig. Dessa avancerade barnteman kommer alltsom oftast med en prislapp. För Divi finns till exempel DiviLover.com, Divi.space eller Divilife.com. Alla dessa är alltså barntema som bygger på Divi som modertema.

Barntema från ITprojekt

Jag har skapat ett barntema till Divi färdigt åt dig. En liten twist på detta barntema är att det i temaanpassaren också finns ett särskilt avsnitt för att anpassa inloggningsskärmen till WordPress. Detta fantastiska stycke kod kommer från vännerna på Divi.space (special shoutout and thank you for that!) och är inget som jag tänker stjäla credz för.

För att ladda ner barntemat behöver du ange förnamn och e-postadress. Du kommer då prenumerera på vårt nyhetsbrev där vi emellanåt postar lite tips, tricks och bjuder på lite gratissaker.

Önskar du ett barntema till ett specifikt tema? Kommentera inlägget nedan så kanske vi kan hjälpa dig! 🙂

Chrille Hedberg

Chrille Hedberg

Jag har jobbat med WordPress i dryga 10 års tid, främst på hobbynivå. Jag har blivit lite av en mästare på att knyta ihop olika tillägg för att få funktioner att lira ihop som de ska. Jag har också blivit rätt bra på det! Har nu startat ITprojekt.se främst för att hjälpa småföretagare som sitter illa till på grund av coronasituationen. Tillsammans med kollegan Martin tar vi olika uppdrag inom just området ITprojekt, men vi taggas lite extra av att kombinera teknik med försäljning. Har bakgrund från vården innan jag skolade om mig till ingenjör och sedan trillade in på bana som säljare. Jobbar nu med teknisk försäljning och är regionansvarig för motsvarande halva Sveriges yta.

0 kommentarer

Trackbacks/Pingbacks

  1. Skapa eget fält för produktdata • ITprojekt med Team Lenom - […] till en flik som ovan, den som kallas ”Egen flik”, bör du först och främst ha ett barntema. Har…
  2. Anpassat fält i WooCommerce kassa • ITprojekt med Team Lenom - […] går att lösa, men det kräver att du har ett barntema installerat och […]

Skicka en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Dela detta