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().
wp_enqueue_script( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/js/shortcodes.js' );
ou, si le shortcode est défini dans une extension :
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.
/**
* 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.
<script src='https://mondomaine.com/wp-content/themes/monthemeenfant/js/shortcodes.js?ver=...' id='monprefixeshortcodes-js'></script>
▼Publicité Le texte se poursuit plus bas
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.
wp_enqueue_script( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/js/shortcodes.js', array( 'une-autre-bibliotheque' ) );
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 :
wp_enqueue_script( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/js/shortcodes.js', array(), '', true );
ou
wp_enqueue_script( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/js/shortcodes.js', array(), null, true );
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().
/**
* 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 :
<script src='https://mondomaine.com/wp-content/themes/monthemeenfant/js/shortcodes.js?ver=...' id='monprefixeshortcodes-js' defer></script>
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.
/**
* 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');
Site fièrement hébergé chez A2 Hosting.