Site Multilingue Joomla!

Joomla 3 propose nativement un système multilingue très complet. Dans ce chapitre, nous allons créer un site avec 4 langues, le français (qui sera la langue par défaut), l’anglais, l’allemand et l’arabe (qui se lit de droite à gauche).

Le site utilisé pour cet exemple est une installation de Joomla! neuve ne comportant aucune donnée d’exemple.

 

Installer les packs de langue sur votre site

Pour commencer, nous allons devoir installer les packs de langue Joomla! correspondant aux langues que comportera le site. Depuis la version 2.5.7 de Joomla!, l’installation des packs de langue a été simplifiée et se fait directement depuis l’administration.

Pour cela, connectez-vous à l’administration du site, et rendez-vous dans Extensions → Gestion des langues et cliquez sur le bouton Installation de langues. 

La page suivante s’affiche :

Installation de langues

Vous n’avez qu’à cocher les langues que vous souhaitez (dans notre exemple le français, l’anglais, l’allemand et l’arabe) et à cliquer sur le bouton Installer.

 En retournant dans  Extensions → Gestion des langues vous devriez avoir la page suivante avec les 4 langues installées et le français comme langue par défaut (si le français n’est pas la langue par défaut, il suffit de cliquer sur l’étoile jaune).

Gestionnaire de langues

Nous allons maintenant créer les langues de contenu. Pour cela, cliquez sur l’onglet contenu du menu de gauche. Actuellement, seule une ou deux langues est/sont disponible(s). Pour créer une nouvelle langue de contenu, cliquez sur le bouton nouveau.

 La page suivante s’affiche. Remplissez les paramètres à l’aide du tableau ci-dessous afin de créer une langue de contenu pour chaque langue installée sur le site.

Nouvelle langue de contenu

 

	Français	Anglais	Allemand	Arabe
Titre	Français	English (UK)	German	Arabic Unitag
Titre natif	Français	English (UK)	Deutsch	Arabic Unitag
Code de langue	fr	en	de	ar
Préfixe d’image	fr	en	de	ar
Tag de Langue	fr-FR	en-GB	de-DE	ar-AA

 

Menus

Bien, toutes nos langues de contenu sont créées, nous allons maintenant créer les menus et éléments de menu associés à chaque langue.

 

Création des menus

Rendez-vous dans Menu → Gestion des menus. Actuellement, vous n’avez qu’un seul menu (Main Menu) qui ne contient qu’un seul élément de menu (Accueil).
Cochez ce menu, et cliquez sur le bouton Modifier.

 Afin d’éviter les confusions, renommez ce menu “Menu Principal – Tout” et donnez lui le type “mainmenutout”. Puis enregistrez et fermez.

Cliquez ensuite sur le bouton nouveau.

 La page suivante s’affiche. Remplissez les paramètres à l’aide du tableau ci-dessous afin de créer un nouveau menu pour chaque langue installée sur le site.

Nouveau menu

 

	Français	Anglais	Allemand	Arabe
Titre	Menu Principal	Main Menu	Hauptmenü	القائمة الرئيسية
Type du menu	menuprincipal	mainmenu	hauptmenu	arabicunitag
Description	Menu principal de la partie française du site	Menu principal de la partie anglaise du site	Menu principal de la partie allemande du site	Menu principal de la partie arabe du site

 

Nous avons désormais nos quatre menus, un par langue plus le menu principal du site :

Gestionnaire de Menus

 

Création des éléments de menu

Créons maintenant un élément de menu par défaut dans chaque menu. L’élément de menu par défaut du “Menu Principal – Tout” est déjà créé, il s’appelle “Accueil”. Ce lien de menu est attribué à toutes les langues, Joomla! en a besoin mais il ne sera pas affiché sur le site.

Cliquez sur menu principal puis sur le bouton Nouveau, la page suivante s’affiche :

Nouvel élément de menu

1 – Choisissez Articles → Blog des articles en vedette
2 – Accueil
3 – Menu Principal
4 – Oui
5 – Français
Une fois que tout est rempli, cliquez sur le bouton Enregistrer & Nouveau

