Catégories
Blog Développement

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:

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

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 :

<?php

wp_enqueue_script( 'jquery');

wp_enqueue_script( 'jquery-ui-core' );

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 :

<?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);

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 :

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

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 :

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

jQuery(function($) {

// Mettez vos fonctions avec des $ ici

});

La réécriture :

// La ligne :

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

// Devient

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

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 r√©ponses sur ¬ę¬†JQuery et WordPress¬†¬Ľ

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.

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.

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.

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(‘/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 ūüôā

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.

Laisser un commentaire

Votre adresse de messagerie 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.