Wil je weten hoeveel bezoekers je hebt op je blog of website via Google Analytics? Wil je een MailChimp inschrijvingsformulier op je website? Wil je een externe chat optie aanbieden? Dit zijn maar enkele mogelijke scenario’s waarvoor je code moet toevoegen op je website. Maar hoe doe je dat nu precies?

Afhankelijk van wat soort code, en waar die terecht moet komen, zijn er verschillende opties om het aan je website toe te voegen.

Hoe je het niet moet doen

Heel veel tutorials op het internet schrijven dat je de code die je wilt toevoegen gewoon rechtstreeks in de functions.php mag worden geplaatst van het thema. Of rechstreeks de code van de plugin in kwestie gaan wijzigen als je een aanpassing wilt. Het spreekt voor zich wanneer je een update installeert dat de wijzigingen gewoon zijn verdwenen.  Je zou dit dus iedere keer opnieuw moeten doen.

Ga hier dus niet op in en lees hieronder verder …

Hoe je het wel moet doen

1. Childthema

Een mogelijke uitzondering van het toevoegen van code in de functions.php is wanneer je een childthema actief hebt op je website. Weet je niet wat een childthema is of hoe je er één maakt? Lees er alles over in een iets ouder bericht van me hier.

Het nadeel van deze oplossing is wanneer je van thema wilt veranderen. Dan moet je tijd investeren om uit te zoeken waar je precies de code hebt toegevoegd en opnieuw plakken in je nieuw childthema. Opnieuw manueel werk dus.

2. De plugin ‘Code Snippets’

Als je een eigen plugin schrijven te technisch klinken vindt, kan je altijd gebruik maken de plugin Code Snippets. Deze plugin is vooral handig als je code moet toevoegen die enkel op de voorzijde van je website of aan de achterzijde moet worden uitgevoerd. Dit werkt enkel met PHP code. De toegevoegde code wordt ook op syntax-fouten gecontroleerd, zou voorkom je bvb. een foutcode 500 (lees hier meer over).

Zie screenshot:

code-snippets-plugin.png

Link : https://nl.wordpress.org/plugins/code-snippets/

3. Header en Footer plugin

Voor code zoals een Google Analytics, een Facebook Pixel of iets anders, dien je het stukje code vaak in de header of net onderaan in de footer te plaatsen. De Code Snippets plugin is hiervoor niet uitgebreid genoeg en hiervoor zijn alternatieven beschikbaar.

3.1 Insert Headers and Footers (WPBeginner)

insert-header-footer.png

Met deze plugin kun je specifiek je code toevoegen aan zowel je header of aan je footer, er zijn maar 2 velden in de hele plugin. Zie bovenstaand screenshot.

Link: https://nl.wordpress.org/plugins/insert-headers-and-footers/

3.2 Head, Footer and Post Injections (Stefano Lissa)

Deze plugin is uitgebreider dan die van WPBeginner, met name de mogelijke locaties waar je de code nodig acht. Zie screenshot:

head-footer-and-post-injections.png

Als je deze functionaliteit nodig hebt is dit een prima plugin.

Link: https://nl.wordpress.org/plugins/header-footer/

4. Schrijf je eigen plugin

Het klinkt misschien heel ingewikkeld, maar eigenlijk is een kleine plugin schrijven met enkel de code die je hoeft toe te voegen heel simpel. Maak een .php bestand aan in je wp-content/plugins map, geef het een beschrijvende naam en zet er volgende code in.

<?php
/*
Plugin Name:  Je Plugin naam
Plugin URI:   De link naar je website
Description:  De beschrijving wat de plugin doet
Version:      1.2 (hier komt je versienummer, weinig belang voor dit soort plugin)
Author:       Je naam
Author URI:   https://jewebsite.be
*/

Alles dat je na de */ plaatst is de effectieve code. Om je plugin iets veiliger te maken voeg je ook dit daarna toe:

defined( 'ABSPATH' ) or die( 'Hackers niet toegelaten' );

Dit voorkomt directe uitvoering en toegang tot het bestand en maakt het dus veiliger. Na die regel kun je de effectieve plugin code toevoegen.

Een voorbeeld van een volledige plugin bestand zet ik hieronder, waar ik zelf een stukje toevoeg aan de wp_head() hook.

<?php
/*
Plugin Name:  Google Analytics
Plugin URI:   https://jerrix.blog
Description:  Voegt de Google Analytics global tag toe
Version:      1.0
Author:       Jeroen Rotty
Author URI:   https://jerrix.be
*/

defined( 'ABSPATH' ) or die( 'Hackers niet toegelaten' );

// Voeg Google Analytics toe aan de header

function google_analytics_header() {
    ?>
      <!-- Google Analytics -->
      <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-XXXXX-Y', 'auto');
      ga('send', 'pageview');
      </script>
      <!-- End Google Analytics -->
    <?php
}
add_action('wp_head', 'google_analytics_header');

Veel succes, vragen of opmerkingen over deze blogpost? Reageer dan hieronder!