Als je een WordPress website beheert, zal er zeker een tijd komen dat je te maken krijgt met code snippets. Omdat het onderhoud van code snippets onnodig werk kan veroorzaken als ze niet correct zijn geïntegreerd, zijn er code snippet plugins. Maar er zijn ook andere manieren om Code Snippets op je website te integreren. In dit artikel vergelijken we de beste manieren om code snippets aan je WordPress website toe te voegen. 

Allereerst moet de vraag worden beantwoord: Wat is een code snippet? Een code snippet is een klein stukje code dat de functionaliteit van je website uitbreidt. Vandaar de naam – vertaald "code snippet". Dit is om te suggereren dat het maar een paar regels code zijn. Nuttige voorbeelden zijn de mogelijkheid om responsieve video's op te nemen en het toestaan van extra bestandsformaten voor de mediabibliotheek. Het interessante is dat deze code snippets een hele plugin kunnen vervangen. Dit kan de hoeveelheid code (en dus de bestandsgrootte), de prestaties en ook de foutgevoeligheid van je website aanzienlijk verbeteren.

Er zijn andere gevallen waarin je code snippets moet toevoegen aan je WordPress website. Als je wilt bijhouden wie je website bezoekt, kun je een tracking code toevoegen in de header of footer. Als je een kant-en-klare oplossing voor toestemming voor cookies op je website wilt gebruiken, voeg je meestal een JavaScript-code toe in de header of footer. 

Waarom überhaupt Code Snippet plugins? 

Bij veel WordPress websites is de code aangepast, maar soms op een manier die niet duurzaam is. Code snippets mogen niet direct in het "Parent" of Main Theme van WordPress worden opgenomen. Dit komt omdat ze worden overschreven en verwijderd zodra je het thema bijwerkt.

Hetzelfde geldt voor plugins. Als je de code van een plugin rechtstreeks wijzigt, zullen de wijzigingen waarschijnlijk worden verwijderd tijdens een update. De enige manier om jouw wijzigingen te bewaren is om ze op te slaan of elders een back-up te maken. Sommige plugin-updates voegen alleen nieuwe functies toe, maar andere bevatten ook beveiligingsverbeteringen. Deze moeten correct worden toegepast om je website minder kwetsbaar voor aanvallen te maken. Daarom kan het onjuist toepassen van code snippets zelfs een veiligheidsrisico worden, omdat je door de code snippet op het idee kunt komen om met de update te blijven wachten.

Ik zal je nu drie manieren voorstellen om code in te voegen die gebruikt kan worden in een functions.php bestand. Een daarvan is de code snippet plugins. Dit dekt niet elke situatie waarin je een plugin of thema wilt aanpassen, omdat het afhankelijk is van het bestaan van geschikte hooks voor de noodzakelijke veranderingen. Hooks zijn plaatsen in de code voor interactie met de WordPress core, d.w.z. een soort "haak" waar plugins en themes kunnen "inhaken". Dus als er geen hook is voor een bepaalde gewenste functie, zijn code snippets (in functions.php) de meest verstandige manier.

Maak een WordPress plugin

