NOUS LES DEVS

wp_enqueue_script();

Ajouter un JavaScript dynamiquement

Niveau : débutant(e)

</> </> </>

A quoi ca sert ?

Dans WordPress, la fonction wp_enqueue_script permet d’ajouter un script à l’une de tes pages web.

En règle générale, quand tu veux appeler un fichier JavaScript, tu l’ajoutes manuellement dans ton pied de page et ce n’est pas forcement une mauvaise chose, mais WordPress a son propre mécanisme pour ajouter des scripts.

Comment ca marche ?

Pour faire simple, wp_enqueue_scripts te permet d’enregistrer ton script dans un tableau. Ensuite WordPress va afficher tous les scripts du tableau en fonction de leur priorité, à des endroits bien précis via des hooks, comme c’est le cas dans le fichier le header et le footer via les fonctions wp_head() et wp_footer().

La première étape pour enregistrer un script, est de lancer un do_action (hook) wp_enqueue_scripts, qui va te permettre d’ajouter ton script au bon moment. Via cette méthode tu es sûr que WordPress est bien chargé et qu’il va pouvoir enregistrer ton script dans le tableau.

function add_js_scripts() {

}
add_action('wp_enqueue_scripts', 'add_js_scripts');

Ensuite, à l’intérieur de ta fonction de rappel, tu lances la fonction wp_enqueue_script qui va te permettre d’ajouter ton script dans le fameux tableau.

Le premier paramètre est un nom arbitraire qui va servir d’identifiant, le second paramètre est le chemin vers ton fichier et les autres paramètres sont optionnels mais très pratiques ! Le troisième paramètre te permet d’ajouter un tableau de dépendance (comme jQuery par exemple), ensuite il y a le numéro de version, en le modifiant tes clients vont retélécharger le nouveau fichier, donc pas de problème de cache et le dernier paramètre indique si tu places ton scripts au début ou à la fin du document.

function add_js_scripts() {
	wp_enqueue_script( 'main', get_template_directory_uri().'/js/main.js', array(), '1.0', true );
}
add_action('wp_enqueue_scripts', 'add_js_scripts');

Truc cool

Est-ce une bonne chose d’utiliser cette fonction ? La réponse est définitivement « OUI » ! Pour la souplesse du code et maintenabilité du site.

Il est possible d’appeler des scripts exclusivement sur certaines pages, en combinant des fonctions de WordPress. Le code suivant ajoute le JS uniquement sur la home.

function add_js_scripts() {
	if( is_home() ) wp_enqueue_script( 'home', get_template_directory_uri().'/js/home.js');
}
add_action('wp_enqueue_scripts', 'add_js_scripts');

Si tu veux que ton numéro de version soit changé automatiquement, tu peux utiliser une fonction en PHP qui te donne le timestamp de la date de modification du fichier, c’est pratique lors de phases de développement.

function add_js_scripts() {
	wp_enqueue_script( 'main', get_template_directory_uri().'/js/main.js', array(), filemtime( dirname(__FILE__) . '/js/main.js' ), true );
}
add_action('wp_enqueue_scripts', 'add_js_scripts');

Et si jamais tu veux en savoir plus, tu as tout le détail de la fonction ici.

19/09/2016

Yann Vangampelaere - nouslesdevs -

WordPress10