Code toevoegen aan je WordPress site

Wil je weten hoeveel bezoekers je hebt via Google Analytics? Wil je een Mailchimp formulier op je website? Wil je een externe chat aanbieden? Dit zijn maar enkele mogelijke scenario’s waarvoor je code moet toevoegen op je website.

Afhankelijk welke code het is, en waar die actief moet zijn, zijn er verschillende opties om het aan je website toe te voegen. Laten we starten met hoe je het niet moet doen…

Hoe je het niet moet doen

Veel tutorials op het internet schrijven dat je de code gewoon kan toevoegen in het functions.php bestand van het thema. Of rechstreeks de code van de plugin in kwestie gaan wijzigen als je een aanpassing wilt. Het spreekt voor zich dat wanneer je een update installeert, die wijzigingen gewoon zijn verdwenen. Je zou dit dus iedere keer opnieuw moeten doen. Ga dus niet aan de slag met dat advies en lees hier verder hoe het beter kan.

Hoe je het beter doet

Via je childthema

Een mogelijke uitzondering van het toevoegen van code in de functions.php is wanneer je een childthema actief hebt op je website.

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 het opnieuw plakken in je nieuw childthema. Opnieuw manueel werk dus. Het is dus handiger het met een bestaande plugin te integreren of zelf een kleine plugin te schrijven met enkel die code. Zie hieronder.

Met een bestaande plugin

Code Snippets

Als je een eigen plugin schrijven te technisch vindt, kan je altijd gebruikmaken van de plugin Code Snippets. Deze plugin is vooral handig als je code moet toevoegen die ofwel op de voorzijde van je website ofwel aan de achterzijde moet worden uitgevoerd. Dit werkt enkel met PHP code. De toegevoegde code wordt ook op syntax-fouten gecontroleerd, zo voorkom je het schrijven van syntaxfouten in je code.

Zie screenshot:

code-snippets-plugin.png

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

Insert Headers and Footers

Om een Google Analytics trackingscode, een Facebook Pixel of iets anders toe te voegen, 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, zoals Insert Headers and Footers.

insert-header-footer.png

Met deze plugin kun je specifiek code toevoegen aan 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/

Head, Footer and Post Injections

Deze plugin is uitgebreider dan die van WPBeginner. Je kunt specifiek kiezen waar en wanneer je code uitgevoerd moet worden.

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/

Met een 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: Jouw pluginnaam
 */

Alles wat 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 van 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 waarin ik de tekst onderin elke pagina van het Dashboard aanpas:

<?php
/*
Plugin Name:  Sitefly Contact
Plugin URI:   https://sitefly.be
Description:  Voeg contactinformatie toe in het Dashboard.
Version:      1.0
Author:       Jeroen Rotty
Author URI:   https://sitefly.be
*/

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

function remove_footer_admin() {
    echo "Onderhoud door <a href="https://sitefly.be">Sitefly</a> - Jeroen Rotty.";
}

add_filter('admin_footer_text', 'remove_footer_admin');

Geef een reactie