Créez maintenant l’élément de menu pour la langue anglaise :

1 – Choisissez Articles →Blog des articles en vedette
2 – Home
3 – Main Menu
4 – Oui
5 – English

Cliquez sur le bouton Enregistrer & Nouveau et créez l’élément de menu pour la langue allemande :

1 – Choisissez Articles →Blog des articles en vedette
2 – Home
3 – Hauptmenü
4 – Oui
5 – German

Cliquez sur le bouton Enregistrer & Nouveau et créez l’élément de menu pour la langue arabe :

1 – Choisissez Articles →Blog des articles en vedette
2 – منزل
3 – Arabic Unitag
4 – Oui
5 – القائمة الرئيسية

Chaque langue possède désormais son élément de menu par défaut. En cliquant sur le menu Menu de votre administration, vous devriez avoir l’image suivante :

Les 4 élément de menu par défaut

 

Association des éléments de menu

Maintenant que nos éléments de menu sont créés, nous allons les associer entre eux. Pour cela, rendez-vous dans Extensions → Gestion des Plugins et éditez le Plugin Système – Filtre de langue.

 

Activez simplement le plugin, puis réglez les deux paramètres “Changement de langue automatique” et “Associations d’éléments” sur oui.

 

Cliquez ensuite sur le bouton Enregistrer & Fermer
Retournez ensuite dans Menu → Menu Principal et éditez l’élément de menu “Accueil”.
Un nouvel onglet est affiché dans le menu supérieur “Associations”. Cliquez sur cet élément de menu et appliquez les réglages suivants :

Association d’éléments de menu

Cliquez ensuite sur le bouton Enregistrer & Fermer.

Désormais, un petit chainon s’affiche sur la ligne de cet élément indiquant qu’il est associé avec les trois liens de menu concernés.

{loadposition pub-formation-video}

Modules

Création des modules affichant les menus

Nous allons maintenant créer les modules qui vont afficher ces menus sur le site. Pour cela, rendez-vous dans Extensions → Gestion des modules.

Logiquement (si vous êtes parti d’un Joomla! vierge) vous ne devez avoir que 3 modules. Editez le module “Menu Principal”, renommez-le en “Menu Principal – Tout” puis désactivez-le.

Gestionnaire de modules 

Cliquez sur le bouton nouveau et choisissez “Menu”, la page suivante s’affiche :

 

Nous allons créer un module pour chaque menu :

Le module français :

• 1 – Titre : Menu Principal
• 2 – Position : Droite [position-7]
• 3 – Langue : Français
• 4 – Menu à afficher : Menu Principal

Cliquez sur le bouton Enregistrer & Nouveau

Le module anglais :

• 1 – Titre : Main Menu
• 2 – Position : Droite [position-7]
• 3 – Langue : English
• 4 – Menu à afficher : Main Menu

Cliquez sur le bouton Enregistrer & Nouveau

Le module allemand :

• 1 – Titre : Hauptmenü
• 2 – Position : Droite [position-7]
• 3 – Langue : German
• 4 – Menu à afficher : Hauptmenü

Cliquez sur le bouton Enregistrer & Nouveau

Le module arabe :

• 1 – Titre : القائمة الرئيسية
• 2 – Position : Droite [position-7]
• 3 – Langue : Arabic Unitag
• 4 – Menu à afficher : القائمة الرئيسية

Cliquez sur le bouton Enregistrer & Fermer

Tous les modules Menu sont créés.

 

Création du module Changement de langue

Créez un nouveau module de type “Changement de langue”. Donnez lui un nom, la position “Droite [position-7]” et réglez le paramètre langue sur “Toutes”.

Si vous accédez à la page d’accueil, vous avez la page suivante :

Page d’accueil

Vous pouvez cliquer sur les drapeaux, les modules de menu ainsi que les modules de connexion se traduisent en fonction de la langue. L’Arabe étant une langue se lisant de droite à gauche, le template change la disposition des modules et contenus.

Note : Le module “Changement de langue”, lui, ne se traduit pas car nous n’en avons créé qu’un et qu’il est attribué à toutes les langues. Si nous souhaitons que ce module se traduise, il suffit d’en créer un par langue comme nous l’avons fait pour les modules qui affichent les menus.

Note : L’ordre des drapeaux, affichés dans le menu changement de langue, est déterminé par l’ordre des langues de contenu. Si vous souhaitez modifier cet ordre, il suffit d’aller dans Extensions → Gestion des langues → Contenu et de modifier l’ordre.

 

Création du contenu

Association des éléments

Depuis la version 3.0.2 de Joomla!, une nouvelle fonctionnalité très très pratique a vu le jour. De la même façon que nous avons associé les éléments de menu entre eux, nous allons pouvoir associer les catégories entre elles, et plus tard les articles.
Si vous n’avez pas connu Joomla! avant cette version 3.0.2 vous devez savoir qu’avant il n’était possible d’associer que les éléments de menu. Pour un petit site (une dizaine de pages) cela ne posait pas de problème, il suffisait de créer un élément de menu par page, mais pour de plus gros sites cela devenait ingérable.
Merci donc à Joomla! et un grand merci à Benjamin Trenkle qui a proposé le code.

 

Création des catégories

Maintenant que l’ensemble de la navigation est réglé, nous allons créer le contenu. Pour cela rendez vous dans Contenu → Gestion des catégories.
Cliquez sur le bouton nouveau, et créez une catégorie par langue et réglez la langue pour chaque catégorie (dans les paramètres de droite) :

Catégories	Langues
Français	Français
English	English
German	German
Arabic	Arabic Unitag

 Une fois que vos quatre catégories sont créées éditez-en une (par exemple la catégorie Français) et associez-la avec les autres :

 

Associations de catégories

 Cliquez ensuite sur Enregistrer & Fermer. Dans le gestionnaire de catégories, vous retrouvez le petit chainon indiquant que les catégories sont associées :

Gestionnaire de catégories

 

Création des articles

Nos catégories créées, nous allons pouvoir créer les articles. Pour cela, rendez-vous dans Contenu → Gestion des articles, et cliquez sur le bouton Nouveau.

Pour vérifier que toutes les associations fonctionnent, nous allons créer deux articles par langue. Un article sera réglé comme “En vedette” et l’autre non. Pour cela, je vais prendre la page Joomla de wikipédia (http://fr.wikipedia.org/wiki/Joomla!) qui se décline dans les quatre langues. Vous êtes bien sûr libre de choisir votre contenu.

Pour les articles français, cela donnera :

Article	En vedette	Catégorie	Langue
Joomla!	Oui	Français	Français
Histoire de Joomla!	Non	Français	Français

Faites de même pour les trois autres langues.

Une fois tous les articles créés, éditez les deux articles français et associez-les aux articles correspondant des autres langues.
Vous devriez donc avoir 8 articles (2 par langues) et avoir le petit chainon d’association :

Gestionnaire d’articles

 En vous rendant sur le frontend de votre site vous devriez avoir cette page :

Page d’accueil

Cette page est la page d’accueil de type “Blog des articles en vedettes”.
Si vous cliquez sur les drapeaux, vous avez la page correspondante, qui est affichée grâce à l’association des éléments de menu.
Si vous cliquez sur la “catégorie Français”, vous obtenez une page affichant tous les articles de cette catégorie. En cliquant sur les drapeaux, vous obtenez la catégorie correspondante grâce à l’association des catégories.
Si vous cliquez sur l’article “Histoire de Joomla!” (qui est accessible depuis la page catégorie) vous obtenez une page affichant l’article seul. En cliquant sur les drapeaux, vous obtenez l’article correspondant grâce à l’association des articles.

Note : Je connais le Français et l’Anglais, mais je n’ai aucune notion d’Allemand ou d’Arabe. Si vous maitrisez ces langues et que vous remarquez des erreurs, n’hésitez pas à m’en faire part dans les commentaires d’articles. Merci.

{loadposition easy-share}

Site Multilingue Joomla! Joomla 3 propose nativement un système multilingue très complet. Dans ce chapitre, nous allons créer un site avec 4 langues, le français (qui sera la langue par défaut), l’anglais, l’allemand et l’arabe (qui se lit de droite à gauche). Le site utilisé pour cet exemple est une installation de Joomla! neuve ne comportant aucune donnée d’exemple. 
Installer les packs de langue sur votre site
Pour commencer, nous allons devoir installer les packs de langue Joomla! correspondant aux langues que comportera le site. Depuis la version 2.5.7 de Joomla!, l’installation des packs de langue a été simplifiée et se fait directement depuis l’administration.
Pour cela, connectez-vous à l’administration du site, et rendez-vous dans Extensions > Gestion des langues et cliquez sur le bouton Installation de langues. 

La page suivante s’affiche :

Installation de langues
Vous n’avez qu’à cocher les langues que vous souhaitez (dans notre exemple le français, l’anglais, l’allemand et l’arabe) et à cliquer sur le bouton Installer.

En retournant dans  Extensions > Gestion des langues vous devriez avoir la page suivante avec les 4 langues installées et le français comme langue par défaut (si le français n’est pas la langue par défaut, il suffit de cliquer sur l’étoile jaune).

Gestionnaire de langues
Nous allons maintenant créer les langues de contenu. Pour cela, cliquez sur l’onglet contenu du menu de gauche. Actuellement, seule une ou deux langues est/sont disponible(s). Pour créer une nouvelle langue de contenu, cliquez sur le bouton nouveau.

 La page suivante s’affiche. Remplissez les paramètres à l’aide du tableau ci-dessous afin de créer une langue de contenu pour chaque langue installée sur le site.

Nouvelle langue de contenu
 

 
Français
Anglais
Allemand
Arabe

Titre
Français 
English (UK)
German
Arabic Unitag

Titre natif
Français
English (UK)
Deutsch
Arabic Unitag

Code de langue
fr
en
de
ar

Préfixe d’image
fr
en
de
ar

Tag de Langue
fr-FR
en-GB
de-DE
ar-AA

 
Menus
Bien, toutes nos langues de contenu sont créées, nous allons maintenant créer les menus et éléments de menu associés à chaque langue.
 
Création des menus
Rendez-vous dans Menu > Gestion des menus. Actuellement, vous n’avez qu’un seul menu (Main Menu) qui ne contient qu’un seul élément de menu (Accueil).Cochez ce menu, et cliquez sur le bouton Modifier.

 Afin d’éviter les confusions, renommez ce menu “Menu Principal – Tout” et donnez lui le type “mainmenutout”. Puis enregistrez et fermez.
Cliquez ensuite sur le bouton nouveau.

 La page suivante s’affiche. Remplissez les paramètres à l’aide du tableau ci-dessous afin de créer un nouveau menu pour chaque langue installée sur le site.

Nouveau menu
 

 
Français
Anglais
Allemand
Arabe

Titre
Menu Principal
Main Menu
Hauptmenü
القائمة الرئيسية

Type du menu
menuprincipal
mainmenu
hauptmenu
arabicunitag

Description
Menu principal de la partie française du site
Menu principal de la partie anglaise du site
Menu principal de la partie allemande du site
Menu principal de la partie arabe du site

 
Nous avons désormais nos quatre menus, un par langue plus le menu principal du site :

Gestionnaire de Menus
 
Création des éléments de menu
Créons maintenant un élément de menu par défaut dans chaque menu. L’élément de menu par défaut du “Menu Principal – Tout” est déjà créé, il s’appelle “Accueil”. Ce lien de menu est attribué à toutes les langues, Joomla! en a besoin mais il ne sera pas affiché sur le site.
Cliquez sur menu principal puis sur le bouton Nouveau, la page suivante s’affiche :

Nouvel élément de menu
1 – Choisissez Articles > Blog des articles en vedette 2 – Accueil 3 – Menu Principal 4 – Oui 5 – Français Une fois que tout est rempli, cliquez sur le bouton Enregistrer & Nouveau
Créez maintenant l’élément de menu pour la langue anglaise :
1 – Choisissez Articles > Blog des articles en vedette 2 – Home 3 – Main Menu 4 – Oui 5 – English
Cliquez sur le bouton Enregistrer & Nouveau et créez l’élément de menu pour la langue allemande :
1 – Choisissez Articles > Blog des articles en vedette 2 – Home 3 – Hauptmenü 4 – Oui 5 – German
Cliquez sur le bouton Enregistrer & Nouveau et créez l’élément de menu pour la langue arabe :
1 – Choisissez Articles > Blog des articles en vedette 2 – منزل 3 – Arabic Unitag 4 – Oui 5 – القائمة الرئيسية
Chaque langue possède désormais son élément de menu par défaut. En cliquant sur le menu Menu de votre administration, vous devriez avoir l’image suivante :

Les 4 élément de menu par défaut
 
Association des éléments de menu
Maintenant que nos éléments de menu sont créés, nous allons les associer entre eux. Pour cela, rendez-vous dans Extensions > Gestion des Plugins et éditez le Plugin Système – Filtre de langue.
 

Activez simplement le plugin, puis réglez les deux paramètres “Changement de langue automatique” et “Associations d’éléments” sur oui.

 
Cliquez ensuite sur le bouton Enregistrer & FermerRetournez ensuite dans Menu > Menu Principal et éditez l’élément de menu “Accueil”.Un nouvel onglet est affiché dans le menu supérieur “Associations”. Cliquez sur cet élément de menu et appliquez les réglages suivants :

Association d’éléments de menu
Cliquez ensuite sur le bouton Enregistrer & Fermer.
Désormais, un petit chainon s’affiche sur la ligne de cet élément indiquant qu’il est associé avec les trois liens de menu concernés. Modules
Création des modules affichant les menus
Nous allons maintenant créer les modules qui vont afficher ces menus sur le site. Pour cela, rendez-vous dans Extensions > Gestion des modules .
Logiquement (si vous êtes parti d’un Joomla! vierge) vous ne devez avoir que 3 modules. Editez le module “Menu Principal”, renommez-le en “Menu Principal – Tout” puis désactivez-le.

Gestionnaire de modules 
Cliquez sur le bouton nouveau et choisissez “Menu”, la page suivante s’affiche :

Nous allons créer un module pour chaque menu :
Le module français :

1 – Titre : Menu Principal
2 – Position : Droite [position-7]
3 – Langue : Français
4 – Menu à afficher : Menu Principal

Cliquez sur le bouton Enregistrer & Nouveau
Le module anglais :

1 – Titre : Main Menu
2 – Position : Droite [position-7]
3 – Langue : English
4 – Menu à afficher : Main Menu

Cliquez sur le bouton Enregistrer & Nouveau
Le module allemand :

1 – Titre : Hauptmenü
2 – Position : Droite [position-7]
3 – Langue : German
4 – Menu à afficher : Hauptmenü

Cliquez sur le bouton Enregistrer & Nouveau
Le module arabe :

1 – Titre : القائمة الرئيسية
2 – Position : Droite [position-7]
3 – Langue : Arabic Unitag
4 – Menu à afficher : القائمة الرئيسية

Cliquez sur le bouton Enregistrer & Fermer
Tous les modules Menu sont créés.
 
Création du module Changement de langue
Créez un nouveau module de type “Changement de langue”. Donnez lui un nom, la position “Droite [position-7]” et réglez le paramètre langue sur “Toutes”.
Si vous accédez à la page d’accueil, vous avez la page suivante :

Page d’accueil
Vous pouvez cliquer sur les drapeaux, les modules de menu ainsi que les modules de connexion se traduisent en fonction de la langue. L’Arabe étant une langue se lisant de droite à gauche, le template change la disposition des modules et contenus.
Note : Le module “Changement de langue”, lui, ne se traduit pas car nous n’en avons créé qu’un et qu’il est attribué à toutes les langues. Si nous souhaitons que ce module se traduise, il suffit d’en créer un par langue comme nous l’avons fait pour les modules qui affichent les menus.
Note : L’ordre des drapeaux, affichés dans le menu changement de langue, est déterminé par l’ordre des langues de contenu. Si vous souhaitez modifier cet ordre, il suffit d’aller dans Extensions > Gestion des langues > Contenu et de modifier l’ordre. Création du contenu
Association des éléments
Depuis la version 3.0.2 de Joomla!, une nouvelle fonctionnalité très très pratique a vu le jour. De la même façon que nous avons associé les éléments de menu entre eux, nous allons pouvoir associer les catégories entre elles, et plus tard les articles.
Si vous n’avez pas connu Joomla! avant cette version 3.0.2 vous devez savoir qu’avant il n’était possible d’associer que les éléments de menu. Pour un petit site (une dizaine de pages) cela ne posait pas de problème, il suffisait de créer un élément de menu par page, mais pour de plus gros sites cela devenait ingérable.Merci donc à Joomla! et un grand merci à Benjamin Trenkle qui a proposé le code.
 
Création des catégories
Maintenant que l’ensemble de la navigation est réglé, nous allons créer le contenu. Pour cela rendez vous dans Contenu > Gestion des catégories .Cliquez sur le bouton nouveau, et créez une catégorie par langue et réglez la langue pour chaque catégorie (dans les paramètres de droite) :

Catégories
Langues

Français
Français

English
English

German
German

Arabic
Arabic Unitag

 
Une fois que vos quatre catégories sont créées éditez-en une (par exemple la catégorie Français) et associez-la avec les autres :

 
Associations de catégories
Cliquez ensuite sur Enregistrer & Fermer. Dans le gestionnaire de catégories, vous retrouvez le petit chainon indiquant que les catégories sont associées :

Gestionnaire de catégories
 
Création des articles
Nos catégories créées, nous allons pouvoir créer les articles. Pour cela, rendez-vous dans Contenu > Gestion des articles , et cliquez sur le bouton Nouveau.
Pour vérifier que toutes les associations fonctionnent, nous allons créer deux articles par langue. Un article sera réglé comme “En vedette” et l’autre non. Pour cela, je vais prendre la page Joomla de wikipédia (http://fr.wikipedia.org/wiki/Joomla!) qui se décline dans les quatre langues. Vous êtes bien sûr libre de choisir votre contenu.
Pour les articles français, cela donnera :

Article
En vedette
Catégorie
Langue

Joomla!
Oui
Français
Français

Histoire de Joomla!
Non
Français
Français

 
Faites de même pour les trois autres langues.
Une fois tous les articles créés, éditez les deux articles français et associez-les aux articles correspondant des autres langues.Vous devriez donc avoir 8 articles (2 par langues) et avoir le petit chainon d’association :

Gestionnaire d’articles
 En vous rendant sur le frontend de votre site vous devriez avoir cette page :

Page d’accueil
Cette page est la page d’accueil de type “Blog des articles en vedettes”. Si vous cliquez sur les drapeaux, vous avez la page correspondante, qui est affichée grâce à l’association des éléments de menu.Si vous cliquez sur la “catégorie Français”, vous obtenez une page affichant tous les articles de cette catégorie. En cliquant sur les drapeaux, vous obtenez la catégorie correspondante grâce à l’association des catégories.Si vous cliquez sur l’article “Histoire de Joomla!” (qui est accessible depuis la page catégorie) vous obtenez une page affichant l’article seul. En cliquant sur les drapeaux, vous obtenez l’article correspondant grâce à l’association des articles.
Note : Je connais le Français et l’Anglais, mais je n’ai aucune notion d’Allemand ou d’Arabe. Si vous maitrisez ces langues et que vous remarquez des erreurs, n’hésitez pas à m’en faire part dans les commentaires d’articles. Merci. Crédits photo
Image by Free-Photos from Pixabay