Instructies: Child-Theme voor WordPress maken en gebruiken

Pascal Prohl Laatst bijgewerkt op 10/23/2020
7 Min.
kind theme opgezet
Laatst bijgewerkt op 10/23/2020

De markt van WordPress -Themes is groot - u vindt een geschikte Theme voor bijna elk project. Maar wat als u wijzigingen wilt aanbrengen in het ontwerp? Je wilt tenslotte opvallen. Als kleine kleurwijzigingen kunnen worden doorgevoerd met slechts een paar regels CSS code in de customizer, is de situatie anders voor meer complexe wijzigingen. Dit vereist meestal een diepgaande ingreep in de Theme bestanden om de gewenste resultaten te bereiken. Om dit niet in chaos te laten eindigen, moet je in deze gevallen altijd een Kind-Theme gebruiken. Wat zo'n kindTheme is en welke voordelen het met zich meebrengt, zult u in dit artikel leren.

Wat is een Kind-Theme?

Het officiële Theme handboek legt uit wat een zogenaamd kindTheme is. Dit is dan ook een Theme, die individuele aanpassingen aan de ouderTheme mogelijk maakt en de afhandeling daarvan vereenvoudigt. De parent-Theme is precies wat je kent als een normale WordPress -Theme (dus bijvoorbeeld Avada).

Hoe vindt u de juiste WordPress -Theme voor uw behoeften onder de vele aanbiedingen, kunt u lezen in deze blog post.

Nu het belangrijke verschil: het kind-Theme erft het basisontwerp en de functionaliteit van het ouder- Themes. Aanpassingen die worden doorgevoerd op het kindTheme overschrijven de functionaliteit van de ouderThemes.

In de praktijk blijft de ouderTheme onaangeroerd, zelfs bij uitgebreide wijzigingen. Wijzigingen worden alleen aangebracht in bestanden met dezelfde naam in het kind-Themes . Dit resulteert in tal van voordelen die het gebruik van Child-Themes zo aantrekkelijk maken.

Wanneer is een Kind-Theme zinvol?

Kind-Themes zijn onmisbaar als u uw WordPress -Theme wilt bijstellen en niet wilt verliezen. U zult de redenen ten laatste zelf te weten komen wanneer u wijzigingen hebt aangebracht in de bestanden Theme en vervolgens updates van Themes importeert. Want als een Theme wordt bijgewerkt, worden alle Theme bestanden overschreven en gaan ook de afzonderlijke aanpassingen logischerwijs verloren.

Kind-Themes zijn vooral geschikt voor code beginners en nieuwkomers. Zij kunnen de functionaliteit van een bestaande Themes gebruiken als basis om hun eigen wensen te implementeren met de hulp van een kindThemes . Hier is het niet nodig om een volledige WordPress -Theme vanaf nul te ontwikkelen, wat ook een tijdsvoordeel betekent.

In het algemeen kan worden gezegd dat u enige basiskennis moet hebben op het gebied van WordPress en webontwikkeling, zodat een Child-Theme u niet alleen een voordeel oplevert, maar u het ook veilig kunt gebruiken.

Voor wie is een Kind-Theme niet geschikt?

KindThemes is meestal meer geschikt voor gebruikers die grote veranderingen aanbrengen aan hun Themes . Als u weinig ervaring hebt met webontwikkeling en uw wijzigingen beperkt blijven tot een paar regels CSS-code, is een kindTheme niet absoluut noodzakelijk. U kunt deze wijzigingen ook gemakkelijk aanbrengen in de customizer van WordPress .

Ook moeten wijzigingen die via de opties van de geïnstalleerde WPThemes kunnen worden gemaakt niet via een kindTheme worden doorgevoerd. Dit kunnen eenvoudige kleurwijzigingen zijn, headerafbeeldingen of andere lay-outopties waarvoor de ontwikkelaar reeds heeft gezorgd. Een Kind-Theme zou uw website WordPress onnodig vertragen. Ook het overzicht is zo snel verloren.

Als uw wijzigingen binnen een Kind-Themes een bepaalde omvang overschrijden, kunt u beter een aparte Theme maken - dit wordt overigens ook aanbevolen door de WordPress -Codex. Waarom? Als u te veel functionaliteiten en bestanden wijzigt, kunnen er problemen ontstaan bij het bijwerken van de bovenliggendeThemes .

Waar kan ik die Theme krijgen?

