Om du har använt WordPress en längre tid är barntema (eng. child theme) säkert ett begrepp som du har snubblat över vid något tillfälle. Om inte är det hög tid. Ett barntema är ett tema som ärver funktionalitet från ett annat tema – ett föräldratema (eng. parent theme). Genom att använda ett barntema kan du modifiera funktionaliteten i presentationen i ett tema utan att du behöver oroa dig för att ändringarna förändras eller skrivs över av uppdateringar.

I den här guiden kommer jag att gå igenom vad ett barntema är och hur du kan använda barnteman till att på ett enkelt och säkert sätt göra ändringar i WordPress-teman.

Varför barnteman?

Det finns flera bra anledningar till att använda barnteman.

  1. Om du gör dina ändringar i ett barntema kan du när som helst avaktivera och/eller tar bort temat utan att dess föräldratema påverkas.
  2. Om du gör ändringar i ett tema och temat uppdateras kommer dina ändringar att försvinna. Gör du ändringarna i ett barntema bevaras ändringarna även om dess föräldratema uppdateras.
  3. Det är ett snabbt och smidigt sätt att börja bekanta sig med temautveckling för WordPress.

Så skapar du ett barntema

Obs: den här guiden förutsätter att du har en fristående installation av WordPress och en grundläggande förståelse för hur WordPress-teman fungerar.

Som exempel i den här guiden kommer jag att det senaste standardtemat i WordPress: Twenty Fourteen. För att komma igång, gå till temamappen på din WordPress-installation. Du hittar den mappen i Webbplats > wp-content > themes*. Är det en någorlunda ny installation ska den mappen innehålla en mapp med namnet twentyfourteen. Gör den inte det måste du ladda ned det temat från WordPress.org och installera det på WordPress-installationen i fråga.

Skapa en ny mapp i themes-mappen och den till ”twentyfourteen-child”. Det är praxis när man gör ett barntema att döpa dess mapp till samma namn som föräldratemat, men med ändelsen ”-child”. Det är dock inget krav. Öppna din nyskapade mapp och skapa en fil med namnet style.css. Öppna den filen och klistra in följande kod:

/*
Theme Name:   Twenty Fourteen Child
Description:  Twenty Fourteen Child Theme
Author:       WordPressguider.se
Author URI:   http://www.wordpressguider.se
Template:     twentyfourteen
Version:      1.0.0
*/
@import url(”../twentyfourteen/style.css");

Den här koden döper temat till ”Twenty Fourteen Child”, och säger till WordPress (med Template-taggen) att det är ett barntema till temat Twenty Fourteen. @import-taggen säger åt temat att hämta CSS-filen från Twenty Fourteen, så att det inte bara är CSS-koden från barntemat som laddas när sidan visas.

Om du nu loggar in på WordPress-webbplatsens adminpanel och går till Utseende > Teman kommer du att se Twenty Fourteen Child i listan. Bara för att bekräfta att allt har fungerat som det ska, gör två radbrytningar under kodblocket i style.css och klistra in följande kod:

* { color: #CA2017 !important; }

Spara filen. Gå till WordPress-installationens Tema-sida igen och aktivera Twenty Fourteen Child. Öppna webbplatsens startsida. Om all text på sidan nu har en mörkröd färg vet du att barntemat fungerar som det ska, och att du kan fortsätta experimentera med temats design i barntemats style.css-fil. Du bör nog börja med att radera raden vi precis lade till.

Men om man går så långt att man skapar ett child theme är det förmodligen inte ändringar i CSS-koden som hägrar. Det finns vagnslastar av tillägg som gör det mycket enklare att göra sådana ändringar. Anledningen till att man skapar ett child theme är vanligtvis att man vill redigera ett temas PHP-filer.

Redigera PHP-filer i child themes

Som exempel för redigering av PHP-filer kommer vi att använda filen som styr visning av inlägg med standard-formatet i Twenty Fourteen: content.php. Gå till Twenty Fourteen-mappen i wp-content > themes, kopiera content.php, gå till barntemats mapp och klistra in kopian. Kontrollera att kopian också heter content.php. När webbplatsen nu laddas kommer WordPress att se att det finns filer med filnamnet content.php i både barntemat och föräldratemat, och då kommer barntemats content.php att användas. De betyder att de ändringar vi nu gör i content.php i barntemat kommer att reflekteras på webbplatsen.

Som exempel kommer vi att plocka bort metainformationen om inlägg med standardformatet i Twenty Fourteen. Öppna content.php-filen i barntemats mapp. Med start från rad 31 hittar du följande kod:

<div class="entry-meta">
<?php
if ( 'post' == get_post_type() )
twentyfourteen_posted_on();
if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) :
?>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyfourteen' ), __( '1 Comment', 'twentyfourteen' ), __( '% Comments', 'twentyfourteen' ) ); ?></span>
<?php
endif;
edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' );
?>
</div><!-- .entry-meta -->

Den här koden visar när ett inlägg publicerades (genom att ladda funktionen twentyfourteen_posted_on()) och, om kommentarsfältet är öppet, hur många kommentarer inlägget har fått. Radera koden och spara filen. Om du nu öppnar webbplatsen kommer inläggets metainformation att vara borta. Vill du ta bort, ändra eller lägga till saker i andra filer upprepar du bara stegen: kopiera filerna från föräldratemat, klistra in dem i barntemat och börja redigera.

Avslutning

Det här var en snabb grundkurs i hur du skapar och börjar jobba med barnteman. När du väl har ett barntema up and running kan du använda det temat som utgångspunkt för många andra guider på WPG: Visa ett inläggs lästid, lägg till stöd för utvalda bilder, lägg till en gilla-knapp för Facebook, och så vidare, och så vidare. Möjligheterna med barnteman är oändliga, och det är ett väldigt bra sätt att doppa tårna i temabyggande i WordPress.