JQuery et WordPress

Plus de 5 minutes 🙂

Introduction

Souvent dans les plugins et thèmes, le javascript ( jQuery notamment ) à une place assez importante dans les différentes fonctionnalités. Ajax, validation de formulaire, lightbox, sliders etc. toutes ces fonctionnalités utilisent le javascript et donnent à l’utilisateur une impression de plus grande interactivité.

WordPress lui même utilise beaucoup le javascript dans ses fonctionnalités ! Essayer d’aller dans la page de gestion des widgets sans javascript ou en activant le mode accessibilité dans les options de l’écran des widgets… c’est tout de suite moins fun !

WordPress inclus dans ses fichiers jquery, mais aussi jquery ui qui est maintenant en librairie complète depuis la 3.3 !

Inclure des fichiers javascript

Il faut savoir que WordPress propose une API particulière pour pouvoir inclure ses fichiers javascript de façon élégante et surtout en gérant les priorités et les dépendances.

Cette fonction s’appelle « wp_enqueue_script« , elle accepte les arguments suivants:

1. Un identifiant de script UNIQUE ( string )
2. Le chemin vers le fichier à inclure ( url, string )
3. Les dépendances ( array )
4. La version du script (string)
5. Inclure ce fichier dans le footer ? ( boolean )

Par exemple, si je veux inclure mon fichier pour le slider de la home qui a besoin de jquery pour fonctionner je peux faire de la façon suivante:

[pastacode provider= »manual » lang= »php »]

<?php
wp_enqueue_script( 'mon-slider', get_bloginfo('stylesheet_directory').'/js/monscript.js', array( 'jquery' ), '1.0', true );

[/pastacode]

Donc nous allons charger la librairie depuis notre thème en demandant d’avoir jquery de chargé avant de charger mon script et surtout de la mettre dans le footer.

Mais comment WordPress le met-il dans le footer ou dans kle header ? Tout simplement grâce aux fonctions wp_head() et wp_footer() incluses dans nos thèmes, il est donc primordial de les avoir incluses, surtout si vous utilisez des plugins, ils vont utiliser cette fonction ( s’ils sont bien codés ) pour ajouter leurs scripts.

Particularité de WordPress 3.3

Il faut savoir qu’avant WordPress 3.3, il fallait absolument appeler cette fonction avant le hook ‘wp_enqueue_script’, car une fois celui-ci passé toutes les tentatives d’ajout de script ne fonctionneront pas !

Par exemple si vous aviez un shortcode qui a besoin d’un script pour fonctionner mais que vous ne vouliez l’inclure que s’il était présent, ce n’était pas possible ! A moins de tester si c’est un article ou une page, mais vous perdiez toute chance de le voir fonctionner s’il était appelé avec do_shortcode.

Alors qu’avec la 3.3, on peut faire un wp_enqueue_script n’importe quand ( un temps soit peu qu’il soit avant le wp_footer ). Donc dans le code qui génère votre shortcode, vous pouvez faire un wp_enqueue_script et donc avoir votre script exclusivement dans les pages qui en ont besoin. Il sera présent dans le footer et ses dépendances fonctionneront parfaitement.

jQuery et jQuery UI

jQuery et jQuery UI sont deux librairies largement répandues et surtout utilisées dans WordPress, elles sont donc incluses directement dans les fichiers de WordPress. Il suffit de faire un :

[pastacode provider= »manual » lang= »php »]

<?php

wp_enqueue_script( 'jquery');

wp_enqueue_script( 'jquery-ui-core' );

[/pastacode]

Par exemple pour charger jQuery et le coeur de jQuery ui pour les retrouver dans son header et pouvoir les utiliser. Les fichiers de jQuery UI ont leur propres dépendances donc en appelant jquery-ui-autocomplete par exemple, il va automatiquement charger les autres morceaux de la librairie nécessaires à son bon fonctionnement.

Dans votre thème il se peut que vous ayez besoin de jQuery et jQuery UI, cependant pour des raisons de performance je vous conseille fortement de ne pas charger ceux de WordPress et d’utiliser les CDN de google à la place :

[pastacode provider= »manual » lang= »php »]

