Komma igång med WordPress barnteman?

I den här handledningen kommer du att lära dig hur du skapar ett WordPress-barntema. Om du är ny på WordPress och inte vet vad ett WordPress-barntema är, kommer jag att förklara allt.

WordPress-teman är en samling av gäng PHP-, JavaScript- och CSS-filer. Med enkla ord, med WordPress-teman kan du ändra utseendet och känslan på din blogg. WordPress-teman kan vara väldigt kraftfulla.

Premium WordPress-teman erbjuder många avancerade funktioner och funktionalitet. Tusentals gratis och premium WordPress-teman är tillgängliga.

Du kan skapa ett WordPress-tema från början eller så kan du skapa ett WordPress-tema baserat på ett annat tema. Varje version av WordPress kommer med förinstallerade WordPress-teman och om du inte gillar det förinstallerade WordPress-temat kan du installera ett annat WordPress-tema eller så kan du skapa ett barntema.

Varför WordPress barnteman?

Att skapa ett WordPress-barntema innebär att du tar ett befintligt tema och gör ditt eget tema som är baserat på det. Barntema ärver de flesta funktionerna från det ursprungliga temat, känt som överordnat tema.

Barntema sparar mycket arbete och tid. Att skapa ett WordPress-tema från grunden tar mycket tid och ibland fördjupar kunskaper i HTML, CSS, PHP och krävs. Med barnteman kan du göra många ändringar.

Om du inte är nöjd med anpassningen, alternativen och funktionerna som WordPress-temat du använder ger kan du skapa ett barntema. Även om du vill göra en ändring i ditt WordPress-tema bör du skapa ett barntema eller använda CSS-redigeringsplugin.

Du kan redigera dina befintliga WordPress-temafiler direkt, men när du gör en uppdatering kommer du att förlora alla dina anpassningar. Det är därför du behöver ett barntema.

Vad du kan göra med WordPress barnteman

Med WordPress barnteman kan du lägga till så många funktioner du vill. Det är upp till dig. Om du vill ändra teckenstorlek eller färg för rubriker eller länkar kan du göra det mycket enkelt med CSS.

Du kan lägga till nya navigeringsmenyer, registrera nya sidofält, skapa anpassade sidor för produkter eller lägga till stöd för anpassade webbteckensnitt.

Vad du behöver:

Nu vet du vad som är ett WordPress-barntema och varför du bör skapa barntema. Det är dags att lära sig hur man skapar ett WordPress-barntema.

Det krävs inte men rekommenderar att du installerar en lokal WordPress-installation för utvecklings- och inlärningssyfte. Med lokal WordPress-installation kan du snabbt och mycket enkelt testa dina nya plugins och teman.

Det finns många sätt att installera WordPress lokalt, om du är en MAC-användare kan du använda MAMP, Windows-användare kan använda XAMPP, WAMP eller Bitnami WordPress installationsprogram.

• Hur man installerar WordPress med WAMP Server
• Hur man installerar WordPress med MAMP
• Hur man installerar WordPress med Bitnami Stack

Om du är en absolut nybörjare kan du ladda ner och installera Bitnami WordPress stack för att skapa en fullt fungerande WordPress-webbplats på din MAC eller PC.

Jag personligen föredrar WAMP-server för lokal utveckling. Det är inte svårt att installera WordPress på WAMP, du kan läsa tutorial eller titta på videor för att lära dig hur du installerar WordPress med WAMP, XAMPP eller MAMP.

Du behöver också en kodredigerare för att redigera temafiler. Sublimetext, Brackets, Atom är några populära kodredigerare.

Hur skapar man ett WordPress-barntema?

När din lokala WordPress-webbplats är klar kan vi börja skapa vårt barntema. Om du använder WAMP-servern, gå till din WAMP-installationskatalog > WWW > WordPress > wp-content > mappen teman.

Skapa en ny mapp i WordPress-temanmappen och döp den till tjugosexton-barn eller något du vill, t.ex. InstantShift. Vi kommer att använda tjugosexton tema som ett föräldra tema. Det betyder att vårt barntema kommer att baseras på TwentySixteen-temat.

För varje barntema behöver vi två filer.

• functions.php
• style.css

Med i din tjugosexton-barn temamapp skapa dessa två filer. Öppna nu dina filer i textredigeraren, för snabb åtkomst kan du dra din tjugosexton-underordnade mapp i textredigerarens sidofält. Öppna filen style.css och lägg till följande kod.

/*
 Theme Name:   InstantShift
 Description:  Twenty Sixteen Child Theme for InstantShift.
 Author:       Tahir Taous
 Author URI:   http://www.instantshift.com
 Template:     twentysixteen
 Version:      0.1
*/

