Sur 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 actifs avec le bonus supplémentaire de gérer les dépendances. Découvrez comment le faire ci-dessous en utilisant wp_enqueue_scripts.

• Comment fonctionne la mise en file d’attente
• Bases de la mise en file d’attente avec wp_enqueue_scripts
• Gestion des dépendances
• Chargez les scripts dans le… Footer
• Spécifier les médias pour les styles

Comment fonctionne la mise en file d’attente

Il y a deux étapes à franchir pour mettre en file d’attente un script ou un style. D’abord, vous l’enregistrez – en disant à WordPress qu’il est là – et ensuite vous le mettez réellement en file d’attente, ce qui le sort finalement dans l’en-tête ou juste avant la balise de fermeture du corps.

La raison d’avoir deux étapes a à voir avec la modularité. Parfois, vous voudrez faire connaître une ressource à WordPress, mais vous ne voudrez peut-être pas l’utiliser sur chaque page. Par exemple : Si vous construisez un shortcode de galerie personnalisé qui utilise Javascript, vous n’avez réellement besoin de charger le JS que lorsque le shortcode est utilisé – probablement pas sur chaque page.

La façon de faire en sorte que cela se produise est d’enregistrer le script en premier, et de ne le mettre réellement en file d’attente que lorsque le shortcode est affiché (lecture suggérée : The Ultimate Guide to WordPress Shortcodes).

Les bases de la mise en file d’attente avec wp_enqueue_scripts

Pour mettre en file d’attente les scripts et les styles dans le front-end, vous devrez utiliser le hook wp_enqueue_scripts. Dans la fonction hookée, 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 actifs dans 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 dans 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 actifs 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 de mise en file d’attente de WordPress a un support intégré pour la gestion des dépendances, en 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 l’actif actuel soit mis en file d’attente. Notre exemple ci-dessus s’appuierait très probablement sur jQuery, alors spécifions-le 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 script est une galerie, le second est une extension de celle-ci qui fait s’ouvrir les images dans une lightbox. Notez que même si notre second script s’appuie sur jQuery, nous n’avons pas besoin de le spécifier, car notre premier script chargera déjà jQuery. Cela dit, cela peut être une bonne idée d’énoncer toutes les dépendances, juste pour s’assurer que rien ne peut se briser si vous oubliez d’inclure une dépendance.

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

Load Scripts In The Footer

Quand vous pouvez vous en sortir en chargeant les scripts dans le pied de page, vous devriez le faire. Cela augmente les temps de chargement apparents des pages et peut empêcher votre site Web de se suspendre 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 facultatif). 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 );}

Spécifier true comme cinquième paramètre mettra les scripts dans le pied de page, utiliser false, ou omettre le paramètre chargera les choses dans l’en-tête. Comme je l’ai déjà mentionné, chaque fois que cela est possible, chargez les scripts dans le pied de page.

Spécifier le média pour les styles

En utilisant le cinquième paramètre des fonctions de registre/enquête de style, vous pouvez contrôler le type de média pour lequel le script a été défini (impression, écran, ordinateur de poche, etc.). En utilisant ce paramètre, vous pouvez restreindre le chargement des styles au type de média particulier, ce qui est une petite astuce d’optimisation 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, jetez un coup d’œil aux spécifications CSS.

Summary

La mise en file d’attente des actifs est un moyen puissant de les gérer. Elle vous donne, ainsi qu’aux autres créateurs de plugins/thèmes, plus de contrôle sur le système dans son ensemble et retire la gestion des dépendances de vos mains.

Si cela ne suffisait pas, c’est la façon d’ajouter vos actifs, 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.