Souhaitez-vous localiser les chaînes de caractères du sélecteur de date dans le champ Date / Heure de WPForms ? La langue par défaut du sélecteur de date est l'anglais. Cependant, avec une bibliothèque JavaScript tierce, vous pouvez traduire les chaînes du sélecteur de date dans d'autres langues supportées.
Dans ce tutoriel, nous vous guiderons à travers les principes de base de la localisation des chaînes du sélecteur de date à l'aide de JavaScript.
Comprendre le fonctionnement du sélecteur de date de WPForms
WPForms utilise le script de date Flatpickr pour générer son sélecteur de date. Flatpickr construit le sélecteur de date à l'aide de JavaScript. Avec plus de 25 langues disponibles, Flatpickr offre un support linguistique étendu, ce qui facilite la localisation des chaînes du sélecteur de date.
Localisation des chaînes du sélecteur de date
La localisation vous permet d'adapter votre site WordPress et ses plugins à différentes langues, assurant une expérience transparente pour les utilisateurs du monde entier. Ci-dessous, nous allons couvrir les étapes pour traduire les chaînes du sélecteur de date dans WPForms.
1. Trouver l'URL et le code langue
Pour trouver l'URL de la langue dont vous aurez besoin pour ce snippet, naviguez jusqu'à la section Dépôt GitHub Flatpickr et localisez le fichier de langue correspondant à votre langue préférée, par exemple es pour Espagnol ou fr pour Français. Une fois que vous avez trouvé le fichier de langue approprié, construisez une URL en utilisant le format suivant :
https://npmcdn.com/[email protected]/dist/l10n/{language_code}.js
Remplacer {language_code} avec le code de la langue choisie. Par exemple, si vous localisez en français, votre URL sera :
https://npmcdn.com/[email protected]/dist/l10n/fr.js
Cette URL fournira le fichier JavaScript nécessaire contenant les chaînes de caractères du sélecteur de date localisées dans la langue choisie.
Note : Si votre code de langue n'est pas listé dans le dépôt GitHub de Flatpickr, c'est que votre langue n'est pas prise en charge actuellement.
2. Chargement de la langue du sélecteur de date
Après avoir obtenu l'URL pour localiser le wpforms-datepicker-localeL'étape suivante consiste à ajouter le code à votre site. Pour ce faire, vous devrez ajouter des extraits JavaScript personnalisés à votre site.
Note : Si vous avez besoin d'aide pour savoir comment et où ajouter des extraits personnalisés, consultez notre tutoriel sur l'ajout d'extraits personnalisés dans WordPress pour une description détaillée.
Pour ce tutoriel, nous utiliserons le français, donc dans l'extrait ci-dessous, vous remarquerez que nous mettons en file d'attente le script https://npmcdn.com/[email protected]/dist/l10n/fr.js. Vous devrez mettre à jour le script pour qu'il corresponde à la langue que vous souhaitez localiser.
L'extrait ci-dessus vérifie s'il y a un champ Date / Heure dans les formulaires de votre site, et modifie ensuite la locale par défaut du sélecteur de date de WPForms pour qu'elle corresponde à celle que vous avez spécifiée.
3. Application de la localisation
La deuxième étape consiste à appliquer la localisation des sélecteurs de date à la page, ce qui se fait via JavaScript. Procédez à l'ajout des extraits de code ci-dessous sur votre site.
Lorsque les utilisateurs ouvrent le sélecteur de date dans votre formulaire, les chaînes sont traduites dans la langue que vous avez spécifiée.
Ajout de la logique conditionnelle (facultatif)
Si vous utilisez le plugin WPML sur votre site, vous pourrez charger conditionnellement le module de localisation du sélecteur de date. De cette manière, les chaînes du sélecteur de date ne changent que si l'utilisateur visualise cette locale spécifique. L'exemple ci-dessous n'appliquera la localisation que si l'utilisateur a spécifié qu'il voulait voir la version espagnole de la page (es).
Questions fréquemment posées
Ci-dessous, nous avons répondu à quelques questions courantes sur la traduction des chaînes du sélecteur de date dans WPForms.
Q : Lorsque je sélectionne la date, pourquoi le format ne s'affiche-t-il pas correctement ?
R : Lorsque vous utilisez ce snippet, vous ne localisez que le mois et les jours dans le sélecteur de date. Si vous souhaitez modifier le format d'affichage de la date, consultez plutôt ce tutoriel.
Voilà, c'est fait ! Vous avez localisé avec succès le texte du sélecteur de date.
Souhaitez-vous personnaliser le champ de formulaire Date/Heure? Jetez un coup d'œil à notre tutoriel sur Comment personnaliser le champ Date/Heure Options de date.