Wat is een child-thema en waarom is het zo belangrijk?
In dit bericht geven we je de antwoorden op deze vragen en laten we je stap voor stap zien hoe je je eigen child-thema kunt maken en aanpassen met behulp van plug-ins of code.
Indien u wenst breng wijzigingen aan in het thema van uw WordPress-site,je hebt waarschijnlijk mensen zien vertellen dat je een child-thema moet gebruiken.
Maar wat is een child-thema en waarom zijn child-thema's zo belangrijk?
In dit bericht geven we je de antwoorden op deze vragen, samen met een inleiding tot kinderthema's en hoe ze perfect voor je zijn.
Vervolgens laten we u stap voor stap zien hoe u uw eigen child-thema kunt maken en aanpassen met behulp van plug-ins of code.
Maar als je WordPress nog nooit hebt geïnstalleerd, ontdek het dan Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog
En laten we dan terugkomen op waarvoor we hier zijn.
Wat is een WordPress-thema voor kinderen?
Een child-thema is geen op zichzelf staand thema. Het is een "kind" van een bestaand hoofdthema, vandaar de naam.
Je installeert het naast je hoofdthema, maar het geeft je de kans om veilig wijzigingen in je hoofdthema aan te brengen zonder het hoofdthema zelf te hoeven bewerken.
Het child-thema krijgt de meeste / alle ontwerpinstellingen van het hoofdthema. In situaties waarin u het child-thema wijzigt, heeft deze wijziging voorrang op de instellingen van het hoofdthema.
Voordelen van een child-thema
Op dit punt vraagt u zich misschien af: waarom kunt u uw wijzigingen niet rechtstreeks in het hoofdthema aanbrengen?
De belangrijkste reden waarom het geen goed idee is, is Updates van WordPress-thema's.
Als u uw WordPress-website veilig en functionerend wilt houden, moet u snel updates toepassen zodra ze uitkomen, inclusief updates voor uw WordPress-thema.
Als u uw website aanpast door uw thema rechtstreeks aan te passen (geen child-thema), wat betekent dat u al uw wijzigingen overschrijft telkens wanneer u het WordPress-thema bijwerkt.
Dit betekent dat u:
- Werk uw WordPress-thema bij en verlies uw baan. Geen erg leuke ervaring, toch?
- Werk uw WordPress-thema niet bij om uw werk niet te verliezen ... wat niet goed is voor de beveiliging en werking van uw WordPress-website.
Met een child-thema kunt u al uw wijzigingen in het child-thema aanbrengen. Dan kunt u het hoofdthema bijwerken zonder uw werk te verliezen.
Behalve dat u veilig kunt updaten, is het gebruik van een child-thema over het algemeen ook handig voor het maken van aanpassingen. Omdat het al uw wijzigingen op één plaats scheidt, is het gemakkelijk om al uw wijzigingen bij te houden en ze indien nodig te wijzigen.
Het is ook gemakkelijk om ondersteboven te gaan. Als u bijvoorbeeld uw wijzigingen niet meer wilt gebruiken en wilt terugkeren naar het hoofdthema, deactiveert u gewoon het onderliggende thema.
sommige WordPress-thema's gebruik zelfs deze standaard ouder/kind-benadering. Als u bijvoorbeeld het Genesis-framework wilt gebruiken, hebt u zowel het parent-thema (het basisframework) als een child-thema nodig om het ontwerp te besturen.
Wanneer moet u een child-thema gebruiken?
Afgezien van een paar uitzonderingen die we hieronder zullen noemen, moet u toujours gebruik een child-thema als u van plan bent om uw eigen wijzigingen aan een bestaand WordPress-thema aan te brengen.
Als u geen child-thema hoeft te gebruiken
Over het algemeen is het gebruik van een child-thema een goede gewoonte wanneer u uw WordPress-thema aanpast.
Er zijn echter een paar uitzonderingen op de regel waarbij er misschien een betere optie is dan het gebruik van een child-thema.
Ten eerste, als je gewoon wat kleine CSS-aanpassingen wilt doen, is het misschien overdreven om een child-thema te maken voor slechts een paar aanpassingen.
In plaats daarvan kunt u uw aangepaste CSS toevoegen met behulp van de functie Aanvullende CSS geïntegreerd in de WordPress Customizer. Of u kunt een gratis WordPress-plug-in zoals Simple CSS.
Ten tweede, als u wijzigingen aanbrengt waarvan u thema-onafhankelijk wilt zijn, is een child-thema misschien niet de beste optie.
Als u bijvoorbeeld een aangepaste taxonomie of een aangepast berichttype, wilt u het bestand waarschijnlijk niet gebruiken functions.php van uw child-thema (omdat u ze wilt behouden, zelfs als u het thema verandert). In plaats daarvan moet u de code gewoon buiten uw thema toevoegen met een plug-in zoals code Snippets of uw eigen aangepaste plug-in.
Hoe een child-thema te maken op WordPress
Nu je weet waarom kindthema's belangrijk zijn, gaan we kijken hoe je daadwerkelijk een child-thema voor je WordPress-website kunt maken.
Ten eerste, als u de Hallo Elementor-themahebben we al een child-thema voor je gemaakt - je hoeft het niet zelf te doen. Jij kan pak het Hello Elementor child-thema van WordPress.org. Je kunt het installeren zoals elk ander WordPress-thema (we laten je ook zien hoe je later in dit bericht een child-thema installeert).
Als je een ander WordPress-thema gebruikt, is het altijd de moeite waard om even bij Google te kijken of je WordPress-themaontwikkelaar een kindthema aanbiedt. Astra, GeneratePress en OceanWP hebben bijvoorbeeld allemaal tools / bestanden om u te helpen bij het downloaden van een child-thema.
Als je WordPress-thema nog geen child-thema heeft, kun je een child-thema maken voor elk WordPress-thema:
- Gebruik a WordPress Plugin gratis generator voor kinderthema's.
- Maak handmatig uw eigen child-thema.
We laten u zien hoe u beide methoden kunt uitvoeren.
Hoe een WordPress-plug-in met een child-thema te gebruiken
Met een plug-in voor het genereren van een child-thema kunt u een child-thema maken zonder uw WordPress-dashboard te verlaten.
De meest populaire optie hier is de gratis plug-in voor de configurator van het kindthema, dat actief is op meer dan 300.000 websites.
Child Theme Configurator helpt u niet alleen bij het maken van de child-themabestanden, maar analyseert ook het thema dat u gebruikt en de thema- en lettertypestijlbladen als dat nodig is.
Het bevat ook andere handige functies als u een child-thema probeert te maken op een website waaraan u al inhoud heeft toegevoegd. Het kan bijvoorbeeld uw bestaande widgets en aanpassingsopties naar het onderliggende thema kopiëren.
Zodra u uw back-up klaar heeft, begint u met het installeren en activeren van de gratis Child Theme Configurator-plug-in van WordPress.org. Ga dan naar het menu Hulpmiddelen → Kindenthema's om uw child-thema te maken.
In de lijst Selecteer een vervolgkeuzelijst ouder thema, selecteer het thema waarvoor u uw child-thema wilt maken. Klik dan op Analyseren:
De plug-in analyseert vervolgens het hoofdthema op eventuele afhankelijkheden.
Als u klaar bent, ziet u nog een paar opties om te configureren hoe u uw child-thema kunt maken. Als u niet zeker weet wat een specifieke instelling betekent, kunt u deze gewoon als standaard laten staan:
Als u klaar bent met het maken van uw keuzes, klikt u op de knop onderaan om maak een nieuw child-thema.
En dat is alles ! De plug-in maakt vervolgens het child-thema voor u. Het wordt echter niet geactiveerd stap dit child-thema.
Om het te activeren:
- Aller à Uiterlijk → Thema's.
- Bekijk een voorbeeld van hoe uw website eruitziet met dit child-thema (om er zeker van te zijn dat het werkt - als uw website er vreemd uitziet, komt dit waarschijnlijk door een CSS-probleem).
- Activeer uw child-thema zoals u dat met elk ander WordPress-thema zou doen. Zorg er echter voor dat je hoofdthema geïnstalleerd blijft.
Nadat je je child-thema hebt geactiveerd, biedt de plug-in Child Theme Configurator ook andere handige tools om je te helpen bij het beheren van het child-thema. Als u bijvoorbeeld naar het tabblad gaat Bestanden vanuit de plug-in-instellingen kunt u alle bijbehorende bestanden in het hoofdthema en het onderliggende thema bekijken.
Vervolgens kunt u bestanden van het hoofdthema naar het child-thema kopiëren.
Als u bijvoorbeeld enkele wijzigingen wilt aanbrengen in single.php, kunt u dit bestand naar het child-thema kopiëren zodat u het veilig kunt bewerken:
U zult ook tal van andere tools vinden om u te helpen met CSS te werken.
We zullen later uitleggen waarom deze tools nuttig zijn.
Handmatig een child-thema maken
Voor deze sectie gaan we ervan uit dat u wat meer weet over PHP en CSS. Als u zich overweldigd voelt door de instructies hier, raden we u aan de gratis plug-in uit de vorige sectie te gebruiken.
Om handmatig een child-thema te maken, moet u twee bestanden aanmaken (dit zijn de strikte minima voor een child-thema):
- style.css - aan het begin hoeft u alleen een kookplaatcode toe te voegen.
- functions.php - hiermee kunt u de stylesheet van het hoofdthema laden. Zonder dit zou uw child-thema de CSS van uw hoofdthema niet kunnen toepassen, waardoor uw website super lelijk wordt!
style.css
Maak eerst een bestand met de naam style.css en voeg de volgende code toe:
Maak eerst een bestand met de naam style.css en voeg de volgende code toe:
/* Themanaam: Hallo Elementor-kind Thema-URI: https://github.com/elementor/hello-theme/ Beschrijving: Hello Elementor Child is een child-thema van Hello Elementor, gemaakt door het Elementor-team Auteur: Elementor Team Auteur URI: https://elementor.com/ Sjabloon: hello-elementor Versie: 1.0.1 Tekstdomein: hallo-elementor-kind Licentie: GNU General Public License v3 of hoger. Licentie-URI: https://www.gnu.org/licenses/gpl-3.0.html */
Zorg ervoor dat u alles wat na de dubbele punt komt vervangt door uw feitelijke informatie:
- Thema naam - naam van uw child-thema.
- URI-thema - de website van uw thema en de bijbehorende documentatie.
- Omschrijving - een korte beschrijving van het thema.
- Auteur - de naam van de auteur van het thema.
- Auteur-URI: - de website van de thema-auteur.
- Sjabloon - naam van je bovenliggende themamap (zoals genoemd in je wp-content / themes-map). Dit is de belangrijkste regel; uw child-thema zal niet werken zonder.
- Versie - versienummer van uw child-thema.
- Tekstveld - dit wordt gebruikt voor internationalisering. U kunt gewoon "kind" toevoegen aan het einde van de sjabloonnaam.
- Licentie - laat dit als standaard staan.
- URI-licentie - laat dit als standaard staan.
Exclusief de rij Sjabloon, het maakt niet echt uit wat je invoert, dus stress niet te veel. Zorg ervoor dat u de mapnaam van uw bovenliggende thema correct invoert voor de sjabloon.
Als u in de toekomst uw eigen aangepaste stijlen wilt toevoegen, kunt u deze toevoegen aan deze stylesheet onder de kookplaatcode.
functions.php
Vervolgens moet u het bestand maken functions.php voor uw child-thema. Nogmaals, hiermee kun je het volledige CSS-stylesheet van je hoofdthema laden.
In het bestand functies.php, voeg de volgende code toe:
/ * Functie om stylesheet van bovenliggend thema in wachtrij te plaatsen * / functie child_enqueue__parent_scripts () { wp_enqueue_style ('ouder', get_template_directory_uri (). '/ style.css'); } add_action ('wp_enqueue_scripts', 'child_enqueue__parent_scripts');
Upload bestanden naar de WordPress-website
Zodra u uw bestanden heeft style.css et functions.php, moet je ze uploaden naar je WordPress-website als een nieuw thema.
Maak hiervoor via FTP verbinding met uw WordPress-website.
Ga dan naar de themamap van uw website (wp-inhoud / thema's)en maak een nieuwe map voor uw child-thema.
Als de map van uw hoofdthema bijvoorbeeld hallo-elementor, kunt u de onderliggende themamap een naam geven hallo-eletor-kind om u eraan te helpen herinneren.
Upload vervolgens uw bestand style.css et functions.php in deze map:
Nadat u beide bestanden heeft gedownload, kunt u naar Uiterlijk → Thema's en activeer je child-thema zoals je dat met elk ander WordPress-thema zou doen.
Hoe een WordPress-thema voor kinderen te installeren
We hebben een aantal van deze aspecten hierboven behandeld in de specifieke methoden, maar we zullen nog een keer bekijken hoe we een WordPress-child-thema kunnen installeren.
Het is ook handig als u een child-thema heeft gedownload van de website van uw thema-ontwikkelaar, in plaats van het zelf te maken.
U kunt een WordPress-child-thema installeren, net als elk ander WordPress-thema:
- Toegang tot Uiterlijk → Thema's in uw WordPress dashboard.
- Klik op Voeg nieuwe.
- Upload het ZIP-bestand van het child-thema.
Tijdens het installatieproces detecteert WordPress dat u een child-thema downloadt en controleert het of het hoofdthema bestaat:
Als u het bestand eenmaal heeft gedownload, moet u dat zeker doen activeer het.
Onthoud dat u, om uw child-thema te laten werken, moet installeren op die tijdhet hoofdthema en het child-thema.
Je child-thema moet je actieve thema zijn, maar je hoofdthema moet nog steeds zijn geïnstalleerd.
Hier is hoe het eruit zou moeten zien:
- Het child-thema is het actieve thema
- Het hoofdthema is nog steeds geïnstalleerd, maar niet actief
Hoe u een child-thema kunt aanpassen
Net als bij het aanpassen van een gewoon WordPress-thema, heb je verschillende opties om een child-thema aan te passen.
Om preciezer te zijn: dat ben je niet echt het child-thema aanpassen - u gebruikt het child-thema om het bestaande (bovenliggende) thema aan te passen.
Eerst laten we u een paar manieren zien waarop u de code kunt gebruiken om uw child-thema aan te passen. Vervolgens delen we een eenvoudigere manier om dingen te personaliseren Elementor-themabouwer.
Pas een child-thema aan met code
Als u uw child-thema met code wilt aanpassen, moet u goede kennis hebben van CSS, HTML en PHP.
Hier zijn enkele dingen die u kunt doen:
Voeg aangepaste CSS toe
Om uw child-thema met CSS aan te passen, kunt u het rechtstreeks aan het bestand toevoegen style.css van uw child-thema.
Voeg CSS toe onder de bestaande code bovenaan het bestand.
Elke CSS die u aan uw child-thema toevoegt, vervangt die van uw hoofdthema, zolang u dezelfde selectors gebruikt.
Vervang bestaande sjablonen
Als u de sjablonen van uw hoofdthema wilt vervangen, kunt u:
- Kopieer het sjabloonbestand van uw bovenliggende thema naar het onderliggende thema.
- Bewerk het sjabloonbestand in uw child-thema.
Als u bijvoorbeeld wilt wijzigen enkele.php, u kopieert het bestand eerst single.php van je hoofdthema tot het child-thema (zorg ervoor dat je dezelfde structuur behoudt).
Vervolgens kunt u de code in uw child-themaversie van bewerken single.php.
Let op: WordPress gebruikt de sjabloon van uw kindthema zolang deze dezelfde naam heeft. Hierdoor verberg je de bestaande sjabloon vrijwel in het hoofdthema.
Als u de plug-in Child Theme Configurator gebruikt die we hierboven hebben genoemd, kan deze u helpen bestanden naar het child-thema te kopiëren zonder uw WordPress-dashboard te verlaten.
Voeg nieuwe sjablonen toe
Naast het kopiëren en wijzigen van bestaande sjablonen van uw hoofdthema, kunt u ook nieuwe aangepaste sjablonen in het onderliggende thema maken.
Als je bijvoorbeeld een sjabloon wilt maken voor een aangepast berichttype dat je hebt toegevoegd, kun je die sjablonen toevoegen aan je child-thema.
Pas een child-thema aan met de Elementor-themagenerator
Als u niet bekend bent, Elementor-themabouwerstelt u in staat om uw WordPress-thema geheel of gedeeltelijk aan te passen met een visuele interface.
Met Elementor Pro en Theme Builder kunt u aangepaste sjablonen maken voor uw websitesjablonen:
- hoofd
- footer
- Single (bijv. Een enkele blogpost of pagina)
- Archieven (bijv. De pagina met al uw blogberichten)
Deze sjablonen werken met zowel het child-thema als het hoofdthema.
Met Elementor Theme Builder hoeft u niet rechtstreeks met code te werken. U hoeft geen aangepaste CSS toe te voegen of uw PHP-sjabloonbestanden te kopiëren - u doet het allemaal met slepen en neerzetten.
Stel dat u de koptekst voor uw child-thema wilt aanpassen. In plaats van uw bestand te hoeven kopiëren header.php op je child-thema en verander vervolgens de PHP, je kunt gewoon een nieuwe header ontwerpen met de visuele en slepen-en-neerzetten-interface van Elementor. Vervolgens kunt u deze header overal op uw website toepassen of alleen op specifieke onderdelen van uw website.
Als CSS, HTML en PHP nieuw voor je zijn, kun je met deze aanpak zonder code je child-thema aanpassen. En zelfs als u dat doet, kan deze visuele benadering u nog steeds veel tijd besparen dan met PHP in uw sjabloonbestanden.
Wanneer u een nieuwe sjabloon maakt met Elementor Theme Builder, kunt u het sjabloontype kiezen. Bijvoorbeeld een header.
Dan kun je beginnen met een schone lei of kiezen voor een van de Elementor Pro-modellen:
Van daaruit kunt u de opties voor slepen en neerzetten in de zijbalk gebruiken om het uiterlijk van uw koptekst te regelen:
Als u klaar bent, kunt u precies kiezen waar u deze koptekstsjabloon wilt gebruiken:
Hoe een child-thema te verwijderen op WordPress
Als je je child-thema niet meer wilt gebruiken, kun je het uitschakelen, net als bij een gewoon WordPress-thema.
Dat is :
- Aller à Uiterlijk → Thema's.
- Activeer een ander thema. Ofwel het hoofdthema of een gloednieuw WordPress-thema.
Onthoud dat als u het child-thema uitschakelt en terugschakelt naar uw hoofdthema, eventuele wijzigingen die u via uw child-thema heeft toegevoegd, niet langer aanwezig zullen zijn.
In plaats daarvan ga je terug naar het ontwerpen van je hoofdthema.
Gebruik een WordPress child-thema
Met een child-thema kunt u veilig wijzigingen aanbrengen in uw WordPress-thema.
Uw child-thema zal alle stijlen van uw parent-thema erven, maar wijzigingen die u aanbrengt in het child-thema zullen het parent-thema overschrijven. Dit betekent dat u uw bovenliggende thema veilig kunt bijwerken zonder dat u wijzigingen verliest die u in het onderliggende thema hebt aangebracht.
Om aan de slag te gaan met een WordPress child-thema, kunt u:
- Controleer of uw thema-ontwikkelaar al een child-thema aanbiedt. Als je Hello Elementor gebruikt, kan dat download er een child-thema voor van GitHub.
- Gebruik de gratis plug-in voor de configurator van het kindthema.
- Maak handmatig uw child-thema aan.
Van daaruit kunt u uw child-thema aanpassen met CSS, HTML en PHP. U kunt de code ook overslaan en Elementor Theme Builder gebruiken om uw thema aan te passen met een visuele interface voor slepen en neerzetten.
Ontdek ook enkele thema's en premium WordPress-plug-ins
U kunt andere gebruiken WordPress plugins om een moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.
We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.
1. AP-prijsstellingstabellen
AP-prijstabel is a WordPress Plugin premium waarmee u eenvoudig prijslijsten met veel functies kunt maken met intuïtieve interfaces. Het biedt 35 voorgedefinieerde sjablonen en een onbeperkt aantal opties.
met deze WordPress Plugin gemakkelijk te gebruiken, het ontwerpen van een verbluffende prijstabel met slechts een paar klikken zal heel eenvoudig zijn. Hiermee kunt u onbeperkte prijsrasters maken door de mogelijkheid te bieden om rijen en kolommen toe te voegen, kolomrand, kolomruimte, kolombreedte en nog veel meer in te stellen.
Lees ook Hoe de WooCommerce "Toevoegen aan winkelwagen" knop aan te passen
Met deze plug-in kunt u ook audio-inhoud toevoegen, video en Google Map.
Downloaden| demonstratie | web hosting
2. wp Paginabuilder
WordPress Page Builder is de ultieme bouwer voor je WordPress-website die wordt geleverd met geweldige tools om een aangepast bericht, aangepaste taxonomie of aangepaste metabox te genereren.
Als kenmerken heeft het onder andere: een aangepast berichttypeCPT, een gepersonaliseerde taxonomie, geavanceerde aangepaste velden, slepen en neerzetten, Google Map-locatie ondersteund, herhaalbare velden ook ondersteund en nog veel meer.
Downloaden | demonstratie | web hosting
3. Rankie
Rankie is een zeer handige WordPress-module die is ontworpen om regelmatig de WordPress-ranglijst op Google te controleren en de positie van elk zoekwoord nauwlettend te volgen.
Als een plug-in voor ranking-tracking zal Rankie de positionering van zoekwoorden dagelijks bijwerken en nauwkeurige rapporten genereren.
Lees ook onze 6 regelmatige vragen met betrekking tot SEO en omleidingen
Het bevat ook een krachtige onderzoekstool die waardevolle zoekwoordenlijsten genereert. Google gebruikt het al voor onderzoek.
Downloaden | demonstratie | web hosting
Aanbevolen bronnen
Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.
Conclusie
Alstublieft ! Dat is het voor deze tutorial. Heb je nog vragen over het nut van een child-thema op WordPress? Laat het ons weten in de opmerkingen sectie en we zullen proberen te helpen!
U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.
Aarzel niet om deel met je vrienden op je favoriete sociale netwerken.
...