<?php
wp_deregister_script( 'jquery-ui-core' );
wp_deregister_script( 'jquery-ui-tab' );
wp_deregister_script( 'jquery-ui-autocomplete' );
wp_deregister_script( 'jquery-ui-accordion' );
wp_deregister_script( 'jquery-ui-autocomplete' );
wp_deregister_script( 'jquery-ui-button' );
wp_deregister_script( 'jquery-ui-datepicker');
wp_deregister_script( 'jquery-ui-dialog' );
wp_deregister_script( 'jquery-ui-draggable' );
wp_deregister_script( 'jquery-ui-droppable' );
wp_deregister_script( 'jquery-ui-mouse' );
wp_deregister_script( 'jquery-ui-position' );
wp_deregister_script( 'jquery-ui-progressbar');
wp_deregister_script( 'jquery-ui-resizable' );
wp_deregister_script( 'jquery-ui-selectable');
wp_deregister_script( 'jquery-ui-slider' );
wp_deregister_script( 'jquery-ui-sortable' );
wp_deregister_script( 'jquery-ui-tabs' );
wp_deregister_script( 'jquery-ui-widget' );

wp_enqueue_script( 'jquery-ui-core', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js', array( 'jquery' ), '1.8', true);

[/pastacode]

Donc là on a retiré tous les scripts de jquery-ui de WordPress et à la place nous avons chargé toute la librairie depuis les CDN de Google. Mais alors on peut se demander si le chargement de tout jQuery UI au lieu de juste ce que nous avons besoin est vraiment nécessaire ? Il faut savoir que les CDN de Google sont utilisés sur beaucoup de sites donc si une personne est déjà allé dans un site qui utilise le CDN alors ce fichier sera en cache et la personne ne devra ps le retélécharger. De plus vu qu’il n’est pas stocké sur le même domaine que nos site, il sera téléchargé en même temps qu’une autre ressource, donc un gain de performances au niveau du chargement de notre page.

Pareil pour jQuery :

[pastacode provider= »manual » lang= »php »]

<?php
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js', array(), '1.7' );

[/pastacode]

Particularité de jQuery dans l’administration

WordPres n’est pas limité à jQuery, il propose aussi d’autres libraires comme Mootools ou script.aculo.us et ces librairies utilisent aussi le « $ » pour faire leurs selecteurs, donc jQuery est inclus dans WordPress pour ne pas entrer en conflit avec ces libraires, c’est le mode noConflict. Deux solutions s’offrent à nous

1. Faire une fonction wrapper qui permet d’utiliser tout de même le $
2. Ne Plus utilise le « $ » mais utiliser ‘jQuery’ à la place

Exemple :

Le wrapper :

[pastacode provider= »manual » lang= »javascript »]

// De cette manière, ont peut utiliser nos anciennes fonctions sans changer le $

jQuery(function($) {

// Mettez vos fonctions avec des $ ici

});

[/pastacode]

La réécriture :

[pastacode provider= »manual » lang= »javascript »]

// La ligne :

$('.monselecteur').hide();

// Devient

jQuery('.monselecteur').hide();

[/pastacode]

Ces deux solutions se valent, si vous ne voulez pas taper à chaque fois jQuery, préférez la première solution ;).

Les performances

Utiliser toutes ces méthodes n’ont pas seulement un impact sur la beauté du code ou sa maintenabilité, elles permettent surtout de gagner en performances. Grâce à un plugin tel que wp-minify, on peut facilement faire en sorte que nos fichier soient rassemblés en un seul. Avec le wp_enqueue_script le plugin sait où il doit aller afficher les script, lequel avant lequel etc…

Il devient alors très facile pour quelqu’un de modifier les différents appels et dépendances de nos fichiers. De même pour une personne qui utilise votre plugin, s’il n’a pas besoin de vos fichiers javascript dans son thème, il suffit de deregister vos scripts et il est tranquille, pas besoin d’aller dans votre plugin pour supprimer les lignes concernées.

Conclusion

Si vous suivez mes conseils, la maj de votre code ou de votre thème avec jQuery sera facilité et surtout vous donnerez les clefs à vos utilisateurs de désactiver des fonctionnalités non voulues. De plus vous suiverez les évolutions de WordPress, en effet vu que les fonctionnalités sont, au pire, dépréciées votre wp_enqueue_script fonctionnera dans tous les cas.