Faire référence à un fichier .js qui sera utilisé par un « shortcode »

Au même titre que les feuilles de style, le code JavaScript utilisé par un « shortcode » doit être placé dans un fichier qui lui est propre.

Alors que la référence à une feuille de style sera ajoutée à l'aide de wp_enqueue_style(), la référence à un fichier .js sera ajoutée à l'aide de wp_enqueue_script().

▼Publicité

Ex :

WordPress (PHP)

wp_enqueue_script( 'monprefixemonshortcode', get_stylesheet_directory_uri() . '/js/monprefixe-mon-shortcode.js' );

ou, si le « shortcode » est défini dans une extension :

WordPress (PHP)

wp_enqueue_script( 'monprefixemonextension', plugins_url( 'js/monprefixe-mon-shortcode.js', __FILE__ ) );

Lorsque la fonction wp_enqueue_script() sera exécutée, une balise <script> sera ajoutée dans la zone <head> de la page Web. Dans le cas où on ajoute un fichier JavaScript  dans un thème (premier des deux exemples plus haut), on aura la balise suivante :

HTML

<script src='http://mondomaine.com/wp-content/themes/montheme/js/monprefixe-mon-shortcode.js?ver=...'></script>

Forcer le chargement d'autres fichiers .js avant le nôtre

La fonction wp_enqueue_script() peut recevoir des paramètres supplémentaires optionnels. Parmi ceux-ci, il y a la possibilité de forcer le chargement d'un autre script JavaScript avant le nôtre. 

Ceci sera pratique, notamment, si notre script est basé sur jQuery.

Ex :

WordPress (PHP)

wp_enqueue_script( 'monprefixemonextension', plugins_url( 'css/mon-extension.css', __FILE__ ), array( 'jquery' ) );

Placer la balise <script> au bas de la page Web

Par défaut, la fonction wp_enqueue_script() placera la balise <script> dans la section <head> de la page Web. Il est possible de placer cette balise au bas de la section <body> à l'aide d'un paramètre dans wp_enqueue_script(). 

Mais avant de préciser qu'on désire que la balise <script> soit placée au bas de la page, il faut préciser les dépendances puis la version du script (WordPress ajoutera, après le nom du script, la mention "?ver=" suivi du numéro de version). 

Que l'on désire ou non utiliser les paramètres pour les dépendances et pour la version, il faudra prendre soin de donner une valeur à ces paramètres.

Voici donc comment préciser les trois derniers paramètres de wp_enqueue_script() si on n'a pas de dépendances, qu'on ne désire pas préciser une version mais qu'on désire placer le script au bas de la page Web :

WordPress (PHP)

wp_enqueue_script( 'monprefixemonextension', plugins_url( 'css/mon-extension.css', __FILE__ ), array(), '', true );

ou

WordPress (PHP)

wp_enqueue_script( 'monprefixemonextension', plugins_url( 'css/mon-extension.css', __FILE__ ), array(), null, true );

Pour plus d'information

« wp enqueue script ». WordPress. http://codex.wordpress.org/Function_Reference/wp_enqueue_script

« Add Scripts To Shortcode Only When Used ». Paulund. http://www.paulund.co.uk/add-scripts-shortcode-used

« Enqueuing Scripts and Styles in WordPress ». SitePoint. http://www.sitepoint.com/enqueuing-scripts-styles-wordpress/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories