Bewerken van WordPress code – HTML, CSS, PHP (eenvoudige handleiding)

Hoewel WordPress het voor niet-programmeurs 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:

• WordPress HTML bewerken voor individuele posts of pagina’s
• HTML / PHP-code van het thema bewerken
• Aangepaste CSS toevoegen aan je site

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:

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:

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

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:

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

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 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 plugin 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 plugin 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 plugin, 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 plugin Code Snippets een geweldige optie. Samengevat, als je de code in WordPress wilt bewerken om codefragmenten toe te voegen aan de thema’s…

• <head> sectie
• php bestand

… dan zou je moeten overwegen een plugin 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:

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:

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:

• Je kunt de gewenste code-editor
• Als je per ongeluk iets kapot maakt, kun je het probleem meteen oplossen. Als je daarentegen de code bewerkt via de WordPress-dashboard, is er altijd een kans dat je iets kunt vernielen met het gevolg dat je uit de WordPress-dashboard wordt geblokkeerd. Dit betekent dat je via SFTP-verbinding moet maken om het probleem op te kunnen lossen (maar nogmaals, dit is minder waarschijnlijk dankzij recente wijzigingen).

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:

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:

Zoek vervolgens naar 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:

Een andere goede optie voor het toevoegen van CSS is de Simple CSS-plugin 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:

• Gebruik altijd een child-thema in plaats van code rechtstreeks in het parent thema te bewerken.
• Overweeg een plugin te gebruiken om fragmenten te beheren die je toevoegt aan het bestand <head> of functions.php. Deze plugins geven je een simpeler en meer hanteerbare benadering.

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 plugin zoals Simple CSS.

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