WP enqueue Functie CSS en Javascript bestanden WordPress

WP enqueue Functie CSS en Javascript bestanden Wordpress

De snelheid van een website is erg belangrijk. Hoe sneller je website, hoe beter! De snelheid van je website kun je beinvloeden met de WP Enqueue functie en heeft effect op de vindbaarheid in Google, maar ook voor het gemak van de bezoeker. Duur het laden van je website te lang? Dan is de bezoeker waarschijnlijk al weer op zoek naar een andere website om zijn/haar informatie te zoeken. Je kan de snelheid van je website testen op verschillende websites zoals: Google Pagespeed en Pingdom Tools

Trage websites door grote hoeveelheden requests

Het probleem bij veel trage websites is het aantal requests naar de server. Elke javascript en CSS bestand moet opgehaald worden van de server. Vaak zie je dat er op elke pagina van je website Javascript en CSS wordt ingeladen die voor die pagina niet van toepassing zijn. Denk hierbij aan de Javascript voor bijvoorbeeld een contact formulier. Dit formulier staat waarschijnlijk alleen op je contactpagina, maar de bestanden worden op elke pagina van je website ingeladen.

WP enqueue functie WordPress

WordPress heeft een mooie functie om Javascript en css bestanden in te laden op de pagina’s waar dat nodig is. De zogenaamde WP_enqueue_script functie zal ik hieronder gaan beschrijven.

WP enqueue functie in child theme

Hieronder zie je het stukje code wat je in de functions.php moet plakken om een css bestand in te laden op een bepaalde pagina.
Je ziet in dit voorbeeld dat we gebruik maken van een array. Op die manier kun je meerder pagina’s toevoegen waar de CSS geladen moet worden.
De page id vindt je in de URL als je naar de betreffende pagina navigeert in de back-end van WordPress.
Verder maken we bij een child theme gebruik van get_stylesheet_directory_uri() . Dit stukje code zorgt ervoor dat WordPress je CSS bestand eerst gaat zoeken in je Child-theme.

In onderstaande voorbeeld zie je het voorbeeld hoe je een Javascript bestand toevoegt op bepaalde pagina’s. Dit werkt op dezelfde manier als CSS bestanden, maar de code verschilt iets van elkaar. Je ziet verder het woord true in regel 4. Dit wil zeggen dat het Javascript bestand in de footer wordt geplaatst. Dit is vaak van belang omdat javascript bestanden je website erg kunnen vertragen. Door deze pas als laatste te laden zeg je tegen Google dat je maatregelen genomen hebt voor de snelheid van je website.

WP enqueue functie in normale theme

Je kunt hiervoor dezelfde voorbeelden gebruiken zoals hierboven aangegeven. Maar in plaats van get_stylesheet_directory_uri() . maak je gebruik van get_template_directory_uri() .

Dat is alles! Heb je nog vragen? Mail me gerust op info@pixelshape.nl