In WordPress moet u, in plaats van deze simpelweg aan de header toe te voegen, een methode gebruiken die enqueueing heet. Dit is een gestandaardiseerde manier om met uw assets om te gaan met als extra bonus het beheren van afhankelijkheden. Hoe u dat doet, leest u hieronder met wp_enqueue_scripts.

• Hoe enqueueing werkt
• Basisbeginselen van enqueueing met wp_enqueue_scripts
• Afhankelijkhedenbeheer
• Scripts laden in de Footer
• Specificeren van media voor stijlen

Hoe enqueueing werkt

Er zijn twee stappen die genomen worden bij het enqueueing van een script of een stijl. Eerst registreer je het – vertel WordPress dat het er is – en dan enqueue je het, die het uiteindelijk in de header of net voor de afsluitende body tag plaatst.

De reden voor het hebben van twee stappen heeft te maken met modulariteit. Soms wil je WordPress op de hoogte brengen van een asset, maar wil je die niet op elke pagina gebruiken. Bijvoorbeeld: Als u een aangepaste galerij shortcode bouwt die Javascript gebruikt, hoeft u de JS eigenlijk alleen te laden wanneer de shortcode wordt gebruikt – waarschijnlijk niet op elke pagina.

De manier om dit te laten gebeuren is om het script eerst te registreren, en het pas te enqueue wanneer de shortcode wordt getoond (aanbevolen lectuur: The Ultimate Guide to WordPress Shortcodes).

Enqueueing Basics With wp_enqueue_scripts

Om scripts en stijlen in de front-end te enqueue moet u gebruik maken van de wp_enqueue_scripts hook. Binnen de gehaakte functie kunt u de wp_register_script(), wp_enqueue_script(), wp_register_style() en wp_enqueue_style() functies gebruiken.

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 assets geregistreerd en enqueued binnen dezelfde functie, wat een beetje overbodig is. In feite kunt u de enqueue functies gebruiken om meteen te registreren en enqueue, door dezelfde argumenten te gebruiken als u doet in de register 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 moeten scheiden, zou ik dat doen door ze in verschillende hooks te gebruiken. In een realistisch voorbeeld zouden we de wp_enqueue_scripts-haak kunnen gebruiken om de assets te registreren en de functie van de shortcode om ze te enqueue.

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}

Dependency Management

Het enqueueing-mechanisme van WordPress heeft ingebouwde ondersteuning voor dependency management, met behulp van het derde argument van zowel wp_register_style()– als wp_register_script()-functies. U kunt de enqueuing-functies ook meteen gebruiken als u ze niet hoeft te scheiden.

De derde parameter is een array van geregistreerde scripts/styles die moeten worden geladen voordat de huidige asset wordt enqueued. Ons voorbeeld hierboven zou hoogstwaarschijnlijk vertrouwen op jQuery, dus laten we dat nu 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 zelf te registreren of te enqueue omdat het al een onderdeel van WordPress is. U kunt een lijst van scripts en stijlen die beschikbaar zijn in WordPress vinden in de Codex.

Als u zelf afhankelijkheden heeft, moet u die registreren, anders worden uw scripts niet geladen. 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, het tweede is een uitbreiding daarop die afbeeldingen laat openen in een lightbox. Merk op dat hoewel ons tweede script afhankelijk is van jQuery, we dit niet hoeven te specificeren, omdat ons eerste script jQuery al zal laden. Toch kan het een goed idee zijn om alle afhankelijkheden te vermelden, gewoon om er zeker van te zijn dat er niets kapot kan gaan als u vergeet een afhankelijkheid op te nemen.

WordPress weet nu welke scripts we nodig hebben en kan berekenen in welke volgorde ze aan de pagina moeten worden toegevoegd.

Scripts in de voettekst laden

Wanneer u er maar mee weg kunt komen scripts in de voettekst te laden, moet u dat doen. Dit verhoogt de laadtijd van de pagina en voorkomt dat de website blijft hangen tijdens het laden van scripts, vooral als deze AJAX-aanroepen bevatten.

Het enqueuing-mechanisme kan scripts aan de voettekst toevoegen met behulp van de vijfde parameter (de vierde is een optioneel versienummer). Ons voorbeeld hierboven zou de scripts in de voettekst laden als we het licht wijzigen.

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 );}

Specifieer true als de vijfde parameter zal scripts in de voettekst zetten, gebruik false, of het weglaten van de parameter zal dingen in de header laden. Zoals ik al eerder zei, waar mogelijk, laad scripts in de voettekst.

Specificeren Media Voor Stijlen

Met behulp van de vijfde parameter van de stijl register/enqueue functies kunt u het mediatype bepalen waarvoor het script is gedefinieerd (afdrukken, scherm, handheld, enz.). Door deze parameter te gebruiken kunt u het laden van de stijlen beperken tot het specifieke mediatype, wat een handige kleine optimalisatietruc is.

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 die kunnen worden gebruikt, kijk naar de CSS specs.

Samenvatting

Enqueueing assets is een krachtige manier om ze te behandelen. Het geeft u, en andere plugin/theme makers, meer controle over het systeem als geheel en neemt dependency management uit handen.

Als dat nog niet genoeg is, is het de manier om uw assets toe te voegen, veel theme marktplaatsen en de WordPress repository zelf zullen uw werk niet goedkeuren als u deze methode niet gebruikt.