Traduction en plusieurs langues

par **Walt** Lun 5 Sep 2016 - 14:36

Gestion de plusieurs langues

La structure de votre forum prévoit déjà une gestion des langues efficace, puisque chaque utilisateur peut opter parmi plus d'une centaine de langues, dans son profil. Néanmoins, tous les textes que vous insérez ne peuvent être traduits, et le sont donc dans la langue que vous écrivez.

Ce tutoriel vous permet de prévoir un même texte en plusieurs langues, et d'afficher le texte dans la langue de l'utilisateur qui consulte votre forum. Il peut être utilisé dans la description des forums, en page d'accueil, voire dans vos pages HTML (à condition de cocher la case Utiliser le haut et le bas du forum). Cette astuce peut également être utilisée dans les messages, si le HTML y est activé.

Création des différentes versions

Pour notre exemple, nous allons utiliser cette astuce dans la description d'un forum et nous prévoirons un texte anglais et un texte français.
Il est possible d'ajouter autant de textes que de langues gérées par Forumactif (vous en trouverez un tableau ci-dessous).

Insérez à l'endroit souhaité le code suivant :

Code:: <div class="fa_translate_container">
<span class="fa_translate fa_translate_fr">Voici la description du forum</span>
<span class="fa_translate fa_translate_en">This is the description of this forum</span>
</div>

Comme vous le remarquez, la première ligne est en français et la seconde en anglais. La première ligne est un span ayant la classe .fa_translate_fr , la seconde est un span ayant la classe .fa_translate_en

La ligne sera affichée en fonction de ces deux lettres, qui indique la langue utilisée par l'utilisateur. Si vous souhaitez rajouter d'autres langues, il vous suffira de chercher dans le tableau ci-dessous le code de deux lettres correspondant, et de rajouter une ligne comme celle-ci, en prenant le soin de remplacer XX par le code de deux lettres obtenu, avant la fermeture </div> :

Code:: <span class="fa_translate fa_translate_XX">Votre texte</span>

Afficher le tableau des correspondances:

Ainsi, si je souhaite ajouter la langue "espagnol" parmi les textes, il me suffit de trouver la ligne correspondant à cette langue, déterminer que le code est "es" et rajouter par conséquent :

Code:: <div class="fa_translate_container">
<span class="fa_translate fa_translate_fr">Voici la description du forum</span>
<span class="fa_translate fa_translate_en">This is the description of this forum</span>
<span class="fa_translate fa_translate_es">Mon texte en espagnol</span>
</div>

 Attention : les minuscules sont importantes ! fa_translate_ES ne fonctionnerait pas, pas plus que fa_translate_Es.

Cette étape peut être répétée avec des textes différents pour chaque endroit où un texte doit être traduit. Vous pouvez donc répéter l'opération pour toutes les descriptions de vos forums, par exemple, la suite du tutoriel ne changera en rien.

Masquer ces différentes versions par défaut

Une fois cette première étape achevée, vous pouvez remarquer que toutes les versions s'affichent simultanément ce qui n'est pas l'effet escompté. Il faut donc masquer tous les textes avant de décider lequel afficher. Pour cela, ajouter à votre CSS personnalisé (Panneau d'administration  Affichage  Couleurs  Feuille de style) :

Code:: .fa_translate {
display: none;
}

Afficher le texte dans la langue de l'utilisateur

Tous nos textes sont masqués par défaut, puisque seul le texte compris par l'utilisateur doit s'afficher. Pour déterminer la langue de l'utilisateur, nous utilisons la langue que celui-ci a choisi dans son profil. Il suffira donc de changer la langue du profil pour que les textes traduits changent également.

Création du script

Panneau d'administration  Modules  HTML et Javascript  Gestion des codes javascript
La gestion des codes javascript doit être activée.

Créez un nouveau script que vous activerez sur toutes les pages, et insérez-y ce code :

Code:: $(function() {
var defaultTranslation = "en";

$('.fa_translate_container').each(function() {
if($('.fa_translate_' + _userdata["user_lang"], this).length < 1)
$('.fa_translate_' + defaultTranslation, this).show();
else {
$('.fa_translate_' + _userdata["user_lang"], this).show();
}
});
});

Déterminer un langage par défaut

Il est essentiel de prévoir l'hypothèse dans laquelle l'utilisateur choisi une langue autre que celles que vous auriez prévues. Ainsi, si votre forum est traduit en anglais, français et espagnol, il est impératif de prévoir un langage par défaut si l'utilisateur a choisi la langue "Italien" dans son profil, sans quoi il ne verrait aucun texte.

Notre script tout juste créé le prévoit, et vous pouvez modifier cela :

Code:: var defaultTranslation = "en";

Par défaut, la langue affichée sera la traduction anglaise. Vous pouvez la remplacer par n'importe laquelle de vos traductions. Si vous avez choisi le français, l'anglais et l'espagnol, vous pouvez donc indiquer au choix : fr, en, ou es. Veillez à bien conserver les guillemets.

Résultat

Lorsque l'utilisateur visite le forum en ayant choisi le français comme langue :
Lorsque l'utilisateur visite le forum en ayant choisi l'espagnol comme langue :
Lorsque l'utilisateur visite le forum en ayant choisi une langue non-prévue dans les traductions (affichage de la langue par défaut) :