In WordPress kan je het beste een gestandardiseerde methode gebruiken die “enqueueing” heet om al je benodigde bestanden in klaar te zetten. Je voegt ze dus niet gewoon toe aan de header, maar plaatst ze zelf in een wachtrij. Bijkomend voordeel is dat je op deze manier ook afhankelijkheden kan beheren tussen je bestanden. In dit artikel lees je hoe je dit doet door middel van wp_enqueue_scripts.

Zo werkt enqueueing

Je moet twee dingen doen bij het in de wachtrij plaatsen van een script of style. Allereerst moet je het bestand registreren, zodat WordPress weet dat het bestand er staat. Vervolgens plaats je het daadwerkelijk in de wachtrij, “enqueueing”, waardoor het in de header of net voor de laatste body tag geplaatst wordt.

Modulariteit is de voornaamste reden dat dit proces uit twee stappen bestaat. Soms wil je een bestand registreren bij WordPress, maar heb je het niet op elke pagina nodig. Stel bijvoorbeeld dat je een shortcode voor een custom gallery aan het maken bent door middel van JavaScript. Dan hoef je de JS eigenlijk alleen te laden op de pagina’s waar de shortcode gebruikt wordt.

Dit kan je doen door eerst het script te registreren, en het pas in de wachtrij voor laden te plaatsen wanneer de shortcode getoond wordt (lees ook eens: The Ultimate Guide to WordPress Shortcodes).

Introductie over enqueueing met wp_enqueue_scripts

Om script en styles in de front-end te enqueuen, zal je de wp_enqueue_scripts hook moeten gebruiken. Binnen deze hook kan je gebruik maken van de functies wp_register_script(), wp_enqueue_script(), wp_register_style() en wp_enqueue_style().

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );
}

In het bovenstaande voorbeeld heb ik de benodigde bestanden binnen dezelfde functie geregistreerd en in de wachtrij voor laden geplaatst, wat een beetje dubbel is. Je kan namelijk ook de enqueue functies gebruiken om bestanden tegelijk te registreren en in de wachtrij te plaatsen, door dezelfde argumenten te gebruiken als in de registratie-functies:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );
}

Als ik de twee functies zou willen scheiden, zou ik dat doen door ze in verschillende hooks te gebruiken. In een praktijksituatie zouden we de hook wp_enqueue_scripts gebruiken om de assets te registreren, en de functie van de shortcode om ze vervolgens in de wachtrij te plaatsen.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

}

add_shortcode( 'custom_gallery', 'custom_gallery' );

function custom_gallery( $atts ){

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );

    // Gallery code here
}

Beheer van dependencies

Het mechanisme voor enqueueing in WordPress biedt ingebouwde ondersteuning voor het beheren van afhankelijkheden, dependencies, door middel van het derde argumenten voor de functies wp_register_style() en wp_register_script(). Je kan ook de enqueueing functies zelf gebruiken als je deze acties niet wil scheiden.

De derde parameter is een array van geregistreerde scripts en/of styles die geladen moeten worden voordat de volgende asset geladen wordt. Het eerdere voorbeeld zou waarschijnlijk jQuery gebruiken, dus laten we dat ook hier specificeren:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
}

We hoeven jQuery niet apart te registreren en te laden, omdat het al ingebouwd zit in WordPress zelf. Je kan een lijst van beschikbare scripts en styles in WordPress vinden in de Codex.

Als je eigen afhankelijkheden hebt, moet je die ook registreren, anders zullen je scripts niet werken. Hier is een voorbeeld:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );
}

Laten we aannemen dat het eerste script een galerij is en de tweede een uitbreiding daarop, waardoor afbeeldingen binnen een lightbox geopend worden. Let op dat alhoewel ons tweede script jQuery gebruikt, we dit niet hoeven te specificeren, aangezien het eerste script jQuery al laadt. Toch kan het een goed idee zijn om alle afhankelijkheden te noemen, om er zeker van te zijn dat er niks kapot gaat als je later dingen aanpast.

WordPress weet nu welke scripts er nodig zijn, en kan de volgorde bepalen waarop ze toegevoegd moeten worden aan de pagina.

Wanneer je scripts in de footer kan laden, moet je dit altijd doen. Hierdoor kan de pagina sneller weergegeven worden voor bezoekers, en voorkom je dat je website traag wordt tijdens het laden van scripts, zeker wanneer ze AJAX calls bevatten.

Het mechanisme voor enqueueing kan scripts toevoegen aan de footer via de vijfde parameter (de vierde parameter is een optioneel versienummer). Ons bovenstaande voorbeeld zou de scripts in de footer kunnen laden, met enkele kleine aanpassingen.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );
}

Door de vijfde parameter op ’true’ te zetten worden scripts in de footer geplaatst, en als je niks definieert of ‘false’ gebruikt, wordt alles geladen in de header. Zoals eerder gezegd is het laden van scripts in de footer, wanneer mogelijk, altijd beter.

Specificeren van media voor styles

Door de vijfde parameter van de register of enqueue functie voor een style te gebruiken, kan je het mediatype bepalen waar het script voor gedefinieerd wordt (bijv. print, screen, mobile). Door deze parameter te gebruiken kan je het laden van styles voor bepaalde apparaten beperken, wat handig kan zijn voor optimalisatie.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );

}

Voor een volledige lijst van mediatypen dat je kan gebruiken, kan je kijken in de specificatie van CSS.

Samenvatting

Het enqueuen van assets is een handige manier om ze te beheren. Hierdoor krijg je zelf, maar ook andere plugin- of thema-developers, meer controle over het hele systeem, waardoor je ook het beheer van afhankelijkheden kan vereenvoudigen.

Als dat nog niet genoeg voordelen zijn, het is ook de manier om je bestanden toe te voegen, aangezien bijvoorbeeld de WordPress repository en veel thema-verkopers je werk niet zullen goedkeuren als je een andere manier gebruikt.

Daniel Pataki

Hallo, mijn naam is Daniel, ik ben de CTO hier bij Kinsta. Je kent me misschien van Smashing Magazine, WPMU Dev, Tuts+ en andere WordPress/Development tijdschriften. Naast WordPress en PHP besteed ik de meeste tijd aan Node, React, GraphQL en andere technologieën in de Javascript ruimte. Als ik niet bezig ben met het maken van de beste hostingoplossing in het universum, verzamel ik bordspellen, speel ik tafelvoetbal op kantoor, reis ik of speel ik gitaar en zing ik in een behoorlijk slechte band.