Les sites Web évoluent jour après jour, à mesure que la communication du monde se rapproche de plus en plus. À chaque fois, nous avons besoin que nos développements soient utilisés non seulement sur le marché local, mais également pour s'étendre aux marchés mondiaux. L'un des premiers moyens d'y parvenir est que notre site (ou nos applications) prenne en charge plusieurs langues. Aujourd'hui, vous apprendrez comment appliquer plusieurs langues à votre site Web ou application.
Comment fonctionnera notre traducteur Web
1. Nous aurons un bouton sur notre site qui nous donnera la possibilité de changer notre site dans les différentes langues que nous avons configurées.
2. La traduction se fera avec javascript en extrayant les textes traduits via ajax enregistrés dans des fichiers texte que nous aurons préalablement configurés avec les balises de notre site web.
3. Nous aurons un service externe qui nous dira de quel pays ils nous rendent visite et ainsi visualisera la langue idéale pour le visiteur. Nous traiterons cela par l'IP du visiteur.
Avantages de notre traducteur
1. Il n'est pas nécessaire de rafraîchir le site pour appliquer la traduction, car de nombreux sites le font de cette façon.
2. Nous n'avons qu'une seule version de notre front, il n'est pas nécessaire d'avoir deux ou plusieurs html pour gérer les textes dans différentes langues.
3. Si plus tard nous voulons ajouter d'autres langues, nous pouvons le configurer très facilement.
4. Super facile à appliquer pour les sites que nous avons déjà créés et que nous voulons placer en multi-langues.
NoterAfin de bien comprendre ce tutoriel, il est conseillé d'avoir des connaissances préalables en HTML, CSS, Javascript (en particulier jQuery), des connaissances en Ajax et un peu de PHP.
1. Démarrage du développement
Nous allons commencer par créer un répertoire appelé translate, au sein de ce répertoire nous allons créer les fichiers index.html, un répertoire css et appelé js. Et à l'intérieur de ces deux répertoires mettez un fichier appelé main.css Oui main.js respectivement.
Mon site multilingue Français Chargement…[color = # a9a9a9] Code de index.html [/ color]Salut monde
.loading-lang {opacité : 0; } .loading-lang.show {opacité : 1; } [couleur = # 808080] code main.css [/ couleur]
Pour l'instant, le fichier main.js est laissé vide. Nous pouvons tester à partir de notre serveur Web local préféré. Il est nécessaire d'utiliser un serveur web car plus tard nous commencerons à faire des requêtes ajax.
2. Création de fichiers de traduction
Nous créerons sur notre site les fichiers où nous placerons les textes de notre site internet. Nous allons commencer par créer deux fichiers pour notre site qui seront en deux langues. Anglais et espagnol. Nous créons un répertoire appelé lang, à l'intérieur de ce répertoire nous plaçons deux fichiers texte appelés es.txt et en.txt (fichier texte espagnol et anglais respectivement).
Contenu du fichier
es.txttitulo-web => Mon site multilingue
bienvenue => bienvenue sur mon site
bonjour => bonjour le monde
fr.txttitulo-web => Mon site multilingue
bienvenue => Bienvenue sur mon site
bonjour => bonjour tout le monde
Je vais expliquer un peu sur ces fichiers comment ils sont structurés. Chaque phrase que nous utilisons sur notre site Web doit être identifiée avec un identifiant unique, qui sera le moyen de traduire chaque phrase là où elle doit être spécifiquement placée. Par exemple, pour le titre du site on utilise l'ID title-web suivi des caractères => puis la phrase correspondante. Chaque phrase doit être sur une ligne différente.
En résumé, nous devons suivre les règles suivantes
1. Identifiant unique.
2. Utilisez toujours après l'ID les caractères =>
3. Séparez la phrase traduite par une ligne différente. (Séparé par un saut de ligne ou \ n).
4. Que les fichiers sont au format txt.
3. Création d'Ajax
NoterSi vous n'avez pas beaucoup de connaissances sur jQuery, je vous invite à visiter leur site Web.
$ (document) .ready (function () {var selector = '#translate'; $ (selector) .on ('click', function (e) {e.preventDefault (); startLang ($ (this));} ); var startLang = function (el) {var el = $ (el); var text = el.attr ('data-text'); var file = el.attr ('data-file'); file = file. split (','); text = text.split (','); var index = el.attr ('data-index'); if (index> = file.length) {index = 0;} changeName (el , text [index]); changeIndex (el, index); loadLang (file [index]); $ ('html'). attr ('lang', file [index]);}; var changeName = function (el, name) {$ (el) .html (name);}; var changeIndex = function (el, index) {$ (el) .attr ('data-index', ++ index);}; var loadLang = function ( lang) {var processLang = fonction (données) {var arr = data.split ('\ n'); for (var i in arr) {if (lineValid (arr [i])) {var obj = arr [i] .split ('=>'); assignText (obj [0], obj [1]);}}}; var assignText = fonction (clé, valeur) {$ ('[data-lang = "' + clé + ' " ] '). each (function () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, valeur); } else {$ (ceci) .html (valeur); }}); }; var lineValid = function (line) {return (line.trim (). longueur> 0); } ; $ ('. loading-lang'). addClass ('show'); $ .ajax ({url : 'lang /' + lang + '. txt', erreur : function () {alerte ('Pas de traduction chargée');}, succès : fonction (données) {$ ('. loading-lang ') .removeClass (' show '); processLang (données);}}); }; }); [couleur = # a9a9a9] code main.js [/ couleur]
Nous devons également modifier notre html :
Mon site multilingue Français Chargement…[color = # a9a9a9] Code HTML mis à jour [/ color]Salut monde
Avec cela, nous pouvons tester que notre site est déjà en cours de traduction.
Expliquons un peu ce que nous avons fait dans notre fichier javascript et ce que nous avons mis à jour dans notre html.
Le processus effectué dans le fichier javascript est au moyen de la balise qui fonctionne comme un bouton de traduction, nous plaçons un événement pour qu'il se charge de faire une requête ajax en extrayant le fichier de la langue que nous allons utiliser au moment.
Nous avons trois attributs dans notre bouton de traduction appelé fichier de données, index-données, données-texte.
Attributs des boutons
fichier-données = "est, dansIl est responsable d'avoir les différentes langues que nous avons sur notre site. Pour notre tutoriel, c'est et ainsi de suite. Si vous vous souvenez bien, nos fichiers de traduction s'appellent es.txt et en.txt.
index-données = "1Il a la position du prochain fichier à avoir. 0 est en cours et 1 en, cela signifie que le prochain à apporter est en. Nous pouvons voir cette organisation dans notre attribut de fichier de données, imaginez simplement que le fichier de données est similaire à un vecteur.
data-text = "Anglais, EspañolIl est chargé de visualiser dans quelle langue notre application est actuellement affichée.
La modification que nous avons apportée à notre code HTML consistait à ajouter l'attribut data-lang aux balises que nous allons traduire, avec l'identifiant unique. Vous devez déjà savoir que cet identifiant unique est configuré dans les fichiers en.txt et es.txt.
Par exemple
Salut monde
Mettons notre traducteur à l'épreuve et voyons si ce que nous avons développé couvre vraiment tout ce dont nous avons besoin et combien il est complexe d'ajouter une nouvelle langue.
Ajoutons une nouvelle langue. A ce stade de notre développement, nous devons réaliser que nous n'avons qu'à faire deux choses :
1. Créez notre nouveau fichier de langue.
2. Ajoutez la nouvelle langue dans les attributs data-file et data-text.
Nous créons la langue française pour notre site. Nous créons notre fichier de langue appelé fr.txt dans le répertoire lang.
Contenu Fr.txttitulo-web => Mon site multilingue
bienvenue => Bienvenue sur mon site
bonjour => salut monde
Nous mettons à jour notre bouton de langues, donc dans index.html le libellé est :
AnglaisTestons notre site avec la nouvelle langue :
Parfait! afin que nous puissions ajouter toutes les langues dont nous avons besoin à nos sites Web sans autre complication. Faisons un deuxième test. On se demande quelque chose, une phrase traduite peut-elle être réutilisée sur une étiquette et placée sur une autre pour ne pas avoir à répéter la même traduction même si elle est imprimée à des endroits différents ? La réponse est OUI, faisons l'exemple.
Utilisons le titre du site Web avec l'identifiant unique title-web que nous utilisons actuellement dans notre étiquette, et nous allons le placer dans le pied de page de notre site. C'est comme suit :
Mon site multilingue ©[color = # a9a9a9] Ajouter au code index.html [/ color]
Nous actualisons nos pages et nous pouvons voir que nous avons déjà les trois langues disponibles.
Nous avons déjà la plupart de notre code prêt, nous avons juste besoin d'ajouter quelque chose de très important pour l'avoir toujours sur notre site Web. Savoir de quel pays ils nous rendent visite et ainsi savoir quelle langue montrer au visiteur.
4. Détecteur de pays
Il existe de nombreux services sur Internet qui nous fournissent ces informations, pour notre tutoriel, nous utiliserons ipinfodb qui nous aidera à détecter de quel pays ils nous rendent visite. Il vous suffit de vous inscrire sur ce site et il nous fournira une API KEY, que nous utiliserons accompagnée de l'IP du visiteur.
D'abord nous nous inscrivons sur le site, après cette inscription vous nous enverrez un message à l'email indiqué au moment de l'inscription, dans ce message vous nous demandez d'activer le compte. Lors de son activation, il nous donne la CLÉ API, qui reste en fonctionnement 10 minutes après l'activation de notre compte.
Nous testons notre clé en utilisant le lien suivant http: //api.ipinfodb… .I_API_KEY & ip = IP, remplacez où MI_API_KEY est donné par celui qui vous a été donné et l'IP que vous souhaitez localiser. Dans mon cas, j'ai essayé avec ma propre adresse IP et voici le résultat.
Si nous voyons dans l'image les deux dernières données sont CO; Colombie. Nous pouvons utiliser CO, pour identifier le pays. Puisqu'il s'agit d'un code unique pour chaque pays (ISO 3166-2). Une fois que nous sommes clairs sur ce que nous allons faire, nous utilisons un service de langage serveur, pour le tutoriel j'utiliserai PHP.
[couleur = # a9a9a9] Code Country.php [/ couleur]
Dans l'exemple je mets que si le code est CO (Colombie) ou ES (Espagne) il retourne 0 qui est l'index de la langue espagnole, si le code est FR (France) il retourne 2 qui est l'index de la langue française , et sinon ce n'est ni l'un ni l'autre qui renvoie 1 indiquant la langue anglaise. Dans le tutoriel je laisse par défaut à la langue anglaise tout pays que nous n'avons pas indiqué dans les langues. Maintenant, dans le javascript, nous ajoutons le code suivant.
$ .ajax ({url: 'country.php', success: function (data) {$ (selector) .attr ('data-index', data); startLang ($ (selector));}}); [color = # a9a9a9] Ajouter au code main.js [/ color]
Nous faisons des tests pour voir quels résultats nous obtenons :
Si vous faites des tests locaux (comme moi dans ce cas), $ _SERVER ['REMOTE_ADDR'], il renverra l'ip de notre réseau local et non le public. C'est pourquoi il retourne la langue par défaut anglais, pour le vérifier clairement, nous pouvons télécharger notre tutoriel sur un hébergement et c'est tout !
Avec cela, nous avons terminé notre tutoriel, j'espère qu'il vous a beaucoup plu et que vous pourrez l'appliquer sur vos sites Web, je laisse le code dans un zip ci-dessous :
Télécharger le code
translate.zip 3.2K 1459 Téléchargements
