Heb je moeite met het toevoegen van code aan de WordPress-header of -footer? Voor veel hulpprogramma’s en trackingscripts moet je codefragmenten toevoegen aan de header of footer van je WordPress-site. WordPress maakt het je echter niet makkelijk om deze aan te passen.
In dit artikel laten we je zien hoe je code toevoegt aan de WordPress-header of -footer, zowel met behulp van een WordPress-plugin evenals door handmatig de code aan het functions.php-bestand toe te voegen. Voor de meeste gebruikers is de pluginmethode de aanbevolen methode. Ervaren WordPress-gebruikers kunnen ervoor kiezen om de handmatige methode gebruiken.
Druk op de onderstaande links om direct naar de gewenste methode te gaan:
- Code toevoegen aan een WordPress-header en -footer met een plugin
- Handmatig code toevoegen aan een WordPress-header en -footer
Code toevoegen aan een WordPress-header en -footer met een plugin
Voor de meeste gebruikers is de makkelijkste manier om code toe te voegen aan de WordPress-header en -footer met een plugin. De voordelen van het gebruik van een plugin tegenover de handmatige methode:
- Codefragmenten blijven intact wanneer je van thema wisselt
- Met de plugin kunnen codefragmenten eenvoudig toegevoegd worden aan de header of footer van je homepage, wat voor sommige toepassingen nuttig kan zijn.
- De plugin is meer beginnersvriendelijk omdat het niet nodig is om code door te spitten.
Hoewel er verschillende plugins zijn die deze functionaliteit bieden, raden we de Head, Footer en Post Injections plugin van Stefano Lissa aan omdat deze meer controle biedt dan veel van de alternatieven. Het heeft momenteel meer dan 200.000 actieve installaties met een waardering van 5 uit 5 sterren.
Stap 1: Installeer en activeer de Head, Footer and Post Injections plugin
Head, Footer and Post Injections is gratis beschikbaar op WordPress.org, dus je kunt het direct vanuit je WordPress-dashboard installeren en activeren door naar Plugins → Add New te gaan en ernaar te zoeken:
Stap 2: Voeg het codefragment toe aan Head, Footer and Post Injections
Nadat de plugin is geactiveerd, kun je de interface openen door naar Settings → Header and Footerte gaan in het WordPress-dashboard. Je ziet een aantal tabbladen in de interface van de plugin. Maar voor deze handleiding werk je voornamelijk in het standaard Head and footer-tabblad:
Om code toe te voegen aan de header van je site, plakt je deze in een van de vakken onder het <HEAD> SECTION INJECTION-vak:
- Every page – voegt het codefragment toe aan de header van elke afzonderlijke pagina van je site. Dit is wat je meestal wilt gebruiken.
- Only home page – voegt het codefragment alleen toe aan de header van de homepage.
Als je bijvoorbeeld de trackingcode van Google Analytics aan WordPress wilt toevoegen, plak je deze simpelweg in het Every page-vak en sla je je wijzigingen op:
Als je de code aan het voettekst van de site wilt toevoegen, scrol dan omlaag naar de BEFORE THE </BODY> CLOSING TAG (FOOTER)-optie. Ook hier zijn er twee opties, maar ze verschillen van het headergedeelte:
- Desktop – ondanks de naam voegt dit code toe aan de footer van zowel de desktopsite als de mobiele versie van je site, tenzij je het Mobile-vakje aanvinkt.
- Mobile – indien aangevinkt, kunt je hiermee een ander codefragment toevoegen aan de mobiele versie van je site.
Als je een codefragment wilt toevoegen aan de footer voor alle gebruikers, ongeacht hun apparaat, plak de code dan in het Desktop-vak en vink Mobile niet aan:
Indien nodig kunnen er meerdere codefragmenten aan elk vak toegevoegd worden.
BONUS – Code toevoegen aan de header en footer van Google AMP pagina’s
Een fijne bijkomstigheid van deze plugin is dat als je Google AMP voor WordPress gebruikt, je met de plugin code-fragmenten kunt toevoegen aan de header en footer van de Google AMP-versies van je pagina’s (wanneer je de officiële AMP-plugin van Automattic gebruikt).
Ga hiervoor naar het AMP-tabblad in Header and Footer en plak het codefragment in het juiste vak:
Als je verschillende PHP-functies moet toevoegen over de hele site, raden we je ook de gratis Code Snippets plugin aan. Met de plugin hoef je niet meer de aangepaste codefragmenten toe te voegen aan het functions.php-bestand van het thema. Het heeft momenteel meer dan 100.000 actieve installaties met een waardering van 5 sterren.
Handmatig code toevoegen aan een WordPress-header en -footer
Als je niet bekend bent met de basisprincipes van PHP, raden we aan om de bovenstaande pluginmethode te gebruiken. De handmatige methode is dan mogelijk te ingewikkeld.
In dit gedeelte leer je hoe je handmatig codefragmenten kunt toevoegen aan de header en footer van je thema via het functions.php-bestand.
Als je door wilt gaan met deze methode in plaats van de pluginmethode in het vorige gedeelte, is het essentieel dat je een child-thema gebruikt om bewerkingen in uit te voeren. Als je geen child-thema gebruikt, wordt elke code die je toevoegt aan de header of footer overschreven wanneer je je WordPress-thema bijwerkt.
Veel ontwikkelaars bieden een child-thema aan. Mocht je ontwikkelaar dit niet doen, vindt je hier een handleiding voor het maken van een child-thema in WordPress. Als je het child-thema gereed hebt voor gebruik, kun je doorgaan met de volgende stappen om code toe te voegen aan de header of footer van je thema.
Hoewel je codefragmenten rechtstreeks aan de header.php– en footer.php-bestanden kunt toevoegen, is het beter om het functions.php-bestand en de juiste WordPress-hook te gebruiken. Hiermee kun je alle codefragmenten op één plek bewaren en vermijdt je wijzigingen aan de kernbestanden van het thema.
Stap 1: Codefragmenten voorbereiden
Om je op weg te helpen, geven we je een kader om code toe te voegen aan zowel de header als de footer.
Gebruik dit codefragment om code toe te voegen aan de header:
/* Beschrijf hier wat het codefragment doet zodat je je dit later kunt herinneren */
add_action('wp_head', 'your_function_name');
function your_function_name(){
?>
PLAK HIER DE HEADER CODE
<?php
};
Gebruik dit codefragment om code toe te voegen aan de footer:
/* Beschrijf hier wat het codefragment doet zodat je je dit later kunt herinneren */
add_action('wp_footer', 'your_function_name');
function your_function_name(){
?>
PLAK HIER DE FOOTER CODE
<?php
};Zorg ervoor dat je voor elk fragment het volgende aanpast:
- De beschrijving in het commentaar (handig wanneer je je een jaar later probeert te herinneren wat de code doet)
- De tijdelijke aanduiding naam_van_functie (beide instanties)
- De tijdelijke aanduiding PLAK HIER DE X CODE
Stap 2: Codefragmenten toevoegen aan functions.php-bestand van het child-thema
Zodra je alle relevante codefragmenten gereed hebt, moet je deze toevoegen aan het functions.php-bestand van je child-thema. Je kunt dit bestand bewerken door met FTP verbinding te maken met je site. Je kunt ook naar Appearance → Editor gaan en het functions.php-bestand selecteren. Plak vervolgens je code aan het einde van het bestand:
Zorg ervoor dat je je wijzigingen opslaat en je bent klaar!
BONUS: Code alleen toevoegen aan de header of footer van bepaalde pagina’s
Als je meer controle wilt over waar codefragmenten voor header en footers worden weergegeven, kun je if-statements gebruiken om de code alleen toe te voegen aan specifieke pagina’s op je WordPress-site.
Als je bijvoorbeeld alleen codefragmenten wilt toevoegen aan de header van de homepage, kun je de volgende code gebruiken:
/* Beschrijf hier wat het codefragment doet zodat je je dit later kunt herinneren */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_front_page()) { ?>
PLAK HIER DE HEADER CODE
<?php }
};
Een andere optie is om de codefragmenten alleen aan specifieke berichten of pagina’s toe te voegen. Om dit te doen, kun je de volgende code gebruiken:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_single(73790)) { ?>
PLAK HIER DE HEADER CODE
<?php }
};
Zorg ervoor dat je het voorbeeldgetal – 73790 – vervangt met de daadwerkelijke ID van de post of pagina waar je de code aan toe wilt voegen.
Bij twijfel: gebruik de plugin
Tot zover onze gids over het toevoegen van code aan de header of footer van een WordPress-site. Als de handmatige codevoorbeelden verwarrend zijn, raden we aan om de pluginmethode te gebruiken. Die methode is beginnersvriendelijk en biedt je meestal dezelfde functionaliteit.
