Hur man gör anpassningar med ett barntema

Den här handledningen är inte för alla.

Du behöver inte vara en erfaren utvecklare för att följa med, men du behöver ett genuint intresse för att lära dig mer om WordPress och hur teman fungerar.

Om du inte är rädd för att arbeta med lite kod och smutsa ner händerna med några temafiler, välkommen ombord!

I den här guiden lär du dig hur du anpassar din WordPress-webbplats till ditt hjärta med hjälp av ett barntema, men först…

Låt oss ta upp exakt varför du ens bör använda denna konstiga sak som kallas "barntema."

Varför använda ett barntema?

Säg efter mig:

Jag svär högtidligt att aldrig redigera en temafil.

Nya WordPress-användare som är intresserade av att göra anpassningar med kod redigerar ofta filerna i sitt tema direkt. Det här är ett stort nej-nej.

Varför?

En anledning: när du uppdaterar ditt tema kommer WordPress att åsidosätta ditt befintliga tema med den nya versionen av temat.

Så varför spelar det någon roll?

Föreställ dig att du använder version 1.04 av Challenger- temat. Du flyttade menyn i header.php-filen och lade till lite ny CSS till style.css. Sedan kommer version 1.05 ut och du ser aviseringen i din instrumentpanel.

När du uppdaterar till v1.05 kommer både header.php- och style.css-filerna att ersättas med de i v1.05 av Challenger. De kommer inte att innehålla samma redigeringar som du gjorde, så ditt arbete kommer att gå förlorat och det finns inget sätt att få tillbaka det. Detta kan vara ganska nedslående om du sänkte timmar i dina anpassningar.

Men om du lägger in dina anpassningar i ett Challenger-tema kan du säkert uppdatera till version 1.05 utan att förlora några av dina anpassningar eftersom de lagras säkert i undertemat.

Detta kommer att bli lite tydligare när vi går in i ett verkligt exempel, så låt oss gå vidare och göra ett barntema nu.

Hur man skapar ett barntema

Även om jag inte kommer att förklara i detalj hur all kod fungerar här, är det här de grundläggande idéerna och utdragen du behöver för att komma igång.

Grundläggande inställning

Börja med att skapa en tom mapp på skrivbordet. Du kan namnge det vad du vill, men standardnamnkonventionen är att använda temats namn med gemener följt av "barn" och ersätta mellanslag med bindestreck.

Till exempel skulle ett barntema för Challenger-temat ha ett mappnamn "challenger-child." Den här mappen kommer att innehålla alla filer för det underordnade temat.

Du behöver bara en fil för att skapa ett tekniskt giltigt underordnat tema, style.css.

Skapa filen style.css

Använd kodredigeraren som du väljer, skapa en ny fil i mappen under temat och namnge den style.css.

Style.css-filen är naturligtvis där du lägger till all din CSS för att anpassa din webbplats. För att WordPress ska känna igen ditt barntema som ett giltigt tema måste du lägga till en stilmallsrubrik så här högst upp på style.css:

