Pense-bête plugin pour WordPress : utiliser jQuery

Pour inclure jQuery sur une page web il suffit en général de l’inclure dans une balise script dans la section <head> de la page. Cela n’est pas recommandé dans WordPress. En effet cela peut poser des conflits avec d’autres plugins ou avec d’autres librairies utilisables dans WordPress (comme scriptaculous).

Cet article fait partie d’une série d’articles qui présente les éléments que l’on doit constamment avoir sous la main durant le développement d’un plugin pour WordPress (à défaut de les connaître par cœur).

Pour include jQuery dans WordPress il faut utiliser la fonction suivante :

wp_enqueue_script('jquery');

en prenant garde de bien l'appeler avant le chargement du header.

Dans un plugin, le code suivant est donc correct :

function my_init() {
    if (!is_admin()) {
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

L’action se fait sur le « hook » init se lance avant les plugins et avant le header. Suivez ce lien vers la documentation wordpress pour voir l’ordre de chargement des hooks.

Par défaut jQuery dans WordPress est chargée en mode « no conflict ». Il faudra donc utliser le code suivant pour utiliser jQuery :

jQuery(function ($) {
	/* Le symbole $ de jQuery peut être utilisé dans ce bloc */
});

Le principe de jQuery est de s’occuper de tout ce qui est javascript dans le header et de ne pas inclure de javascript l’importe où dans le reste de la page.

Il faut donc placer son code javascript dans un fichier JS qui sera chargé de la même façon que jQuery, grâce au hook init.

La fonction wp_enqueue_script de WordPress permet même de déclarer des dépendances lors du chargement de votre script, en utlisant le code suivant :

 wp_enqueue_script('mon_script',WP_CONTENT_URL.’/plugins/’.plugin_basename(dirname(__FILE__)).’/monscript.js’, array(‘jquery’));

Ce code utilise les chemins fournis par WordPress pour que le plugin soit portable.