Dans WordPress, au lieu de simplement les ajouter à l’en-tête, vous devriez utiliser une méthode appelée enqueueing qui est une façon standardisée de gérer vos ressources avec en prime la gestion des dépendances. Découvrez comment le faire ci-dessous en utilisant les scripts wp_enqueue_scripts.

Comment fonctionne l’enqueueing

Il y a deux étapes à franchir pour obtenir un script ou un style. Tout d’abord, vous l’enregistrez – dites à WordPress qu’il est là – puis vous le mettez en file d’attente (enqueue), ce qui le fait apparaître dans l’en-tête ou juste avant la balise de fermeture du corps.

La raison pour laquelle il y a deux étapes est liée à la modularité. Parfois, vous voudrez faire connaître une ressource à WordPress, mais vous ne voudrez peut-être pas l’utiliser sur toutes les pages. Par exemple, il est possible que vous ne vouliez pas l’utiliser sur toutes les pages : Si vous créez un shortcode de galerie personnalisé qui utilise Javascript, vous n’avez besoin de charger le JS que lorsque le shortcode est utilisé – probablement pas sur chaque page.

Pour ce faire, il faut d’abord enregistrer le script, et ne le mettre en enqueue que lorsque le shortcode est affiché (lecture suggérée : Le guide ultime des codes courts ou shortcodes WordPress).

Les bases de l’enqueueing avec wp_enqueue_scripts

Pour mettre en file d’attente les scripts et les styles dans le front-end, vous devez utiliser le hook wp_enqueue_scripts. Dans la fonction hook, vous pouvez utiliser les fonctions wp_register_script(), wp_enqueue_script(), wp_register_style() et 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' );
}

Dans l’exemple ci-dessus, j’ai enregistré et mis en file d’attente les ressources au sein de la même fonction, ce qui est un peu redondant. En fait, vous pouvez utiliser les fonctions enqueue pour enregistrer et mettre en file d’attente immédiatement, en utilisant les mêmes arguments que pour les fonctions register :

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

Si je devais séparer les deux fonctions, je le ferais en les utilisant dans des hooks différents. Dans un exemple concret, nous pourrions utiliser le hook wp_enqueue_scripts pour enregistrer les ressources et la fonction du shortcode pour les mettre en file d’attente.

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
}

Gestion des dépendances

Le mécanisme d’enqueueing de WordPress a un support intégré pour la gestion des dépendances, utilisant le troisième argument des fonctions wp_register_style() et wp_register_script(). Vous pouvez également utiliser les fonctions de mise en file d’attente immédiatement si vous n’avez pas besoin de les séparer.

Le troisième paramètre est un tableau de scripts/styles enregistrés qui doivent être chargés avant que la ressource actuelle ne soit mise en file d’attente. Notre exemple ci-dessus s’appuierait très probablement sur jQuery, alors précisons cela maintenant :

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

Nous n’avons pas besoin d’enregistrer ou de mettre en file d’attente jQuery nous-mêmes car il fait déjà partie de WordPress. Vous pouvez trouver une liste des scripts et des styles disponibles dans WordPress dans le Codex.

Si vous avez vos propres dépendances, vous devrez les enregistrer, sinon vos scripts ne se chargeront pas. Voici un exemple :

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

Supposons que le premier scénario soit une galerie, le second est une extension qui fait s’ouvrir les images dans une lightbox. Notez que même si notre second script repose sur jQuery, nous n’avons pas besoin de le préciser, car notre premier script chargera déjà jQuery. Cela dit, il peut être judicieux d’indiquer toutes les dépendances, juste pour s’assurer que rien ne peut se casser si vous oubliez d’inclure une dépendance.

WordPress sait maintenant de quels scripts nous avons besoin et peut calculer dans quel ordre ils doivent être ajoutés à la page.

Chaque fois que vous pouvez vous en tirer en chargeant des scripts dans le pied de page, vous devriez le faire. Cela augmente le temps de chargement apparent des pages et peut éviter que votre site web ne soit suspendu pendant le chargement des scripts, surtout s’ils contiennent des appels AJAX.

Le mécanisme de mise en file d’attente peut ajouter des scripts au pied de page en utilisant le cinquième paramètre (le quatrième étant un numéro de version optionnel). Notre exemple ci-dessus chargerait les scripts dans le pied de page si nous le modifions légèrement.

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

En spécifiant true comme cinquième paramètre, on met des scripts dans le pied de page, en utilisant false, ou en omettant le paramètre, on charge des choses dans l’en-tête. Comme je l’ai déjà mentionné, dans la mesure du possible, chargez les scripts dans le pied de page.

Spécification des médias pour les styles

Le cinquième paramètre des fonctions register/enqueue de style permet de contrôler le type de média pour lequel le script a été défini (print, screen, handheld, etc.). Ce paramètre vous permet de limiter le chargement des styles au type de média particulier, ce qui est une petite astuce d’optimisation très pratique.

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

}

Pour une liste complète des types de médias qui peuvent être utilisés, consultez les spécifications CSS.

Résumé

La mise en file d’attente ou enqueueing des ressources est un moyen efficace de les gérer. Elle vous permet, ainsi qu’aux autres fabricants de plugins/thèmes, de mieux contrôler le système dans son ensemble et vous décharge de la gestion des dépendances.

Si cela ne suffisait pas, c’est le moyen d’ajouter vos ressources, de nombreux marchés de thèmes et le dépôt WordPress lui-même n’approuveront pas votre travail si vous n’utilisez pas cette méthode.

Daniel Pataki

Bonjour, je m'appelle Daniel et je suis directeur technique ici chez Kinsta. Vous me connaissez peut-être depuis Smashing Magazine, WPMU Dev, Tuts+ et d'autres magazines WordPress/Développement. Depuis WordPress et PHP, je passe la plupart de mon temps autour de Node, React, GraphQL et d'autres technologies dans l'espace Javascript. Quand je ne travaille pas à faire la meilleure solution d'hébergement de l'Univers, je collectionne les jeux de société, je joue au baby-foot au bureau, je voyage ou je joue de la guitare et chante dans un groupe assez mauvais.