Deze methode vereist enig werk aan het bestand en aan de website zelf, dus je moet voorzichtig zijn en het beste eerst een back-up maken voordat je wijzigingen aanbrengt. Een plugin heeft ten minste één map voor het PHP-bestand. Probeer een unieke naam te bedenken voor je map en bestanden (je kunt een voorvoegsel toevoegen op basis van je naam of de naam van je bedrijf, of iets dergelijks (bijvoorbeeld "Raidboxes.io Disk Usage Sunburst").

In dit bestand heb je nog één ding nodig – een header met de plugin informatie. Hier heb je ook een declaratie van je plugin naam nodig, zoals het volgende: 

<?php

/**
* Plugin Name: your plugin name
*/

Goed gedaan! Nu heb je je eerste plugin gemaakt. Voeg na de header je code snippets toe (degene die je wilt invoegen in functions.php) en upload de folder naar jouw /wp-content/plugins/ folder op de server. En je plugin zou moeten verschijnen onder Plugins in het admin gedeelte. 

Ik verkies de aanpak van het creëren van een aangepaste plugin omdat het geweldig is voor het toevoegen van code aan functions.php. Het is ook makkelijk op te zetten. 

Gebruik een WordPress plugin

Voor wie het niet aandurft om zelf plugins te maken, is een van de Code Snippet plugins een prima manier om je code snippets te beheren, of om aangepaste code toe te voegen aan WordPress websites in het algemeen. Je bent waarschijnlijk al gewend om plugins van derden te installeren, dus dit kan gemakkelijker zijn dan de eerste optie.

Installeer gewoon de gewenste plugin en navigeer naar het nieuwe menu item dat verschijnt in het administratie gedeelte. Bedenk dat de verschillende plugins verschillend gestructureerd kunnen zijn. Maar de meeste zijn eenvoudig en gemakkelijk te begrijpen. Je moet elk stukje code dat je toevoegt hernoemen. Dit is zeer nuttig om het gemakkelijker te maken een bepaalde Code Snippet te vinden. Deze aanpak wordt sterk aanbevolen en kan je bij veel Code Snippets problemen besparen.

Doorslaggevende factoren voor de keuze van een goede plugin waarmee je code snippets op je website kunt uitvoeren, zijn onder meer de invloed op de prestaties van je website en de gebruiksvriendelijkheid. Ik zal je nu kennis laten maken met een aantal WordPress code snippet plugins.

De beste Code Snippet plugins voor WordPress

Code Snippets

Deze extensie is ontwikkeld door Code Snippets Pro en is mijn persoonlijke favoriet. Het idee van de extensie is dat je kleine PHP code snippets kunt toevoegen. Het biedt een eenvoudige oplossing om je eigen HTML, JavaScript of PHP code snippets toe te voegen. Het gebruik van de plugin is vergelijkbaar met de andere admin-menu's van WordPress en is heel eenvoudig te gebruiken. Met de plugin kun je codesnippers aan je theme toevoegen met behulp van een grafische interface. Merk op dat deze extensie niet geschikt is voor het toevoegen van trackingcodes en dergelijke. Deze uitbreiding kun je het beste gebruiken om meer functies toe te voegen aan het functions.php bestand van je thema.

Kenmerken:

• Je kunt PHP-code gebruiken in widgets, pagina's en berichten.
• PHP toevoegen om contactformulieren te maken en elke soort invoer of upload te verwerken.
• PHP toevoegen om voor de gebruiker geoptimaliseerde inhoud te maken.
• Met PHP kun je elk aspect van je WordPress installatie aanpassen.

Insert PHP Code Snippets

Deze plugin is ontwikkeld door xyzscripts.com en is een populaire extensie die regelmatig wordt bijgewerkt. Met deze plugin kun je PHP code gebruiken die gemakkelijk kan worden ingevoegd in de normale WordPress editor, omdat de snippet shortcodes maakt voor elke code die wordt toegevoegd. Het invoegen werkt ook met een shortcode in de zijbalk van de tekstwidget van de pagina. 

Kenmerken: 

• In de TinyMCE editor heb je een slim dropdown menu
• Converteer PHP snippets naar shortcodes voor eenvoudige implementatie
• Eenvoudige en flexibele functionaliteit

Custom CSS Pro 

Met de Custom CSS Pro WordPress plugin, kun je eenvoudig aangepaste CSS code toevoegen aan je WordPress website. Deze gratis WordPress plugin biedt een aantal handige functies, waaronder real-time preview en regelnummering om het bewerken van de code wat makkelijker te maken. 

Kenmerken:

• Visueel zoals de omgeving in Visual Studio Code of Sublime Text
• Het is gemakkelijk om aangepaste CSS code aan WordPress toe te voegen
• Live voorbeeld in real time

Insert Headers and Footers

Dit type plugin maakt het gemakkelijk om code in de header of footer in te voegen. De extensie is ontwikkeld door WPbeginner, die ook de beroemde formulier plugin WPforms heeft ontwikkeld. Met de plugin kun je gemakkelijk code snippets invoegen voor de integratie van diensten zoals Google Analytics en Facebook Pixel. 

Kenmerken: 

• Snel op te zetten
• Gemakkelijk invoegen van headers, scripts en andere code
• Hiermee kun je elke code of script toevoegen, samen met HTML en JavaScript
• Is de eenvoudigste optie voor het invoegen van tracking codes

Geïntegreerde tools in Elementor (Pro versie)

Als je de Page Builder Elementor in zijn Pro-versie gebruikt, hoef je geen andere plugin te installeren. Elementor heeft een ingebouwde tool voor het invoegen van tracking codes en dergelijke. Elementor ondersteunt ook het hernoemen van alle scripts die je aan je WordPress website toevoegt. Om Elementor Custom Code te vinden, volg de volgende stappen. Ga naar Dashboard > Elementor Custom Code. Plak daar het script dat je op je pagina wilt plaatsen. Belangrijk is dat je een actieve Elementor Pro licentie moet hebben om de aangepaste code tools te kunnen gebruiken die in Elementor zijn ingebouwd.

Kenmerken: 

• Eenvoudige en logische structuur
• Geïntegreerd in je Page Builder

Gebruik een Child Theme

Deze methode is het minst aanbevolen voor het toevoegen van code snippets, maar het werkt nog steeds goed. Het is iets gecompliceerder dan een plugin maken. Een Child theme moet code en styling bevatten die van toepassing zijn op de lay-out en het uiterlijk van je website. Maar een snippet wordt meestal gebruikt om de functionaliteit te veranderen en valt dus niet echt onder de "verantwoordelijkheid" van een Child theme. 

Om een Child Theme te maken, moet je een map aan met dezelfde naam aanmaken als je het Parent Theme en met het achtervoegsel "-child" (als de map met het parent thema "raidboxes.io-theme" heet, wordt de map met het child theme "raidboxes.io-theme-child"). 

In deze map heb je op zijn minst twee bestanden nodig: het stylesheet bestand genaamd style.css en het PHP bestand genaamd child.php.

Het bestand style.css moet een header bevatten met de volgende minimale specificaties:

/* 
Theme Name: Raidboxes.io Theme Child
Template: Raidboxes Theme
Version: 1.0.0
*/

Voeg dan je code snippet toe aan het einde van het functions.php bestand en upload de Child Theme-map naar de server op /wp-content/themes/.

Als alles OK is, kun je het menu Design → Themes in je admin gedeelte openen en het nieuwe Child thema activeren. Als je meer wilt weten, leggen we je in het magazine uit hoe je een Child theme maakt.

Conclusie 

Dit artikel heeft enige basisinformatie gegeven over de mogelijkheden om code snippets in WordPress op te nemen. De beslissing tussen het maken van je eigen WordPress plugin of Child Theme of het gebruik van een Code Snippet plugin is aan jou – en hangt alleen af van je voorkeuren, aangezien de drie methoden functioneel hetzelfde vervullen. Het is het beste om te gebruiken wat het beste bij jou past.