Ovanstående uppmärkning krävs för ett underordnat tema. Utan en stilmall med nödvändig markering kommer WordPress inte att kunna känna igen ditt barntema.

Jag tror att man kan förstå allt. Det finns inget att förklara. Mitt barntema heter InstantShift men du kan döpa ditt barn till vad du vill. Det viktigaste är mall: tjugosexton. Detta är namnet på vårt föräldratema. Se till att du stavar rätt.

Om du använder något annat tema som ett överordnat tema, ändra helt enkelt mall: tjugosexton med mall: förälder-tema-namn.

I stilmallshuvudet kan vi också lägga till mer information, men det är inte nödvändigt. Logga nu in på din WordPress-instrumentpanel. Gå till Utseende > Teman. Du bör se InstantShift-tema utan någon skärmdump, eftersom vi inte har lagt till någon skärmdump för vårt barntema.

Håll musen över InstantShift-temat och klicka på knappen Temadetaljer. Här är skärmdumpen av mitt barntema.

Om du kan se den här skärmen betyder det att ditt barntema är klart. Nu kan vi börja anpassa vårt tema. Aktivera det här nya temat och besök insidan av din blogg. Du kommer att se allt ditt innehåll utan någon stil.

Oroa dig inte. Det är normalt. Vi kan inte se några stilar eftersom vi inte har inkluderat formatmallsfilen för överordnade teman. låt oss se till att vårt barntemas stilmall fungerar. Lägg till följande kod i ditt barntemas style.css-fil.

body{
     background-color: #E7F5FB;
}

spara din style.css-fil, ladda om framsidan av din lokala WordPress-webbplats och du bör se en ljusblå bakgrundsfärg.

Registrera överordnat temas stilmall

Vi vill inte skapa alla stilar från grunden. Vi kommer bara att lägga till några nya stilar med barntemats style.css-fil. Låt oss nu lägga till föräldratemats stye.css-fil i vårt barntema.

Öppna functions.php-filen och lägg till följande kod i undertemats functions.php-fil.

<?php
 
// Parent Theme Styles //
// https://codex.wordpress.org/Child_Themes //
 
function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    ks29so_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
    ks29so_enqueue_style( 'child-style',
        get_stylesheet_directory_uri(). '/style.css',
        array( $parent_style)     );
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );

Om du nu laddar om din lokala WordPress-webbplats kommer du att se det normala temat med alla TwentySixteen-stilarna.

Det är allt. Du har skapat ditt första barntema. Du har också lagt till en ny bakgrundsfärg för kroppen.

Men vi skapade inte vårt barntema för att bara ändra bakgrund för kropp. Låt oss börja anpassa vårt tema.

Åsidosättande av överordnade temastilar

Anpassa rubrik:

Som standard har Twenty Sixteen-temats rubrik mycket utfyllnad. Låt oss ändra stoppningen och lägga till den nya bakgrundsfärgen för sidans rubrik. Lägg till följande kod i ditt barntemas style.css-fil, spara din fil och ladda om din frontend av din webbplats för att se ändringar.

.site-header {
    padding: 0 4.5455%;
    background: #CDDC39;
    margin-bottom: 2em;
}

Här kan du se skärmdumpen för sidans rubrik före och efter att vi lagt till våra nya stilar.

Anpassa huvudnavigering

Låt oss nu ändra bakgrundsfärgen för huvudnavigeringsmenyalternativ. Jag gillar att använda Chromes utvecklarverktyg för att redigera mina CSS-stilar.

Efter att ha redigerat webbsidor med Chrome dev tools kan du kopiera den nya koden från Chrome dev tools och klistra in i ditt barntemas style.css-fil.

Öppna ditt barntemas style.css-fil och lägg till följande kod i den.

#menu-header > li {
    background: rgba(185, 202, 22, 0.97);
    margin-right: 4px !important;
    border-radius: 5px;
}

Här kan du se skärmdumpen av vår nya header. Vi har väldigt enkelt anpassat vårt tema med barntema.

Slutord

Nu vet du hur du kan skapa WordPress-barnteman. Det är väldigt enkelt och lätt. Med den grundläggande förståelsen för HTML och CSS kan du helt ändra designen på din webbplats.

Du kan också lägga till nya navigeringsmenyer, widgetområden, stöd för nya vi-typsnitt etc med barntemat. Men vi kan inte täcka allt i en enda artikel.

Om du vill lära dig WordPress-temautveckling bör du börja med WordPress-barnteman. Lär dig grunderna i temaanpassning.