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

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.

[(#REM) on boucle sur les langues disponibles dans le public grâce à spip-bonux]
  [(#SET{langues,[(#CONFIG{langues_multilingue}|explode{','}|serialize)]})]

     <BOUCLE_langue_possibles(POUR){tableau #GET{langues}}>
        [(#ENV{lang}|=={#VALEUR}|non)<a href=" [(#URL_ACTION_AUTEUR{'converser',#VALEUR&var_lang=#VALEUR,[(#SELF|parametre_url{lang,'','&'})]})]">[(#VALEUR|traduire_nom_langue)]</a>]
     </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.

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

<BOUCLE_menulangue(ARTICLES){id_article}>
[(#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]

	[(#REM) on boucle sur les langues disponibles dans le public grâce à spip-bonux]
	  [(#SET{langues,[(#CONFIG{langues_multilingue}|explode{','}|serialize)]})]
	    <BOUCLE_langue_possibles(POUR){tableau #GET{langues}}>
	      [(#REM) on récupère la traduction "potentielle" de l'article en cours]
	      <BOUCLE_article_traduit(ARTICLES){traduction}{lang=#VALEUR}>
	        [(#ENV{lang}|=={#VALEUR}|non)<a href="[(#URL_ACTION_AUTEUR{'converser',#VALEUR&var_lang=#VALEUR,[(#URL_ARTICLE|parametre_url{lang,'','&'})]})]">[(#VALEUR|traduire_nom_langue)]</a>]
	     </BOUCLE_article_traduit>
	     [(#REM) Si pas de traduction, on change bien la langue mais le lien reste sur la même page]
	       [(#ENV{lang}|=={#VALEUR}|non)<a href="[(#URL_ACTION_AUTEUR{'converser',#VALEUR&var_lang=#VALEUR,[(#URL_ARTICLE|parametre_url{lang,'','&'})]})]">[(#VALEUR|traduire_nom_langue)]</a>]
	    <//B_article_traduit>
	 </BOUCLE_langue_possibles>
</BOUCLE_menulangue>

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

Encore un grand merci à Kent1 pour ces merveilleux bouts de code.
Pour plus d’informations sur le multilinguisme dans SPIP

Discussion

12 discussions

  • 1

    Bonjour,

    Grand merci pour cette contribution simple à mettre en oeuvre.

    J’ai un problème sur le lien, quand il n’y a pas d’article traduit, on ne reste pas dans l’article de la langue en cours mais on est dirigé vers la page 404.
    Y a t-il une astuce particulière ?

    Merci d’avance

    • J’ai eu le même souci. Bon, la question date un peu mais ça peut peut-être aider quelqu’un qui passe par là !

      ligne 12, remplacer #URL_ARTICLE par #SELF

          <BOUCLE_menulangue(ARTICLES){id_article}>
          [(#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]
           
                  [(#REM) on boucle sur les langues disponibles dans le public grâce à spip-bonux]
                    [(#SET{langues,[(#CONFIG{langues_multilingue}|explode{','}|serialize)]})]
                      <BOUCLE_langue_possibles(POUR){tableau #GET{langues}}>
                        [(#REM) on récupère la traduction "potentielle" de l'article en cours]
                        <BOUCLE_article_traduit(ARTICLES){traduction}{lang=#VALEUR}>
                          [(#ENV{lang}|=={#VALEUR}|non)<a href="[(#URL_ACTION_AUTEUR{'converser',#VALEUR&var_lang=#VALEUR,[(#URL_ARTICLE|parametre_url{lang,'','&'})]})]">[(#VALEUR|traduire_nom_langue)]</a>]
                       </BOUCLE_article_traduit>
                       [(#REM) Si pas de traduction, on change bien la langue mais le lien reste sur la même page]
                         [(#ENV{lang}|=={#VALEUR}|non)<a href="[(#URL_ACTION_AUTEUR{'converser',#VALEUR&var_lang=#VALEUR,[(#SELF|parametre_url{lang,'','&'})]})]">[(#VALEUR|traduire_nom_langue)]</a>]
      
                      <//B_article_traduit>
                   </BOUCLE_langue_possibles>
          </BOUCLE_menulangue>

    Répondre à ce message

  • Salut

    Quelque peut m’aider à déselectionner une langue dans la partie Langues invisibles du menu dans la configuration du plugin

    Merci

    Répondre à ce message

  • 5

    Hello

    J’obtiens un vilain « converser : Accès interdit » lors du clic sur le bouton de langue.
    Quelqu’un a déjà eu ça ? Merci de vos réponses. +

    • Aïe. Je ne peux malheureusement pas t’aider là-dessus. Je n’ai jamais eu ce type de problème.

      Néanmoins, je tenterais une autre solution. Regarde ces 2 contribs qui pourraient t’aider :
      http://www.spip-contrib.net/Menu-de-langues-sous-forme-de-liens
      http://www.spip-contrib.net/Multilang

      J’espère que ça t’aidera...

    • C’est un code identique : Le fichier menu_lang.html du plugin fait aussi appel au fichier converser. J’ai tenté de paser en chmod 777 et aussi de passer le safe mode à off comme c’est indiqué dans d’autres discutions. Je ne sais pas en quoi cela pouvait jouer. Rien n’y a changé. On tombe toujours sur la même problématique en local. Je vais essayé en distant des fois que...

    • En distant c’est pareil. J’ai essayé sur d’autres serveurs et ça plante de la même façon. Dans une version antérieur de SPIP, avec le même code, je n’ai pas de problème pour accéder à « converser ». Serait-ce lié à la version de SPIP ?

    • Même bug chez moi ;
      j’ai trouvé la solution sur une mailing list ;
      je partage :

      J’ai eu exactement le même changement de comportement + bug associé, mais en 2.1.2, alors que tout allait bien en 2.1.1.
      Après avoir constaté que personne ne semblait avoir le même problème, et passé des plombes à chercher en vain d’où ça pouvait venir, j’ai fini par contourner le problème en ajoutant un « &arg= » dans les URLs générées.
      En termes de codes, il suffit de rajouter :

      |parametre_url{arg,''} juste après l'accolade fermante de #URL_AUTEUR{...}. --

      merci. davux

    • Merci,

      j’avais constaté ce problème quand j’utilisai bandeau et j’avais simplement désinstallé bandeau, mais maintenant sous spip3 j’étais bien forcer d’attaquer le problème.

      donc le lien complet qui marche également sous spip3 est :

      [(#URL
      _ACTION_AUTEUR{'converser',#VALEUR&var_lang=#VALEUR,[(#SELF|parametre_url{lang,'','&'})]}|parametre_url{arg,''})]

    Répondre à ce message

  • bonjour, j’aimerais savoir s’il y a quelque chose à faire pour que cela marche sous 1and1 ?

    en local, aucun problème. sur le distant, j’ai testé la boucle, et elle fonctionne. (donc spip-bonux, ok)

    quelqu’un a une idée ? merci d’avance :)

    Répondre à ce message

  • 2

    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 :

    <div class="langues">
    [(#SET{langues,[(#CONFIG{langues_multilingue}|explode{','}|serialize)]})]
    <BOUCLE_langues(POUR){tableau #GET{langues}}{' | '}>
    <e href="#ENV{url}&amp;var_lang=#VALEUR" class="[(#ENV{lang}|=={#VALEUR}|?{'on','off'})]">[(#VALEUR|traduire_nom_langue)]</e>
    </BOUCLE_langues>
    </div>

    Et voici le résultat :

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

    Bonne utilsation,
    Cyril

    • les « a » sont remplacés par des « e » pour pouvoir passer « nospam »...

    • Attention ta version ne changera pas la langue dans le cookie de SPIP et donc posera forcément problème à un endroit où un autre

    Répondre à ce message

  • 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

  • 1

    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

    • 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

  • MERCI Kent 1 et Romain ; )

    Serge

    Répondre à ce message

  • 4

    Bonjour

    Merci pour la contrib !

    Est-il possible d’insérer un logo pour les langues affichées ? (ce serait pour mettre un drapeau)

    Je ne trouve pas comment insérer un #LOGO_RUBRIQUE ...

    Merci pour une piste,

    Serge

    • 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...

    • Hello

      Tu as fait :

      <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...

      <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.

    • 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 ...

    • 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

  • 1

    erreur code pour le sommaire

    a href="

    au lieu de

    a href=

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom