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-plug-in evenals door handmatig de code aan het functions.php-bestand toe te voegen. Voor de meeste gebruikers is de plug-inmethode 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 plug-in

Voor de meeste gebruikers is de makkelijkste manier om code toe te voegen aan de WordPress-header en -footer met een plug-in. De voordelen van het gebruik van een plug-in tegenover de handmatige methode:

  • Codefragmenten blijven intact wanneer je van thema wisselt
  • Met de plug-in kunnen codefragmenten eenvoudig toegevoegd worden aan de header of footer van je homepage, wat voor sommige toepassingen nuttig kan zijn.
  • De plug-in is meer beginnersvriendelijk omdat het niet nodig is om code door te spitten.

Hoewel er verschillende plug-ins zijn die deze functionaliteit bieden, raden we de Head, Footer en Post Injections plug-in 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.

Header and Footer WordPress plug-in

Header and Footer WordPress plug-in

Stap 1: Installeer en activeer de Head, Footer and Post Injections plug-in

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:

Installeer de plug-in

Installeer de plug-in

Stap 2: Voeg het codefragment toe aan Head, Footer and Post Injections

Nadat de plug-in 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 plug-in. Maar voor deze handleiding werk je voornamelijk in het standaard Head and footer-tabblad:

Head, Footer and Post Injections interface

Head, Footer and Post Injections interface

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:

Voorbeeld van het toevoegen van code aan de header

Voorbeeld van het toevoegen van code aan de header

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:

Voorbeeld van het toevoegen van code aan de footer

Voorbeeld van het toevoegen van code aan de footer

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 plug-in is dat als je Google AMP voor WordPress gebruikt, je met de plug-in code-fragmenten kunt toevoegen aan de header en footer van de Google AMP-versies van je pagina’s (wanneer je de officiële AMP-plug-in van Automattic gebruikt).

Ga hiervoor naar het AMP-tabblad in Header and Footer en plak het codefragment in het juiste vak:

Google AMP interface

Google AMP interface

Als je verschillende PHP-functies moet toevoegen over de hele site, raden we je ook de gratis Code Snippets plug-in aan. Met de plug-in 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.

Code Snippets WordPress-plug-in

Code Snippets WordPress-plug-in

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 plug-inmethode 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 plug-inmethode 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 AppearanceEditor gaan en het functions.php-bestand selecteren. Plak vervolgens je code aan het einde van het bestand:

Voeg code toe aan het functions.php-bestand

Voeg code toe aan het functions.php-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 plug-in

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 plug-inmethode te gebruiken. Die methode is beginnersvriendelijk en biedt je meestal dezelfde functionaliteit.

16
keer gedeeld