Ajouter correctement ses scripts jQuery avec WordPress

On veut souvent ajouter jQuery (ainsi que ses propres scripts) à son propre thème WordPress. La solution la plus évidente serait d’inclure la librairie dans le dossier du thème et d’ajouter un lien dans le footer, comme ça :

<script src="<?php bloginfo( 'template_url' ); ?>/js/jquery.min.js"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/js/bbxscripts.js"></script>

Mais il existe une meilleure solution.

jQuery est déjà inclus dans WordPress

Lorsque vous téléchargez WordPress, vous avez déjà jQuery, ainsi que d’autres librairies. Ils sont dans le dossier wp-includes/js. En effet, l’admin utilise ses propres scripts et a besoin de jQuery pour fonctionner. Pourquoi ne pas en profiter pour utiliser le(s) même(s) fichier(s) dans votre thème ?

function bbx_enqueue_scripts() {
  wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'bbx_enqueue_scripts' );

On peut aussi inclure des plugins jQuery déjà disponibles :

wp_enqueue_script( 'jquery-ui-core' );
wp_enqueue_script( 'jquery-ui-slider' );
wp_enqueue_script( 'jquery-effects-core' );

La liste des fichiers disponibles est longue.

Ajouter ses propres scripts

En utilisant la même méthode, on peut ajouter ses propres scripts. Mais il faut d’abord les enregistrer :

$js_directory = get_template_directory_uri() . '/js/';
wp_register_script( 'bbxglobal', $js_directory . 'bbxglobal.js', 'jquery', '1.0' );

Tous mes scripts sont en général dans un sous-dossier « javascript » de mon thème. Du coup, je garde le chemin dans une variable $js_directory.

La fonction wp_register_script a 4 paramètres :

• nom du fichier
• chemin vers le fichier
• dépendance
• version de la dépendance

Les deux derniers paramètres sont là pour déterminer la version minimale requise pour que le fichier de scripts fonctionne. Par défaut, mettre jquery et 1.0 est une bonne solution.

Après, on peut l’appeler comme pour les scripts inclus dans WordPress :

wp_enqueue_script( 'bbxglobal' );

Utiliser des scripts spécifiques par page

Étant donné que l’on passe par le fichier functions.php pour inclure les scripts, on peut facilement utiliser d’autres outils comme if/else. C’est plus propre que de mettre cette logique ici que dans footer.php.

if( is_home() ):
  wp_enqueue_script( 'bbxhome' );
elseif( is_single() ):
  wp_enqueue_script( 'bbxsingle' );
endif;

Au final, on peut obtenir quelque chose comme la fonction suivante, qui est celle du thème de ce site :

function bbx_enqueue_scripts() {
  $js_directory = get_template_directory_uri() . '/javascript/';
  wp_register_script( 'highlight', $js_directory . 'highlight/highlight.pack.js', 'jquery', '1.0' );
  wp_register_script( 'affix', $js_directory . 'affix.js', 'jquery', '1.0' );
  wp_register_script( 'global', $js_directory . 'global.js', 'jquery', '1.0' );
  wp_enqueue_script( 'jquery' );
  wp_enqueue_script( 'highlight' );
  wp_enqueue_script( 'affix' );
  wp_enqueue_script( 'global' );
}
add_action( 'wp_enqueue_scripts', 'bbx_enqueue_scripts' );