Hoewel WordPress het voor niet-codeerders gemakkelijk maakt om een website te beheren, komt er waarschijnlijk een moment waarop je code in WordPress zou willen bewerken om wat meer controle te krijgen over hoe de site eruitziet of hoe deze functioneert.

Om je hierbij te helpen, zal dit artikel je op een aantal verschillende manieren laten zien hoe je code in WordPress veilig kunt bewerken:

Als je al weet wat je wilt doen, kun je op een van de bovenstaande links klikken om direct naar dat specifieke gedeelte te gaan. Zo niet, laten we beginnen met bewerken!

WordPress HTML bewerken voor individuele posts of pagina’s

Laten we beginnen met de eenvoudigste manier om WordPress HTML te bewerken: door middel van de sourcecode voor afzonderlijke WordPress-posts, -pagina’s of andere berichttypen.

Je kunt dit doen in zowel de nieuwe WordPress-blokeditor (Gutenberg) als de oudere klassieke TinyMCE-editor

Bewerken van WordPress HTML in Block Editor (Gutenberg)

Er zijn een aantal manieren waarop je kunt werken met HTML in Gutenberg.

Ten eerste, als je enkel je eigen HTML-code aan een deel van de inhoud wilt toevoegen, raad ik je aan om niet de hele sourcecode van de post te bewerken, omdat dit het onnodig ingewikkeld maakt.

In plaats daarvan kun je gewoon het speciale Custom HTML-blok gebruiken en de HTML-code plakken die je daar wilt gebruiken:

Gutenberg Custom HTML-blok

Gutenberg Custom HTML-blok

Er kan echter ook een moment komen waarop je de HTML van een ander blok rechtstreeks moet bewerken. Als je bijvoorbeeld een nofollow-tag wilt toevoegen aan een link in de blokeditor, moet je de HTML van dat blok bewerken.

Er bestaan twee manieren om dit te doen…

Je kunt eerst op de opties voor een individueel blok klikken en de optie Edit as HTML kiezen:

Hoe bewerk je één enkel blok als HTML

Hoe bewerk je één enkel blok als HTML

Hiermee kun je de HTML voor alleen dat individuele blok bewerken:

Voorbeeld van het bewerken van de HTML van een blok

Voorbeeld van het bewerken van de HTML van een blok

Of, als je de HTML voor je hele post wilt bewerken, kun je de Code Editor openen vanuit de hoofdkeuzelijst Tools & Options. Je kunt hiervoor ook deze sneltoets gebruiken om te schakelen tussen code en visuele bewerking – Ctrl + Shift + Alt + M:

Volledige code-editor in Gutenberg openen

Volledige code-editor in Gutenberg openen

Houd er rekening mee dat je in de volledige code-editor al die mark-up voor blokken moet omzeilen, zoals bijvoorbeeld.

Het bewerken van de code in WordPress hoeft niet moeilijk te zijn! Bekijk deze eenvoudige handleiding voor het aanpassen van HTML, CSS en PHP. 🤓Click to Tweet

Bewerken van WordPress HTML in Classic Editor (TinyMCE)

Als je nog steeds de Classic WordPress-editor (TinyMCE) gebruikt, kun je HTML voor de hele artikel bewerken door naar het tabblad Text te gaan:

Bewerken van HTML in de Classic WordPress-editor

Bewerken van HTML in de Classic WordPress-editor

Bewerken van de sourcecode in het WordPress-thema

Laten we nu op het belangrijkere onderwerp ingaan, namelijk hoe je de code in het WordPress-thema kunt bewerken. Hier staat meer op het spel, dus moeten we een paar inleidende vragen behandelen voordat we ingaan op de how-to.

Waarom staat er meer op het spel? Simpel gezegd, omdat je de site kunt vernielen als je hier iets verprutst!

In recente releases heeft WordPress het een stuk moeilijker gemaakt om dit per ongeluk te doen, maar het bewerken van de sourcecode van de site kan eventueel problemen veroorzaken, dus je wilt er zeker van zijn dat je het veilig doet.

Gebruik een child-thema voor directe codebewerkingen

Mocht je één van de codes in de bestanden van het thema rechtstreeks willen bewerken, dan moet je een child-thema gebruiken in plaats van het parent-thema te bewerken.

Zonder een child-thema worden de codewijzigingen die je aanbrengt overschreven bij de volgende keer dat je het thema bijwerkt. Wanneer je een child-thema gebruikt, kunt je het parent thema echter onmiddellijk bijwerken zonder de wijzigingen die je in het child-thema hebt aangebracht te verliezen.

Wil je meer weten over de voordelen van child-thema’s en hoe je er een kunt maken, bekijk dan onze volledige gids voor WordPress-child-thema’s.

Overweeg een plug-in te gebruiken in plaats van de code in het child-thema te bewerken

Als je van plan bent om de werking van het thema aan te passen, moet je de sourcecode van het child-thema rechtstreeks bewerken.

Als je echter om een andere reden de code in WordPress wilt bewerken, zoals bijvoorbeeld het toevoegen van een trackingscript aan het <head> gedeelte van de site of het toevoegen van een codefragment aan het bestand function.php van het thema, is het wellicht beter om in plaats daarvan een plug-in te gebruiken.

Met de Head, Footer and Post Injections kun je bijvoorbeeld gemakkelijk codefragmenten invoegen waar nodig. En, omdat deze codefragmenten allemaal gescheiden zijn in de interface van de plug-in, is het ook eenvoudiger om ze in de toekomst te beheren.

Ook als je een codefragment toevoegt dat zou kunnen passen in het functies.php-bestand van het child-thema, is de gratis plug-in Code Snippets een geweldige optie. Samengevat, als je de code in WordPress wilt bewerken om codefragmenten toe te voegen aan de thema’s…

