Utiliser jQuery et jQuery UI dans un thème ou dans une extension

L'API de WordPress charge la bibliothèque jQuery dans le site Web et dans le tableau de bord. Le code que vous écrivez peut donc utiliser jQuery sans avoir à charger cette bibliothèque, moyennant certaines précautions.

Pour jQuery UI, vous devrez effectuer une étape supplémentaire avant de pouvoir l'utiliser.

Dans cet article, je vous présente la technique qui vous permettra d'utiliser l'une ou l'autre de ces bibliothèques.

▼Publicité

Cas de jQuery UI

Si l'API de WordPress charge la bibliothèque jQuery, c'est un peu différent pour jQuery UI. Les fichiers sont présents dans le dossier wp-includes\js\jquery\ui mais ils ne sont pas tout à fait prêts à être utilisés.

Afin de faciliter votre travail, l'API de WordPress a enregistré les scripts, c'est-à-dire que WordPress connaît les scripts et est prêt à les charger au besoin afin qu'ils puissent être utilisés. Cependant, les scripts n'ont pas été chargés en mémoire afin de ne pas surcharger inutilement les sites qui n'en auraient pas besoin.

L'enregistrement des scripts a été effectué dans le fichier wp-includes\script-loader.php. L'enregistrement d'un script consiste à définir le handle du script (nom pour les identifier dans le code WordPress), l'emplacement physique du fichier ainsi que ses dépendances. L'enregistrement définit également d'autres paramètres sur lesquels nous ne nous pencherons pas ici.

Fichier wp-includes\script-loader.php (PHP)

// full jQuery UI

$scripts->add( 'jquery-ui-core', "/wp-includes/js/jquery/ui/core$dev_suffix.js", array('jquery'), ... );

$scripts->add( 'jquery-effects-core', "/wp-includes/js/jquery/ui/effect$dev_suffix.js", array('jquery'), ... );

 

$scripts->add( 'jquery-effects-blind', "/wp-includes/js/jquery/ui/effect-blind$dev_suffix.js", array('jquery-effects-core'), ... );

$scripts->add( 'jquery-effects-bounce', "/wp-includes/js/jquery/ui/effect-bounce$dev_suffix.js", array('jquery-effects-core'), ... );

...

 

$scripts->add( 'jquery-ui-accordion', "/wp-includes/js/jquery/ui/accordion$dev_suffix.js", array('jquery-ui-core', ...), ... );

$scripts->add( 'jquery-ui-autocomplete', "/wp-includes/js/jquery/ui/autocomplete$dev_suffix.js", array(...), ... );

$scripts->add( 'jquery-ui-button', "/wp-includes/js/jquery/ui/button$dev_suffix.js", array(...), ... );

$scripts->add( 'jquery-ui-datepicker', "/wp-includes/js/jquery/ui/datepicker$dev_suffix.js", array(...), ... );

$scripts->add( 'jquery-ui-dialog', "/wp-includes/js/jquery/ui/dialog$dev_suffix.js", array(...), ... );

$scripts->add( 'jquery-ui-draggable', "/wp-includes/js/jquery/ui/draggable$dev_suffix.js", array(...), ... );

...

Si vous avez besoin d'un de ces scripts, vous devez vous occuper de le charger en mémoire à l'aide de son handle.

Par exemple, si vous avez besoin de travailler avec les popups jQuery (fonction dialog()), vous chargerez le bon script comme suit :

WordPress (PHP)

wp_enqueue_script('jquery-ui-dialog');

ou, si vous avez un script qui, lui, doit faire appel à dialog :

WordPress (PHP)

wp_enqueue_script( 'monprefixe-monscript', get_stylesheet_directory_uri() . '/js/monscript.js', array( 'jquery-ui-dialog' ), null, true );

ou, si le script fait partie d'une extension :

WordPress (PHP)

wp_enqueue_script( 'monprefixe-monscript', plugins_url( 'js/monscript.js', __FILE__ ), array( 'jquery-ui-dialog' ), null, true );

Pour utiliser jQuery ou jQuery UI

Il faut savoir quoi faire pour bien se servir de jQuery dans le code de notre thème ou de notre extension.

Ce qu'il faut comprendre, c'est que le signe $ que l'on utilise normalement avec jQuery est en fait un alias qui remplace le mot « jQuery ». Cet alias pourrait également être utilisé par d'autres bibliothèques, ce qui générerait des conflits.

jQuery prévoit d'ailleurs la possibilité d'éviter les conflits avec d'autres bibliothèques à l'aide de la méthode jQuery.noConflict(). Cette méthode fait en sorte que jQuery renonce à l'utilisation de $ au profit des autres bibliothèques.

Et c'est précisément le cas sous WordPress : l'API se charge de libérer le signe $ à l'aide de jQuery.noConflict() afin d'éviter les conflits de nom avec d'autres bibliothèques.

Pour utiliser jQuery dans notre code WordPress, quelques solutions s'offrent à nous.

Remplacer $ par le mot « jQuery »

Puisque $ est un alias pour le mot « jQuery », il est possible de simplement utiliser ce mot au lieu du $.

Ex :

jQuery

jQuery(function() {

    jQuery('.entry-title').html('test');

});

Recevoir l'alias en paramètre

Plutôt que de remplacer tous les $ par le mot « jQuery », il est possible de recevoir l'alias en paramètre dans la fonction anonyme appelée dès que le DOM est chargé. Bien sûr, on devra prendre soin d'utiliser le mot « jQuery » au lieu de l'alias lors de l'appel initial.

Ex :

jQuery

jQuery(function($){

    $('.entry-title').html('test');

});

Utiliser notre propre alias

Une autre technique, qui offre l'avantage d'assurer qu'aucune autre bibliothèque ne fait interférence même à l'intérieur de notre code, consiste à utiliser notre propre alias.

Ex :

jQuery

var $j = jQuery;

$j(function(){

    $j('.entry-title').html('test');

});

Pour plus d'information

« How to properly use jQuery scripts in WordPress ». DevotePress. http://devotepress.com/wordpress-coding/how-to-properly-use-jquery-scripts-in-wordpress/

« Using jQuery In The WordPress Admin Area ». Paulund. http://www.paulund.co.uk/jquery-in-wordpress-admin-area

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories