SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano

246 Plugins, 178 contribs sur SPIP-Zone, 275 visiteurs en ce moment

Accueil du site > Multilinguisme > Navigation multilingue > Création d’un menu langue plat pour SPIP 2.0

Création d’un menu langue plat pour SPIP 2.0

24 juin 2009 – par filnug, kent1 – 18 commentaires

4 votes

Cet article propose un code permettant d’afficher un menu langue. Le menu récupère automatiquement toutes les langues disponibles et les affiche en drapeau sur l’ensemble du site.

Introduction

Cet article propose une solution pour afficher un menu de langues plat pour SPIP 2.0. Cela permet d’afficher sur l’ensemble de son site (page sommaire.html, page rubrique.html, page article.html) un menu affichant toutes les langues disponibles sur le site, sauf celle utilisée sur le moment.
Par exemple, un site a comme langue d’origine "français" et comme langue supplémentaire "English". Lorsque le visiteur se trouve sur le site en version française, il aura la possibilité de cliquer sur un lien "English" lui permettant de visualiser le site en anglais.
Le code proposé a été réalisé par Kent1 sur le canal IRC de SPIP. Un grand merci pour sa contribution !

Contexte

Cette proposition est valable pour un site web basé sur les traductions d’articles (par le biais du menu "langue et traduction de l’article" ) et non pas par secteurs (les rubriques utiliseront la balise <multi>).

Configuration

  • Dans l’espace privé de SPIP, il faut d’abord penser à configurer correctement la gestion des langues (configuration > gestion des langues) :
    • Dans l’onglet "Langue principale du site", choisir la langue principale (dans mon cas le français),
    • Dans l’onglet "Multilinguisme", choisir les langues nécessaires (il peut y en avoir bien plus de 2 !),
    • Toujours dans l’onglet "Multilinguisme", configurer les options comme suit :
      • Activer le menu de langue sur les articles ? Oui
      • Activer le menu de langue sur les rubriques ? Non
      • Gérer les liens de traduction ? Oui
        Comme indiqué dans le "Contexte" (lire ci-dessus), cela permettra de gérer les rubriques avec une balise <multi> et les articles par le menu "langue et traduction de l’article".
  • L’autre étape consiste à télécharger et installer le plugin SPIP-Bonux !
  • Autre plugin nécessaire, Le Couteau Suisse. Lorsque le plugin est installé et activé, veillez à activer l’option "forcer langue" !

Page sommaire.html

Voici le code à ajouter, à l’endroit que vous souhaitez voir apparaître le menu langue, pour votre page sommaire.html.

  1. [(#REM) on boucle sur les langues disponibles dans le public grâce à spip-bonux]
  2.   [(#SET{langues,[(#CONFIG{langues_multilingue}|explode{','}|serialize)]})]
  3.      <BOUCLE_langue_possibles(POUR){tableau #GET{langues}}>
  4.         [(#ENV{lang}|=={#VALEUR}|non)<a href=" [(#URL_ACTION_AUTEUR{'converser',#VALEUR&var_lang=#VALEUR,[(#SELF|parametre_url{lang,'','&'})]})]">[(#VALEUR|traduire_nom_langue)]</a>]
  5.      </BOUCLE_langue_possibles>

D’abord, on récupère la liste des langues disponibles (sauf la langue en cours), et ensuite, on fait un lien vers l’action converser qui pose le cookie de langue et donc change la langue de l’utilisateur. Puis, on créée un lien qui redirige sur la page sommaire en cours.

Pour plus d’informations sur la balise URL_ACTION_AUTEUR

Page rubrique.html

Pour la page rubrique.html, le code est sensiblement différent. En effet, il faut englober le code précédent dans une boucle RUBRIQUES.

  1. <BOUCLE_rub(RUBRIQUES){id_rubrique}>
  2.         [(#REM) on boucle sur les langues disponibles dans le public grâce à spip-bonux]
  3.           [(#SET{langues,[(#CONFIG{langues_multilingue}|explode{','}|serialize)]})]
  4.              
  5.               <BOUCLE_langue_possibles(POUR){tableau #GET{langues}}>
  6.                  [(#ENV{lang}|=={#VALEUR}|non)<a href="[(#URL_ACTION_AUTEUR{'converser',#VALEUR&var_lang=#VALEUR,[(#SELF|parametre_url{lang,'','&'})]})]">[(#VALEUR|traduire_nom_langue)]</a>]
  7.                </BOUCLE_langue_possibles>
  8. </BOUCLE_rub>

Le principe est le même que sur la page sommaire. Sauf que la redirection se fait directement sur la page rubrique en cours.

Page article.html

C’est dans la page article que le code est le plus évolué. Le début est le même, puis on redirige soit vers l’article traduit s’il existe, soit vers l’article en cours.

  1. <BOUCLE_menulangue(ARTICLES){id_article}>
  2. [(#REM) un menu langue plat qui redirige vers la traduction de l'article si elle existe ... sinon sur l'article en cours mais en ayant changé de langue pour l'interface]
  3.         [(#REM) on boucle sur les langues disponibles dans le public grâce à spip-bonux]
  4.           [(#SET{langues,[(#CONFIG{langues_multilingue}|explode{','}|serialize)]})]
  5.             <BOUCLE_langue_possibles(POUR){tableau #GET{langues}}>
  6.               [(#REM) on récupère la traduction "potentielle" de l'article en cours]
  7.               <BOUCLE_article_traduit(ARTICLES){traduction}{lang=#VALEUR}>
  8.                 [(#ENV{lang}|=={#VALEUR}|non)<a href="[(#URL_ACTION_AUTEUR{'converser',#VALEUR&var_lang=#VALEUR,[(#URL_ARTICLE|parametre_url{lang,'','&'})]})]">[(#VALEUR|traduire_nom_langue)]</a>]
  9.              </BOUCLE_article_traduit>
  10.              [(#REM) Si pas de traduction, on change bien la langue mais le lien reste sur la même page]
  11.                [(#ENV{lang}|=={#VALEUR}|non)<a href="[(#URL_ACTION_AUTEUR{'converser',#VALEUR&var_lang=#VALEUR,[(#URL_ARTICLE|parametre_url{lang,'','&'})]})]">[(#VALEUR|traduire_nom_langue)]</a>]
  12.             <//B_article_traduit>
  13.          </BOUCLE_langue_possibles>
  14. </BOUCLE_menulangue>

Tout cela est bien entendu englobé dans une boucle ARTICLES.

P.-S.

Voici un site opérationnel utilisant cette contribution : www.filipponugara.com
Encore un grand merci à Kent1 pour ces merveilleux bouts de code.
Pour plus d’informations sur le multilinguisme dans SPIP

Retour en haut de la page

18 Messages de forum

Voir toute la discussion

Pages 1 | 2

  • Répondre à ce message

    12 novembre 2009 05:00, par soon7

    Oui c’est vrai Kent1 que mon cas est un peu particulier.

    Il s’agit en fait d’un site complètement traduit dans toutes les langues, et donc chaque article a forcément sa traduction dans les autres langues, et le titre de chaque rubriques est un multi.

    Je n’avais pas fait gaffe à cette nuance de cas effectivement, mais en tout cas ça m’a bien sauvé la vie et je me suis dit que ça pouviat servir ^^

  • Répondre à ce message

    12 novembre 2009 04:50, par kent1

    Cela marchera dans un cas optimal ou tu as au moins un article dans la chaque langue ce qui n’est pas obligatoire (cas complexes ou site pas encore traduits dans toutes les langues mais l’interface si ... site utilisant des multi dans les articles uniquement)...

    Donc pas valable dans tous les cas ...

    Dans le cas présent en plus on est sensé tomber sur la traduction de l’article et non pas l’article en cours il me semble par exemple

  • Répondre à ce message

    12 novembre 2009 04:31, par soon7

    Bonjour,

    en cherchant je suis finalement tombé sur une méthode qui fonctionne sans plugin, la solution ayant été donné par Fil :

    ça fonctionne quel que soit le nombre de langues :

    <BOUCLE_langues(ARTICLES){fusion lang}{par lang}>
    [<span lang="#LANG" xml:lang="#LANG" dir="#LANG_DIR"[(#LANG|=={#ENV{lang}}|?{class="on",''})]>
           <a href="[(#URL_ACTION{'converser'}|parametre_url{var_lang,#LANG}|parametre_url{redirect,#SELF})]"
                   rel="alternate" hreflang="(#LANG|unique{langues})" title="[(#LANG|traduire_nom_langue)]"><img src="images/flag_#LANG.gif" height="13" width="21" alt="#LANG" /></a>
    </span>]
    </BOUCLE_langues>

    Pour en savoir plus, rendez vous sur le Wiki : http://www.spip-contrib.net/MenuLangSurClic

  • Répondre à ce message

    14 octobre 2009 18:15, par Cyril MARION

    les "a" sont remplacés par des "e" pour pouvoir passer "nospam"...

  • Répondre à ce message

    14 octobre 2009 18:13, par Cyril MARION

    Bonjour à tou(te)s,

    Je propose une très légère variante, utilisant #ENVurl et qui change seulement le style de la langue en cours, sans la supprimer :

    Et voici le résultat :

    عربي | français | Deutsch | English | Español

    Bonne utilsation,
    Cyril

  • Répondre à ce message

    1er octobre 2009 09:57, par serge

    MERCI Kent 1 et Romain ; )

    Serge

  • Répondre à ce message

    23 septembre 2009 16:07, par Romain

    Merci pour la suggestion.

    Effectivement c’est plus propre. Je n’avais pas réussi à le faire fonctionner donc je n’avais pas insisté vu que j’étais un peu pressé !

    Alors maintenant que ça fonctionne, j’en profite pour transmettre le code complet... avec parenthèses et crochets et le rollover en plus...

    <img src="[(#CHEMIN{images/[(#VALEUR)].gif})]" onMouseOver="this.src='[(#CHEMIN{images/[(#VALEUR)]_f2.gif})]'" onMouseOut="this.src='[(#CHEMIN{images/[(#VALEUR)].gif})]'" alt="[(#VALEUR|traduire_nom_langue)]" border="0" width="20" height="19"/>

  • Répondre à ce message

    23 septembre 2009 15:23, par kent1

    Une solution a été donnée par un autre utilisateur ... Tu ne peux utiliser un logo de rubrique à moins de reboucler sur les rubrique racines qui ont un logo de drapeau et qui ont la langue qui correspond à la balise

    #VALEUR

    mais c’est assez contraignant ...

  • Répondre à ce message

    23 septembre 2009 15:21, par kent1

    Hello

    Tu as fait :

    1. <img src="squelettes/images/[(#VALEUR)].gif" alt="[(#VALEUR|traduire_nom_langue)]" border="0" width="20" height="19"/>

    qui marche sans aucun doute ...

    mais quelque chose comme ceci est peut être plus propre...

    1. <img src="#CHEMIN{images/#VALEUR.gif}" alt="[(#VALEUR|traduire_nom_langue)]" border="0" width="20" height="19"/>

    Si un jour ton squelette devient un plugin squelette ou que tu changes le nom de ton répertoire squelette cela devrait continuer à fonctionner ... avec ta solution non ...

    C’était juste pour info sinon la solution de départ est bonne.

  • Répondre à ce message

    23 septembre 2009 11:19, par Romain

    Bonjour,

    J’ai intégré mes drapeaux de la manière suivante :

    J’ai remplacé [(#VALEUR|traduire_nom_langue)]

    par : <img src="squelettes/images/[(#VALEUR)].gif" alt="[(#VALEUR|traduire_nom_langue)]" border="0" width="20" height="19"/>

    VALEUR correspond aux deux lettres de la langue. Je nomme donc mon image en.gif pour l’anglais par exemple et je la place dans le dossier images du dossier squelettes...

Pages 1 | 2

Répondre à cet article

Retour en haut de la page

Ça discute par ici

  • Formulaire de participation à un événement

    23 janvier – 17 commentaires

    Cet article tente de rassembler des informations au sujet de l’affichage d’un formulaire de participation aux événements gérés par le plugin Agenda développé par Cédric Morin. La version 2 du plugin Agenda permet d’afficher dans l’espace public des (...)

  • Le Squelette Zpip

    11 novembre 2009 – 119 commentaires

    Zpip [1] est un squelette réutilisable, modulaire et disposant d’une galerie de thèmes. Il est issu d’une fusion des projets Zesty et SPIP-Zen. Installer Zpip Pour installer Zpip et jouer avec sans plus attendre, il suffit de suivre le guide (...)

  • Plugin Pages uniques

    11 décembre 2008 – 74 commentaires

    Allez, avouez... il ne vous est jamais arrivé d’avoir besoin d’articles qui ne sont rattachés à aucun rubriquage particulier ? Des articles uniques, n’ayant ni de thème, ni de rapport avec aucun autre ? Ou encore des articles pour lesquels vous avez (...)

  • Le Couteau Suisse

    4 mai 2007 – 835 commentaires

    Ce plugin propose d’introduire facilement de simples fonctionnalités supplémentaires à SPIP et qui s’avèrent rapidement indispensables ! Par exemple : des filtres supplémentaires, des balises pratiques, des facilités typographiques, le contrôle de (...)

  • Squelette Median

    22 juin 2009 – 77 commentaires

    Un squelette généraliste, valide XHTML, et configurable. Sites de démonstration : en es fr