jQuery & WordPress – User Interface

Dans ce tuto, je tenais à vous présenter une sous-librairie de jQuery, il s’agit de jQuery UI. Qui, même si elle est dépendante de jQuery, est très complète. Nous verrons dans un premier temps comment l’utiliser dans votre projet puis je proposerai des exemples d’applications pratiques.

Importation des éléments jQuery

La première chose à faire est de visiter le site web contenant cette libraire : jQuery UI.

Ensuite, nous allons fabriquer notre thème. Pour ce faire, rendez vous dans la section « Design a custom theme ». Choisissez vos couleurs, polices, textures, arrondis, etc.

Une fois l’opération terminée, téléchargez grâce au bouton Download Theme situé en-haut du theme roller.

Dans la page suivante, vous pourrez enlever les effets que vous ne désirez pas télécharger. Quand vous aurez terminé de sélectionner vos effets cliquez sur Download.

Vous vous retrouverez avec une archive composée des fichiers suivants :

  • index.html : le fichier de présentation de l’interface, il reprend la plupart des effets et les met sous le thème que vous avez fabriqué ;
  • js/jquery-ui-1.8.16.custom.min.js : c’est le fichier JavaScript qui contient les éléments sélectionnés de votre interface ;
  • js/jquery-1.6.2.min.js : la libraire jQuery au complet… Il vaut mieux l’importer pour jQuery UI et enlever l’intégration de WordPress (nous y reviendrons plus loin) ;
  • development-bundle/ : dossier servant à développer de nouveaux plugins jQuery… Absolument inutile à votre niveau ;
  • css/custom-theme/images OU css/nomdutheme-theme/images : vous l’aurez compris c’est ici que sont stockés les images et sprites nécessaires au fonctionnement de jQuery UI ;
  • css/custom-theme/jquery-ui-1.8.16.custom.css OU css/nomdutheme-theme/jquery-ui-1.8.16.custom.css : le css de votre interface, il met en place le theming choisi, vous pourrez également faire appel à ces quelques classes pour modeler votre site web ;

Pour importer votre libraire dans votre thème WordPress voici les différentes étapes à suivre :

  1. Placer votre dossier js directement dans votre thème selon le chemin /wp-content/themes/nom_du_theme/js/ ;
  2. Placer également votre dossier css directement dans votre thème comme suit /wp-content/themes/nom_du_theme/css/ ;
  3. Ensuite ouvrez votre fichier header.php. Juste après <?php wp_head(); ?>, imputez ceci :
    <script src="/js/jquery-1.6.2.min.js">
    <script src="/js/jquery-ui-1.8.16.custom.min.js">
  4. Dans votre fichier style.cssde votre thème, insérez au tout début la ligne suivante :
    @import url(css/jquery-ui-1.8.16.custom.css);

Félicitations, vous venez d’installer votre librairie jQuery UI. On va maintenant pouvoir s’amuser !

Exemples d’utilisation

#1 – L’accordéon

Vous avez peut-être déjà tenté de créer, sur votre site, ce type d’animation. Et vous savez donc à quel point cela relève du défi sans jQuery et jQuery UI.

Je vais vous expliquer comment utilisé cet effet. Mais pour commencer, voici quelques pré-requis :

  • Un bloc <div> dit container : ce bloc est dit container, c’est à dire qu’il englobera votre accordéon ;
  • Un titre pour chaque partie de l’accordéon : le titre d’un bloc servira à le rétracter ou à l’étirer.
  • Un bloc <div> pour chaque partie de l’accordéon : vous l’aurez compris, chaque partie de l’accordéon sera composée d’un titre et d’un bloc ;

Exemple de code :

<div id="accordion"> 

<!-- PARTIE 1 -->
<h3><a href="#">Partie 1</a></h3>
<div>
<p>Contenu de la partie 1 de votre accordéon.</p>
</div>
<!-- END OF PARTIE 1 -->

<!-- PARTIE 2 -->
<h3><a href="#">Partie 2</a></h3>
<div>
<p>Contenu de la partie 2 de votre accordéon.</p>
</div>
<!-- END OF PARTIE 2 -->

ETC.....

</div>

Et c’est tout… Et bien oui. Le reste sera géré par jQuery UI.

Voici maintenant le code JavaScript :

jQuery(function() {
    jQuery( "#accordion" ).accordion({
        autoHeight: false,
        });
});