Gebruikers van vele bestsellers zoals Enfold, Avada en Co. kunnen blij zijn. Dit komt omdat talrijke Theme aanbieders reeds kant-en-klare kindThemes sjablonen aanbieden om te downloaden voor hun eigen WordPress sjablonen. Avada, bijvoorbeeld, bevat al een geschikt kindTheme. Gebruikers van het populaire Themes Divi daarentegen moeten het nog steeds zelf doen - ondanks talrijke verzoeken van gebruikers - of een geprefabriceerd kindTheme van de gemeenschap gebruiken. 

Voordat u zelf aan de slag gaat, moet u dus altijd eerst bij de aanbieder nagaan of hij dit al voor u heeft geregeld. Zij kunnen immers het beste garanderen dat het kindTheme met de bijbehorende WP template vlekkeloos werkt.

Maak Kind-Theme jezelf

Als uw provider geen kindTheme aanbiedt om te downloaden, is dit geen groot probleem. Het maken van zo'n Themes is relatief eenvoudig en vereist slechts wat tijd, basis webontwikkelingsvaardigheden en S/FTP-toegang of SSH-toegang tot uw website. Het gebruik van een code-editor wordt ook aanbevolen.

Uiteindelijk zullen drie eenvoudige bestanden ervoor zorgen dat u de voordelen van een kindThemes kunt benutten. Volg gewoon de instructies hieronder:

Stap 1: Map maken

Indien u toegang heeft gekregen tot uw website via FTP, moet u eerst navigeren naar de Theme map (/wp-content/themes /) van uw WordPress installatie. Hier hoef je alleen de map van je kindThemes aan te maken. 

kind theme map aangemaakt
In dit voorbeeld heb ik de map aangemaakt voor de Kind-Theme van de WordPress -Themes TwentyFifteen.

U kunt de naam vrij kiezen, maar voor een beter overzicht is het aan te bevelen gewoon een "-child" toe te voegen aan de naam van de map van de ouderThemes . Als u een kindTheme maakt voor de WordPress -Theme TwentyFifteen, zou de juiste mapnaam twentyfifteen-child zijn.

Stap 2: Maak style.css

In de volgende stap is een stylesheet nodig met de naam style.css, die zijn plaats direct vindt in de eerder gemaakte map.

Dit bestand moet worden gevuld met de volgende inhoud:

/*
 Theme  Naam: Twenty Fifteen Kind
 Theme  URI: http://example.com/twenty-fifteen-child/
Beschrijving: Twenty Fifteen Kind Theme
Auteur: John Doe
Auteur URI: http://example.com
Sjabloon: twentyfifteen
Versie: 1.0.0
Licentie: GNU Algemene openbare licentie v2 of later
Licentie URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: licht, donker, twee kolommen, rechter zijbalk, responsive-layout, klaar voor toegankelijkheid
Tekstdomein: twentyfifteenchild
*/

De header van het stylesheet bevat diverse informatie over het kindTheme. Met uitzondering van twee regels is deze informatie niet verplicht.

Theme -Naam en Sjabloon moeten ingevuld zijn om het Kind-Theme te laten werken. Sjabloon zorgt ervoor dat WordPress het verband tussen kind en ouder kan herkennenTheme . De opgeslagen informatie (in het voorbeeld: twentyfifteen) in het kind-Theme moet dus overeenkomen met de informatie in de stylesheet van de ouder Themes .

Stap 3: Maak functions.php

In de derde stap moet je de functions.php van je kindThemes aanmaken. De inhoud van dit bestand zorgt ervoor dat het stylesheet van de bovenliggendeThemes wordt geladen.

Kopieer de volgende inhoud in het PHP-bestand met de naam functions.php:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() { 

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    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')
      );
    }

Wanneer u de Child-Themes gebruikt voor aanpassingen, zult u later ook functie-uitbreidingen aan dit bestand toevoegen.

Stap 4: Screenshot voor uw Kind-Theme

De vierde stap is niet verplicht. Als u wilt dat een screenshot van het kindTheme wordt weergegeven in het Theme overzicht binnen uw WordPress installatie, kunt u hiervoor geschikt beeldmateriaal opslaan.

afgewerkte map
Dit is hoe de afgewerkte map van de Child-Themes eruit zou moeten zien, inclusief de schermafbeelding aan het einde.

WordPress gebruikt automatisch een bestand met de naam screenshot.png, dat zich in de hoofdmap van het kindThemes bevindt. Je kunt hier je creativiteit de vrije loop laten, de WordPress codex beveelt een grootte aan van 1200px in de breedte en 900px in de hoogte.

