Barntema till WordPress
I den här artikeln ska vi gå igenom vad ett barntema är, när det behövs och hur man skapar ett.
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.
- 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.
- 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: https://intertech.se/twentytwenty-child/ Description: Barntema för TwentyTwenty Author: Chrille Hedberg Author URI: https://chrille.nu 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å - Slutligen behöver vi filen functions.php. I denna fil behövs följande kod:
<?php add_action( 'wp_enqueue_scripts', 'chrille_barntema_enqueue_styles' ); function chrille_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.
