Het aanpassen van een bestaand WordPress-thema is een veel voorkomende behoefte, maar het rechtstreeks bewerken van het thema kan problemen veroorzaken. 

Als het thema wordt bijgewerkt, worden uw wijzigingen overschreven! Een betere manier is om een ​​child-thema te maken dat wordt overgenomen van het parent-thema. 

Met onderliggende thema's kunt u een thema veilig wijzigen en uitbreiden. 

In deze gedetailleerde handleiding bespreken we het maken van een child-thema in WordPress. U leert het doel van onderliggende thema's, hoe u er een kunt instellen en hoe u deze kunt aanpassen om het ontwerp en de functionaliteit van het bovenliggende thema te overschrijven. 

Met een paar methoden kunt u een onderliggend thema bouwen en uw wijzigingen toepassen zonder de bovenliggende themabestanden aan te raken. 

Dus, zonder verder oponthoud, laten we aan de slag gaan.

1 Wat is een kindthema?

Een child-thema is een WordPress-thema dat functionaliteit overneemt van een ouderthema. Hiermee kunt u nieuwe functies wijzigen of toevoegen zonder de bovenliggende themabestanden te wijzigen. 

Dit is handig omdat als u de bovenliggende themabestanden rechtstreeks wijzigt, uw wijzigingen verloren gaan wanneer het thema wordt bijgewerkt. 

Met een child-thema kunt u wijzigingen aanbrengen zonder dat dit gevolgen heeft voor het hoofdthema en updates ontvangen zonder dat uw wijzigingen verloren gaan.

In dit gedeelte zul je merken dat we het hoofdthema hebben genoemd, maar wat is dat precies?

2 Wat is een ouderthema?

Een parent-thema is een vooraf ontworpen thema dat dient als basis voor een WordPress-website. Het biedt de basis structuur, lay-out en functionaliteit van de site. 

Een hoofdthema kan worden aangepast aan de behoeften van een bepaalde website door functies toe te voegen of te wijzigen. 

Het gebruik van een hoofdthema kan tijd en moeite besparen bij het bouwen van een website, omdat het een startpunt biedt voor het ontwerp en de functionaliteit.

Op dit punt kunnen we zeggen dat alle WordPress-thema’s technisch gezien bovenliggende thema’s zijn, tenzij ze specifiek zijn ontworpen als kindthema.

Hier is een belangrijk punt om te onthouden: Een hoofdthema kan onafhankelijk bestaan ​​en functioneren een child-thema is altijd afhankelijk van een parent-thema om de kernfunctionaliteit en -functies te bieden.

3 Waarom een ​​child-thema gebruiken?

Er zijn een paar belangrijke redenen om een ​​child-thema te gebruiken in plaats van een thema rechtstreeks aan te passen:

• Door een child-thema te maken, voorkomt u dat uw wijzigingen worden overschreven wanneer het het hoofdthema is bijgewerkt.
• Het houdt bovenliggende en onderliggende themabestanden gescheiden. Dit helpt verwarring te voorkomen, omdat bestanden georganiseerd zijn.
• Meerdere onderliggende thema's kunnen voor verschillende doeleinden worden gebruikt, zoals het wijzigen van stijlen of functionaliteit. Maar houd er rekening mee dat een website slechts één actief thema tegelijk kan hebben.
• Het is ook een geweldige manier om te beginnen met het ontwikkelen van een nieuw, volledig WordPress-thema.

Opmerking: Uitgebreide aanpassingen in een child-thema kunnen tot beheerproblemen leiden. Voor grotere projecten is het creëren van een volledig/bovenliggend thema op basis van het oorspronkelijke thema vaak beter dan het blijven aanpassen van het onderliggende thema.

4 Vereisten voor het maken van een onderliggend thema

Voordat u een child-thema maakt, is het belangrijk dat u aan een aantal vereisten voldoet. 

