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

29.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.

La référence à un fichier .js sera ajoutée à l'aide de wp_enqueue_script().

Fichier functions.php d'un thème enfant WordPress (ou son sous-fichier shortcodes.php)

wp_enqueue_script( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/js/shortcodes.js' );

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

WordPress (PHP)

wp_enqueue_script( 'monprefixemonextension', plugins_url( 'js/shortcodes.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.

Fichier functions.php d'un thème enfant WordPress (ou son sous-fichier shortcodes.php)

/**
 * Charge les scripts et feuilles de style propres au thème.
 * @author Christiane Lagacé <christiane.lagace@hotmail.com>
 *
 * Utilisation : add_action('wp_enqueue_scripts', 'monprefixe_charger_css_js_web');
 
 */
function monprefixe_charger_css_js_web() {
    wp_enqueue_style( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/css/shortcodes.css' );
    wp_enqueue_script( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/js/shortcodes.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 à la page Web. Son emplacement dépendra de paramètres qui peuvent être ajoutés à la fonction.

HTML

<script src='https://mondomaine.com/wp-content/themes/monthemeenfant/js/shortcodes.js?ver=...' id='monprefixeshortcodes-js'></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 une autre bibliothèque JavaScript.

Fichier functions.php d'un thème enfant WordPress (ou son sous-fichier shortcodes.php)

wp_enqueue_script( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/js/shortcodes.js', array( 'une-autre-bibliotheque' ) );

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 :

Fichier functions.php d'un thème enfant WordPress (ou son sous-fichier shortcodes.php)

wp_enqueue_script( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/js/shortcodes.js', array(), '', true );

ou

Fichier functions.php d'un thème enfant WordPress (ou son sous-fichier shortcodes.php)

wp_enqueue_script( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/js/shortcodes.js', array(), null, true );

Ajouter un attribut defer à la balise <script>

Pour optimiser le chargement des fichiers JavaScript, il faut placer la balise <script> dans la zone <head> et lui ajouter un attribut <span class="instruction">defer</span>.

Ceci fait en sorte que, tout comme si la balise était placée juste avant le </body>, le script ne sera pas exécuté tant que le DOM ne sera pas entièrement chargé. Mais en plus, le script sera chargé parallèlement au code HTML, en « background », ce qui rendra le temps total de chargement légèrement plus rapide.

WordPress ne permet pas nativement d'y arriver. Mais avec le hook script_loader_tag, il est possible de modifier les fichiers JavaScript qui ont été chargés avec wp_enqueue_script().

Fichier functions.php d'un thème enfant WordPress (ou son sous-fichier shortcodes.php)

/**
 * Ajoute l'attribut defer à la balise <script> qui charge le fichier JavaScript pour les shortcodes.
 * @author Christiane Lagacé <christiane.lagace@hotmail.com>
 *
 * Utilisation : add_filter( 'script_loader_tag', 'monprefixe_javascript_defer', 10, 2 );
 */
function monprefixe_javascript_defer( $tag, $handle ) {
    if ( 'monprefixeshortcodes' === $handle ) {
        $tag = str_replace( '></script>', ' defer></script>', $tag )
    }

    return $tag;
}

add_filter( 'script_loader_tag', 'monprefixe_javascript_defer', 10, 2 );

Remarquez le dernier paramètre passé à add_filter(). Il permet d'utiliser plus d'un paramètre dans la fonction de rappel. Sans lui, le noyau WordPress ne passera qu'un seul paramètre à la fonction de rappel.

La balise sera désormais génére comme suit :

HTML

<script src='https://mondomaine.com/wp-content/themes/monthemeenfant/js/shortcodes.js?ver=...' id='monprefixeshortcodes-js' defer></script>

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

Si les fichiers CSS et JS contiennent du code pour plusieurs shortcodes, il faudra tous les lister.

Fichier functions.php d'un thème enfant WordPress (ou son sous-fichier shortcodes.php)

/**
 * Charge les scripts et feuilles de style propres au thème.
 * @author Christiane Lagacé <christiane.lagace@hotmail.com>
 *
 * Utilisation : add_action('wp_enqueue_scripts', 'monprefixe_charger_css_js_web'); 
 */
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' ) || has_shortcode( $post->post_content, 'monautreshortcode' ) ) {
        wp_enqueue_style( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/css/shortcodes.css' );
        wp_enqueue_script( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/js/shortcodes.js' );
    }
}
 
add_action('wp_enqueue_scripts', 'monprefixe_charger_css_js_web');

 

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 12 décembre 2023
Merci de partager !

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

Soumettre