En visitant ce site, vous acceptez l'utilisation de cookies afin de vous proposer les meilleurs services possibles.

Passer son site FR en multilingue

Passer son site Joomla et sa boutique Virtuemart en multilingue.

Dans ce tutoriel, nous allons faire un site Français - Anglais, mais nous pourrions ajouter des langues supplémentaires facilement "voir à la fin de ce tutoriel".

En tout premier, nous allons publier les plugins pour la gestion des langues de Joomla!.

Dans extensions > plug-ins avec la recherche de cette page, rechercher "langue", vous aurez deux résultats :

Système - Filtre de langue
et
Système - Code langue

  • publiez les deux plug-ins (ils doivent être cochés vert).

0001 recherche langue

  • Option : ouvrez le plug-in "Système - Code langue" puis ouvrez l'onglet "Code langue".
    sur la ligne fr-FR renseignez fr
    sur la ligne en-GB renseignez en
    puis "enregistrer & fermer"

0002 code langue

Pour d'autres langue voir cette page :
http://www.lingoes.net/en/translator/langcode.htm

Maintenant, nous allons modifier le menu principal et ajouter des menus pour nos langues.

Ouvrez menus > gérer

  • cochez sur "Menu principal" puis cliquez sur "modifier"
  • changez le titre "Menu principal" en "Menu principal ALL"
  • Puis "enregistrer & fermer"

Ce menu sera la base du multilingue avec un seul lien la page d'accueil du site "par défaut".
Si votre site à déjà un grand nombre de liens, vous pourrez les déplacer dans le menu français plus tard ;)

0003 menuall

A présent, nous allons ajouter un menu pour le français

Ouvrez menus > gérer puis cliquez sur "nouveau"

  • Choisissez un titre "menu-FR"
  • Type de menu "menu-fr"
  • Description "menu-fr"
  • Puis "enregistrer & fermer"

Vous apercevez un bouton bleu sur la droite de menu-FR avec ce texte "Assignez un module à ce menu" cliquez dessus !

003b bouton bleu...ça ouvre une fenêtre modale (image ci-dessous) à remplir comme suit :

  • Titre "menu-fr"
  • Position "menu" ou celle de votre template habituel (vérifiez la position de menu "Menu principal ALL").
    Pour ma part, je le publie en position "offcanvas" avec le template helix3 comme ça c'est prêt pour les mobiles et tablettes
  • Montrer le titre cochez "masquer"
  • Langue, choisissez "Français (FR)"
  • Puis cliquez sur "enregistrer & fermer"

0004 module menufr

 

Cliquez une nouvelle fois sur "nouveau"

  • Choisissez un titre "menu-EN"
  • Type de menu "menu-en"
  • Description "menu-en"
  • Puis "enregistrer & fermer"

Comme pour menu-fr, cliquez sur "Assignez un module à ce menu". (image ci-dessous)

  • Titre "menu-en"
  • Position "menu" ou celle de votre template habituel
  • Montrer le titre cochez "masquer"
  • Langue, choisissez "English (UK)" 
  • Puis cliquez sur "enregistrer & fermer"

0005 module menuen

 

Désormais vérifions le paramétrage SEO du site : (image ci-dessous).

  • Cliquez sur Système > Configuration puis activez :
  • Réécriture d'URL en clair (SEF)
  • (option préférable) Réécriture au 'vol' des URL
  • (option préférable) Ajouter un suffixe aux URL

0006 reglages seo

 

Puis, nous allons ajouter une catégorie pour chaque langue et une page d'accueil dans chacune des langues à chacun de nos menus.

  • Dans le menu du haut de joomla, cliquez sur Contenu > Catégories > bouton "Nouveau"
  • Dans la case titre renseignez : fr
  • Dans la case langue choisissez : "Français (FR)"
  • Puis cliquez sur "enregistrer & fermer"
    (un drapeau francais est affiché sur la droite du nom de votre catégorie "fr").
  • Cliquez encore une fois sur le bouton "Nouveau"
  • Dans la case titre renseignez : en
  • Dans la case langue choisissez : "English (UK)"
  • Puis cliquez sur "enregistrer & fermer"
    (un drapeau anglais est affiché sur la droite du nom de votre catégorie "en").

