Ben je van plan om JavaScript toe te voegen aan je WordPress website, maar weet je niet precies hoe? Dan ben je hier aan het juiste adres. Er zijn verschillende mogelijkheden. Je zou het kunnen doen met code of je kan gebruik maken van plugins. Lees verder om erachter te komen welke manier het beste bij jou past.
Ja, ik wil ook het beste WordPress thema hebben, net zoals ProgrammeerPlaats!
Met JavaScript maak je een website interactief. Misschien wil je wel bepaalde tekst verbergen, als de bezoeker op een button klikt, of je wil bijvoorbeeld een bezoeker de mogelijkheid geven om afbeeldingen op je website te verslepen.
Dit is allemaal mogelijk met JavaScript. Gelukkig kan je JavaScript ook toevoegen in een WordPress website. Heb je nog niet zoveel kennis van JavaScript? Lees dan eerst “JavaScript leren”.
JavaScript toevoegen met code in WordPress
In dit hoofdstuk gaan we kijken hoe je JavaScript toevoegt aan de hele WordPress website en aan een specifieke pagina of bericht/post. Je kan de JavaScript code gelijk meegeven of ophalen uit een apart JavaScript bestand.
Allereerst is het nodig om een child theme te maken. Lees in “Child theme maken in WordPress” hoe je dat doet. Het beste is om lokaal JavaScript toe te voegen en te testen, maar als je er geen problemen mee hebt, kan het natuurlijk ook op je website die al online staat.
Om online op je WordPress website JavaScript toe te voegen, moet je wel connectie maken met de server via een ftp client.
Gebruik maken van hooks in functions.php
Hooks zijn heel handig in WordPress! We gaan hier niet al te diep in op hooks, maar het komt er kort op neer dat je met hooks functionaliteiten van WordPress, een thema of een plugin kan aanpassen en/of uitbreiden. Lees in “Hooks gebruiken” meer over hooks.
Met de “wp_head” hook kan je JavaScript toevoegen in de HTML <head> tag. Normaal zet je daar ook een verwijzing naar een JavaScript bestand in een HTML document. Onderaan, vlak voor de </body> sluitingstag, wordt ook vaak de verwijzing neergezet.
Zoals eerder al gezegd, kan je in plaats van een verwijzing naar een JavaScript bestand ook gelijk JavaScript code neerzetten in de <head> of bijvoorbeeld vlak voor de </body>, maar dit is niet netjes en maakt het onoverzichtelijk. Daarom maken mij JavaScript in een apart JavaScript bestand en maken er een verwijzing naartoe.
Hieronder een voorbeeld van hoe je JavaScript toevoegt aan de <head> van een HTML document, in functions.php van je child theme:
add_action('wp_head', 'js_toevoegen');
function js_toevoegen() {
wp_enqueue_script('index.js', get_stylesheet_directory_uri().'/index.js');
}
Zoals je ziet is dit maar een klein stukje code. De function js_toevoegen() zorgt voor de juiste verwijzing naar het JavaScript bestand en de hook “wp_head” zet de verwijzing in de <head>. De add_action() function zorgt voor de goede samenwerking.
Lees hier op de officiële WordPress website meer over de “wp_head” hook en hier meer over de wp_enqueue_script() function. Zoals je ziet is er voor WordPress developers een uitgebreide documentatie. Handig om meer over onder andere hooks en functions te lezen en hoe je ze kan implementeren.
Het is natuurlijk wel handig om een JavaScript bestand aan te maken met code erin als voorbeeld, anders maak je een verwijzing naar niks. Weet je nog niet goed hoe je een JavaScript bestand aanmaakt? Lees dan dit stukje in het artikel “JavaScript leren”.
Maak een JavaScript bestand, genaamd index.js. Sla het op in je child theme map, waar onder andere ook functions.php staat. In index.js zet je deze code:
function init() {
var button = document.getElementById("verwijderen");
if (button) {
button.addEventListener("click", function() {
document.getElementById("tekst").style.display = "none";
});
}
}
window.addEventListener("load", init, false);
Met dit stukje JavaScript code verwijder je een stukje tekst als je op de een button klikt. Om het helemaal werkend te krijgen, moet je nog wel dit stukje HTML in een pagina zetten in je WordPress website:
<p id="tekst">Deze tekst wordt verwijderd!</p> <button id="verwijderen">Verwijderen</button>
Let erop dat je het in de Text/Tekst editor zet en niet in “Visual/Visueel”:
Zo eenvoudig is het dus eigenlijk om JavaScript toe te voegen aan je WordPress website in code. Als je niet zo technisch bent, zal het wel wat meer moeite kosten.
Het bovenstaande voorbeeld ziet er zo uit als je het implementeert op je eigen WordPress website:
Deze tekst wordt verwijderd!
JavaScript toevoegen aan een pagina of bericht/post met code
Misschien wil je wel geen JavaScript toevoegen aan de hele WordPress website, maar alleen aan één specifieke pagina of bericht. Dan is dit hoofdstuk handig. Hierdoor hebben andere pagina’s en berichten geen last van het toevoegen van je zelf gemaakte JavaScript. Dit bevordert de snelheid van je WordPress website.
JavaScript toevoegen aan één pagina ziet er zo uit in functions.php van je child theme:
add_action('wp_head', 'js_toevoegen');
function js_toevoegen() {
if (is_page('10')) {
wp_enqueue_script('index.js', get_stylesheet_directory_uri() . '/index.js');
}
}
Er is alleen een if-statement toegevoegd, zodat alleen JavaScript wordt toegevoegd aan een pagina met het id die jij hebt meegegeven. Het id van een pagina vind je door de pagina te bewerken en naar de url te gaan. In de url vind je het id van een pagina hier:
JavaScript toevoegen aan één bericht/post ziet er zo uit in functions.php van je child theme:
add_action('wp_head', 'js_toevoegen');
function js_toevoegen() {
if (is_single('10')) {
wp_enqueue_script('index.js', get_stylesheet_directory_uri() . '/index.js');
}
}
Het enige verschil met een pagina is dat je nu is_single() gebruikt in plaats van is_page(). Het id van een bericht vind je op dezelfde manier als bij een pagina.
Als je het JavaScript bestand op meerdere pagina’s en/of berichten gebruikt, is het handiger om het toe te voegen aan je gehele WordPress website. Heb je alleen JavaScript nodig voor een specifieke pagina en/of bericht, dan is het beter om ook dit JavaScript bestand alleen aan de desbetreffende pagina en/of bericht toe te voegen. Houd ook rekening met de snelheid van je website en blijf dat goed testen.
Ja, ik wil ook het beste WordPress thema hebben, net zoals ProgrammeerPlaats!
JavaScript toevoegen met plugins in WordPress
Misschien hou je toch wat meer van gemak, dan is JavaScript toevoegen met plugins de oplossing! Hieronder staan 2 goede plugins, waarmee je JavaScript op een makkelijke manier toevoegt aan je WordPress website.
De Insert Headers and Footers plugin werkt heel eenvoudig. Eerst moet je natuurlijk de plugin downloaden en activeren. Daarna ga je naar het Dashboard en dan klik je op Settings/Instellingen, daar staat de plugin.
Je plaatst een verwijzing naar het JavaScript bestand dat je hebt gemaakt. In ons geval staat index.js in de child theme map. Dit ziet er zo uit binnen de plugin:
Zoals je ziet, heb je de mogelijkheid om een verwijzing naar een JavaScript bestand te plaatsen in de Header of de Footer. Dit is de verwijzing in het bovenstaande plaatje naar het JavaScript bestand:
<script src="https://hellowpress.com/wp-content/themes/generatepress-child/index.js"></script>
Verander de src naar het juiste pad, waar je zelf het JavaScript bestand hebt opgeslagen. Je hoeft niet perse een verwijzing te maken, je kan ook JavaScript code in de Header of Footer gooien. Dit maakt het echter wel erg slordig en onoverzichtelijk, vooral als je steeds meer code gaat schrijven.
Simple Custom CSS and JS
Deze plugin maakt je leven nog een stukje makkelijker. Download en activeer de Simple Custom CSS and JS plugin eerst. Ga in het Dashboard naar de plugin en klik op “Add JS code”.
We plaatsen één regel simpele JavaScript code, om te testen of het werkt:
Hier nogmaals de JavaScript code, zodat je het makkelijk kan kopiëren:
console.log("Test");
Bij de options hebben we dit ingevuld:
Klik op “Publish”. De plugin heeft nu een extern JavaScript bestand aangemaakt met de code die je hebt geschreven. Automatisch zet de plugin een verwijzing in de <head> naar het JavaScript bestand. Hier hoef je allemaal zelf niet meer voor te zorgen.
Kijk nu voor de zekerheid of het JavaScript bestand daadwerkelijk is toegevoegd en wordt herkend. Ga naar je website en klik op je rechtermuisknop en dan op “Inspecteren” (Of Ctrl + Shift + I). Klik daarna op “Console” en kijk of je “Test” in de Console ziet staan:
Als het goed is zie je dat staan, want de plugin werkt uitstekend. Anders heb je misschien zelf iets verkeerds gedaan. Laad de website opnieuw, zonder de cache mee te nemen, door op Ctrl + F5 te drukken en check daarna opnieuw.
Nu weet je hoe je JavaScript toevoegt aan je WordPress website en aan een specifieke pagina en/of bericht! Kijk welke manier jou het beste ligt.
Het artikel “WordPress plugin maken” is ook interessant om door te nemen, mocht je daar interesse in hebben.
Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.