Als eigenaar van een WordPress-website is het niet meer dan normaal dat u wilt spelen met websiteontwerp en de functionaliteit van WordPress-thema's . Maar wat is de beste manier om dat te doen zonder te knoeien met het originele thema? Een child-thema in WordPress is een geweldige manier om uw thema aan te passen en te testen zonder dat u zich zorgen hoeft te maken over het risico dat uw oorspronkelijke thema wordt verstoord.
Het gebruik van een WordPress-childthema is een slimme manier om de code van uw thema veilig aan te passen zonder uw werk in gevaar te brengen. de CSS , HTML of PHP van uw thema , is een child-thema de juiste keuze. Waarom? Omdat zonder een update van uw hoofdthema uw wijzigingen teniet kunnen worden gedaan.
Om het u gemakkelijk te maken, hebben we een beginnersvriendelijke handleiding samengesteld waarin wordt uitgelegd hoe een child-thema werkt, hoe u het instelt en hoe u de gewenste wijzigingen kunt aanbrengen. Duik erin en pas met vertrouwen aan!
Child-thema in WordPress begrijpen
Een child-thema is, zoals de naam al doet vermoeden, een soort “add-on” voor uw hoofd- of bovenliggende thema , waarbij de functies en stijlen ervan worden overgenomen. Wanneer u uw WordPress-thema wilt aanpassen, kan het riskant zijn om rechtstreeks in de themabestanden te duiken, omdat eventuele wijzigingen het kernthema kunnen veranderen. Dat is waar onderliggende thema's een rol spelen: ze zijn een veiligere manier om wijzigingen aan te brengen zonder de originele bestanden aan te raken.
Het onderliggende thema neemt automatisch de hoofdstijl over van het style.css-bestand van het bovenliggende thema, dat de algehele look en feel van het thema bepaalt. Met een child-thema kun je deze stijl eenvoudig aanpassen of uitbreiden door je eigen bestanden toe te voegen of aanpassingen te maken aan de bestaande. Dit geeft u de flexibiliteit om het thema aan te passen zonder de originele bestanden te wijzigen.
Kindthema's worden opgeslagen in hun eigen map, gescheiden van het bovenliggende thema, en zijn voor functionaliteit afhankelijk van het bovenliggende thema, tenzij u besluit dingen te veranderen. Wanneer u een child-thema in WordPress activeert, wordt dit gekoppeld aan het bovenliggende thema en controleert WordPress eerst de bestanden van het child-thema. Als een bestand niet is gewijzigd, gebruikt WordPress gewoon de versie van de ouder.
Bedenk echter dat een child-thema niet alleen kan werken. Om goed te kunnen functioneren, moet het hoofdthema ernaast zijn geïnstalleerd.
Lees meer over: Besteed de ontwikkeling van WordPress-plug-ins en thema's uit
Voordelen van het gebruik van een child-thema in WordPress
Het maken van een child-thema is een slimme manier om wijzigingen aan te brengen in uw WordPress- site zonder het risico te lopen al uw harde werk te verliezen. Als u de bestanden van het bovenliggende thema rechtstreeks zou bewerken, zouden uw aanpassingen elke keer dat het thema een update krijgt, worden weggevaagd. Hierdoor kun je voor een frustrerende keuze komen te staan: sla alle toekomstige updates over (wat kan leiden tot compatibiliteits- en beveiligingsproblemen) of update en verlies de tijd en moeite die je steekt in het aanpassen van je WordPress-thema .
Bij een child-thema hoef je die keuze echter niet te maken. Al uw wijzigingen worden veilig opgeslagen in een aparte map, wat betekent dat u uw wijzigingen kunt behouden, zelfs als het bovenliggende thema wordt bijgewerkt. Bovendien maakt deze configuratie het gemakkelijk om uw aanpassingen indien nodig van de ene site naar de andere te verplaatsen, waardoor u tijd bespaart als u op meerdere sites werkt of naar een nieuwe migreert.
Een ander groot voordeel van het gebruik van een child-thema is dat het een geweldige manier is om meer te leren over de ontwikkeling van aangepaste thema's in een omgeving met weinig risico. Je kunt experimenteren met veranderingen en nieuwe functies, en als iets niet gaat zoals gepland, kun je eenvoudig het child-thema uitschakelen. Uw site keert onmiddellijk terug naar het oorspronkelijke uiterlijk en de oorspronkelijke functionaliteit van het hoofdthema, dus er is geen schade aangericht.
Meer informatie over: Hoe u headers naadloos kunt bewerken en aanpassen in WordPress?
Ontgrendel het potentieel van uw merk met een uniek aangepast kindthema
Maak contact met onze professionele WordPress-ontwikkelaars voor een naadloos ontwikkelingsproces voor aangepaste thema's.
Dingen die u moet doen voordat u een kindthema in WordPress maakt
Nu hebben we veel WordPress-gebruikers gezien die graag hun sites wilden aanpassen, maar tegen een muur aanliepen als er onverwachte fouten opdoken. Het is volkomen begrijpelijk: het kan spannend lijken om met een child-thema aan de slag te gaan totdat de technische uitdagingen zich voordoen.
Daarom is het essentieel om je een beetje voor te bereiden voordat je erin duikt, net zoals je je zou voorbereiden voordat je een examen aflegt. Hier zijn een paar tips die u kunt nemen voordat u begint met het maken van uw kindthema:
Begrijp de basisprincipes van code
Werken met een child-thema betekent dat je met code te maken krijgt. Op zijn minst zal een basiskennis van HTML, CSS en PHP van pas komen (en mogelijk JavaScript als je er zin in hebt). Als coderen nieuw voor je is, is het WordPress-themahandboek een prima startpunt voor snelle begeleiding.
Leer: Figma naar code converteren: React, HTML, Vue, JS, CSS
Kies het juiste ouderthema
Kies een hoofdthema dat al dicht bij het gewenste uiterlijk en de gewenste functionaliteit ligt. Idealiter zul je er een vinden die slechts een paar aanpassingen nodig heeft, waardoor je aanpassingsproces soepeler verloopt. Als je volledig van thema verandert, bekijk dan onze checklist met dingen die je moet doen voordat je WordPress-thema's wijzigt. Het bespaart je een hoop kopzorgen!
Gebruik een lokale of testlocatie voor testen
Het is het beste om te experimenteren op een lokale site of een testsite in plaats van rechtstreeks naar uw live site te gaan. Op deze manier heeft u, als u een fout maakt, geen invloed op het uiterlijk of de functionaliteit van uw live site.
Maak een back-up van uw site
Maak een back-up van uw website voordat u wijzigingen aanbrengt. Als het je eerste keer is, kan een plug-in als Duplicator het back-upproces eenvoudig en stressvrij maken. Zo kunt u uw site snel herstellen als er iets niet naar wens verloopt.
Zodra u deze basisbeginselen onder de knie heeft, kunt u onze stapsgewijze handleiding volgen om vol vertrouwen het thema van uw kind te creëren!
Leer: de beste oplossingen voor het maken van back-ups van meerdere WordPress-websites
Handmatig een kinderthema maken in WordPress: 5 eenvoudige stappen
Het maken van een child-thema in WordPress is eenvoudiger dan het klinkt, en het is een geweldige manier om te begrijpen hoe child-thema's werken zonder uw hoofdthema op het spel te zetten.
Laten we eens kijken hoe u een child-thema kunt maken op basis van het standaard Twenty Fifteen-thema van WordPress en een paar aangepaste aanpassingen maken om het proces in actie te zien.
Stap 1: Maak een onderliggende themamap
Begin met het maken van een nieuwe map op uw computer waar alle bestanden voor uw child-thema naartoe zullen gaan. U uploadt deze map later naar uw website.
U kunt de map een naam geven naar uw bovenliggende thema, waarbij aan het einde “-child” wordt toegevoegd. Als uw bovenliggende thema bijvoorbeeld 'Twenty Twenty-Two' heet, krijgt uw onderliggende themamap de naam Twentytwentytwo-child. Hierdoor is het gemakkelijk te identificeren als een kindthema voor de ouder.
Stap 2: Stel een stylesheet in voor uw kindthema
Maak vervolgens een style.css-bestand in uw nieuwe onderliggende themamap. Dit bestand bevat alle aangepaste stijlen voor uw child-thema.
Om het stylesheet correct in te stellen, voegt u de volgende headeropmerkingen toe helemaal bovenaan uw style.css-bestand. Dit vertelt WordPress dat uw nieuwe thema een onderliggend thema is van het hoofdthema:
Themanaam: Twintig Tweeëntwintig Kind
Thema-URI: https://wordpress.org/themes/twentytwentytwo/
Auteur: WordPress-team
Auteur-URI: https://wordpress.org/
Sjabloon: tweeëntwintig
Beschrijving: Kinderthema voor Twenty Twenty-Two
Versie: 1.0
*/
Eenmaal opgeslagen, ga je naar je WordPress-dashboard en ga je naar Uiterlijk> Thema's . Je zou nu je child-thema in de lijst moeten zien staan.
Stap 3: Koppel de stijlbladen voor bovenliggende en onderliggende thema's
Om er zeker van te zijn dat de stijlen van uw hoofdthema worden toegepast, moeten we het stylesheet aan het onderliggende thema koppelen. Dit doet u door een function.php- bestand te maken in uw onderliggende themamap en de volgende code toe te voegen:
| <?phpadd_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );function enqueue_parent_styles() {wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );} |
Deze code laadt het stylesheet van het bovenliggende thema, zodat uw onderliggende thema al zijn stijl overneemt.
Leren: Hoe WordPress-database repareren en repareren?
Stap 4: Bewerk het stylesheet van het onderliggende thema (style.css)
U kunt nu beginnen met het toevoegen van uw aangepaste stijlen rechtstreeks in het style.css-bestand van het onderliggende thema. Als u bijvoorbeeld de kleur van links op uw site wilt wijzigen, kunt u het volgende toevoegen:
| a {kleur: #D54E21;tekstdecoratie: geen;} |
Deze regel overschrijft de linkstijl van het hoofdthema zonder de rest van het ontwerp te beïnvloeden.
Weet: moet u uw website bouwen met code, zonder code of met een websitebouwer?
Stap 5: Wijzig een sjabloonbestand
Met een child-thema kunt u ook individuele sjablonen . Stel dat u de manier wilt wijzigen waarop berichten worden weergegeven door het bestand single.php te bewerken.
- Kopieer single.php uit het bovenliggende thema en plak het in de map van uw onderliggende thema.
- Open het bestand in een teksteditor en breng uw wijzigingen aan.
Als je bijvoorbeeld de commentaarsectie van afzonderlijke berichtpagina's wilt verwijderen, zoek dan dit deel van de code:
| if ( commentaren_open() || get_comments_number() ) :comments_template();endif; |
Verwijder het of geef commentaar om de opmerkingen te verbergen. WordPress gebruikt het gewijzigde single.php-bestand uit de onderliggende themamap, dus eventuele updates van het bovenliggende thema zullen uw aanpassingen niet overschrijven.
Leren: Hoe maak je een aangepast paginasjabloon in WordPress?
Een kindthema maken met een plug-in (geen codering vereist)
Als je niet van coderen houdt, maar toch een kindthema wilt maken, heb je geluk! Hoewel er meerdere plug-ins zijn die u kunt gebruiken om een kindthema in WordPress te maken, gaan we de plug-in Child Theme Configurator om het proces uit te leggen.
Deze plug-in maakt het super eenvoudig om een child-thema in te stellen en aan te passen voor klassieke (niet-blok) WordPress-thema's. Hier vindt u een eenvoudige, stapsgewijze handleiding om u op weg te helpen.
Stap 1: Installeer en activeer de plug-in
Ga eerst naar uw WordPress-dashboard, zoek naar “Child Theme Configurator” in het gedeelte Plug-ins en installeer het. Eenmaal geactiveerd, ga je naar Extra > Onderliggende thema's .
Stap 2: Stel het Child-thema in
Ga in de Child Theme Configurator naar het Parent/Child . Je ziet een optie om een actie te kiezen. Selecteer 'Een nieuw onderliggend thema maken' om aan de slag te gaan.
Stap 3: Kies uw hoofdthema
Selecteer vervolgens het hoofdthema waarop u wilt voortbouwen in het vervolgkeuzemenu. Laten we voor dit voorbeeld zeggen dat we het Hestia-thema gebruiken. Nadat u uw thema heeft gekozen, klikt u op de knop ‘Analyseren’ om er zeker van te zijn dat het thema compatibel is voor het maken van een child-thema.
Stap 4: Geef uw kindthemamap een naam
Vervolgens wordt u gevraagd de map een naam te geven waarin het onderliggende thema wordt opgeslagen. Je kunt hier creatief aan de slag of het simpel houden met een naam als 'Hestia-kind' om alles georganiseerd te houden.
Stap 5: Bepaal waar u aangepaste stijlen wilt opslaan
Hier is een belangrijke keuze: u kunt nieuwe aangepaste stijlen opslaan in de primaire stylesheet (style.css) van uw child-thema, of in een afzonderlijk stylesheet-bestand.
- Primaire stylesheet : dit is het hoofdbestand waarin stijlen standaard worden opgeslagen. Eventuele wijzigingen hier overschrijven de oorspronkelijke themastijlen.
- Afzonderlijk stijlblad : met deze optie worden uw aangepaste stijlen in een nieuw bestand opgeslagen, zodat de stijlen van het oorspronkelijke thema onaangetast blijven.
Voorlopig gaan we uit van het primaire stylesheet, maar probeer gerust de aparte optie als je het uiterlijk van het hoofdthema volledig wilt behouden.
Meer weten: Beste softwaretools voor webontwerp voor verbluffende en eenvoudige websites
Stap 6: Stel de afhandeling van het bovenliggende thema-stylesheet in
Scroll naar beneden en kies hoe u het stylesheet van het bovenliggende thema wilt laden. We blijven bij de standaardoptie “Gebruik de WordPress-stijlwachtrij”, omdat de plug-in dit automatisch kan afhandelen.
Stap 7: Pas de details van het kindthema aan
Wanneer u stap 7 bereikt, klikt u op 'Klik om kenmerken van onderliggende thema's te bewerken'. Hier kunt u details toevoegen, zoals de naam, beschrijving en versie van het child-thema.
Stap 8: Kopieer menu's en widgets
Normaal gesproken worden bij het maken van een child-thema uw menu's en widgets opnieuw ingesteld. Om te voorkomen dat u deze opnieuw instelt, vinkt u het vakje in stap 8 aan om ze van het bovenliggende thema naar het onderliggende thema te kopiëren.
Maak uw kindthema
Klik ten slotte op ‘Nieuw kindthema maken’. De plug-in maakt automatisch een map voor uw child-thema, compleet met de style.css- en function.php-bestanden die nodig zijn voor toekomstige aanpassingen.
Bekijk een voorbeeld en activeer
Voordat u activeert, klikt u op de voorbeeldlink bovenaan het scherm om er zeker van te zijn dat alles er goed uitziet. Als het voorbeeld van uw kindthema goed wordt weergegeven zonder dat er elementen kapot gaan, klik dan op 'Activeren en publiceren' om het live te maken!
En daar ga je! Je child-thema is nu actief. Op dit punt zal het er net zo uitzien en functioneren als uw hoofdthema. U kunt nu veilig aanpassingen aan het child-thema toevoegen zonder het origineel te beïnvloeden. Gelukkig aanpassen!
Meer informatie over: Beste WordPress Studio-thema's voor creatieve bedrijven
Wat moet u doen als uw WordPress-kindthema niet werkt?
Laat uw child-thema uw wijzigingen niet zien? Maak je geen zorgen: hier zijn enkele veelvoorkomende problemen en oplossingen om ervoor te zorgen dat het werkt zoals verwacht.
Controleer uw function.php-bestand nogmaals
Zorg er eerst voor dat u de stylesheet van het onderliggende thema in uw function.php-bestand in de wachtrij heeft geplaatst. Als het thema niet in de wachtrij staat, wordt het onderliggende thema niet correct geladen en blijft uw site het bovenliggende thema weergeven, waardoor het lijkt alsof uw wijzigingen niet worden weergegeven.
Interessant om te lezen: Laravel versus WordPress: de beste rivalen van PHP staan tegenover elkaar
Bevestig dat uw stylesheet de naam style.css heeft
Controleer nogmaals of u uw stylesheet style.css heeft genoemd, en niet stylesheet.css of iets anders. WordPress verwacht dat de hoofdstylesheet van het child-thema style.css heet. Als het een andere naam heeft, zal uw function.php-bestand het niet herkennen en zullen uw aangepaste stijlen niet van toepassing zijn.
Controleer de sjabloonnaam in style.css
In uw style.css-bestand moet het veld Sjabloon exact overeenkomen met de naam van de map van uw bovenliggende thema. Dit vertelt WordPress welk thema als ouder moet worden gebruikt. Als de naam onjuist is, weet WordPress niet op welk thema het child-thema gebaseerd moet zijn.
Wis uw cache
Soms kan caching ervoor zorgen dat u geen updates ziet. Probeer uw caching te wissen, vooral als u een caching-plug-in gebruikt. Het is ook handig om uw browsercache te wissen of uw site in een incognitovenster te openen om te zien of uw wijzigingen worden weergegeven. Als je actief aan het child-thema werkt, overweeg dan om eventuele caching-plug-ins uit te schakelen totdat je klaar bent.
Gebruik !belangrijk in uw CSS-code
Als je merkt dat de stijlen van het bovenliggende thema nog steeds je aangepaste CSS overschrijven, probeer dan !important toe te voegen aan de stijlen die je prioriteit wilt geven. Hierdoor worden de stijlen van uw child-thema voorrang gegeven op de bovenliggende thema's. Bijvoorbeeld:
| p {achtergrondkleur: grijs !belangrijk;} |
Deze truc kan handig zijn voor specifieke elementen, ID's en CSS-klassen om ervoor te zorgen dat uw wijzigingen worden toegepast.
Neem contact op met themaondersteuning of bekijk forums
Als je al deze stappen hebt geprobeerd en je child-thema nog steeds niet werkt, kun je overwegen contact op te nemen met het ondersteuningsteam van het thema of het themaforum op WordPress.org . Soms hebben thema's unieke configuraties of aangepaste code die van invloed kunnen zijn op de manier waarop onderliggende thema's werken, en kan de ontwikkelaar specifiek advies hebben.
Conclusie
En dat is een omslag! Inmiddels zou je een goed begrip moeten hebben van wat een WordPress-kindthema is en hoe het samenwerkt met een ouderthema. Het installeren van een thema is nog maar het begin bij het bouwen van een WordPress-site.
Hoewel de ingebouwde Gutenberg-editor of de bouwer van uw thema u kan helpen bij het maken van ontwerpaanpassingen, biedt het maken van een kindthema nog meer mogelijkheden. Met een child-thema kunt u niet alleen het ontwerp aanpassen, maar ook de functionaliteit aanpassen zonder de kernbestanden aan te raken, waardoor u de volledige vrijheid heeft om uw site echt uniek te maken.
