Nicolas Juen

Menu

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.

18 thoughts on “JQuery et WordPress

  1. Attention il faut prévoir un fallback vers la librairie en local au cas ou le CDN de Google ne serait pas ou plus disponible. En effet si un problème quelconque qui fait que la bibliothèque ne puisse être disponible, votre site sera « en rade » en même temps.

      1. Bonjour, juste une question svp.
        window.jQuery || document.write( »)

        il est possible de le mettre en dur dans le footer.php du thème ou comment l’inclure dans la fonction wp_enqueue_script ?

        Désolé, je débute sur wp et j’ai un peu de mal à comprendre toutes les subtilités de ce cas précis.

  2. J’utilisais l’astuce avec succès sur mon ancien theme mais sur le nouveau cela fait planter la slidebarre et défigure le site web. Je vais tester différentes versions.

  3. J’ai pas mis longtemps à trouver. La version 1.91 fonctionne parfaitement :

    wp_deregister_script(‘jquery’);
    wp_enqueue_script( ‘jquery-ui-core’, ‘https://ajax.googleapis.com/ajax/libs/jqueryui/1.91/jquery-ui.min.js’, array( ‘jquery’ ), ‘1.91’, true);

    Reste à voir les performances désormais mais vu que je m’autohéberge, il ne devrait pas y avoir photo.

  4. Bonjour Nicolas Merci pour cet article plus qu’intéressant! je débute dans le web, et un peu nul en javascript en fait j’ai crée un plugin de défilement horizontal pour mon stage en me basant sur smart ticker.js et jquery puis un custom post type mais pendant le test rien ne marche surement un problème de jquery parce que rien n’est affiché apart les sans aucun style mais quand je le teste sur un autre theme sans plugin ça marche nickel. étant nul en javascript comment detecter un conflit

    mon script dans le corps du plugin est ça :
    jQuery(document).ready(function(){
    jQuery(« .smarticker’.$id.' »).smarticker({
    theme: ‘.$theme.’,
    speed: ‘.$speed.’,
    title: « ‘.$title.' »,
    rounded: ‘.$rounded.’,
    animation: « ‘.$animation.' »
    });
    });

    et l’enqueue :
    function defilement_script(){
    wp_deregister_script(‘jquery’);
    wp_register_script(‘jquery’,’http://code.jquery.com/jquery-1.11.2.min.js’,null,’1.11.2′,true);
    wp_enqueue_script(‘jquery’);
    wp_enqueue_script(‘defilement-js’,plugins_url(‘/js/jquery.smarticker.min.js’, __FILE__ ), array(‘jquery’),1.0,false);
    wp_enqueue_style(‘defilement-css’,plugins_url(‘//d3npp2g4rgtsd5.cloudfront.net/css/jquery.smarticker.css’, __FILE__ ));
    }
    add_action(‘init’,’defilement_script’,30);

    un handicape en plus est que le site est déjà publié et compte e moyenne 10 personnes en lignes.

    Merci d’avance pour vos éclaircissement car j’ai vraiment besoin que ce foutu plugin marche lol c’est une partie de mon dossier de stage lol et merci à google de m’avoir diriger vers votre site 🙂

  5. Bonjour Nicolas,
    J’ai lu votre article qui est vraiment très intéressent mais je ne sais pas ou et comment activer javascript dans mon cas.
    Je n’arrive pas à utiliser la bibliothèque et ma page admin est complètement décalé avec un affichage bizarre.
    Je n’arrive pas vraiment travaillé et là, ça m’embête.
    Si quelqu’un peu m’aider, ce sera vraiment cool.

  6. Bonjour Nicolas,

    J’ai désactivé par erreur le mode javascript dans wordpress !
    Et je n’arrive plus à trouver comment le réactiver. Et du coup je ne peux modifier mon site !

    Merci de votre aide.
    Christian

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.