Du har kørt dit WordPress-sted i et stykke tid, og det har gjort, hvad du har brug for. Men nu beslutter du, at du skal tilpasse det.

Eller måske opretter du dit websted med et tema, som du har hentet fra temamappen, eller et, du har købt, og du er klar over, at det ikke fungerer nøjagtigt som du har brug for.

Hvad gør man så?

Du kan enten finde et plugin, der giver den tilpasning, du har brug for, eller skifte til et nyt tema. Men hvad nu hvis du er tilfreds med dit nuværende tema og ikke kan finde et plugin, der tilføjer det, du har brug for med hensyn til funktionalitet?

Svar: Du skal tilpasse dit tema. Og bedste praksis siger: du gør det via (WordPress) child themes.

I dette indlæg vil jeg vise dig nøjagtigt, hvordan du opretter et child theme i WordPress, hvordan du bruger det til at tilpasse dit websted, og hvordan child themes fungerer. Jeg vil også forklare konceptet med overordnede temaer og beskrive, hvordan et overordnet tema på dit websted interagerer med et child theme.

Før vi dykker ned i at oprette et child theme, lad os identificere de 3 metoder, du kan bruge til at tilpasse dit WordPress-sted.

Metoder til tilpasning af WordPress

Tilpasning af et tema kommer med risici. Hvis du redigerer koden i et tredjeparts-tema (som du f.eks. har købt af en markedsplads), vil alle dine ændringer gå tabt, når du næste gang opdaterer dette tema. Betydning af, at ikke kun dit websted vender tilbage til den måde, det var, men alt dit arbejde går tabt.

Der er tre måder at tilpasse dit WordPress-sted:

Lad os se på hver af disse i rækkefølge.

Redigering af dit tema

Hvis dit websted kører et tilpasset WordPress-tema, hvilket betyder, at det er blevet udviklet specifikt til dit websted, har du muligheden for sikkert at redigere det, fordi der ikke er nogen risiko for at miste dine tilpasninger næste gang temaet opdateres.

I stedet for, hvis du eller din udvikler foretager ændringer til temaet i fremtiden, er det den tilpassede version af det tema, du vil redigere, og ikke den originale version før disse ændringer.

Det betyder ikke, at redigering af dit tema ikke kommer uden risiko. Hvis du ikke har erfaring med kodning af temaer, kan det stadig være mere sikkert at oprette et child theme (vi får se, hvordan det virker om et øjeblik). Dette er noget, jeg gør: Jeg har et basetema, som jeg bruger på alle mine websteder, med standardlayout, hooks og funktioner, og derefter tilpasser jeg det på hvert websted med et child theme.

Hvis du redigerer dit tema direkte, skal du sørge for at opbevare en sikkerhedskopi af det originale tema, ikke redigere temaet på det levende websted (brug et websted for udvikling eller scenested i stedet) og brug versionskontrol til at holde styr på dine ændringer.

Og hvis du bruger et tredjeparts-tema, skal du aldrig redigere det direkte. Brug i stedet et plugin eller opret et child theme.

Tilføjelse af et plugin

Den anden mulighed for tilpasning af et WordPress-tema er at installere eller kode et plugin.

Hvis de tilpasninger, du vil foretage, er funktionelle i stedet for designrelaterede, er et plugin en mere passende måde at gøre dette på. Så hvis du vil tilføje ekstra kode, kan det være bedre at oprette et plugin i stedet.

Plugins behøver ikke være store eller komplekse: Hvis du har brug for at tilføje ekstra kode til filen functions.php i dit tema, skal du oprette et simpelt plugin for at tilføje et par kodelinjer til dit websted. Et godt eksempel er registrering af en tilpasset indlægstype.

Det kan være fristende at tilføje kode til dit temas functions.php, men at tilføje en indlægstype er en funktionel ændring af dit websted, ikke en designtype. Hvis du skulle skifte temaer i fremtiden, ville du ikke ønsker at miste disse indlægstyper og alle de indlæg, du har oprettet ved hjælp af dem. Derfor skal du i stedet installere eller oprette et plugin.

Til tider vil du være i stand til at finde et eksisterende plugin, der gør det, du har brug for, men nogle gange er du muligvis nødt til at kode pluginet selv.

WordPress-arkivet
WordPress-arkivet

Hvis du er i tvivl om, hvorvidt du skal oprette et plugin eller tilpasse dit tema (eller child theme), så spørg dig selv dette: Hvis jeg ønsket at ændre designet på mit websted i fremtiden og installerede et nyt WordPress tema, ville jeg så gerne have, at denne ændring skulle forblive? Hvis svaret er ja, betyder det, at ændringen er funktionel og ikke æstetisk, og den skal gå i et plugin.

Oprettelse af et child theme

Den tredje mulighed for tilpasning af WordPress-tema er at oprette et child theme.

Her er nogle scenarier, hvor du vil bruge et child theme:

  • Du ønsker at foretage ændringer i design af webstedet, ikke funktionaliteten.
  • Dit websted kører et tredjeparts-tema eller et tema, du vil bruge igen i sin nuværende tilstand.
  • Du ønsker ikke at redigere dit eksisterende tema direkte, hvis det medfører problemer (måske du ikke er en erfaren temaudvikler).
  • Dit websted kører et tema designet til at være et overordnet tema, såsom et rammetema. Dette er temaer med masser af tilpasningsmuligheder, såsom hooks, designet til dig at tilføje til dit eget child theme.

Child themes er derfor en effektiv og sikker måde at tilføje tilpasninger til dit websted. Så lad os se på dem mere dybdegående.

Hvad er et WordPress child theme?

Så hvad er et child theme i WordPress? Hvordan virker det?

Et child theme er et tema, der fungerer sammen med et andet tema, der omtales som overordnet tema (parent).

Det indeholder nogle specifikke instruktioner til at fortælle WordPress, at dette er et child theme, og hvad overordnet tema er. WordPress bruger derefter koden fra overordnet tema i de fleste tilfælde, men vil tilsidesætte denne med kode fra child theme (hvis nødvendigt). Hvis du støder på et websted, der bruger et chilld theme, som du kan lide, så brug vores tema detektor værktøj til at finde ud af, hvad parent theme er

Filerne i et WordPress child theme

Hvert WordPress-underordnet tema skal mindst have to filer: et stilark og en funktionsfil. Stilarket vil indeholde kommenteret tekst øverst for at fortælle WordPress, at dette er et child theme og hvad overordnet tema er. Funktionsfilen vil indeholde en funktion, der oversætter stilarket fra overordnet tema.

Bemærk: Du støder muligvis på guider, der fortæller dig, at du kalder det forældetema-stilark fra barnets temas typografiark. Dette er ikke længere den rigtige måde at gøre det på, og du bør i stedet bruge enqueuing i funktionsfilen. Jeg viser dig, hvordan du gør dette inden for kort tid.

Dit child theme behøver ikke at inkludere andre filer. I modsætning til overordnet tema, behøver den ikke en index.php fil som tilbagefald, hvis der ikke er mere specifikke filer i temaet. Dette skyldes, at hvis en skabelonfil ikke findes i child theme, vil WordPress bruge filen fra det overordnede tema.

Afhængigt af hvad du ønsker, at dit child theme skal gøre, tilføjer du enten ekstra kode til stilarket, funktionsfilen, eller du opretter ekstra filer i child theme for at tilsidesætte overordnet tema. Disse kan omfatte en eller flere af:

  • Skabelonfiler til at tilsidesætte den samme fil fra det overordnede tema, f.eks. page.php, når du vil tilpasse visningen af ​​statiske sider.
  • Skabelondele såsom header.php eller footer.php, når du vil tilpasse disse dele af webstedsdesignet.
  • Ekstra skabelondele, som du kalder fra skabelonfiler i dit child theme. Så hvis du ville tilpasse overskriften, når der vises statiske sider, ville du oprette en fil i dit child theme kaldet header-page.php og en skabelonfil kaldet page.php, som vil tilsidesætte page.php fra overordnet tema . Denne skabelonfil er identisk med den i det overordnede tema bortset fra opkaldet til overskriftsfilen, som ville kalde header-page.php i stedet for header.php.
  • Ekstra inkluderer filer til funktionalitet. Hvis du vil tilføje en masse funktionel kode og organisere den, kan du oprette inkludere filer til hvert sæt funktioner og derefter kalde dem i dit child themes functions.php-fil. Så hvis du f.eks. ville tilføje ekstra Customizer-indstillinger, kan du tilføje en inkluderingsfil kaldet customizer.php i dit child theme og derefter kalde den fil fra funktionsfilen i dit child theme.