/*
 Theme Name:   Challenger Child
 Template:     challenger
 Author:       Compete Themes
 Version:      1.0
 Author URI:   https://www.competethemes.com
 Description:  This is a child theme used to customize the Challenger WordPress theme.
 License: GNU  General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

Du kan kopiera exakt denna rubrik och använda den för dina egna barnteman. Byt bara ut namnet på temat med vilket tema du än anpassar.

Den viktigaste delen är värdet "Mall" som måste ställas in på namnet på det överordnade temat. I synnerhet namnet som används för mappen som innehåller det överordnade temat.

Med detta på plats kan du redan nu aktivera barntemat via menyn Utseende och använda det. Din sajt kommer dock att vara helt ostilad!

När ett barntema är aktiverat, kommer WordPress inte längre att ladda överordnadstemats style.css-fil och är istället beroende av ditt barntema för att göra det.

Så här kan du ladda båda stilmallarna…

Skapa filen functions.php

Skapa en andra fil i det underordnade temat i din kodredigerare och döp den till functions.php.

Lägg sedan till följande kod i filen:

<?php 
function my_theme_enqueue_styles() { 
  $parent_style = 'parent-style'; 
  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')
  );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Den här funktionen talar om för WordPress att ladda det överordnade temats style.css-fil och sedan ladda det underordnade temats style.css-fil efter. Om du laddar det underordnade temats stilmall efter gör det lättare att åsidosätta det överordnade temats CSS-väljare.

Som jag nämnde tidigare kommer jag inte att täcka denna kod rad för rad, men du kan hitta en mer detaljerad förklaring av detta utdrag i WordPress Codex.

Anpassa med ditt nya barntema

Det är allt du behöver göra för att skapa ett fungerande barntema!

Med inställningen av barntema finns det tre sätt att anpassa din webbplats med den.

Lägg till och åsidosätt stilar

Du kan lägga till så mycket ny CSS i det underordnade temats style.css-fil som du vill.

När du hittar väljare att använda i din CSS, kontrollera inte det överordnade temats style.css-fil. Alla våra teman använder en "CSS-förprocessor" så vi tittar inte ens på den filen! Följ istället den här smartare processen för att hitta CSS-väljare, och jag tror att du kommer att ha mycket större framgång med att anpassa din webbplats.

Åsidosätt funktioner

Med ett välkodat föräldratema kan du åsidosätta alla funktioner som finns i dess functions.php-fil.

Till exempel är varje funktion i Mission News inslagen med en [function_exists()](https://php.net/manual/en/function.function-exists.php)check. Det betyder att du kan kopiera funktionen till ditt barntemas functions.php-fil. Sedan kan du göra vilka ändringar du vill i funktionen där.

Åsidosätt mallar

En vanlig anpassning som kräver ett barntema är omordning av element. Till exempel kanske du vill flytta inläggets titel efter den utvalda bilden istället för före den.

Du kan ta vilken som helst av mallfilerna som finns i det överordnade temat och placera en kopia i ditt underordnade tema. Versionen i barntemat kommer då att laddas istället. Detta gör att du kan lägga till, ordna om och ta bort alla element du vill ha i vilken del av webbplatsen som helst.

Installerar barntemat

När du är nöjd med dina redigeringar kan du installera barntemat på din webbplats.

Barnteman kan laddas upp precis som vanliga WordPress-teman, så det tar bara en minut eller två att få dem aktiverade på din webbplats. Följ med den här handledningen för att få ditt barntema installerat:

Hur man installerar ett WordPress-barntema

Om du är helt ny på allt detta, här är ett par gratisverktyg som hjälper dig.

Först, om du inte har en kodredigerare, kolla in Visual Studio Code. Det är enkelt men flexibelt. Det är också helt gratis och massor av professionell programvara görs med den. Det är vad jag använder för att göra teman här på Compete Themes.

För det andra är att skapa en lokal WordPress-webbplats (offline) ett bra sätt att prova kod utan att påverka din riktiga webbsida. Även om jag har använt och rekommenderat MAMP tidigare, är Local by Flywheel så jäkla lätt att använda att jag älskar det. Det är vad jag använder för temautveckling och det är också gratis.

Dina uppdateringar är säkra

Går tillbaka till exemplet från tidigare…

När du uppdaterar Challenger-temat (eller vilket tema som helst) ersätts hela "challenger"-katalogen, vilket inte påverkar det underordnade temat eftersom det nu har en egen katalog i "challenger-child"-mappen.

Med ditt barntema på plats kan du säkert göra vilka anpassningar du vill och hålla ditt överordnade tema uppdaterat.

Om du är ny på CSS och PHP kan det ta lite tid att få dina anpassningar som du vill, men med ett barntema har du en bra grund att arbeta med. Kom ihåg att följa dessa steg för att hitta CSS-väljare att använda, och alla stilanpassningar du gör kommer att vara ganska enkla.