Charger proprement vos scripts Javascript dans WordPress

Cet article vous sera d'une grande aide pour comprendre comment WordPress interprète les scripts JavaScript et enfin les faire fonctionner correctement.

Dans quel cas êtes vous ?

Cas n°1 : Vous souhaitez ajouter des scripts JavaScript à votre site WordPress.

Cas n°2 :  Après intégration de votre site sous WordPress, JavaScript ne semble plus se charger.

Vous avez créé votre site en HTML/CSS et vous avez lié tout les scripts JavaScript dans votre page et tout fonctionnait bien avant l'intégration dans WordpPess.
Mais maintenant que vous avez intégré votre code dans un template de page PHP pour WordPress, vos scripts JavaScript ne fonctionnent plus.

WordPress intègre déjà une bibliothèque jQuery

Sachez d'abord que WordPress intègre d'origine une version de jQuery. Elle est stockée dans "../wp-includes/js/jquery/jquery.js"
Il est donc inutile de demander à WordPress de charger une bibliothèque jQuery dans votre page PHP, en ajoutant une ligne de code que ce soit dans le header ou dans le footer.

L'erreur à éviter : charger la librairie jQuery et les scripts JavaScript dans le template de page

Exemple (à ne pas suivre) :

<?php /* Template Name: Ma page */ ?>

<?php get_header(); ?>

Le contenu de ma page Blablabla

<?php get_footer();>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
// Appel de la bibliothèque jQuery

<script type="text/javascript" src="js/bootstrap.js"></script>
//Exécution de notre premier script JS

<script type="text/javascript" src="js/jquery.mobile.customized.min.js"></script>
//Exécution de notre deuxième script JS

Dans cet exemple on demande le chargement de la bibliothèque jQuery en ligne version 1.8.2, puis l’exécution de nos 2 scripts "bootstrap.js" et "jquery.mobile.customized.min.js". Ces derniers étant dans le dossier nommé /js/.
WordPress ne comprendra pas ce code qui pourtant fonctionne sur votre site en HTML/CSS !

La solution : charger proprement les scripts JS dans votre fichier "functions.php"

Pour cela, il faut utiliser la fonction enqueue_script. Voila l'exemple à suivre :

// enqueue javascript

function theme_js(){

wp_enqueue_script( 
 'bootstrap',
 get_template_directory_uri() . '/js/bootstrap.js',
 array( 'jquery' ) 
);

wp_enqueue_script( 
 'jquery-mobile-customized-min',
 get_template_directory_uri() . '/js/jquery.mobile.customized.min.js',
 array( 'jquery' ) 
);

}

add_action( 'wp_enqueue_scripts', 'theme_js' );

Insérer ce code dans le fichier functions.php de votre thème enfant et adaptez-le à votre besoin.
Il faut appeler chaque fichier JavaScript via la méthode "enqueue_script" de WordPress.

• On créé une fonction (theme_js par exemple)
• On charge les scripts JS via le code "wp_enqueue_script"
• On attribue un nom à chaque script (ex: bootstrap)
• On précise le chemin qui mène à notre fichier JavaScript (ex: get_template_directory_uri() . '/js/bootstrap.js')
• Laisser "array()" par défaut
• "add_action" demande l'exécution des scripts chargés
• "wp_footer" précise que les scripts seront chargés dans le footer de notre page
• "theme_js" précise quelle fonction est a exécuter. En l’occurrence notre "function theme_js()"

Pour plus d'information sur le chargement des scripts JS sur WordPress et la fonction enqueue_script, rendez-vous sur le codex de WordPress : Function Reference/wp_enqueue_script

Cet article vous a plus ? Dîtes-le en commentaire et rejoignez-nous sur Facebook pour partager d’autres astuces et tutoriels gratuits !