Sådan opretter du et undertema i WordPress: En nem guide 

Som ejer af en WordPress-hjemmeside er det kun naturligt, at du vil lege med hjemmesidedesign og funktionaliteten i WordPress-temaer. Men hvad er den bedste måde at gøre det på uden at rode med det originale tema? Et undertema i WordPress er en fantastisk måde at ændre og teste dit tema på uden at risikere at forstyrre dit originale tema.

Brug af et WordPress-undertema er en smart måde at tilpasse dit temas kode sikkert på uden at risikere dit arbejde. Hvis du planlægger at foretage ændringer i dit temas CSS , HTML eller PHP , er et undertema vejen frem. Hvorfor? Fordi uden et kan opdateringer til dit hovedtema udslette dine ændringer.

For at gøre det nemt har vi sammensat en begyndervenlig guide, der forklarer, hvordan et child theme fungerer, hvordan man konfigurerer det, og hvordan man foretager de ønskede ændringer. Gå i gang og tilpas med selvtillid!

Forståelse af barntemaer i WordPress

Et undertema er, som navnet antyder, som et "tilføjelsesprogram" til dit hoved- eller overordnede tema , der arver dets funktioner og stilarter. Når du ønsker at tilpasse dit WordPress-tema, kan det være risikabelt at dykke direkte ned i temafilerne, fordi eventuelle ændringer kan ændre kernetemaet. Det er her, undertemaer kommer ind i billedet, de er en sikrere måde at foretage ændringer på uden at røre ved de originale filer.

Undertemaet arver automatisk hovedstilen fra overordnet temas style.css-fil, som angiver temaets overordnede udseende og funktionalitet. Med et undertema kan du nemt justere eller tilføje til denne stil ved at tilføje dine egne filer eller foretage justeringer af de eksisterende. Dette giver dig fleksibiliteten til at tilpasse temaet uden at ændre de originale filer.

Underordnede temaer gemmes i deres egen mappe, adskilt fra det overordnede tema, og er afhængige af det overordnede tema for funktionalitet, medmindre du beslutter dig for at ændre tingene. Når du aktiverer et underordnet tema i WordPress, linkes det til det overordnede tema, og WordPress vil først kontrollere underordnede temafiler. Hvis en fil ikke er blevet ændret, vil WordPress blot bruge den overordnede version.

Husk dog, at et undertema ikke kan fungere alene. Det kræver, at overordnet tema er installeret lige ved siden af ​​det for at fungere korrekt.

Læs om: Outsource WordPress plugin og temaudvikling

Fordele ved at bruge et børnetema i WordPress

At oprette et undertema er en smart måde at foretage ændringer på dit WordPress- websted uden risiko for at miste alt dit hårde arbejde. Hvis du skulle redigere overordnet temas filer direkte, ville dine tilpasninger blive slettet, hver gang temaet opdateres. Dette kan efterlade dig med et frustrerende valg: enten springe alle fremtidige opdateringer over, hvilket kan føre til kompatibilitets- og sikkerhedsproblemer, eller opdatere og miste den tid og kræfter, du har lagt i at tilpasse dit WordPress-tema .

Med et undertema behøver du dog ikke at træffe det valg. Alle dine ændringer gemmes sikkert i en separat mappe, hvilket betyder, at du kan beholde dine ændringer, selvom overordnet tema opdateres. Derudover gør denne opsætning det nemt at flytte dine tilpasninger fra et websted til et andet, hvis du har brug for det, hvilket sparer dig tid, hvis du arbejder på tværs af flere websteder eller migrerer til et nyt.

En anden stor fordel ved at bruge et undertema er, at det er en fantastisk måde at lære om udvikling af brugerdefinerede temaer i et lavrisikomiljø. Du kan eksperimentere med ændringer og nye funktioner, og hvis noget ikke går som planlagt, kan du blot deaktivere undertemaet. Dit websted vil øjeblikkeligt vende tilbage til det oprindelige udseende og funktionalitet fra overordnet tema, så der er ingen skade sket.

Lær om: Sådan redigerer og tilpasser du problemfrit overskrifter i WordPress?

Ting du skal gøre, før du opretter et børnetema i WordPress

Nu har vi set mange WordPress-brugere, der er ivrige efter at kaste sig ud i at tilpasse deres websteder, kun for at støde på en mur, når der opstår uventede fejl. Det er fuldt forståeligt, at det kan virke spændende at komme i gang med et child theme, indtil de tekniske udfordringer begynder at dukke op.

