Divi child theme

5 november 2020

Werkt u in WordPress met het thema Divi van Elegant Themes, dan kunt u overwegen om gebruik te maken van een Child theme.

Wat is een WordPress Child theme?

Child theme

Een WordPress Child theme is eigenlijk geen thema. Als je gebruik maakt van een Child theme, dan gebruik je nog steeds alle functionaliteiten en bestanden van het bovenliggende thema. We noemen dit bovenliggende thema ook wel het parent theme. In dit geval is het parent theme dus het reeds geïnstalleerde thema Divi van Elegant Themes.

Waaruit bestaat een  WordPress Child theme dan?

De samenstelling van een WordPress Child theme

Een WordPress Child theme is altijd een zipbestand en bestaat uit drie bestanden, namelijk:

  1. function.php
  2. style.css
  3. Screenshot.png

 

samenstelling wordpress child theme

Als u een Child theme installeert, dan blijft u gebruik maken van het parent theme Divi. U moet dit thema dan ook niet verwijderen van uw WordPress.

  • In het function.php bestand van uw Child theme hebben we aangegeven dat we gebruik blijven maken van het style.css bestand van het parent theme Divi. In het function.php bestand geven we aan wat de locatie van het style.css bestand van het parent theme Divi is. Hierdoor wordt het style.css bestand van het parent theme dus geïmporeerd.
  • In het style.css bestand van ons Child theme gaan we vanaf nu onze wijzigingen in css-code invoeren.
  • Met het bestand screenshot.png voorzien we het Child theme in WordPress van een afbeelding. Zodra u het Child theme heeft geinstalleerd, ziet u deze afbeelding bij het thema’s.

 

Waarom dan gebruik maken van een WordPress Child theme?

Wanneer een WordPress Child theme gebruiken?

Met behulp van een WordPress Child theme kun je gemakkelijk bepaalde zaken met betrekking tot de opmaak van de website (css-code) aanpassen. Dit kun je natuurlijk ook in het thema Divi zelf doen, echter zijn er dan enkele nadelen:

  • Als u een nieuwe update van Divi installeert, dan worden de oude bestanden overschreven door de nieuwe bestanden. Op dat ogenblik verdwijnen dus ook alle aanpassingen die u heeft gedaan.
  • Als u werkt met een eigen style.css bestand, dan blijft het voor u overzichtelijker. In dit style.css bestand staan namelijk alleen de css-codes die u heeft ingevoerd. Alle css-codes die horen bij het parent theme Divi staan in het style.css bestand van Divi zelf.

 

Wanneer is het dan verstandig om gebruik te maken van een Child theme?

U hoeft bij WordPress niet standaard gebruik te maken van een Child theme. Als u via het admin menu naar de optie “Weergave” gaat en vervolgens “Customizer” kiest, kunt u bij het onderdeel “Extra CSS” ook uw eigen css-codes invoeren. Alles wat u hier invoert, blijft bij updates van Divi ook bestaan. Wanneer is het dan wel verstandig om gebruik te maken van een eigen Child theme?

  • Als u de laadsneldheid van uw website wilt maximaliseren. U kunt in het Child theme bijvoorbeeld aangeven dat bepaalde onderdelen eerder geladen moeten worden. Bijvoorbeeld een preload van fonts. Dit kan de snelheid van uw website aanzienlijk versnellen. Ook zorgt dit ervoor dat uw website een betere beoordeling krijgt in PageSpeed Insights en GTMetrix.
  • Als u van plan bent om behoorlijk wat regels met code toe te voegen (css, JavaScripts, etc).

 

Hoe installeert u het WordPress Divi Child theme?

Uitleg hoe u het Divi Child theme installeert

Als eerste moet u er voor zorgen dat u het thema Divi heeft geïnstalleerd en geactiveerd. Vergeet ook niet om uw gebruikersnaam en API key in te voeren, want anders krijgt u geen updates voor het parent theme Divi. Weet u niet waar u dit moet invoeren, bekijk dan nog even mijn uitleg over het updaten van Divi.

Vervolgens download u gratis het Divi Child theme. Dit is een zipbestand, wat u niet moet uitpakken!

Daarna gaat u in het WordPress admin menu naar de optie “Weergave” en selecteert u “Thema’s'”.  U klikt op de knop “Nieuwe toevoegen”. Vervolgens klikt u op de knop “Thema uploaden” en “Bestand kiezen”. U selecteert het zipbestand “Divi-Child-Theme” en klikt op “Nu installeren”. Het Divi Child theme is nu geïnstalleerd.

Gerelateerde berichten

Titel met animatie

Eén van de belangrijkste onderdelen van een pagina is de titel. Dit is het eerste wat mensen zien. Hieronder een voorbeeld van een titel welke extra opvalt door het toepassen van een animatie-effect.Wilt u ook werken met pagina titels met animatie, maar weet u niet...

Lees meer

Divi WooCommerce Product Pagina Layouts

In deze column beschrijf ik hoe u met behulp van de Divi Themabouwer een eigen WooCommerce productpagina kunt ontwerpen. Wilt u dit niet, dan kunt u ook gratis kant-en-klare productpagina layouts (JSON-bestanden) downloaden.

Lees meer

Blader door berichten

Pin It on Pinterest

Share This