Stel je voor: je hebt het perfecte thema gevonden voor je WordPress blog. Nou ja, bijna perfect. Nadat je het lettertype van het menu hebt aangepast van Times New Roman naar Open Sans en de achtergrondkleur van de zijbalk hebt veranderd van groen naar blauw van een robbenei, past het precies bij je visie. Tot twee weken later, wanneer de themamaker een nieuwe versie uitbrengt met een essentiële beveiligingsupdate. Je upgrade je thema alleen om te merken dat — poef! — je aangepaste wijzigingen allemaal verdwenen zijn.
Gelukkig hoef je niet je dagen te besteden aan het opnieuw implementeren van je wijzigingen en het vrezen van nieuwe updates. Er is een makkelijkere manier om je blog aan te passen terwijl je het grootste deel van de look en feel behoudt die je leuk vindt: je kunt een “child” thema creëren, dat de functionaliteit van het “parent” thema erft terwijl het die stijlwijzigingen toevoegt die uniek zijn voor jou. Zelfs als je het parent thema bijwerkt, behoudt het child thema jouw wijzigingen zolang je wilt.
Het kost slechts één .css-bestand om een normaal WordPress-thema om te zetten in een aangepast child-thema, en het kost minder code dan je denkt. Het volgende is een stap-voor-stap handleiding voor het creëren van een child-thema van elk normaal WordPress-thema dat je al in gedachten hebt.
Opmerking: Dit is een tussenliggende handleiding die ervan uitgaat dat je al een beetje HTML en CSS kent. Je hoeft geen expert te zijn, maar we gaan de code van een thema bewerken. Als je daar nog niet comfortabel mee bent, wil je misschien de gratis CSS-tutorial van W3Schools bekijken of je inschrijven voor Codecademy’s gratis HTML/CSS webtraject.
WordPress + DreamHost
Onze automatische updates en sterke beveiligingsverdedigingen nemen het serverbeheer uit je handen, zodat jij je kunt concentreren op het creëren van een geweldige website.
Bekijk de Pakketten1. Begin Met Een Parent-Thema En Plan Je Wijzigingen
Dit is Twenty Sixteen, het thema dat WordPress.org heeft gecreëerd en uitgebracht voor dit jaar. Als je op zoek bent naar een basisthema om wijzigingen op aan te brengen, overweeg dan zeker hun jaarlijkse uitgaven te bekijken, zoals Twenty Fifteen, Twenty Fourteen, enzovoort.
Ik vind het grotendeels leuk, maar ik wil een paar aanpassingen maken. Die zwarte rand is te hard voor mij, en ik zou het graag blauw willen hebben. Ik zou ook graag het lettertype willen veranderen.
Eerst open ik Chrome Developer Tools door in het Chrome-browsermenu te gaan naar Weergave → Ontwikkelaar → Ontwikkelaarshulpmiddelen. (Als je Firefox verkiest, kun je in het Firefox-menu gaan naar Extra → Webontwikkelaar → Inspecteur.)
Ontwikkelaarshulpmiddelen laten me het thema inspecteren en zien waar de “regels” vandaan komen. Door de juiste CSS-klasse te manipuleren, kan ik uitvinden wat ik in mijn child-thema moet zetten om mijn wijzigingen aan te brengen. Bijvoorbeeld, je kunt zien dat door de achtergrondkleur te wijzigen naar #0099ff, ik de rand van zwart naar blauw kan veranderen. Natuurlijk zijn Ontwikkelaarshulpmiddelen alleen bedoeld voor tijdelijk experimenteren, en als ik deze pagina vernieuw, zal de rand weer zwart zijn.
2. Maak Je Child-Thema Map En Bestanden
Het is belangrijk om je child-thema zorgvuldig te labelen, te beginnen met de naam van de map waarin je het plaatst. Op die manier weet WordPress automatisch hoe het te identificeren. “-child” toevoegen aan het einde van de naam van het originele thema is de beste praktijk. Dus in mijn geval, aangezien Twenty Sixteen in een map genaamd “twentysixteen” staat, noem ik mijn map “twentysixteen-child.”
Het eerste bestand dat ik moet aanmaken is style.css, een css-bestand dat relevante informatie bevat over mijn thema en de aangepaste styling die ik aan het uiterlijk wil toevoegen.
/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twentysixteen-child/
Description: Mijn eerste child-thema, gebaseerd op Twenty Sixteen
Author: Lauren Orsini
Author URI: http://lorsini.com
Template: twentysixteen
Version: 1.0.0
Tags: twee-kolommen, blauw, rechterzijbalk
Text Domain: twentysixteen-child
*/
Ik begin met het invullen van de benodigde gegevens. Alleen “Theme Name” en “Template” zijn vereist. WordPress moet de naam van het thema weten, en het moet ook weten welk thema het als ouder van dit thema moet beschouwen, in dit geval Twenty Sixteen. De rest kun je invullen met je eigen informatie of leeg laten. In feite is deze structuur standaard geworden voor mensen die geïnteresseerd zijn in het publiceren van hun thema’s op WordPress.org. Als je gewoon je child-thema voor persoonlijk gebruik bouwt, heb je alleen de themanaam, beschrijving, auteur, template en versie nodig.
Nu moet ik de stijlen toevoegen die ik wil veranderen. Ik wil de zwarte rand naar blauw veranderen, en ik wil het lettertype van de koptekst veranderen naar Georgia. Het lettertype van de koptekst wordt op drie plaatsen in het thema weergegeven—titel van de site, titel van het bericht en titel van het widget, dus ik moet ervoor zorgen dat ik alle drie CSS-klassen in mijn stijl opneem om alle drie de locaties te beïnvloeden.
Nadat ik dit heb voltooid, is mijn child-thema functioneel. Ik zou het op dit moment kunnen installeren, maar het zou dan slechts twee stijlen hebben en de rest zou standaard zijn. Dat is niet wat ik wil; ik wil dat het thema de stijlen van Twenty Sixteen erft. Dus heb ik een tweede bestand nodig, getiteld functions.php.
Kopieer en plak simpelweg de volgende code in het functions.php bestand:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
Dit is een functie die de parent- en child-thema’s style.css-bestand in de wachtrij zet. Iets in de wachtrij zetten betekent dat het toegevoegd wordt aan de rij van soortgelijke items die door de browser verwerkt moeten worden. Deze functie zorgt ervoor dat beide sets stijlen in de juiste volgorde worden geladen op het scherm van de kijker.
Een laatste, optionele stap is het creëren van een 880×660 afbeelding (PNG-bestandstype aanbevolen) van een screenshot van je child-thema. Op die manier, als je veel thema’s geïnstalleerd hebt, kun je in één oogopslag zien hoe deze eruitziet.
3. Upload Je Child-Thema Naar WordPress
Nu heb ik een map, met de titel twentysixteen-child, die twee bestanden bevat — style.css en functions.php. Het is tijd om die map te comprimeren naar een zip-bestand en deze te uploaden naar mijn site.
Navigeer naar Weergave → Thema’s en selecteer “Nieuw toevoegen,” wat je in staat stelt om een zip-bestand te uploaden. WordPress controleert eerst of het parent-thema geïnstalleerd is, en als dat zo is, zou je je thema moeten kunnen uploaden. Als het parent-thema niet gevonden wordt, zal het niet werken.
Nu zou je jouw thema in de lijst met geüploade thema’s moeten kunnen zien. Zo ziet de mijne eruit als ik erop klik. Merk op dat ik geen voorbeeldafbeelding aan mijn thema heb toegevoegd, maar het werkte nog steeds. Maar zie je hoe het alle informatie bevat die ik in stap 2 heb ingevoerd?
Heb Ik Een Child-Thema Nodig?
Of je nu hulp nodig hebt bij het vinden van je doelgroep, het kiezen van het juiste WordPress-thema, of het vastleggen van je merkwaarden, wij kunnen je helpen! Abonneer je op onze maandelijkse samenvatting zodat je nooit een artikel mist.
Meld Je AanActiveer je thema, en als alles goed is gegaan, zou je je afgeronde wijzigingen live moeten kunnen zien. Ta da! Ik heb de nieuwe randkleur en koptekstlettertypen die ik wilde. Beter nog, zelfs als WordPress het Twenty Sixteen-thema bijwerkt, zullen mijn wijzigingen niet veranderen.
Ik hoop dat deze handleiding je heeft geholpen om te zien hoe makkelijk en nuttig het kan zijn om een child-thema op je WordPress-blog te hebben. Het is een geweldige manier om je thema toekomstbestendig te maken, zodat het er goed uit blijft zien en aangepast blijft, wat er ook op je pad komt.