… dan zou je moeten overwegen een plug-in te gebruiken, in plaats van je te richten op het bewerken van de bestanden van het thema. Op deze manier wordt het eenvoudiger om die codefragmenten te beheren en zorg je ervoor dat ze niet worden overschreven wanneer je het thema bijwerkt.

Als je andere wijzigingen moet aanbrengen, gaan we dieper in op hoe je de sourcecode voor het thema kunt bewerken.

Gebruik de WordPress Code-editor in het dashboard

Mocht je de code van het thema rechtstreeks willen bewerken, raden we je ten zeerste aan om vooraf een back-up van je site te maken (van de hele site of van het bestand dat je bewerkt).

Als je dat hebt gedaan, kun je de themacode-editor in het dashboard openen door naar Appearance → Theme Editor te gaan. Hier geeft WordPress je eerst een waarschuwing, vergelijkbaar met wat je eerder hebt geleerd:

Waarschuwing voordat je de code-editor in het dashboard opent

Waarschuwing voordat je de code-editor in het dashboard opent

Vervolgens kun je de zijbalk aan de rechterkant gebruiken om door de verschillende themabestanden en de code-editor te gaan en de daadwerkelijke bewerkingen uit te voeren:

WordPress code-editor in het dashboard

WordPress code-editor in het dashboard

Gebruik SFTP om code in WordPress te bewerken

Als alternatief voor de code-editor in het dashboard kun je ook themabestanden bewerken via SFTP. Deze aanpak heeft twee voordelen:

Worstel je met downtime en WordPress-problemen? Bij Kinsta controleren we elke 2 minuten de status van je website en onze WordPress-experts zijn 24/7 beschikbaar. Bekijk onze plannen

Je kunt als volgt verbinding maken met de site via FTP.

Zodra je dat hebt gedaan, ga je naar de map van het thema – …/wp-content/themes/child-theme-name. Zoek het bestand dat je wilt bewerken en klik erop met de rechtermuisknop. De meeste FTP-programma’s geven je een optie om het bestand te bewerken en zullen het bestand automatisch opnieuw uploaden nadat je de wijzigingen hebt aangebracht.

We raden je echter ten zeerste aan een originele versie van het bestand naar je desktop te downloaden voordat je wijzigingen aanbrengt. Op die manier kun je die originele versie gewoon opnieuw uploaden, mocht je per ongeluk iets verkeerd hebben gedaan:

Bewerken van WordPress HTML via SFTP

Bewerken van WordPress HTML via SFTP

Aangepaste CSS toe voegen aan WordPress

Als je alleen aangepaste CSS aan WordPress wilt toevoegen, in plaats van de HTML- of PHP-code van WordPress te bewerken, hoef je de code-editor of SFTP-methoden in het dashboard niet te gebruiken.

In plaats daarvan kun je de WordPress Customizer gebruiken. Behalve dat het een eenvoudigere optie is, is een ander voordeel van het gebruik van deze aanpak dat je de wijzigingen in realtime kunt bekijken.

Ga om te beginnen naar Appearance → Customize in je WordPress-dashboard:

WordPress Customizer openen

WordPress Customizer openen

Zoek vervolgens naar de optie Additional CSS in de WordPress Customizer:

Hier vindt je de optie Additional CSS in de WordPress Customizer

Hier vindt je de optie Additional CSS in de WordPress Customizer

Dit opent een code-editor waar je de gewenste CSS kunt toevoegen. Terwijl je CSS toevoegt, wordt het live voorbeeld van de site automatisch bijgewerkt op basis van de aangebrachte wijzigingen:

Bewerken van CSS in de WordPress Customizer

Bewerken van CSS in de WordPress Customizer

Een andere goede optie voor het toevoegen van CSS is de Simple CSS-plug-in van Tom Usborne. Het geeft je een vergelijkbare optie in de WordPress Customizer, en het laat je ook aangepaste CSS toevoegen aan individuele posts of pagina’s via een meta-box.

Tot slot, als je een heleboel aangepaste CSS wilt toevoegen — zoals honderden of duizenden lijnen — is een andere optie om je eigen aangepaste CSS-stylesheet te maken en wp_enqueue_scripts te gebruiken om deze aan het thema toe te voegen.

Samenvatting

Om de code in een afzonderlijke WordPress-post of -pagina te bewerken, bieden zowel de nieuwe blokeditor als de klassieke editor je opties voor het direct bewerken van HTML.

Anderzijds, als je de sourcecode van het WordPress-thema wilt bewerken, dien je een paar zaken te overwegen:

Als je na deze overwegingen nog steeds directe codebewerkingen moet uitvoeren, kun je de sourcecode van het child-thema vanuit de WordPress-dashboard bewerken door naar Appearance → Theme Editor te gaan. Je zou eventueel ook via SFTP verbinding met je site kunnen maken en op die manier de code bewerken.

Tot slot, mocht je alleen aangepaste CSS willen toevoegen, hoef je de code van het thema niet rechtstreeks te bewerken. In plaats daarvan kun je gewoon het Additional CSS-area in de WordPress Customizer gebruiken of een plug-in zoals Simple CSS.

Heb je vragen over het bewerken van de code in WordPress? Stel je vragen in de reacties!


Als je dit artikel leuk vond, dan zal onze support je zeker bevallen. Alle hostingpakketten van Kinsta hebben 24×7-ondersteuning van onze ervaren WordPress-ontwikkelaars en -engineers. Chat met hetzelfde team dat onze Fortune 500-klanten ondersteunt. Bekijk onze pakketten