0007 categories fr en

 

Vous pouvez créer des sous catégories dans vos catégories fr et en (Il faudra toujours créer leur équivalent dans les deux langues).  exemples : "nouvelles" et "news" etc selon ce que vous souhaiter classer....

C'est prêt, vous pouvez maintenant créer les pages d'accueil FR et EN de votre site...

Pour ma page FR je vais utiliser la page par défaut dont je vais changer la langue "tous" par "Français (FR)" puis l'ajouter dans la catégorie "fr"  ...je la publie en vedette pour la suite ! (page en données blog).

Puis je vais ajouter une copie de cette page avec la fonction "enregistrer une copie" puis je vais modifier le titre, l'alias puis modifier la catégorie pour choisir "en" pour poursuivre je change le contenu et enfin la langue en choisissant "English (UK)" avant d'enregistrer & fermer.

Maintenant, nous sommes prêts pour ajouter un lien dans nos menus "menu-FR" et "menu-EN"

En premier, rendez vous dans Menu > Menu principal ALL

  • Ouvrez le lien "Accueil" et renommez-le en "accueil all" avec l'alias "accueil-all" et vérifiez que la publication en vedette est active puis cliquez sur "enregistrer & fermer"
  • Dans Menus > menu-FR > Nouveau
  • Ajoutez un Titre de menu : accueil
  • Dans "Type de lien de menu" choisissez "articles" > "Blog des articles en vedettes"
    (mais j'aurais pu choisir article et sélectionner mon article fr précédemment créer).
  • je sélectionne ma langue : "Français (FR)"
  • Dans l'onglet affichage je paramètre ma page comme je souhaite puis cliquez sur "enregistrer & fermer"
  • COCHEZ LE LIEN "accueil" PAR DÉFAUT !!

0008 lien page accueil blog fr

 

Pour aller plus vite, nous allons dupliquer le lien dans le menu-EN :)

  • Sélectionnez le lien accueil du menu-Fr, puis cliquez sur le bouton "traitement"
  • Dans la fenêtre modale choisir une langue prenez "English (UK)"
  • Dans "Sélectionnez le menu ou son parent pour déplacer/copier" choisissez : Menu-EN ajouter à ce menu puis "copier" et enfin cliquez sur traitement
  • Maintenant allez dans menu-EN cliquez sur le lien accueil(2)
  • Remplacez le Titre de menu par "Home" et supprimez le contenu de l'alias puis cliquez sur "enregistrer & fermer"
  • COCHEZ LE LIEN "home" PAR DÉFAUT !!

0009 lien page accueil blog en

 

Dès à présent, passons à l'association des deux liens "accueil" et "home".

Une fois associés, le système permet de rester sur la page en cours dans la langue sélectionnée lors d'un clic sur le drapeau du pays choisi. C'est important de réaliser cette opération sur l'ensemble des liens de vos menu.

  • Ouvrez "menu-fr" puis cliquez le lien "accueil" puis ouvrez "l'onglet association"
  • sélectionnez le lien "home (en-GB)" puis cliquez sur "enregistrer & fermer"

0010 association accueil fr en

 

Maintenant, nous allons ajouter le module de changement de langue sur le site.

