Accueil > SPIP > Adaptation du squelette de la dist et de SPIP > Intégrer le « Code-plug-in » du traducteur de site Web de Google dans les (...)

Intégrer le « Code-plug-in » du traducteur de site Web de Google dans les squelettes-dist de SPIP 3.1.1

vendredi 29 juillet 2016, par François Daniel Giezendanner

Notez cet article

Intégration du code dans les fichiers article.html, rubrique.html, sommaire.html, breve.html, plan.html, mot.html, recherche.html des squelettes-dist.

Sommaire

Introduction

Vous affichez le bouton de « Traduction Google pour sites Web » (150 x 40 pixels) sur vos pages Web à l’endroit de votre choix. Ce bouton propose une liste déroulante de 104 langues parmi lesquelles vous sélectionnez celle qui vous convient : la page se recharge alors automatiquement dans la langue choisie, l’intégralité du texte étant alors traduit.

Ce plugin de « Traduction Google pour sites Web » est très pratique, une fois une langue de traduction choisie, la traduction reste active pour toutes les pages sur lesquels le bouton de « Traduction Google » est affiché.

De plus, un bandeau complémentaire de « Traduction Google » s’affiche en haut de chacune de ces pages :

Google insiste sur la facilité d’installation de son plugin de « Traduction pour sites Web », mais rappelle que sa traduction automatique n’est évidemment pas parfaite et ne remplace pas une traduction professionnelle.

Code du traducteur de site Web de Google à intégrer

La manière d’obtenir ce code est décrit dans l’article :

Obtention du « Code-plug-in » du traducteur de site Web de Google

Dont voici le résultat :

<!-- Debut du code du traducteur de site Web de Google -->

<div id="google_translate_element"></div><script type="text/javascript">

function googleTranslateElementInit() {

  new google.translate.TranslateElement({pageLanguage: 'fr'}, 'google_translate_element');

}

</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<!-- Fin du code du traducteur de site Web de Google -->

<p></p>

Ce code doit être intégré à chacune des pages que l’on souhaite traduire de manière à s’afficher à l’emplacement souhaité.

1ère méthode : intégrer le code dans le fichier d’en-tête : header.html

Ajouter le code Google à la fin du fichier inclure/header.html

Cette correction est suffisante pour l’ensemble du site SPIP.

Cette première méthode présente tous les avantages, y compris suite au « remaniement » responsive du site lors de l’affichage sur smartphones par exemple, le bouton de traduction restant immédiatement visible.

C’est cette 1ère méthode que nous avons adopté dans le présent site Web.

2ème méthode : intégrer le code dans chaque fichier concerné du squelette

Cela concerne en particulier les fichiers article.html, rubrique.html, sommaire.html, breve.html, plan.html, mot.html, recherche.html des squelettes-dist.

Cette deuxième méthode présente essentiellement deux inconvénients :

lors du « remaniement » responsive du site (affichage sur smartphone par exemple) le bouton de Google-Traduction peut passer plus bas dans l’affichage suivant le point d’insertion du code, et n’être plus immédiatement acessible.
Nécessité de modifier tous les fichiers concernés.

Intégrer le code dans le fichier article.html

Après la ligne 35 : <div id="socialtags"></div>

Avant les lignes :
36 : [(#REM) Inclure le modele des liens de traductions ]
37 : #MODELE{article_traductions}

Intégrer le code dans le fichier sommaire.html

Après la ligne 29 : <div class="aside">

Avant les lignes :
30 : <INCLURE{fond=inclure/navsub} />
31 : #FORMULAIRE_RECHERCHE

Intégrer le code dans le fichier rubrique.html

Après la ligne 105 : <div class="aside">

Avant les lignes :
106 : <INCLURE{fond=inclure/navsub, id_rubrique} />
107 : #FORMULAIRE_RECHERCHE

Intégrer le code dans le fichier breve.html

Après la lignes 49 : <div class="aside">

Avant les lignes :
51 : <INCLURE{fond=inclure/navsub, id_rubrique} />
52 : #FORMULAIRE_RECHERCHE

Intégrer le code dans le fichier plan.html

Après la lignes 35 : <div class="aside">

Avant les lignes :
36 : <INCLURE{fond=inclure/navsub} />
37 : #FORMULAIRE_RECHERCHE

Intégrer le code dans le fichier mot.html

Après la lignes109 : <div class="aside">

Avant les lignes :
111 : <INCLURE{fond=inclure/navsub} />
112 : #FORMULAIRE_RECHERCHE

Intégrer le code dans le fichier recherche.html

Après la lignes119 : <div class="aside">

Avant les lignes :
120 : <INCLURE{fond=inclure/navsub, id_rubrique} />
121 : #FORMULAIRE_RECHERCHE