Derfor er det vigtigt at forberede sig lidt, inden du går i gang, ligesom du ville forberede dig, inden du tager en eksamen. Her er et par tips, du kan tage, før du begynder at oprette dit child theme:

Forstå det grundlæggende i kode

At arbejde med et child theme betyder, at du kommer til at arbejde med kode. Som minimum vil en grundlæggende forståelse af HTML, CSS og PHP være nyttig (og muligvis JavaScript, hvis du vil være mere avanceret). Hvis du er ny inden for kodning, er WordPress-temahåndbogen et godt sted at starte for hurtig vejledning.

Lær: Sådan konverterer du Figma til kode: React, HTML, Vue, JS, CSS

Vælg det rigtige overordnede tema

Vælg et overordnet tema, der allerede ligner det udseende og den funktionalitet, du ønsker. Ideelt set finder du et, der kun kræver et par justeringer, hvilket gør din tilpasningsproces mere problemfri. Hvis du skifter tema helt, kan du tjekke vores tjekliste over ting, du skal gøre, før du skifter WordPress-tema, det vil spare dig for potentielle hovedpiner!

Brug et lokalt eller et teststed

Det er bedst at eksperimentere på en lokal hjemmeside eller et testsite i stedet for at gå direkte til din live hjemmeside. På denne måde påvirker du ikke din live hjemmesides udseende eller funktionalitet, hvis du laver en fejl.

Opret en sikkerhedskopi af dit websted

Før du foretager ændringer, skal du sikkerhedskopiere dit websted. Hvis det er første gang, kan et plugin som Duplicator gøre sikkerhedskopieringsprocessen enkel og stressfri. På denne måde kan du hurtigt gendanne dit websted, hvis noget ikke går som planlagt.

Når du har styr på disse grundlæggende ting, er du klar til at følge vores trinvise guide til at skabe dit barns tema med selvtillid!

Lær: Bedste løsninger til sikkerhedskopiering af flere WordPress-websteder

Sådan opretter du et børnetema manuelt i WordPress: 5 nemme trin

Det er nemmere at oprette et child theme i WordPress, end det lyder, og det er en fantastisk måde at forstå, hvordan child themes fungerer, uden at risikere dit hovedtema.

Lad os gennemgå, hvordan man opretter et child theme baseret på WordPress' standard Twenty Fifteen-tema, og foretager et par brugerdefinerede justeringer for at se processen i aktion.

Trin 1: Opret en underordnet temamappe

Start med at oprette en ny mappe på din computer, hvor alle filerne til dit child theme skal placeres. Du skal senere uploade denne mappe til din hjemmeside.

Du kan navngive mappen efter dit overordnede tema med "-child" tilføjet til sidst. Hvis dit overordnede tema for eksempel hedder "Twenty Twenty-Two", vil din underordnede temamappe hedde twentytwentytwo-child. Dette gør det nemt at identificere det som et underordnet tema for overordnet.

Trin 2: Opsæt et stylesheet til dit child theme

Opret derefter en style.css-fil i din nye mappe med undertemaet. Denne fil vil indeholde alle de brugerdefinerede stilarter til dit undertema.

For at konfigurere stylesheet korrekt skal du tilføje følgende headerkommentarer øverst i din style.css-fil. Dette fortæller WordPress, at dit nye tema er et underordnet tema af det overordnede tema:

Temanavn: Twenty Twenty-Two Undertema-URI: https://wordpress.org/themes/twentytwentytwo/ Forfatter: WordPress Team Forfatter-URI: https://wordpress.org/ Skabelon: twentytwentytwo Beskrivelse: Undertema til Twenty Twenty-Two Version: 1.0 */

Når du har gemt, skal du gå til dit WordPress Dashboard og vælge Udseende → Temaer . Du burde nu se dit child theme angivet.

Trin 3: Forbind stylesheets for overordnede og underordnede temaer

For at sikre, at stilarterne fra dit overordnede tema anvendes, skal vi linke dets stilark til undertemaet. Dette gøres ved at oprette en functions.php-fil i din undertemamappe og tilføje følgende kode:

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

Denne kode vil indlæse det overordnede temas stylesheet, så dit undertema arver al dets styling.

Lær: Sådan reparerer og retter du en WordPress-database?

Trin 4: Rediger undertemaets stylesheet (style.css)

Du kan nu begynde at tilføje dine brugerdefinerede stilarter direkte i child-temaets style.css-fil. For eksempel, for at ændre farven på links på dit websted, kan du tilføje:

en {farve: #D54E21;tekstdekoration: ingen;}

Denne regel tilsidesætter det overordnede temas linkstyling uden at påvirke resten af ​​dets design.

Vid: Skal du bygge din hjemmeside med kode, uden kode eller med en hjemmesidebygger?

Trin 5: Rediger en skabelonfil

Med et undertema kan du også ændre individuelle skabeloner. Lad os sige, at du vil ændre den måde, indlæg vises på, ved at redigere single.php-filen.

• Kopier single.php fra det overordnede tema, og indsæt det i din underordnede temamappe.
• Åbn filen i en teksteditor, og foretag dine ændringer.

Hvis du for eksempel vil fjerne kommentarfeltet fra sider med enkelte indlæg, skal du finde denne del af koden:

hvis (kommentarer_åbne() || hent_kommentarer_nummer()): kommentarskabelon(); endif;

Slet det eller kommenter det ud for at skjule kommentarerne. WordPress bruger den modificerede single.php-fil fra undertema-mappen, så eventuelle opdateringer til det overordnede tema overskriver ikke din tilpasning.

Lær: Hvordan opretter man en brugerdefineret sideskabelon i WordPress?

Sådan opretter du et undertema med et plugin (ingen kodning kræves)

Hvis du ikke er interesseret i kodning, men stadig gerne vil oprette et child-tema, så er du heldig! Selvom der findes flere plugins, du kan bruge til at oprette et child-tema i WordPress, bruger vi -The Child Theme Configurator plugin til at forklare processen.

Dette plugin gør det super nemt at opsætte og tilpasse et child theme til klassiske (ikke-block) WordPress-temaer. Her er en simpel, trin-for-trin guide til at komme i gang.

Trin 1: Installer og aktivér plugin'et

Først skal du gå til dit WordPress-dashboard, søge efter “Child Theme Configurator” i afsnittet Plugins, og installere det. Når det er aktiveret, skal du gå til Værktøjer → Underordnede Temaer .

Trin 2: Opsæt børnetemaet

I konfiguratoren af ​​undertemaet skal du gå til Forælder/underordnet . Du vil se en mulighed for at vælge en handling. Vælg "OPRET et nyt undertema" for at komme i gang.

Trin 3: Vælg dit overordnede tema

Vælg derefter det overordnede tema, du vil bygge videre på, fra rullemenuen. I dette eksempel bruger vi Hestia-temaet. Når du har valgt dit tema, skal du klikke på knappen "Analyser" for at sikre, at temaet er kompatibelt med oprettelse af et underordnet tema.

Trin 4: Navngiv din underordnede temamappe

Du bliver derefter bedt om at navngive den mappe, hvor undertemaet skal gemmes. Du kan være kreativ her eller holde det enkelt med et navn som "Hestia-child" for at holde tingene organiseret.

Trin 5: Beslut, hvor du vil gemme brugerdefinerede stilarter

Her er et vigtigt valg: Du kan gemme nye brugerdefinerede stilarter i det primære stylesheet (style.css) i dit child theme eller i en separat stylesheet-fil.

• Primært stilark : Dette er hovedfilen, hvor stilarter gemmes som standard. Eventuelle ændringer her vil overskrive de originale temastilarter.

• Separat stilark : Denne indstilling gemmer dine brugerdefinerede stilarter i en ny fil, så det originale temas stilarter forbliver uændrede.

For nu bruger vi det primære stylesheet, men du kan prøve den separate mulighed, hvis du vil bevare det overordnede temas udseende helt.

Læs mere: De bedste webdesignværktøjer til fantastiske og nemme hjemmesider

Trin 6: Indstil håndtering af overordnet tema-stylark

Rul ned og vælg, hvordan du vil indlæse det overordnede temas stylesheet. Vi holder os til standardindstillingen "Brug WordPress-stilkøen", da dette tillader pluginet at håndtere det automatisk.

Trin 7: Tilpas detaljer om undertemaet

Når du når trin 7, skal du klikke på "Klik for at redigere attributter for undertemaet". Her kan du tilføje detaljer som undertemaets navn, beskrivelse og version.

Trin 8: Kopiér menuer og widgets

Normalt vil oprettelsen af ​​et undertema nulstille dine menuer og widgets. For at undgå at nulstille disse skal du markere feltet i trin 8 for at kopiere dem fra overordnet tema til undertemaet.

Opret dit børnetema

Klik til sidst på “Opret nyt undertema”. Plugin'et opretter automatisk en mappe til dit undertema, komplet med de style.css- og functions.php-filer, der er nødvendige til fremtidige tilpasninger.

Forhåndsvisning og aktivering

Før aktivering skal du klikke på forhåndsvisningslinket øverst på skærmen for at sikre dig, at alt ser godt ud. Hvis forhåndsvisningen af ​​dit barntema vises fint uden at ødelægge nogen elementer, skal du klikke på "Aktiver og udgiv" for at gøre det live!

Og sådan er det! Dit undertema er nu aktivt. På dette tidspunkt vil det se ud og fungere præcis som dit overordnede tema. Du kan nu trygt tilføje tilpasninger til undertemaet uden at påvirke originalen. God fornøjelse med tilpasningen!

Lær om: De bedste WordPress Studio-temaer til kreative virksomheder

Hvad skal man gøre, hvis dit WordPress-barntema ikke virker?

Viser dit undertema ikke dine ændringer? Bare rolig, her er nogle almindelige problemer og løsninger, der kan hjælpe dig med at få det til at fungere som forventet.

Dobbelttjek din functions.php-fil

Start med at sørge for, at du har sat child-temaets stylesheet i kø i din functions.php-fil. Hvis det ikke er sat i kø, vil child-temaet ikke indlæses korrekt, og dit websted vil fortsætte med at vise det overordnede tema, hvilket får det til at se ud som om dine ændringer ikke vises.

Interessant læsning: Laravel vs. WordPress: PHP's bedste rivaler mødes

Bekræft, at dit stylesheet hedder style.css

Dobbelttjek, at du har navngivet dit stylesheet style.css, ikke stylesheet.css eller noget andet. WordPress forventer, at child-temaets primære stylesheet hedder style.css. Hvis det har et andet navn, vil din functions.php-fil ikke genkende det, og dine brugerdefinerede styles vil ikke gælde.

Bekræft skabelonnavnet i style.css

I din style.css-fil skal skabelonfeltet matche navnet på dit overordnede temas mappe præcist. Dette fortæller WordPress, hvilket tema der skal bruges som overordnet tema. Hvis navnet er forkert, ved WordPress ikke, hvilket tema undertemaet skal baseres på.

Ryd din cache

Nogle gange kan caching forhindre dig i at se opdateringer. Prøv at rydde din caching, især hvis du bruger et caching-plugin. Det er også nyttigt at rydde din browsercache eller åbne dit websted i et inkognitovindue for at se, om dine ændringer vises. Hvis du arbejder aktivt på child theme, bør du overveje at deaktivere eventuelle caching-plugins, indtil du er færdig.

Brug !important i din CSS-kode

Hvis du oplever, at det overordnede temas stilarter stadig tilsidesætter din brugerdefinerede CSS, kan du prøve at tilføje !important til de stilarter, du vil prioritere. Dette vil tvinge dit underordnede temas stilarter til at have forrang over det overordnede. For eksempel:

p {baggrundsfarve: grå !vigtig;}

Dette trick kan være nyttigt for specifikke elementer, ID'er og CSS-klasser for at sikre, at dine ændringer anvendes.

Kontakt temasupport eller tjek fora

Hvis du har prøvet alle disse trin, og dit undertema stadig ikke virker, kan du overveje at kontakte temaets supportteam eller tjekke temaets forum på WordPress.org . Nogle gange har temaer unikke konfigurationer eller brugerdefineret kode, der kan påvirke, hvordan undertemaer fungerer, og udvikleren har muligvis specifikke råd.

Konklusion

Og det var overstået! Nu burde du have en solid forståelse af, hvad et WordPress-undertema er, og hvordan det fungerer sammen med et overordnet tema. Installation af et tema er kun begyndelsen, når man bygger et WordPress-websted.

Selvom den indbyggede Gutenberg-editor eller dit temas builder kan hjælpe dig med at foretage designjusteringer, åbner oprettelsen af ​​et child theme op for endnu flere muligheder. Med et child theme kan du ikke kun justere designet, men også tilpasse funktionaliteten uden at røre ved kernefilerne, hvilket giver dig total frihed til at gøre dit websted virkelig unikt.

Ofte stillede spørgsmål om oprettelse af et undertema i WordPress