Comment traduire un site web avec GTranslate et résoudre le problème de traduction des textes dans une zone "textarea"

Comment traduire un site web avec GTranslate et résoudre le problème de traduction des textes dans une zone "textarea"

Parmi les extensions de traduction de site web WordPress, le plugin GTranslate est considéré comme l’une des meilleures options gratuites. Grâce à cette solution, vous pouvez traduire facilement un site web en plusieurs langues, offrant ainsi une expérience multilingue à vos utilisateurs sans trop d’efforts. Dans cet article, nous vous expliquerons comment installer et configurer GTranslate sur votre site WordPress, et nous aborderons une solution pratique pour un problème souvent rencontré : la traduction des textes dans les zones de texte (textarea), qui ne sont pas pris en compte par défaut.

1. Installation et configuration de GTranslate

GTranslate permet d’utiliser la puissance de Google Traduction pour traduire automatiquement votre site WordPress. Voici les étapes pour installer et configurer ce plugin sur votre site :

Étape 1 : Installer GTranslate

1. Accédez à votre tableau de bord WordPress.
2. Allez dans Extensions > Ajouter.
3. Recherchez GTranslate dans la barre de recherche.
4. Cliquez sur Installer puis sur Activer.

Étape 2 : Configurer GTranslate

1. Une fois le plugin activé, allez dans Réglages > GTranslate.
2. Choisissez les langues dans lesquelles vous souhaitez traduire votre site.
3. Sélectionnez l’option Traduction automatique gratuite.
4. Configurez la méthode d’affichage de la langue (par exemple, avec un drapeau ou une liste déroulante).
5. Cliquez sur Sauvegarder les modifications.

Votre site est maintenant prêt à être traduit automatiquement en plusieurs langues. Les visiteurs peuvent sélectionner la langue de leur choix, et la page se traduira automatiquement.

2. Problème de traduction des textes dans une zone de texte (textarea)

L’un des inconvénients de GTranslate est qu’il ne traduit pas les textes placés dans les éléments HTML de type <textarea>. En effet, les zones de texte sont généralement conçues pour l’entrée de texte par l’utilisateur, donc GTranslate les ignore par défaut.

Solution : Utiliser jQuery pour injecter le texte du placeholder dans le <textarea>

Pour contourner ce problème, une solution efficace consiste à utiliser un script jQuery qui récupère le texte du placeholder et l’injecte automatiquement dans la zone de texte. Voici comment procéder :

Exemple de jQuery pour résoudre le problème :

jQuery(document).ready(function($) {
// Fonction pour déplacer le texte du placeholder dans la valeur de textarea
function updateTextarea() {
// Sélectionner la textarea par son ID
var textarea = $('#agent_comment');

// Vérifier si la textarea a un placeholder et s'il n'est pas vide
if (textarea.attr('placeholder') && textarea.attr('placeholder') !== '') {
// Mettre la valeur du placeholder comme valeur de la textarea
textarea.val(textarea.attr('placeholder'));
}
}

// Initialiser avec un délai pour que GTranslate ait le temps de finir la traduction
setTimeout(function() {
updateTextarea();
}, 2000); // Délai de 2 secondes

// Réappliquer le processus lors d'un clic sur les éléments ayant la classe "glink nturl notranslate"
$('.glink.nturl.notranslate').on('click', function() {
// Réappliquer avec un délai pour la retraduction
setTimeout(function() {
updateTextarea();
}, 2000); // Délai de 2 secondes pour permettre la traduction
});
});

Explication du code :

• updateTextarea() : Cette fonction vérifie si l’élément <textarea> a un attribut placeholder non vide. Si c’est le cas, elle copie le texte du placeholder dans la valeur de la zone de texte.
• setTimeout() : Un délai de 2 secondes est introduit pour s’assurer que GTranslate a terminé la traduction avant que le script n’injecte le texte dans la zone de texte.
• Événement click : Si un utilisateur clique sur un élément de changement de langue (avec la classe glink nturl notranslate), le processus est réappliqué, permettant une mise à jour du texte traduit.

Conclusion

Le plugin GTranslate est une excellente solution pour traduire un site WordPress rapidement et gratuitement. Toutefois, il présente des limites, notamment la non-traduction des zones de texte. Heureusement, en utilisant un simple script jQuery, il est possible de résoudre ce problème en injectant le texte du placeholder dans les zones de texte. Cette solution garantit une meilleure expérience utilisateur multilingue en assurant que même les champs de texte sont bien traduits.

En suivant ce guide, vous pourrez non seulement installer et configurer GTranslate, mais aussi résoudre l’un des problèmes majeurs rencontrés lors de son utilisation.