Men hvis du tilføjer ekstra filer og funktioner, hvordan ved WordPress, hvad de skal bruge? Dem fra overordnet tema eller dem fra child theme? Det er det, vi kommer til det næste.

Sådan vælger WordPress skabelonfiler

Den måde, hvorpå WordPress vælger skabelonfiler fra dit tema, når du viser indhold på dit websted, er ved hjælp af skabelon-hierarkiet.

WordPress-skabelon-hierarkiet
WordPress-skabelon-hierarkiet

WordPress bruger dette hierarki til at arbejde gennem skabelonfilerne i dit tema og finde den rigtige, der skal bruges, når der vises en given form for indhold. Det starter øverst (til venstre på billedet ovenfor) og ser efter hver fil efter den givne indholdstype efter tur. Når den finder en fil, der viser dette indhold, bruger den den.

Forestil dig, at dit tema har en archive.php-fil og en category.php-fil, men ingen tag.php-fil. Når du viser et kategoriarkiv, bruger WordPress category.php, da det er mere specifikt for indholdstypen. Når der vises et tagarkiv, bruger det i stedet archive.php.

Hvis WordPress ikke finder en skabelonfil til den givne indholdstype, vil den som standard være filen catch-all index.php, og det er grunden til, at ethvert fristående tema (dvs. ikke et child theme) skal have en index.php-fil .

Det samme gælder for enkeltindlæg og sider. Lad os sige, at dit tema har en singular.php-fil, som er opsamlingsværdien for enkeltindlæg af enhver indlægstype (inklusive sider og tilpassede indlægstyper). Det har også en page.php-fil. Når der vises en enkelt side, bruger den page.php. Når der vises et indlæg, bruger det singular.php. Og hvis du registrerer en brugerdefineret indlægstype og ikke tilføjer en skabelonfil til den pågældende indlægstype, bruger den singular.php igen.

Når du bruger et child theme, bruger WordPress stadig skabelon-hierarkiet til at bestemme, hvilken fil der skal bruges, når du sender indhold på dit websted. Den ser på filerne i både overordnede og child themes og bruger den første fil, den kommer over.

Så forestil dig, at dit child theme har singular.php og post.php, og dit overordnede tema har page.php og index.php. Når du udsender et enkelt indlæg, bruger WordPress post.php fra child theme. Når der udlæses en side, bruger den page.php fra overordnet tema. Og når der udsendes et enkelt indlæg af en brugerdefineret indlægstype, bruger det singular.php fra child theme.

Men hvad hvis både dit child- og dit parent tema har forekomster af den samme fil?

Lad os forestille os, at du tilføjer en page.php-fil til child theme i det forrige eksempel. Fordi dette tema er i child theme, tilsidesætter det den samme fil fra overordnet tema. Så når der vises en enkelt side, ville WordPress bruge den nye page.php-fil fra child theme.

Dette er grunden til, at oprettelse af et child theme giver dig mulighed for at tilpasse overordnet tema. Hvis du tilføjer en kopi af en skabelonfil fra dit overordnede tema til dit child theme og derefter redigerer den for at inkludere de tilpasninger, du vil foretage, bruger WordPress denne nye skabelonfil i stedet for den fra overordnet tema. Hvilket betyder, at dine tilpasninger bliver brugt, når du viser indhold, uden at du har redigeret overordnet tema. Nice!

Hvordan WordPress udfører funktioner fra parent- og child themes

Hvad hvis du ikke vil foretage tilpasninger til skabelonfilerne i dit tema, men til funktionerne?

Du kan også gøre dette. Først skal du tilfredsstille dig selv, at den rigtige måde at gøre dette på er via et child theme og ikke et plugin. Et eksempel kan være, hvor du vil redigere en funktion, der allerede er i overordnet tema, for eksempel den funktion, der udsender colophon i sidefoden.

Derefter føjer du de(n) nye funktion(er) til funktionsfilen i dit child theme eller til en inkluderingsfil, som du kalder fra funktionsfilen.

For at sikre, at din nye funktion tilsidesætter funktionaliteten fra dit overordnede tema, skal du forstå, hvordan du tilsidesætter funktioner. Der er tre måder at gøre dette på:

  • Ved at skrive en ny funktion med samme navn som en pluggbar funktion i dit overordnede tema.
  • Ved at fjerne funktionen i dit overordnede tema fra hooks, den blev knyttet til, og derefter skrive en ny funktion for at erstatte den.
  • Ved at skrive en ny funktion med højere prioritet end den originale funktion og kalde den via den samme hook, hvilket betyder, at den kaldes efter den originale funktion og derfor kan tilsidesætte eller udvide den.