Stap 5: Activeer Kind-Theme

Dat is het. Het Child-Theme hoeft alleen maar geactiveerd te worden. Dit gebeurt op dezelfde manier als u reeds de ouderTheme hebt geactiveerd. Ga gewoon naar het Theme overzicht van uw WordPress installatie en selecteer het kindTheme dat verschijnt.

Het is mogelijk dat na activering bepaalde instellingen die u eerder op de bovenliggendeTheme hebt gemaakt, verdwijnen of niet meer als voorheen zijn ingesteld. Dit is normaal. Het beste is om het kindTheme te installeren en te activeren voordat u de eerste wijzigingen aanbrengt op uw Theme . 

Alternatief: Creëer KindTheme met Plugin

screenshot plugin
WordPress -Plugins zoals dit maakt het creëren van een kindThemes handiger, maar niet essentieel.

Het is ook mogelijk om de juiste Kind-Theme te creëren via een WordPress -Plugin . Een van de meest populaire Plugins is in dit geval de Child-Theme Configurator. Dit biedt niet alleen de creatie van een Kind-Themes, maar ook andere configuratiemogelijkheden.

Aangezien het maken van zo'n Themes zeer eenvoudig is, is zo'n Plugin zelfs voor minder ervaren gebruikers geenszins noodzakelijk. Wat de prestaties van uw WordPress website betreft, raad ik u zelfs af om te veel, onnodige Plugins te installeren.

Werken met het kind-Theme

Het is heel gemakkelijk om te werken met het KindTheme dat je zelf hebt gemaakt. Als u dit geactiveerd heeft, ziet u het ontwerp van de ouderThemes op uw WordPress website. Dit is logisch, aangezien dit precies overeenkomt met de functionaliteit van het kindThemes:

Elk bestand dat je aanmaakt in je kindThemes overschrijft het bestand met dezelfde naam in je ouderTheme. Alleen de functions.php en de stylesheet zijn een uitzondering. Niet alleen de naam, maar ook de mappenstructuur moet precies dezelfde zijn.

Als u bijvoorbeeld de voettekst(footer.php) van de ouderThemes wilt wijzigen, voegt u een kopie van dit bestand rechtstreeks toe aan de map van het kindThemes . Dit bestand overschrijft het bestand met dezelfde naam in de bovenliggendeTheme. Wijzigingen die u hier aanbrengt, zullen zichtbaar zijn op uw website.

Speciaal geval: De functions.php wordt niet overschreven, maar wordt geladen vóór het bestand met dezelfde naam van de bovenliggendeThemes . Als u individuele PHP functies van de ouderThemes wilt overschrijven, kunt u dit doen binnen de functions.php van het kindThemes . Deze mogelijkheid is alleen voor ervaren gebruikers. Deze gedetailleerde handleiding zal u hierbij helpen.

Conclusie: Praktisch, onmisbaar!

Het maken van een kindTheme is relatief eenvoudig. Ook het gebruik van zo'n Themes blijkt in het dagelijks leven niet bijzonder moeilijk te zijn. Dit is precies waarom een kindTheme wordt aanbevolen voor alle WordPress gebruikers die wijzigingen willen aanbrengen aan hun Theme "op de juiste manier". De voordelen wegen duidelijk op tegen de nadelen.

Er zijn bijna geen nadelen. Hoewel door Child-Themes vaak een mogelijk prestatienadeel wordt genoemd, is dit - als het al bestaat - slechts minimaal. Kind-Themes blijft betrekkelijk klein, aangezien deze meestal alleen de code van de wijzigingen bevatten.

Niettemin moet u altijd precies weten wat u doet wanneer u Child-Themes gebruikt. Ook hier kunt u er snel voor zorgen dat uw WordPress website onbruikbaar wordt en alleen nog maar fouten uitspuugt. Een back-up opWordPress is onontbeerlijk voor dergelijke wijzigingen - in geval van twijfel moet u altijd een professional met de juiste expertise raadplegen.

Afbeelding bijgedragen: Anthony Robert | Unsplash

In 2010 kwam Pascal in contact met WordPress. Wat begon met een eenvoudige hobbyblog, maakte hij al snel tot zijn beroep. Als WordPress- en SEO-freelancer werkte hij aan websites van talrijke klanten. Vandaag de dag is hij werkzaam in een online marketingbureau en runt hij een blog over WordPress.

Gerelateerde artikelen

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.