Au final, vous devriez obtenir quelque chose dans ce goût là :

Exemple d’accordéon utilisé dans un formulaire

#2 – Datepicker

Sous ce nom barbare se cache un outil qui permet d’afficher un calendrier lorsque qu’on entre dans un champ formulaire de type date. Ce champ référence alors la date sélectionnée. C’est un sélecteur de date de l’anglais date picker – vous connaissez sûrement le color picker.

Pré-requis :

  • Un champ date : celui-ci n’est autre qu’un input de type text. Mais il servira à renvoyer une date ;

Exemple de code :

<label for="date">Date</label>
<input type="text" id="date" value="jj/mm/aa" />

Ensuite viens la partie JavaScript :

jQuery(function() {
    jQuery('.date').datepicker({
        dateFormat: 'dd-mm-yy',
        dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
        dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
        dayNamesShort : ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
        monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        monthNamesMin: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        monthNamesShort: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        changeYear: true,
        yearRange: 'c-100:c',
        showAnim: 'fold'
        });
});

Cet exemple est, pour moi, un bon exercice d’intégration des options dans jQuery UI.

En effet, afin d’avoir un affichage correct et en français de votre datepicker. Vous devrez inscrire une série d’option à votre fonction.

Et enfin voici ce à quoi votre champ devrait ressembler :

Sélecteur de date
Voici un sélecteur de date (et il est même daté du 4/01/2012)

C’est tout pour le moment. Entrainez-vous sur d’autres effets…. J’expliquerais plus en détails des exemples d’utilisation plus complexes de cette formidable librairie. Cela fera l’objet d’autres tutoriels.

9 commentaires

  1. TRAC

    Bonjour Aurélien,

    Je suis un peu perdu dans l’utilisation du javascript dans WordPress, entre la librairie jquery, les scripts, les fichiers js…

    Où doit-on mettre le script « jQuery(function() {…. » ? Doit-on créer un fichier .js pour l’accueillir? Dans le core de ma page web?

    Merci d’avance.
    Gwen

    1. Christopher Hennuyez auteur de l’article

      Bonjour… Moi c’est Christopher ^^,

      J’ai pour habitude d’organiser mes fichiers comme suit dans mon template

      – js/jquery.min.js (dernière version de jQuery)
      – js/jquery-ui.min.js (dernière version de jQuery UI)
      – js/jquery-custom.js (mon code jquery – La ou je met mon propre code – jQuery(function() {}); )

      Dans le header (header.php), j’aurais donc 3 insertions de fichiers jQuery.

      Ce n’est pas la panacée… Chacun à ses méthodes.

  2. TRAC

    Bonjour Christopher,

    Excuses-moi pour l’erreur de nom, je me suis basé sur le nom de l’auteur du dernier commentaires. ; )

    Merci pour ta réponse. Mais du coup, j’ai de nouvelles questions qui ne sont pas 100% en lien avec ton article.

    J’ai toujours un peu de mal à comprendre l’utilisation du js avec WordPress. Actuellement, j’utilise un thème enfant de twentyeleven.

    J’ai compris que WordPress utilisait les librairies jquery et jquery ui pour son back-office. On retrouve d’ailleurs ces libraires dans content/includes/js… de wordpress.

    1°/ Du coup, faut-il que je crée également dans mon thème un dossier js avec les libraires jquery et jquery iu? Si oui, faut-il que je fasse pointer le code sur mon répertoire js?

    2°/ Si je souhaite ajouter un petit bout de javascript dans un formulaire (exemple: Autocompletion d’une zone), dois-je créer un fichier .js ou saisir le code directement dans mon fichier php?

    3°/ Dans le codex, j’ai vu qu’il fallait utiliser la fonction « wp_enqueue_script() » pour activer les scripts mais c’est pas très clair! Sais-tu où je pourrais avoir des infos plus précises.

    Désolé de t’embêter avec autant de questions mais je trouve vraiment que wordpress est un bel outil et j’ai vraiment envie d’en comprendre les rouages.

    Cordialement,

    Gwen

  3. Marie

    J’ai aussi un problème, l’affichage de ma page saute dès cette étape :

    Ensuite ouvrez votre fichier header.php. Juste après -php wp_head(); ?-, imputez ceci :

    -script src= »/js/jquery-1.6.2.min.js »-
    -script src= »/js/jquery-ui-1.8.16.custom.min.js »-

    Merci!

Laisser un commentaire