Vi undersøger, hvordan du gør alle disse senere i dette indlæg. Men lad os først se på scenarierne, når du ville og ikke ville bruge et child theme.

Hvornår skal man bruge et tema i WordPress (fordele)

Du ved nu, hvad child theme er, og hvordan du kan bruge dem til at tilsidesætte skabelonfiler eller funktioner i dit overordnede tema.

Som en kort oversigt skal du bruge et child theme, hvis du kører et tema på dit websted, og du vil gøre et eller flere af følgende:

  • Rediger en eller flere af skabelonfilerne.
  • Tilføj ekstra funktioner, der er relateret til display og ikke funktionalitet.
  • Overskrive en eller flere funktioner fra overordnet tema.
  • Tilføj ekstra skabelonfil(er).

Nogle fordele inkluderer:

  • Nem udvidelse og tilpasning: Som det er indlysende, udvider et child theme funktionaliteten af ​​dets overordnede tema. Du har allerede en readymade-skabelon til din tjeneste i form af et overordnet tema, og alt hvad du skal gøre er at oprette en separat style.css-fil til dit child theme og tilføje tilpasningstips efter dine behov.
  • Problemfri opdateringer: Når WordPress udvikler sig, skal temaer og plugins opdateres en gang imellem. Hvis du foretager tilpasning af justeringer og ændringer af dit primære tema, kan du ende med at miste alle dine ændringer, hvis du nogensinde opdaterer temaet. Det tilrådes derfor at foretage sådanne ændringer i et child theme, således at selv hvis du nogensinde bliver pålagt at opdatere overordnede tema, har du ingen frygt for at miste dine ændringer.

Hvad med, når du ikke ville bruge et child theme?

Hvornår man ikke skal bruge et WordPress child theme (ulemper)

Der er tidspunkter, hvor du ikke bruger et child theme og skulle bruge en anden metode til tilpasning af dit websted. Disse er:

  • Hvis dit tema er et tema, har du udviklet dig selv (eller en anden skrev til dig) og behøver ikke at bruge det andre steder. Bare rediger temaet, så du bruger versionskontrol.
  • Hvis de tilpasninger, du vil foretage, er funktionelle, f.eks. tilføje en brugerdefineret indlægstype, og du vil gerne beholde dem, hvis du ændrer temaer i fremtiden. Brug et plugin i stedet.

Nogle ulemper inkluderer:

  • Valg af det ideelle overordnede tema: Ikke alle temaer fungerer som gode forældre! Visse WordPress-temaer, for eksempel, opdateres muligvis ikke regelmæssigt og har derfor en tendens til, at de mangler den nyeste funktionalitet. Tilsvarende er ikke alle WordPress-temaer oprettet med child themes i tankerne og kan som sådan tjene som dårlige kandidater til overordnede temaer. Du skal vælge det perfekte overordnede tema for at udvide det korrekt og få det til at fungere som et fundament for dit child theme
  • Tilpasnings-indsats: Et child theme søger dybest set at udvide og tilpasse et eksisterende skabelondesign. Så hvis du allerede har oprettet et websted omkring dit overordnede tema, skal du muligvis genoverveje tilpasning af elementer som menuer, temaindstillinger, sidebjælker, header osv., Når du flytter til et child theme.

Nu hvor du ved, hvornår (og hvornår ikke) du skal bruge et underordnet tema, er det tid til at komme på arbejde og lære at oprette et underordnet tema i WordPress.

Sådan opretter du et WordPress Child Theme

Opsætning af et grundlæggende underordnet tema i WordPress involverer oprettelse af to filer: stylesheet og functions-filen. Lad os se på dem begge.

Stylesheetet

Inden du opretter din fil, skal du oprette en mappe for at holde dit tema. Dette gælder i wp-content/themes fil i din WordPress-installation.

Husk: ikke gør dette på dit live site. Føj først koden til et udviklingssted, og test den derefter på dit scenested. Når du er tilfreds med det, kan du overføre det til dit live site. Alle Kinstas hostingplaner inkluderer scene.

Opret en fil kaldet style.css i mappen til dit nye tema. Føj følgende til det:

/*
Theme Name:  My Child Theme. Child for Twenty Nineteen.
Theme URI:  https://rachelmccollin.com
Description:  Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author:  Rachel McCollin
Textdomain:  mccollin
Author URI:  https://rachelmccollin.com/
Template:  twentynineteen
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

Denne tekst kommenteres. Det er ikke kode, der kører noget på dit websted eller giver nogen funktionalitet. I stedet fortæller det WordPress om temaet. Du har brug for tekst som dette i hvert tema, ellers kan WordPress ikke genkende det som et tema.

Lad os arbejde gennem hver af disse linjer for at identificere, hvad de gør:

  • Temanavn: Temaets unikke navn.
  • Tema URI: Hvor brugere kan finde koden eller dokumentationen til temaet.
  • Beskrivelse: Beskrivende tekst for at hjælpe brugerne med at forstå, hvad temaet gør.
  • Forfatter: dit navn
  • Tekstdomæne: dette bruges til internationalisering. Brug tekstdomænet som den anden parameter i enhver internationaliseringsfunktion.
  • Forfatter URI: Forfatterens websted.
  • Skabelon: Mappen, hvor overordnet tema er gemt. Brug mappenavnet og ikke temanavnet. Uden denne linje fungerer dit tema ikke som et child theme.
  • Version: Versionsnummeret
  • Licens: Licensen, der skal være GNU. [link]
  • Licens URI: Linket til oplysninger om licensen.

Den vigtigste linje for et child theme er Skabelon: linje. Uden dette fungerer temaet ikke som et child theme. Kun underordnede temaer inkluderer denne linje.

Føj dette til dit temas stilark, rediger det for at tilføje dine egne detaljer i stedet for mine. Du skal redigere skabelonen: linjen for at tilføje den mappe, dit eksisterende tema er gemt i, da det vil være dit overordnede tema.

Gem nu filen. Hvis du skulle se på skærmbilledet med temadetaljer på dit websted nu, ville du se alt dette vises:

Temasiden i WordPress uden skærmbillede
Temasiden i WordPress uden skærmbillede

Dette ser ikke strålende ud, fordi der ikke er nogen screengrab. Dette er et billede, der giver en idé om, hvordan temaet ser ud. Medmindre dit tema vil se meget anderledes ud end overordnet tema, skal du bare kopiere screenshot.png-filen fra dit overordnede tema til dit child theme.

Temasiden i WordPress med skærmbillede
Temasiden i WordPress med skærmbillede

Funktionsfilen

Det næste trin er at tilføje en funktionsfil til dit child theme. Du har brug for dette, så du kan markere stilarket fra overordnet tema. Uden det ville dit websted overhovedet ikke have nogen styling og ville se sådan ud:

Vores startside uden CSS
Vores startside uden CSS

Ikke godt, jeg er sikker på, at du er enig! Så lad os tilføje stylingen for at få den til at se ud som den skal.

Tilføj en fil, der hedder features.php i din child theme mappe. Åbn den og tilføj denne kode:

<?php
/* enqueue script for parent theme stylesheeet */        
function childtheme_parent_styles() {
 
 // enqueue style
 wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

Det bruger funktionen wp_enqueue_style() til at indstille stilarket fra overordnet tema, med funktionen get_template_directory_url(), hvor den fil er gemt. Funktionen er inde i en funktion, jeg har oprettet, kaldet kinsta_parent_style(), som er koblet til wp_enqueue_scripts hook.

Du spekulerer måske på, hvorfor den bruger en funktion kaldet wp_enqueue_scripts og ikke wp_enqueue_style. Dette skyldes, at wp_enqueue_scripts bruges til både scripts og stilarter, og der er ingen sådan hook som wp_enqueue_style.

Rediger gerne min kode for at tilføje dit eget præfiks til navnet på din funktion. Jeg har brugt “childtheme” som mit præfiks for at sikre, at min funktion ikke kolliderer med andre funktioner fra overordnet tema eller fra nogen plugins.

Gem nu din fil.

Sådan aktiveres dit WordPress Child Theme

Når dit child theme er klar, skal du aktivere det. Hvis du er bekymret for, at aktivering af underordnet tema vil deaktivere overordnet tema, skal du ikke bekymre dig: WordPress ved at bruge filerne fra overordnet tema, medmindre du tilføjer nye filer til child theme, der tilsidesætter dem. Indtil videre har du ikke tilføjet nogen ekstra filer eller funktioner til child theme, så dit websted fungerer på nøjagtig samme måde som det ville med det overordnede tema aktiveret.

Husk: Gør dette først på dit udviklings- eller scenested. Aktivér ikke dit barn-tema på dit live-sted, før du har testet det.

Gå til Udseende > Temaer i WordPress-administratoren. Du finder dit child theme opført blandt de temaer, der er installeret på dit websted.

Hold markøren over temaet, og klik på knappen Aktivér. Dette aktiverer dit child theme. Når du besøger dit live-websted, vil det se det samme ud som før:

Webstedets hjemmeside
Webstedets hjemmeside

Det ser ud på samme måde, fordi du ikke har tilføjet nogle tilpasninger endnu. Men du har nu et arbejdende child theme. Godt klaret!

Sådan tilpasses dit child theme i WordPress

Nu hvor du har et arbejdende child theme til dit WordPress-sted, er det tid til at tilføje dine tilpasninger. Her viser jeg dig, hvordan du tilføjer skabelonfiler til at tilsidesætte dem på dit overordnede tema, hvordan du tilføjer styling til dit child theme og hvordan du tilføjer nye funktioner.

Lad os starte med skabelonfiler.

Sådan føjes skabelonfiler til dit WordPress child theme

We’ve already looked at how WordPress chooses which template file to use when displaying content on your site. There are two things to remember:

  • WordPress bruger den fil, der kommer først i hierarkiet, enten fra child- eller det overordnede tema.
  • Hvis der findes en skabelonfil (eller en skabelondel som header.php) med samme navn i både overordnede og child theme, bruger WordPress den fra underordnet tema.

For at tilføje tilpasninger finder jeg det lettere at starte med at lave en kopi af den relevante fil fra overordnet tema, tilføje det til child theme og derefter redigere det.

Dette gælder, uanset om filen i dit child theme vil være den samme navngivne fil som i det overordnede tema, eller om det vil være en ny fil til visning af en anden indholdstype eller en der er højere i hierarkiet.

Så hvis jeg tilføjer en ny version af page.php til mit child theme, som tilsidesætter page.php i mit overordnede tema, kopierer jeg page.php fra mit overordnede tema til mit child theme og redigerer det derefter. Sørg for at kopiere filen: ikke flyt den, da du ikke ønsker at foretage ændringer i overordnet tema.

Og hvis jeg f.eks. vil have en brugerdefineret sideskabelon i mit child theme, kopierer jeg page.php til mit child theme, omdøber det og redigerer det derefter.

På denne måde kan du sikre dig, at alle aspekter af filen, som du ikke behøver at tilpasse, stadig fungerer korrekt. Det samme gælder for skabelondele.

Sådan føjes styling til dit WordPress child theme

Du kan også tilføje styling til dit child theme stil.css-fil, som vil forøge eller tilsidesætte stylingen i dit overordnede temas stilark.

WordPress kalder først stilarket fra overordnet tema og derefter stilarket fra child theme. Dette betyder, at hvis du tilføjer styling til child theme, der er målrettet mod det eller de samme elementer som styling i overordnet tema, vil det tilsidesætte stylingen fra det overordnede tema, så længe du bruger de samme valg.

Så forestil dig, at du vil ændre farven på websitets titel. I overordnet tema kan dette være stylet som sådan:

h1.site-title {
 color: #000;
}

For at tilsidesætte dette under dit child theme, tilføjer du dette:

h1.site-title {
 color: #303030;
}

Da browseren vil støde på dette efter stylingen i overordnet tema, tilsidesætter den det og bruges i stedet.

Sådan føjes funktioner til dit WordPress child theme

Så du har oprettet et child theme i WordPress, ikke fordi du vil redigere nogle af ​​skabelonfilerne, men fordi du vil tilføje ekstra funktionalitet eller tilsidesætte en eller flere af funktionerne i overordnet tema.

Skrivefunktioner i dit child theme er lidt mere kompliceret end at tilføje skabelonfiler, men det er muligt.

Hvis du vil tilføje en ny funktion, der ikke interagerer med nogle af ​​funktionerne i dit overordnede tema, kan du bare gå videre og gøre det. Bare tilføj funktionen til filen features.php i dit child theme, tilslut den til den relevante handling eller filter-hooks, og du er godt kørende.

Men hvis du planlægger at overskrive eller redigere en funktion i overordnet tema, skal du forstå de metoder, du kan bruge til at gøre dette. Der er tre måder, du kan overskrive en overordnet temafunktion i dit child theme:

  • Hvis temaet i overordnet tema er tilsluttet, skriver du blot en anden funktion i dit child theme med samme navn, og WordPress kører den funktion i stedet for den i overordnede tema.
  • Hvis du vil stoppe funktionen i det overordnede tema i at køre helt, kan du skrive en funktion i dit child theme, der fjerner den fra den hook, den er knyttet til.
  • Hvis du vil udvide en funktion, kan du tilføje en anden funktion (med et andet navn) i dit child theme og sørge for, at den kører efter den i overordnede tema.

Lad os se nærmere på, hvordan du gør hver enkelt.

At tilsidesætte en plug funktion

En plug funktion identificeres ved den betingede kontrol, der er pakket rundt om den. Dette kontrollerer, om der er en anden funktion med det samme navn, der allerede er fyret. I så fald kører den ikke funktionen.

WordPress udløser funktioner fra dit child theme før dem fra overordnet tema. Hvis den støder på en plug funktion i overordnet tema, og du har tilføjet en funktion til dit child theme med samme navn, kører den plug funktion ikke.

Et eksempel er den funktion, der udsender colophon i Storefront-temaet for WooCommerce-websteder. Her er funktionen uden dens indhold:

if ( ! function_exists( 'storefront_credit' ) ) {
 function storefront_credit() {
  // contents for function here
 }
}

Hvis du ville overskrive, at du ville skrive en anden funktion med samme navn (storefront_credit()) og koble den til den samme hook som i overordnet tema.

Fjernelse af en funktion fra overordnet tema

Hvis funktionen fra overordnet tema ikke er tilsluttet, kan du stadig forhindre, at den kører. Forestil dig, at dit overordnede tema har en funktion kaldet parent_function(), som er koblet til init-hook med en prioritet på 20. Du ønsker at forhindre, at den kører, så du kan erstatte den med en egen funktion.

Sådan ser den overordnede tema-funktion ud:

function parent_function() {
 //contents of function here
}
add_action( 'init', 'parent_function', 20 );

For at fjerne det, skal du kode dette i dit child theme:

function remove_parent_function() {
 remove_action( 'init', 'parent_function', 20 );
}
add_action( 'wp_head', 'remove_parent_function' );

Bemærk, at du kobler din anden funktion til wp_head-hook, der køres øverst på hver side, og at du skal inkludere den samme værdi for prioritetsparameteren som i den originale funktion. Hvis den originale add_action() -funktion ikke havde en prioritet, kan du udelade det fra dit child themes remove_action() -funktion.

Bemærk: Hvis den originale funktion blev koblet til en filter-hook i stedet for en handling-hook, ville du bruge remove_filter() på samme måde.

Forøgelse af en funktion med en anden funktion

I stedet for at tilsidesætte eller fjerne en funktion, kan du sommetider føje til den i stedet. I dette tilfælde ville du skrive en ny funktion med et andet navn og vedhæfte den til den samme hook.

Lad os forestille os, at der er en handlings-hooktil sidefoden i dit overordnede tema kaldet parent_footer. Enhver funktion, du knytter til den hooks, kører på det sted, hvor hook er placeret.

I overordnet tema er der allerede en funktion kaldet parent_footer_content(), der udfylder sidefoden. Men hvad nu hvis du ville tilføje noget ekstra kode til det?

Sådan ser funktionen parent_footer_content() ud i overordnet tema:

function parent_footer_content() {
 // content of function here
}
add_action( 'parent_footer', 'parent_footer_content' );

Hvis du nu ville tilføje yderligere indhold efter det, ville du oprette en funktion i dit child theme, koblet til den samme handlings-hook, med en prioritet, der betød, at den køres efter den første funktion. Da prioriteten ikke er indstillet til det overordnede temaets funktion, er den standard til 10. Så du skal bruge et højere tal, så det udløses efter det.

function child_footer_extra_content() {
 // contents of function here
}
add_action( 'parent_footer', 'child_footer_extra_content', 20 );

Dette tilføjer koden fra dit child themes funktion efter koden fra dit overordnede temas funktion.

Sådan foretages fejlfinding på temaer til child og parent

Så nu ved du, hvordan man opretter et underordnet tema i WordPress, og hvordan man bruger det til at tilsidesætte skabelonfiler, tilføje ekstra styling og føje funktionalitet til dit websted.

Men hvad nu hvis dit child theme ikke fungerer som du forventede? Hvad hvis indholdet ikke vises, som du forventede, eller en funktion ikke tændes?

Brug denne tjekliste til at fejlfinde dit child themes:

  1. Kontroller, at du har aktiveret dit child theme, og at dit overordnede tema stadig ikke kører. Det er overraskende let at glemme dette trin!
  2. Opdater din browser-cache og cachen oprettet af eventuelle plugins på dit websted.
  3. Indstil wp-debug til sand i dit child themes wp-config.php-fil. Hvis du ser på en hvid skærm, skal der være en meddelelse, der fortæller dig, hvilken kode der har forårsaget problemet, og hvilken fil det er i. Dette vil hjælpe dig med at identificere fejlen, og hvilken fil der bruges.
  4. Kontroller outputkoden for din side, post eller arkiv. Find body-elementet og se, hvilke klasser det har. Disse fortæller dig, hvilken type indhold du ser på, som vil hjælpe dig med at identificere, hvilken skabelonfil der bruges. Nogle gange er det ikke, hvad du forventer. For eksempel bruger den primære blogside aldrig archive.php, selvom den viser et arkiv med dine indlæg.
  5. Kontroller, at du har navngivet dine filer korrekt. Se skabelon-hierarkiet for at være sikker på, at du har brugt den rigtige syntaks.
  6. Hvis du duplikerede en fil fra overordnet tema og føjede den til dit child theme, skal du kontrollere, at du har gemt dine ændringer.
  7. Hvis en funktion til tilsidesættelse af en plug funktion ikke fungerer, skal du kontrollere, at du har givet den nøjagtigt det samme navn som den plug funktion, og at funktionen i overordnet tema faktisk er tilsluttet.
  8. Hvis en funktion, du har fjernet, stadig tændes, skal du kontrollere, at du har tilføjet den rigtige prioritet, og at din stavemåde er identisk med stavningen af ​​funktionen og krogen i overordnet tema.
  9. Hvis du brugte prioritet til at tilsidesætte eller forøge en funktion, kan du prøve at øge prioritetsværdien, så du kan være helt sikker på, at den fyrer sidst. Kontroller, at der ikke er andre funktioner knyttet til den hook, der forstyrrer din kode.

Forhåbentlig hjælper et eller flere af disse trin dig med at identificere problemet og løse det i dit child theme. Husk: rediger ikke overordnet tema direkte.

Nyttige tip, når du arbejder med WordPress child themes

Pyha! child themes er temmelig et emne og en utrolig værdifuld funktion ved WordPress. Jeg bruger dem på hvert websted, jeg bygger.

For at hjælpe dig med at finde de metoder, du skal bruge til at gøre den mest effektive brug af child themes, her er mine tip til at hjælpe dig med dem:

  • Hvis du har brug for at redigere et tredjeparts tema, skal du altid bruge et child theme i stedet. På denne måde mistes dine ændringer ikke, når du opdaterer temaet.
  • Hvert child theme har brug for et stilark og en funktionsfil.
  • WordPress bruger skabelonhierarkiet til at bestemme, hvilken skabelonfil, der skal bruges, når der udsendes indhold. Hvis den finder to filer med samme navn, bruger den den fra child theme.
  • Du kan tilsidesætte en plug funktion i dit overordnede tema ved at skrive en funktion med det samme navn i dit child theme.
  • Du kan fjerne en funktion fra det overordnede tema ved hjælp af en funktion med remove_action() eller remove_filter() i dit child themes og derefter skrive en ny funktion.
  • Du kan udvide en funktion i dit overordnede tema ved at skrive en funktion i dit barnets tema og koble den til den samme handling eller filterhook.
  • Glem ikke at aktivere dit child theme, når du uploader det. Og sørg for, at ingen sletter det overordnede tema fra din WordPress-installation: uden det fungerer child themes ikke.

Resumé

Child themes er en nyttig funktion i WordPress, der giver dig mulighed for at tilpasse et tema uden direkte redigering af dets kode. Du kan bruge en til at tilføje yderligere funktionalitet til et tema, til at tilpasse stylingen eller til at oprette / redigere skabelonfiler.

Hvis du følger rådene ovenfor, vil du være i stand til at oprette child themes i WordPress efter bedste praksis og drage fordel af dem til en række forskellige opgaver. Alt uden at miste dine ændringer og tilpasninger, når du opdaterer overordnet tema.

Rachel McCollin

Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.