Ici, nous avons deux choix :

  1. Utilisez le module standard fourni avec Joomla!
    (vous devrez associer chaque page pour passer d'une langue vers l'autre à l'aide du module de langue).
  2. Ou ajouter le module commercial de Studio42 qui va faire vos associations automatique de vos produits Virtuemart.
    "Ce Module associe directement les produits, catégories et fournisseurs pour toutes les langues configurer dans votre boutique, tout le reste est automatique!" l'auteur ajoute également que "ce module améliore le référencement".

Voyons les deux procédures en détails en commençant par le module par défaut de Joomla :

  • Extensions > Modules > Nouveau ...puis cliquez sur "Changement de langue"
  • donnez-lui un titre : "module_langue"
  • une position, moi j'ajoute "module_langue" ou je choisis "top1" avec helix3 ou "left" sur un autre template de base.
  • Montrer le titre mettre : "Masquer"
    Dans langue assurez vous d'avoir mis "toutes" !! c'est important que ce soit visible sur toutes les langues.
    Sur l'onglet assignation des menus, veillez à mettre "sur toutes les pages"
  • Puis cliquez sur "enregistrer & fermer"

0011 module changement langue

 

Voyons à présent la seconde méthode : avec l'installation du module "mod_vmlang" de Studio42 disponible à shop.st42.fr :

Installons le module  : Extensions > Gérer > installation > parcourir puis "Transférer et installer" (image ci-dessous).

0016a installation module

Pour la suite, nous allons activer le module.

  • cliquez sur "Changement de langue Boutique"

0016b changement langue s42

L'interface du module s'ouvre : (en image ci-dessous)

  • Montrer le titre = Masquer
  • position = moi j'ajoute "module_langue" ou je choisis "top1" avec helix3 ou "left" sur un autre template de base.
  • statut = Publié
  • Langue = Toutes

0017 le module

Vous pouvez laissez le reste du module par défaut ou choisir de personnaliser, mais les options par défaut sont bonnes (voir image ci-dessous).

0019 autres options

  • Dans l'onglet "Assignation des menus" choisissez "Sur toutes les pages"
    0018 sur toutes les pages
  • Cliquez sur "Enregister et fermer"

Reste à modifier l'ordre de votre module si vous en avez plusieurs dans la même position de template :

0020 ordre et position du module

 

Ajoutons les styles de templates à nos langues !
C'est un point important pour personnaliser les apparences et dédier des menus aux deux habillages :)

  • Cliquez sur Extensions > templates ou Extensions > templates > Styles
  • Sélectionnez votre template puis cliquez sur dupliquer

Maintenant ouvrez le style nouvellement créé, "il doit avoir un (2)".

  • Dans la case "Défaut" sélectionnez : "Français (FR)"
    0012 template choix langue
  • Puis si disponible (comme dans helix3) sélectionnez le "menu-FR"
    0013 choix menu
    évidement vous pouvez renommer le style "Nom du style" en ajoutant FR ce qui donne par exemple "Beez3-FR" ou protostar-FR ou shaper_helix3 FR

répétez la même opération pour créer un style EN

0014 styles templates

Maintenant si tout va bien, vous devez pouvoir accéder aux deux versions "en Front" avec un simple clic sur les drapeaux.

Nous allons installer Virtuemart avec le tutoriel de Valérie disponible ici :
http://www.virtuemart.fr/documentation/23-installation/93-installation-du-composant-modules-et-plugins

Ensuite, il vous suffit d'ajouter un lien vers votre boutique dans menu-FR et dans menu-EN et votre boutique cause deux langues :)
N'oubliez pas le faire l'association entre les deux liens "Boutique" et "Shop".

0015 lien boutique

 

Pour ajouter des langues dans Joomla
Extensions > langues > installées > Installation de langues

Pour ajouter des langues dans Virtuemart, voir le tutoriel de Valérie :
http://www.virtuemart.fr/documentation/31-multilingue/73-installation-des-paquets-de-langues

 

A propos de l'auteur
Denis BOUTEAU
Auteur: Denis BOUTEAU
Auteur

Autodidacte, Denis BOUTEAU est un ancien disc-jockey passionné d'internet, webmaster depuis 1999.
En 2002, il lance la Communauté Web Commequiéroise qu'il entretient bénévolement :
Un portail municipal et de multiples sites associatifs dans mon village : Commequiers en Vendée.

En 2009, il lance le85.com une petite webradio pour mêler ses deux passions "musique et internet".
Son pseudo : doc_denis, sa signature : Le partage du savoir fait avancer plus vite !


Le nom Joomla!® et son logo sont utilisé sous licence limitée d'Open Source Matters, le propriétaire mondial de la marque de commerce. Le site VirtueMart.fr n'est pas affilié ni soutenu par Open Source Matters ou le projet Joomla!®.
VirtueMart est une marque déposée par iStraxx UG (haftungsbeschränkt) en Allemagne.