Formation PUB020 : WordPress, 2020 Feuilles de style et scripts pour les shortcodes ou les extensions

18.2 Faire référence à un fichier .js qui sera utilisé par un shortcode (wp_enqueue_script)


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().

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

Tout comme pour wp_enqueue_style(), il faut utilise le hook wp_enqueue_scripts() (remarquez le s à la fin) pour ajouter les fichiers JavaScript.

WordPress (PHP)

/**

 * Charge les scripts et feuilles de style propres au thème.

 *

 * Utilisation : add_action('wp_enqueue_scripts', 'monprefixe_charger_css_js_web');

 *

 * @author Annie Gagnon

 *

 */

function monprefixe_charger_css_js_web() {

    wp_enqueue_style( 'monprefixemonshortcode', get_stylesheet_directory_uri() . '/css/monprefixe-mon-shortcode.css' );

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

}

 

add_action('wp_enqueue_scripts', 'monprefixe_charger_css_js_web');

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>

▼Publicité Le texte se poursuit plus bas

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( 'js/monprefixe-mon-shortcode.js', __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( 'js/monprefixe-mon-shortcode.js', __FILE__ ), array(), '', true );

ou

WordPress (PHP)

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

Charger le script seulement pour les pages qui utilisent le shortcode

Lorsqu'un script est spécifique à un shortcode, il est inutile de le charger sur toutes les pages du site.

Pour charger le script seulement lorsqu'il est requis, on utilisera la fonction has_shortcode().

WordPress (PHP)

/**

 * Charge les scripts et feuilles de style propres au thème.

 *

 * Utilisation : add_action('wp_enqueue_scripts', 'monprefixe_charger_css_js_web');

 *

 * @author Annie Gagnon

 *

 */

function monprefixe_charger_css_js_web() {
    global $post;

    // charge les fichiers seulement si le shortcode est utilisé sur la page
    if ( has_shortcode( $post->post_content, 'monshortcode' ) ) {

        wp_enqueue_style( 'monprefixemonshortcode', get_stylesheet_directory_uri() . '/css/monprefixe-mon-shortcode.css' );

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

    }
}

 

add_action('wp_enqueue_scripts', 'monprefixe_charger_css_js_web');

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/

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Par Christiane Lagacé
Dernière révision le 22 novembre 2021
Merci de partager !

Site fièrement hébergé chez A2 Hosting.

Soumettre