Hur man skapar ett barntema i WordPress: En enkel guide 

Som ägare av en WordPress-hemsida är det bara naturligt att du vill experimentera med webbdesign och funktionaliteten hos WordPress-teman. Men vad är det bästa sättet att göra det utan att förstöra det ursprungliga temat? Ett barntema i WordPress är ett bra sätt att modifiera och testa ditt tema utan att riskera att störa ditt ursprungliga tema.

Att använda ett WordPress-barntema är ett smart sätt att säkert anpassa ditt temas kod utan att riskera ditt arbete. Om du planerar att göra ändringar i ditt temas CSS , HTML eller PHP är ett barntema rätt väg att gå. Varför? För utan ett kan alla uppdateringar av ditt huvudtema radera dina ändringar.

För att göra det enkelt har vi sammanställt en nybörjarvänlig guide som förklarar hur ett barntema fungerar, hur man konfigurerar det och hur man gör de ändringar du vill ha. Kör hårt och anpassa med självförtroende!

Förstå barnteman i WordPress

Ett barntema , som namnet antyder, är som ett "tillägg" till ditt huvud- eller överordnade tema , och ärver dess funktioner och stilar. När du vill anpassa ditt WordPress-tema kan det vara riskabelt att dyka direkt in i temafilerna eftersom alla ändringar kan förändra kärntemat. Det är där barnteman kommer in i bilden, de är ett säkrare sätt att göra ändringar utan att röra originalfilerna.

Barntemat ärver automatiskt huvudstilen från föräldertemats style.css-fil, som anger temats övergripande utseende och känsla. Med ett barntema kan du enkelt justera eller lägga till stilen genom att lägga till egna filer eller göra justeringar av befintliga. Detta ger dig flexibiliteten att anpassa temat utan att ändra originalfilerna.

Underordnade teman lagras i en egen mapp, separat från föräldertemat, och är beroende av föräldertemat för funktionalitet om du inte bestämmer dig för att ändra saker. När du aktiverar ett underordnat tema i WordPress länkas det till föräldertemat, och WordPress kontrollerar först underordnade temafiler. Om en fil inte har ändrats använder WordPress helt enkelt förälderversionen.

Kom dock ihåg att ett undertema inte kan fungera ensamt. Det behöver att föräldratemat installeras bredvid det för att fungera korrekt.

Läs om: Outsourca WordPress plugin- och temautveckling

Fördelar med att använda ett barntema i WordPress

Att skapa ett undertema är ett smart sätt att göra ändringar på din WordPress- webbplats utan risk att förlora allt ditt hårda arbete. Om du skulle redigera överordnade temats filer direkt, kommer dina anpassningar att raderas varje gång temat uppdateras. Detta kan göra att du står inför ett frustrerande val: antingen hoppa över alla framtida uppdateringar, vilket kan leda till kompatibilitets- och säkerhetsproblem, eller uppdatera och förlora den tid och ansträngning du lagt ner på att anpassa ditt WordPress-tema .

Med ett undertema behöver du dock inte göra det valet. Alla dina ändringar lagras säkert i en separat mapp, vilket innebär att du kan behålla dina ändringar även när föräldratemat uppdateras. Dessutom gör den här konfigurationen det enkelt att flytta dina anpassningar från en webbplats till en annan om du behöver det, vilket sparar tid om du arbetar på flera webbplatser eller migrerar till en ny.

En annan stor fördel med att använda ett barntema är att det är ett bra sätt att lära sig om utveckling av anpassade teman i en miljö med låg risk. Du kan experimentera med ändringar och nya funktioner, och om något inte går som planerat kan du helt enkelt inaktivera barntemat. Din webbplats återgår omedelbart till det ursprungliga utseendet och funktionaliteten hos föräldratemat, så ingen skada är skedd.

Läs mer om: Hur man redigerar och anpassar rubriker i WordPress på ett smidigt sätt?

Saker att göra innan du skapar ett barntema i WordPress

Nu har vi sett många WordPress-användare som är ivriga att börja anpassa sina webbplatser, bara för att stöta på väggen när oväntade fel dyker upp. Det är helt förståeligt att det kan verka spännande att ge sig in i ett barntema tills de tekniska utmaningarna börjar dyka upp.

Därför är det viktigt att förbereda sig lite innan man ger sig in, precis som man skulle förbereda sig inför ett prov. Här är några tips som du kan ta innan du börjar skapa ditt barntema:

Förstå grunderna i kod

Att arbeta med ett barntema innebär att du kommer att arbeta med kod. Grundläggande förståelse för HTML, CSS och PHP är åtminstone praktisk (och eventuellt JavaScript om du vill bli mer avancerad). Om du är nybörjare på kodning är WordPress temahandbok ett bra ställe att börja för snabb vägledning.

Lär dig: Hur man konverterar Figma till kod: React, HTML, Vue, JS, CSS

Välj rätt föräldratema

Välj ett föräldratema som redan liknar det utseende och den funktionalitet du vill ha. Helst hittar du ett som bara behöver några få justeringar, vilket gör din anpassningsprocess smidigare. Om du byter tema helt och hållet, kolla in vår checklista över saker att göra innan du byter WordPress-tema, det kommer att bespara dig en del potentiella huvudvärk!

Använd en lokal webbplats eller en testplats för testning

Det är bäst att experimentera på en lokal webbplats eller en testwebbplats istället för att gå direkt till din livewebbplats. På så sätt påverkar du inte din livewebbplats utseende eller funktionalitet om du gör ett misstag.

Skapa en säkerhetskopia av din webbplats

Innan du gör några ändringar, säkerhetskopiera din webbplats. Om det är första gången kan ett plugin som Duplicator göra säkerhetskopieringsprocessen enkel och stressfri. På så sätt kan du snabbt återställa din webbplats om något inte går som planerat.

När du har behärskat dessa grunder är du redo att följa vår steg-för-steg-guide för att skapa ditt barns tema med självförtroende!

Lär dig: Bästa lösningarna för att säkerhetskopiera flera WordPress-webbplatser

Hur man skapar ett barntema manuellt i WordPress: 5 enkla steg

Att skapa ett barntema i WordPress är enklare än det låter, och det är ett bra sätt att förstå hur barnteman fungerar utan att riskera ditt huvudtema.

Låt oss gå igenom hur man skapar ett barntema baserat på WordPress standardtema Twenty Fifteen och gör några anpassade justeringar för att se processen i praktiken.

Steg 1: Skapa en underordnad temamapp

Börja med att skapa en ny mapp på din dator där alla filer för ditt barntema ska placeras. Du laddar senare upp den här mappen till din webbplats.

Du kan namnge mappen efter ditt överordnade tema med "-child" tillagt i slutet. Om ditt överordnade tema till exempel heter "Twenty Twenty-Two" skulle din underordnade temamapp heta twentytwentytwo-child. Detta gör det enkelt att identifiera det som ett underordnat tema för överordnade tema.

Steg 2: Skapa ett stilark för ditt barntema

Skapa sedan en style.css-fil i din nya mapp för barntema. Den här filen kommer att innehålla alla anpassade stilar för ditt barntema.

För att konfigurera stilarket korrekt, lägg till följande rubrikkommentarer högst upp i din style.css-fil. Detta talar om för WordPress att ditt nya tema är ett underordnat tema till det överordnade temat:

Temanamn: Twenty Twenty-Two Undertema-URI: https://wordpress.org/themes/twentytwentytwo/ Författare: WordPress-teamet Författar-URI: https://wordpress.org/ Mall: twentytwentytwo Beskrivning: Undertema för Twenty Twenty-Two Version: 1.0 */

När du har sparat, gå till din WordPress-instrumentpanel och gå till Utseende → Teman . Du borde nu se ditt barntema listat.

Steg 3: Länka stilmallarna för överordnade och underordnade teman

För att säkerställa att stilarna från ditt föräldratema tillämpas måste vi länka dess stilark till undertemat. Detta görs genom att skapa en functions.php-fil i din undertema-mapp och lägga till följande kod:

<?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() {wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}

Den här koden laddar föräldratemats stilark så att ditt undertema ärver all dess stil.

Lär dig: Hur man reparerar och fixar en WordPress-databas?

Steg 4: Redigera barntemats stilark (style.css)

Du kan nu börja lägga till dina anpassade stilar direkt i barntemats style.css-fil. För att till exempel ändra färgen på länkar på din webbplats kan du lägga till:

en {färg: #D54E21;textdekoration: ingen;}

Den här regeln åsidosätter det överordnade temats länkformatering utan att påverka resten av dess design.

Vet du: Ska du bygga din webbplats med kod, utan kod eller med en hemsidebyggare?

Steg 5: Ändra en mallfil

Med ett barntema kan du även ändra enskilda mallar. Låt oss säga att du vill ändra hur inlägg visas genom att redigera single.php-filen.

• Kopiera single.php från föräldratemat och klistra in det i din undertema-mapp.
• Öppna filen i en textredigerare och gör dina ändringar.

Om du till exempel vill ta bort kommentarsfältet från sidor med enskilda inlägg, leta reda på den här delen av koden:

om (kommentarer_öppna() || hämta_kommentarer_nummer()) :kommentarsmall();endif;

Ta bort det eller kommentera det för att dölja kommentarerna. WordPress kommer att använda den modifierade single.php-filen från undertemamappen, så eventuella uppdateringar av föräldratemat kommer inte att skriva över dina anpassningar.

Lär dig: Hur man skapar en anpassad sidmall i WordPress?

Hur man skapar ett barntema med ett plugin (ingen kodning krävs)

Om du inte gillar att programmera men ändå vill skapa ett barntema, har du tur! Det finns flera plugins som du kan använda för att skapa ett barntema i WordPress, men vi kommer att använda Child Theme Configurator för att förklara processen.

Det här pluginet gör det superenkelt att konfigurera och anpassa ett barntema för klassiska (icke-block) WordPress-teman. Här är en enkel steg-för-steg-guide för att komma igång.

Steg 1: Installera och aktivera plugin-programmet

Gå först till din WordPress-instrumentpanel, sök efter "Child Theme Configurator" i avsnittet Plugins och installera det. När det är aktiverat, gå till Verktyg → Underteman .

Steg 2: Konfigurera barntemat

I konfiguratorn för barnteman går du till Förälder/Barn . Du ser ett alternativ för att välja en åtgärd, välj "SKAPA ett nytt barntema" för att komma igång.

Steg 3: Välj ditt överordnade tema

Välj sedan det överordnade tema du vill bygga vidare på från rullgardinsmenyn. I det här exemplet, låt oss säga att vi använder Hestia-temat. När du har valt ditt tema klickar du på knappen "Analysera" för att säkerställa att temat är kompatibelt med att skapa ett undertema.

Steg 4: Namnge din underordnade temamapp

Du kommer sedan att bli ombedd att namnge mappen där barntemat ska lagras. Du kan vara kreativ här eller hålla det enkelt med ett namn som "Hestia-child" för att hålla saker organiserade.

Steg 5: Bestäm var du vill spara anpassade stilar

Här är ett viktigt val: Du kan spara nya anpassade stilar i det primära stilarket (style.css) för ditt barntema, eller i en separat stilarksfil.

• Primärt stilark : Detta är huvudfilen där stilar sparas som standard. Alla ändringar här kommer att skriva över de ursprungliga temastilarna.

• Separat stilark : Det här alternativet sparar dina anpassade stilar i en ny fil, så att det ursprungliga temats stilar förblir orörda.

För tillfället använder vi det primära stilarket, men du kan gärna prova det separata alternativet om du vill behålla det överordnade temats utseende helt och hållet.

Läs mer: Bästa webbdesignprogramvaruverktygen för fantastiska och enkla webbplatser

Steg 6: Ställ in hantering av överordnat temas stilmallar

Scrolla ner och välj hur du vill ladda det överordnade temats stilark. Vi behåller standardalternativet "Använd WordPress stilkö", eftersom det gör att pluginet hanterar det automatiskt.

Steg 7: Anpassa detaljer för undertema

När du når steg 7 klickar du på "Klicka för att redigera attribut för undertema". Här kan du lägga till detaljer som undertemats namn, beskrivning och version.

Steg 8: Kopiera menyer och widgetar

Normalt sett återställs dina menyer och widgetar när du skapar ett undertema. För att undvika att återställa dessa, markera rutan i steg 8 för att kopiera dem från föräldratemat till undertemat.

Skapa ditt barntema

Klicka slutligen på “Skapa nytt barntema”. Plugin-programmet skapar automatiskt en mapp för ditt barntema, komplett med filerna style.css och functions.php som behövs för framtida anpassningar.

Förhandsgranska och aktivera

Innan du aktiverar, klicka på förhandsgranskningslänken högst upp på skärmen för att se till att allt ser bra ut. Om förhandsgranskningen av ditt barntema visas utan att några element är trasiga, klicka på "Aktivera och publicera" för att publicera det!

Och där har du det! Ditt barntema är nu aktivt. Nu kommer det att se ut och fungera precis som ditt överordnade tema. Du kan nu säkert lägga till anpassningar till barntemat utan att påverka originalet. Lycka till med anpassningen!

Läs mer om: Bästa WordPress Studio-teman för kreativa företag

Vad ska man göra om sitt WordPress-barntema inte fungerar?

Visar inte ditt barntema dina ändringar? Oroa dig inte, här är några vanliga problem och lösningar för att få det att fungera som förväntat.

Dubbelkolla din functions.php-fil

Börja med att se till att du har lagt till barntemats stilark i din functions.php-fil. Om det inte är i kö kommer barntemat inte att laddas korrekt och din webbplats kommer att fortsätta visa det överordnade temat, vilket gör att det ser ut som att dina ändringar inte visas.

Intressant läsning: Laravel vs WordPress: PHP:s bästa rivaler möts

Bekräfta att ditt stilark heter style.css

Dubbelkolla att du har döpt ditt stilark till style.css, inte stylesheet.css eller något annat. WordPress förväntar sig att undertemats huvudsakliga stilark heter style.css. Om det har ett annat namn kommer din functions.php-fil inte att känna igen det, och dina anpassade stilar kommer inte att gälla.

Verifiera mallnamnet i style.css

I din style.css-fil ska fältet Template matcha namnet på ditt överordnade temas mapp exakt. Detta anger för WordPress vilket tema som ska användas som överordnat tema. Om namnet är felaktigt kommer WordPress inte att veta vilket tema undertemat ska baseras på.

Rensa din cache

Ibland kan cachning hindra dig från att se uppdateringar. Försök att rensa din cachning, särskilt om du använder ett cachningsplugin. Det är också bra att rensa webbläsarens cache eller öppna din webbplats i ett inkognitofönster för att se om dina ändringar visas. Om du aktivt arbetar med barntemat kan du överväga att inaktivera alla cachningsplugins tills du är klar.

Använd !viktigt i din CSS-kod

Om du märker att det överordnade temats stilar fortfarande åsidosätter din anpassade CSS, försök att lägga till !important till de stilar du vill prioritera. Detta kommer att tvinga ditt underordnade temas stilar att prioriteras framför det överordnade. Till exempel:

p {bakgrundsfärg: grå !viktigt;}

Det här tricket kan vara användbart för specifika element, ID:n och CSS-klasser för att säkerställa att dina ändringar tillämpas.

Kontakta temasupporten eller kolla forumen

Om du har provat alla dessa steg och ditt barntema fortfarande inte fungerar, överväg att kontakta temats supportteam eller kolla temats forum på WordPress.org . Ibland har teman unika konfigurationer eller anpassad kod som kan påverka hur barnteman fungerar, och utvecklaren kan ha specifika råd.

Slutsats

Och det var klart! Vid det här laget borde du ha en gedigen förståelse för vad ett WordPress-undertema är och hur det fungerar tillsammans med ett föräldratema. Att installera ett tema är bara början när man bygger en WordPress-webbplats.

Medan den inbyggda Gutenberg-redigeraren eller ditt temas skapare kan hjälpa dig att göra designjusteringar, öppnar ett barntema upp ännu fler möjligheter. Med ett barntema kan du inte bara justera designen utan även anpassa funktionaliteten utan att röra kärnfilerna, vilket ger dig total frihet att göra din webbplats verkligt unik.

Vanliga frågor om att skapa ett barntema i WordPress