Ajouter un calendrier sur un champ dans un formulaire WordPress

Partagez si vous aimez ->

Sur votre site WordPress, vous avez sûrement un formulaire de contact qui permet à vos visiteurs de vous laisser un message. Voici un tutorial vidéo qui vous explique comment faire afficher un calendrier quand votre visiteur clique sur un champ donné.

Cette procédure fonctionne quel que soit le plugin wordpress que vous utilisez pour créer votre formulaire, et même si vous le faîtes à la main.

Ajouter un calendrier avec JQuery Datepicker

Pour afficher ce calendrier sur WordPress, nous allons utiliser le plugin jQuery Datepicker.

Aujourd’hui je vais vous montrer comment afficher un calendrier dans un formulaire sur WordPress. Alors ça devrait donner quelque chose comme ça. Vous voyez ici j’ai mon formulaire de contact et à la fin j’ai rajouté un champ « Naissance de votre site/blog » et quand on clique dans le champ, alors on a un petit calendrier qui apparaît de cette façon.

Comment afficher un calendrier sur un formulaire de WordPress, avec un peu de javascript jQuery ? 00:25

Pour les besoins de cette vidéo, je vais supposer que vous avez déjà un formulaire avec un champ. Si vous n’avez pas encore le champ voulu, vous pouvez aller l’installer tout de suite dans votre interface d’administration. Et nous, nous allons travailler sur ce champ HTML.

Donc vous voyez, c’est un champ complètement normal : quand je clique dessus, il ne se passe rien et je peux écrire à l’intérieur de façon habituelle. Donc vous savez que c’est une solution de laisser vos visiteurs écrire leur date eux-mêmes, par exemple comme ceci : 2012/02/12. L’inconvénient, c’est que certains vont l’écrire dans ce sens-là, d’autres vont écrire plutôt des dates comme ceci : 12 Février 2011. Et au final, vous allez avoir des dates avec beaucoup de formats différents. Ça ne sera pas standardisé et donc c’est dans votre avantage de plutôt installer un petit calendrier. Vous allez voir, ça ne prend que cinq minutes.

Plan de tutoriel

  • Comment installer un plugin jQuery ?
  • Quels sont les fichiers qui sont nécessaires pour travailler avec un plugin jQuery ?
    • 1/ la librairie jQuery
    • 2/ la librairie du plugin (datepicker)
    • 3/Fichier qui fait le lien entre HTML et le plugin : il va y avoir un fichier JavaScript tout à fait générique dans lequel vous allez faire vous-même le lien entre le champ HTML et le plugin que vous avez choisi.

Fichiers nécessaires pour utiliser un plugin jQuery

Alors la bonne nouvelle, c’est qu’avec WordPress, la librairie jQuery et la librairie du plugin datepicker est intégré en actif, c’est-à-dire que vous n’avez rien besoin de faire pour pouvoir les utiliser. Donc nous allons passer tout de suite à la troisième étape, enfin, pas tout à fait une troisième étape, mais au troisième fichier, à savoir donc le fichier qui va appeler le plugin sur notre champ HTML.

Créer le fichier javascript et le lier au site

Pour cela, je vais aller dans mon logiciel Aptana, c’est un logiciel qui me permet en fait de travailler directement sur les fichiers qui sont sur le serveur. Alors, je vais créer un nouveau fichier dans le fichier, dans le dossier de mon thème que je vais appeler « lddln.js ». Voilà, le fichier s’est ouvert.

Pour vérifier qu’il est bien inséré, je vais écrire un « alert(1); » dedans. Donc ça, ça va afficher une petite pop-up avec écrit « 1 » à l’intérieur. C’est juste pour vérifier si le fichier a bien été lié à mon site. Et donc évidemment, il faut que je le lie à mon site. Pour cela, je vais aller dans le fichier functions.php qui se situe dans mon thème et je vais rajouter cette partie de code :

wp_enqueue_script (
'javascript appel plugin'
,get_stylesheet_directory_uri(). '/lddln.js',
'',
'',
true
);

Je vais le détailler avec vous.

« wp_enqueue_script() » : c’est une fonction qui permet en fait d’accrocher un fichier JavaScript à un site développé avec WordPress. Le premier paramètre que vous voyez « javascript appel plugin », donc c’est tout simplement un nom que l’on donne au fichier JavaScript qui est inséré pour que WordPress puisse le manipuler.

En deuxième position, nous avons « get_stylesheet_directory_uri ().’/lddln.js’ ». Attention, il s’agit bien de « uri » et pas « url » ; donc c’est un « i » à la fin. Ça, c’est une fonction qui va me renvoyer en fait le chemin de mon thème et auquel je concatène juste le nom de mon fichier. Donc vous mettez un « point » pour la concaténation et puis « ‘/lddln.js’ », à savoir le nom de mon fichier.

Le troisième et le quatrième paramètre ne sont pas renseignés, donc vous pouvez sauter. Et le cinquième paramètre, moi j’ai mis « true ». C’est en fait pour lui dire d’accrocher ce fichier à la fin de la page, et non pas au début. Et c’est en fait pour augmenter le temps de chargement de la page qui a une influence à la fois pour la satisfaction de nos visiteurs et également pour votre référencement. Donc je vous conseille toujours d’accrocher vos fichiers JavaScript à la fin de vos pages.

Voilà, donc maintenant le fichier « lddln.js » est supposé être bien accroché à mon site. Je vais tout de suite aller vérifier si j’ai bien la petite alerte ici « alert (1); » que j’avais écrite dans mon fichier JavaScript. Je vais vérifier si elle s’affiche bien sur mon site. Donc je fais F5 pour recharger le site et F12 pour ouvrir Firebug. Comme ça, si jamais il y a des erreurs, je les verrai.

Voilà : on a bien l’alerte qui apparaît. Donc pas de problème, le fichier est bien intégré à mon site.

Écrire le code dans le fichier jQuery

Nous allons aller véritablement écrire l’appel du plugin sur mon fichier JavaScript. Donc pour ça, j’enlève ça; je vais tout d’abord prévenir d’éventuels conflits entre JQuery et notre librairie :

 $j = jquery.noConflict(); 

. C’est toujours bien de faire ça parce que comme on utilise des plug-ins dans JavaScript, eh bien les plug-ins peuvent faire appel à leur propre librairie qui est peut-être une autre librairie que jQuery. Par exemple, il existe Mootools. Et donc à ce moment-là, il y aurait des conflits entre jQuery et Newtools. Donc avec cette petite ligne vous pouvez les prévenir très simplement.

Ensuite, j’appelle le «document ready » :