Ten eerste heb je een werkende WordPress-installatie nodig en een parent-thema waarvoor je een child-thema wilt maken. 

Het is ook handig om HTML, CSS en PHP te begrijpen, aangezien u de code zult wijzigen om het onderliggende thema aan te passen. 

U zou ook codefragmenten uit andere bronnen moeten kunnen kopiëren en plakken. 

Het wordt aanbevolen om te oefenen in een lokale ontwikkelomgeving door dummy-inhoud te gebruiken of een live WordPress-site voor testdoeleinden naar een lokale server te verplaatsen. Hiermee kunt u uw child-thema testen voordat u het op een live site implementeert.

Tenslotte is het belangrijk om een website back-up voor het geval er tijdens het proces iets misgaat.

Dus zodra je al deze vereisten hebt ingesteld, kun je een child-thema maken. Het enige wat u hoeft te doen is het installatieproces voor het onderliggende thema te volgen dat in deze handleiding wordt beschreven.

Maar voor deze handleiding gebruiken we het Twenty Twenty-four standaard WordPress-thema.

5 Een child-thema maken in WordPress

Nu u het concept van child-thema’s begrijpt, gaan we ons verdiepen in het maken van een child-thema in WordPress. 

We onderzoeken twee veelgebruikte methoden waaruit u kunt kiezen, waarbij rekening wordt gehouden met verschillende comfortniveaus:

5.1 Een kindthema maken met behulp van een code

Open eerst uw WordPress-installatie via FTP of een bestandsbeheerder die wordt geleverd door uw hostingcontrolepaneel. Navigeer naar de wp-content/themes directory en maak een nieuwe map met een unieke naam voor uw child-thema. 

Voor deze tutorial gebruiken we de naam “mtschild” voor de onderliggende themamap.

Deze map fungeert als de primaire opslagruimte voor uw onderliggende themacomponenten.

Maak in de onderliggende themamap een nieuw bestand met de titel style.css. Dit bestand bevat de essentiële details voor het herkennen en activeren van uw child-thema. Open het style.css-bestand en voer de volgende code in:

Theme Name: MTS Child Theme
Theme URI: https://www.mythemeshop.com/
Description: Child theme for the Twenty Twenty-Four Theme
Author: MyThemeShop
Author URI: https://www.mythemeshop.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: mtschild

Deze code laat WordPress weten dat uw child-thema het opgegeven parent-thema uitbreidt. Vervang “MTS Child Theme” door de naam van uw favoriete child-thema en het sjabloonveld door de mapnaam van het bovenliggende thema.

De volgende stap is ervoor te zorgen dat uw kindthema de stijlen overneemt van het bovenliggende thema. Om dit te bereiken, moet u het stylesheet van het bovenliggende thema in de wachtrij plaatsen.

Om dit te doen, gaat u naar het function.php-bestand in de directory van uw kindthema (maak er een aan als deze ontbreekt) en implementeer een van de volgende codes.

Als uw hoofdthema geen stylesheet laadt, gebruikt u de volgende code om style.css te laden via functies.php:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() );
}

Deze code kan ook functioneren als het bovenliggende thema alleen het stylesheet laadt. 

Als het bovenliggende thema echter alleen het stylesheet van het actieve thema laadt, moet u bovendien het stylesheet van het bovenliggende thema in de wachtrij plaatsen via functions.php met behulp van de onderstaande code:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
	wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

Voor het Twenty Twenty-Four-thema dat in deze handleiding wordt gebruikt, passen we de eerste code toe, omdat het thema helemaal geen stylesheet laadt. 

Vergeet niet om te beginnen met de <?php tag bij het toevoegen van de code. Wijzig deze codes volgens uw vereisten, vooral waar het de themanaam betreft mts_child_theme wordt gebruikt.

Nadat u de bovenstaande stappen heeft voltooid, logt u opnieuw in op uw WordPress-dashboard en gaat u verder met Uiterlijk → Thema's. Beweeg de muis over het onderliggende thema en klik op de Activeren knop.

Omdat u nog geen wijzigingen heeft aangebracht in uw child-thema, behoudt uw website de functionaliteit en het uiterlijk van het parent-thema. 

We zullen u echter begeleiden bij het aanpassen van het child-thema om u voor te bereiden op verdere wijzigingen.

Dit is het handmatige proces voor het maken van een child-thema met behulp van code in WordPress. Als deze methode ingewikkeld lijkt, kun je de plug-inaanpak verkennen die we in de volgende sectie bespreken.

5.2 Een kindthema maken met behulp van een plug-in

Het maken van een child-thema met behulp van een plug-in is eenvoudig en gemakkelijk. Eerst moet u het Kindthema-configurator inpluggen. Voor meer details, zie onze stapsgewijze handleiding op hoe een WordPress plug-in te installeren.

Zodra de plug-in is geactiveerd, gaat u naar het WordPress-dashboard en navigeert u naar Hulpmiddelen → Onderliggende thema's.

Op de Selecteer een tabblad Hoofdthema, kies het bovenliggende thema uit het vervolgkeuzemenu voor het maken van het onderliggende thema. Normaal gesproken is het actieve thema op uw site vooraf geselecteerd.

Vervolgens klikt u op de Analyseren knop. De plug-in zal het geselecteerde bovenliggende thema nauwkeurig onderzoeken om te bepalen of het een onderliggend thema kan genereren en of het zijn style.css-bestand nodig heeft om te verschijnen.

Wijs vervolgens een naam toe aan uw child-thema. U kunt de stylesheet, functies en andere configuraties naar wens aanpassen. 

Wijzig de instellingen echter niet totdat u bij sectie 7 bent aangekomen.

Klik in sectie 7 op de knop met het label Klik om de kenmerken van het onderliggende thema te bewerken.

Van daaruit kunt u de details van uw child-thema invoeren.

Wanneer u handmatig een onderliggend thema maakt, kunt u de menu's en widgets van het bovenliggende thema kwijtraken. 

De plug-in Child Theme Configurator kan ze echter overbrengen van het bovenliggende thema naar het onderliggende thema. 

Als u hiermee wilt doorgaan, markeer dan het selectievakje in Hoofdstuk 8. Klik ten slotte op de Nieuw kindthema maken knop om het kindthema te maken.

Na voltooiing zal de plug-in een map voor uw child-thema maken met daarin de essentiële style.css- en function.php-bestanden voor toekomstige aanpassingen.

Voordat u het thema activeert, kunt u er een voorbeeld van bekijken door op de link 'Bekijk een voorbeeld van uw onderliggende thema' bovenaan het scherm te klikken om de weergave ervan te verifiëren en ervoor te zorgen dat dit geen nadelige invloed heeft op uw site.

Nadat u heeft gecontroleerd of alles correct functioneert, klikt u op de Activeren en publiceren knop. Hierdoor wordt uw child-thema live op uw website geplaatst.

Zodra u uw child-thema op uw website heeft geactiveerd, is het tijd om het aan te passen. We zullen dit in de volgende sectie bespreken.

6 Hoe u het thema van uw kind kunt aanpassen

Voordat u zich verdiept in maatwerk, identificeert u de elementen van uw website die u wilt wijzigen, zoals stijlen, sjablonen, functies, widgetgebieden of aangepaste paginasjablonen. 

Als u een duidelijke visie heeft op uw doelstellingen, wordt het aanpassingsproces gestroomlijnd. Er zijn verschillende methoden om uw child-thema aan te passen, waaronder:

6.1 Stijlen aanpassen met CSS

Het style.css-bestand van uw child-thema dient als platform om het uiterlijk van uw website aan te passen. Hier kunt u aangepaste CSS-regels invoegen om de stijlen van het hoofdthema te wijzigen of te verbeteren.

Voordat u verdergaat, is een basiskennis van HTML en CSS noodzakelijk. 

U kunt effectief gebruik maken van de Inspect-tool van uw browser of stijlen rechtstreeks kopiëren uit het style.css-bestand van het bovenliggende thema.

Om met uw browser toegang te krijgen tot de CSS-codes van een webpagina, klikt u eenvoudig met de rechtermuisknop op de pagina en selecteert u Inspecteren uit de opties die verschijnen. Deze tool geeft de CSS-stijlcodes weer, zodat u de elementen kunt identificeren die u wilt wijzigen.

Wanneer u met de rechtermuisknop klikt en 'Inspecteren' selecteert, wordt uw browserscherm gesplitst en worden de HTML en CSS voor de pagina weergegeven. 

Afhankelijk van uw browserinstellingen kunnen de HTML- en CSS-details aan de rechterkant of aan de onderkant van het scherm verschijnen.

Terwijl u over verschillende HTML-regels beweegt, zal de Chrome-inspecteur deze markeren op het tabblad Elementen en de bijbehorende CSS-regels weergeven die betrekking hebben op het gemarkeerde element.

U kunt experimenteren door de CSS rechtstreeks te bewerken om een ​​voorbeeld te zien van hoe deze eruit zal zien. Als u bijvoorbeeld de achtergrondkleur van de standaardstartpagina van het Twenty Twenty-Four-thema wilt wijzigen van #f9f9f9 in #6841ea.

Zodra u de achtergrondkleur in de browserinspecteur heeft aangepast, is de wijziging tijdelijk. Om het permanent te maken, moet u deze CSS-regel overbrengen naar het style.css-bestand van uw onderliggende thema:

body {
background-color: #6841ea;
}

Vergeet niet om uw wijzigingen op te slaan nadat u de code heeft ingevoerd. U kunt dit proces repliceren voor elk ander webpagina-element dat u wilt aanpassen.

Stel dat u bijvoorbeeld de kleuren op uw website wilt wijzigen. Wij kunnen u voorzien van enkele CSS-codes waarmee u dit kunt doen.

Om de tekstkleur naar donkergrijs te wijzigen, voegt u de volgende code toe aan uw CSS-bestand:

body { color: #3b3b3b; } 

Gebruik de volgende code om de kopkleur naar blauw te wijzigen:

h1, h2, h3 { color: #007bff; }

Gebruik de volgende code voor de achtergrondkleur van de header:

#header { background-color: #f5f5f5; } /* Light grey background for header */

En gebruik voor het inhoudsgebied deze code om de achtergrondkleur in te stellen op wit:

.site-container { background-color: #fff; } 

U kunt deze CSS-stijlen kopiëren naar het style.css-bestand van uw child-thema via de child-themamap van uw website of vanuit uw WordPress-dashboard.

Wanneer u uw CSS-code toevoegt, ziet deze er als volgt uit:

Nadat u uw wijzigingen heeft opgeslagen, kunt u proberen uw websitepagina te vernieuwen. Als de wijzigingen niet verschijnen, wist u de cache van uw browser om er zeker van te zijn dat u de nieuwste versie van de CSS bekijkt.

6.2 Sjabloonbestanden overschrijven

Terwijl CSS-aanpassing het uiterlijk van uw website bepaalt, bieden onderliggende thema's een robuustere functie: sjabloonbestanden overschrijven.

Met deze geavanceerde mogelijkheid kunt u de lay-out opnieuw vormgeven en structuur van de pagina's van uw website en elementen. Wees echter voorzichtig, want dit vereist een dieper begrip van WordPress-sjablonen, HTML en PHP.

Om een ​​sjabloon te overschrijven, kopieert u het originele .php-bestand van de bovenliggende themamap naar uw onderliggende thema, waarbij u de exacte bestandsnaam behoudt. 

Om bijvoorbeeld header.php te overschrijven, moet u het header.php-bestand uit de map /parent-theme/ kopiëren en als header.php in de map /child-theme/ plakken.

Je kunt nu de header.php in je child-thema bewerken.

Enkele veelvoorkomende sjablonen die u kunt overschrijven:

• header.php – Bevat tag- en sitebranding, navigatie, enz.
• footer.php – De afsluiting tag en opmaak.
• page.php - Standaardsjabloon voor pagina's.
• single.php – Sjabloon gebruikt voor afzonderlijke berichten.
• index.php – Homepagina-sjabloon.

U kunt bijvoorbeeld footer.php wijzigen door een aangepast auteursrecht voor uw site weer te geven:

<!-- Modified child footer.php -->

<footer>
  <p>&copy; <?php echo date('Y'); ?> My Company</p>

  <?php if ( is_active_sidebar('footer-1') ) : ?>
    <?php dynamic_sidebar('footer-1'); ?>
  <?php endif; ?>

</footer>

6.3 Functionaliteit uitbreiden

De functions.php bestand in het onderliggende thema kunt u nieuwe PHP-functies, hooks, filters en code introduceren om de standaardfuncties van het bovenliggende thema uit te breiden.

Dankzij deze flexibiliteit kunt u aangepaste berichttypen registreren, aangepaste widgets opnemen, nieuwe shortcodes maken, extra scripts in de wachtrij plaatsen en meer.

Als je bijvoorbeeld een speciaal gedeelte op je WordPress-site wilt voor aangepaste widgets, gebruik dan het volgende codefragment om een ​​widgetgebied in te stellen met de naam 'Aangepast widgetgebied':

function register_custom_widget() {
    register_sidebar( array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom_widget_area',
        'description'   => 'Add widgets here to appear in the custom widget area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'register_custom_widget' );

Nadat u deze code heeft opgeslagen in het function.php-bestand van uw child-thema, navigeert u terug naar uw WordPress-site en opent u deze Uiterlijk → Widgets. U zult merken dat de widget "Aangepast widgetgebied" beschikbaar is voor gebruik.

7 Veelgestelde Vragen / FAQ

8 Conclusie

Het maken van een child-thema in WordPress is een waardevolle vaardigheid waarmee u uw website kunt aanpassen zonder het risico te lopen dat uw wijzigingen verloren gaan tijdens thema-updates. Hoewel het in eerste instantie misschien intimiderend lijkt, moet je niet te snel opgeven als je fouten maakt. 

De meest voorkomende fouten die u kunt tegenkomen zijn syntaxisfouten die worden veroorzaakt doordat er iets in de code ontbreekt. Als er iets misgaat, kun je altijd opnieuw beginnen. 

Als u bijvoorbeeld per ongeluk iets verwijdert dat voor uw bovenliggende thema nodig is, kunt u eenvoudigweg het bestand uit uw onderliggende thema verwijderen en opnieuw beginnen. 

Houd er rekening mee dat het maken van een child-thema u, met een beetje doorzettingsvermogen, de flexibiliteit kan geven om een ​​unieke look en feel voor uw website te creëren, terwijl de stabiliteit en veiligheid van uw parent-thema behouden blijven.

Probeer het dus eens en zie welk verschil het kan opleveren voor uw WordPress-website.

We hopen dat deze handleiding u heeft geholpen bij het maken van een child-thema voor uw website. Zo ja, laat het ons weten via Tweeten @rankmathseo.

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• PlatoData.Network Verticale generatieve AI. Versterk jezelf. Toegang hier.
• PlatoAiStream. Web3-intelligentie. Kennis versterkt. Toegang hier.
• PlatoESG. carbon, CleanTech, Energie, Milieu, Zonne, Afvalbeheer. Toegang hier.
• Plato Gezondheid. Intelligentie op het gebied van biotech en klinische proeven. Toegang hier.
• Bron: https://rankmath.com/blog/wordpress-child-theme/