$j(document).ready(function () {[/cod . Ça, c’est aussi quelque chose de très classique. C’est pour tout simplement dire à jQuery d’attendre que la page soit totalement chargée avant d’exécuter le code. Donc vous voyez, c’est ça que ça dit, en fait; ça dit : « $j », c’est pour s’adresser à JQuery. Ensuite on a « (document) » puis « .ready », donc on dit à jQuery : « Tu attends que le document soit prêt », « (document).ready() ». C’est vraiment très facile; on peut presque le lire de gauche à droite avec un petit peu d’imagination, bien sûr.

Tout le code qui va se situer à cet endroit, là où je viens d’écrire cette petite phrase, s’exécutera quand la page sera chargée.

Alors j’ai besoin de connaître l’identifiant du champ sur lequel je vais appeler mon calendrier. Donc pour ça, je retourne sur le front et je vais encore une fois m’aider de Firebug. Voilà. J’ai fait un clic-droit à partir du champ dans lequel je veux mettre le calendrier. Donc ça m’ouvre une vue ici vraiment de mon champ.

<input id="cf2_field_8 class=" name="cf2_field_8" type="text" value="" />

Et donc ici vous voyez qu’il y a ID, et donc je vais copier tout simplement cet ID et donc je vais l’utiliser ici.

$j = jquery.noConflict();
$j(document).ready(function() {
//à cet endroit
$j('#cf2_field_8').datepicker();

Et voilà. Normalement, déjà avec ce code, ça devrait être suffisant pour appeler le calendrier au moins par défaut sur mon champ, dans mon formulaire. Donc nous allons tout de suite vérifier si c’est le cas. Bon déjà, je n’ai pas d’erreur dans ma console. Ah, je ne suis plus dans la console. Donc je vais retourner dans la console. Voilà, je n’ai pas d’erreur. Donc c’est une bonne nouvelle. Et maintenant, le grand moment qu’on attend tous.

Et voilà, le plugin JavaScript est bien en place. Alors je constate quand même deux problèmes. Tout d’abord, le calendrier n’est pas en français. Donc je vais vous montrer tout de suite comment le passer en français et ensuite on voit en haut ici qu’on a le mois, le mois en cours et les boutons « prev » et « next ». Donc toute cette petite partie-là en fait n’a pas été stylée par le CSS. Donc je vais vous montrer également comment styler cette partie-là en CSS.

Configurer le plugin jquery en français

Alors sur le site officiel de jQuery, j’ai été voir la documentation de Datepicker. Donc nous sommes sur http://jqueryui.com. Je vais voir la documentation de Datepicker. Donc si je vais voir dans les options ici. Ici il y a tout un tas d’options en fait qui nous permettent de configurer notre Datepicker un peu comme on veut et notamment vous voyez ici « dayNames », « dayNamesMin », « dayNamesShort », tout ça, ce sont tous des configurations pour les noms des jours. Il y a également des configurations pour les noms des mois.

Alors comme c’est un petit peu long, et qu’il y a beaucoup d’options différentes, je les ai recherchées avant de faire la vidéo. Donc je les ai sauvegardés ici. Donc je vous conseille juste de faire un copier-coller du code que je vais vous donner. Si vous avez envie de vous amuser avec JavaScript, avec JQuery, vous pouvez très bien venir sur le site lire la documentation. Ça ne pose pas du tout de problème.

Voilà. Ça, c’est ma petite sélection. Donc vous voyez, pour mettre les paramètres, je les ai mis entre accolades à l’intérieur des parenthèses et je fais passer. Donc chaque paramètre est un couple. Il y a d’abord sur la gauche une clef et sur la droite la valeur qui est sous forme de String.

Dateformat : 'dd-mm-jj'
Remarque : String = chaîne de caractère

On appelle string tout ce qui est entre double quote, comme ça. Donc tout ce qui apparaît en vert ici sur l’écran et chaque paire clef/valeur de paramètres est séparé par une virgule, que personnellement, je place en début de ligne. Voilà. Donc on va passer un petit peu en détail sur ces paramètres.

Tout d’abord, « dateFormat » qui va me permettre d’afficher la date : days, months, years ( dd-mm-yy). Et non pas year, months, days, comme c’est le cas dans le système anglo-saxon. Et ensuite, le nom des jours, le nom des jours en raccourci, le nom des jours en tout petit raccourci, vraiment avec deux lettres seulement. Pareil pour les mois et enfin le texte des boutons « prev » et « next » qui sont pour l’instant donc en anglais. Moi je vais mettre « suivant » et « précédent ».

Une fois que tout ca est fait, vous pouvez faire CTRL + S pour sauvegarder votre fichier. Retournez voir en front si les modifications ont bien été prises en compte. Je clique. Eh oui, nous voyons bien dimanche, lundi, mardi, mercredi, jeudi, vendredi, samedi. Donc le calendrier est bien passé en français. Maintenant, le mois aussi ici, juillet 2012. Il est bien passé en français. Par contre, on a toujours un problème au niveau du style : le style CSS n’a pas été pris en compte, toujours pas. Et donc ça, ça sera l’objet de la prochaine vidéo.

Donc voilà. Je vous dis à demain pour la suite de ce tutoriel et merci de l’avoir suivi. À très bientôt. Au revoir.
[/transcription]

Résumé du tutorial

  • Pré-requis: avoir un formulaire avec un champ input de type "texte" (le champ texte le plus classique qui soit)

Les 3 fichiers nécessaires

  • La librairie jQuery : déjà intégrée à WordPress
  • La librairie du plugin DatePicker: déjà intégrée à WordPress
  • Le fichier qui fait le lien entre le champ HTML et le plugin Datepicker : à créer

La procédure

  • Créer le fichier "le-nom-que-vous-voulez.js" sur le serveur
  • Le lier à votre site
    • Placer ce code dans functions.php
      /*********** Ajoute mon fichier javascript **********/
      wp_enqueue_script(
      "javascript appel plugin"
      ,get_stylesheet_directory_uri()."/le-nom-que-vous-voulez.js",
      '',
      '',
      true
      );
      /*********** Fin du code **********/
      
    • Ecrire le code suivant dans le fichier "le-nom-que-vous-voulez.js"
      $j = jQuery.noConflict();
      $j(document).ready(function(){
      $j('#cf2_field_8').datepicker();
      });
      
      N'oubliez pas de remplacer "cf2_field_8" par l'ID de votre champ
  • Vérifiez sur votre site que le calendrier s'affiche bien.
  • Pour configurer le calendrier en Français, modifiez votre code JS par celui-ci:
    $j = jQuery.noConflict();
    
    $j(document).ready(function(){
    
    $j('#cf2_field_8').datepicker({
    dateFormat: "dd-mm-yy"
    ,dayNames: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]
    ,dayNamesShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"]
    ,dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"]
    ,monthNames: ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Decembre"]
    ,monthNamesShort: ["Jan",,"Fev","Mar","Avr","Mai","Jui","Jui","Aou","Sep","Oct","Nov","Dec"]
    ,nextText: "Suiv."
    ,prevText: "Prec."
    });
    });
    
    N'oubliez pas de remplacer "cf2_field_8" par l'ID de votre champ

Vous avez un site WordPress ? Vous voulez le modifier mais...

  • Vous ne savez pas par où commencer ?
  • Vous avez peur de casser votre site et d'être bloqué ?
  • Vous ne trouvez jamais le bon fichier ?
  • Vous perdez un temps fou à chaque modification ?
  • Le code vous impressionne ?
  • Vous n'avez pas de méthode de travail ?

Vous n'êtes pas seul ! De nombreux lecteurs sont dans votre situation. Alors dites-moi dans les commentaires quels sont les difficultés que vous rencontrez avec WordPress.

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

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

Simple Share Buttons