Creare un sito multilingue con Joomla! 3.7
Creare un sito multilingue con Joomla! 3.7
Extrowebsite

Joomla! è un CMS ampiamente diffuso ed il sistema di gestione dei contenuti offre un numero enorme di funzioni che servono per svariati scopi. Il supporto multilingue è uno di questi. Con Joomla! è possibile avere un sito multilingue in maniera molto semplice e senza installare estensioni di terze parti.

Vediamo come configurarlo in tutti i suoi passaggi.

Installare una nuova lingua

La versione di Joomla!, al momento della scrittura dell'articolo, è la 3.7.1. La lingua predefinita è l'inglese, sia per il frontend che per il backend. Verranno illustrati tutti i passaggi per installare una seconda lingua: il francese.

Il primo passaggio è portarsi nel Pannello di Controllo >> Estensioni >> Lingue.

Installa una nuova lingua in Joomla!
Installare una nuova lingua in Joomla!

Selezionare il pulsante Installa Lingue, come evidenziato dal bordo rosso nell'immagine.

La schermata successiva presenta tutte le lingue disponibili ed installabili. Dobbiamo solo individuare la lingua che fa al caso nostro.

Elenco lingue installabili in Joomla!
Elenco lingue installabili in Joomla!

N.B. Nel campo di ricerca posto in alto, come si evince dall'immagine, è possibile scrivere il nome della lingua che si vuole installare. Il nome della lingua va scritto in inglese.

Anche se avessimo voluto installare la lingua italiana, avremmo dovuto scrivere "Italian" nel campo di testo.

Nel nostro caso dobbiamo scrivere French.

Installazione lingua francese  in Joomla!
Installazione lingua francese in Joomla!

Per essere ancora più chiaro, French (FR) è la lingua che fa al caso del nostro esempio. French (CA) è la lingua francofona del Canada. A noi interessa la prima.

Premere il pulsante Installa.

Creare il contenuto lingue

In questo step verranno creati i profili lingua per i contenuti del sito. Portarsi su Estensioni >> Lingue >> Lingue contenuti.

Contenuto lingue pubblicate in Joomla!
Contenuto lingue pubblicate in Joomla!

Fare click sullo stato inattivo della lingua per pubblicarla ed utilizzarla nei contenuti.

Abilitare i plugin Language Filter e Language Code

Fino ad ora abbiamo installato e pubblicato la lingua secondaria per i contenuti. Adesso si devono abilitare i plugin Language Filter e Language Code.

  • Language Filter: filtra il contenuto visualizzato a seconda della lingua
  • Language Code: Dà la possibilità di cambiare il codice lingua nel documento HTML generato per migliorare il SEO

Portarsi in Estensioni >> Plugin. Nel campo di testo posto in alto, scrivere System - Language.

Abilitare i plugin Language Filter e Language Code in Joomla!
Abilitare i plugin Language Filter e Language Code in Joomla!

Abilitare entrambi i plugin.

Creare le Categorie nelle diverse lingue

Portarsi in Contenuti >> Categorie >> Nuova Categoria.

Creare categorie multilingua in Joomla!
Creare categorie multilingua in Joomla!

Creare due categorie: una per l'inglese ed una per il francese. Ovviamente avremmo creato altre categorie se avessimo avuto altre lingue.

Per la categoria "Inglese":

  • scrivere English nel campo "Titolo"
  • dalla select "Categoria principale" selezionare Nessuna
  • dalla select "Lingua" selezionare "English"

Per la categoria "Francese":

  • scrivere French nel campo "Titolo"
  • dalla select "Categoria principale" selezionare Nessuna
  • dalla select "Lingua" selezionare "French"

Inserire i contenuti in base alle lingue

Adesso che abbiamo più di una lingua installata nel sito, ed abbiamo creato le categorie, dobbiamo inserire i contenuti nelle rispettive lingue.

Per la demo in oggetto, possiamo creare 3 articoli in inglese e 3 articoli in francese.

Creare articoli multilingua in Joomla!
Creare articoli multilingua in Joomla!

Come evidenziato in figura, prestare attenzione ad assegnare la corretta categoria e lingua agli articoli in Inglese e Francese.

Lista articoli multilingua Joomla!
Lista articoli multilingua in Joomla!

Creare i menu per i contenuti multilingua

In questo passaggio, creeremo un menu per i contenuti inglesi e un altro menu per i contenuti francesi.
Portarsi in Menu >> Gestione >> Nuovo menu. Creare il menu per la lingua inglese, utilizzando i seguenti dati:

  • Titolo: English Menu
  • Tipo menu: englishmenu
  • Descrizione: Menu for English contents

Salvare e chiudere per creare il menu.

Creare menu inglese in Joomla!
Creare menu inglese in Joomla!

Stesso procedimento per il menu francese:

  • Titolo: French Menu
  • Tipo menu: frenchmenu
  • Descrizione: Menu for French contents

Salvare e chiudere per creare il menu.

Aggiungere le voci al menu

A questo punto si devono creare le voci ai due menu.

In Menu >> English Menu >> Nuova voce di menu inserire i seguenti parametri:

  • Nome voce di menu: English Article 1
  • Tipo di voce di menu: Singolo articolo
  • Selezionare l'articolo dal titolo "English Article 1"
  • Assicurarsi che il menu da popolare sia "English Menu" e la select "Lingua" sia impostata su English.

Salvare e chiudere.

Seguire i passaggi appena descritti per creare 3 voci di menu per i contenuti in lingua inglese.

Creare voci di menu in Joomla!
Creare voci di menu in Joomla!

Dopo aver creato le voci per il menu inglese, andare su Menu >> French Menu >> Nuova voce di menu ed inserire i seguenti parametri:

  • Nome voce di menu: French Article 1
  • Tipo di voce di menu: Singolo articolo
  • Selezionare l'articolo dal titolo "English Article 1"
  • Assicurarsi che il menu da popolare sia "French Menu" e la select "Lingua" sia impostata su French.

Salvare e chiudere.

Seguire i passaggi appena descritti per creare 3 voci di menu per i contenuti in lingua francese.

Assegnare pagine iniziali specifiche per le lingue dalle voci di menu

Adesso abbiamo tre voci di menu per "English menu" e tre voci per il "French menu". Da queste voci dobbiamo definire una voce di menu per la home page di ciascuna lingua. Una per l'inglese e l'altra per il francese.

Andare in Menu >> English Menu e fare clic sull'icona a stella per la voce di menu ed assegnare il suo contenuto come home page inglese.

Assegnare pagine iniziali dalle voci di menu
Assegnare pagine iniziali dalle voci di menu

Una volta che una voce di menu è contrassegnata con la stella, apparirà la bandiera appartenente alla lingua. L'immagine successiva mostra lo stato della home page specifica per la lingua inglese.

Default home inglese
Default home page inglese

Dopo aver impostato la home page per la lingua inglese, andare in Menu >> French Menu e flaggare la voce di menu come pagina iniziale, cliccando sull'icona a stella.

Default home francese
Default home page francese

Abbiamo assegnato la home page per la lingua inglese e francese.

Collegare le voci di menu alle traduzioni degli articoli

A questo punto dobbiamo collegare le voci di menu inglese e francese in modo che gli utenti possano passare da una lingua all'altra durante la navigazione nel sito. Andare in Menu >> English Menu. Aprire una voce di menu e selezionare il tab Associazioni.

Associazione di due diverse voci di menu da lingue diverse.
Associazione di due diverse voci di menu da lingue diverse

Selezionare un articolo in lingua francese per la voce di menu inglese per l'associazione. Salvare le modifiche apportate. Farlo anche per le altre voci di menu inglesi. Ciò significa, associare l'articolo inglese 1 all'articolo 1 francese, associare l'articolo 2 all'articolo 2 francese e associare l'articolo 3 all'articolo 3 francese.

Associazione delle voci di menu agli articoli
Associazione delle voci di menu agli articoli

Visualizzare i menu dal frontend

Dopo la creazione dei menu, dobbiamo aggiungere i moduli di menu per visualizzarli nel frontend del sito.

Andare in Menu >> Gestione.

Collegare i menu ai moduli
Collegare i menu ai moduli

Fare click su "Collega modulo per questo menu" per il menu inglese.

Collegare il modulo al menu inglese
Collegare il modulo al menu inglese

Compilare i campi di testo con le seguenti informazioni:

  • Titolo: English Menu
  • Lingua: Selezionare "English"
  • Posizione: Selezionare la posizione del proprio template nella quale verrà mostrato il menu

Stessa operazione per il menu francese. Andare in Menu >> Gestione. Fare click su "Collega modulo per questo menu" per il menu francese.

Collegare il modulo al menu francese
Collegare il modulo al menu francese

Compilare i campi di testo con le seguenti informazioni:

  • Titolo: French Menu
  • Lingua: Selezionare "French"
  • Posizione: Selezionare la posizione del proprio template nella quale verrà mostrato il menu

Non pubblicare il menu di default "Main Menu"

Infine, disattivare il Main Menu principale (perchè non è necessario visualizzare il menu predefinito di Joomla! nel sito). Andare in Estensioni >> Moduli e disattivarlo.

Aggiungere il modulo language switcher

Fino ad ora abbiamo due gruppi di articoli e di menu. Adesso è necessario un "meccanismo" per passare da uno all'altro. Vale a dire che se un visitatore sta leggendo un articolo / pagina in inglese, ha bisogno di uno "switcher" per visitare la versione francese dell'articolo / pagina corrispondente.

Per aggiungere il modulo language switcher, andare in Estensioni >> Moduli e cliccare su Nuovo e selezionare Language Switcher.

Modulo language switcher
Modulo language switcher

Nel campo del titolo possiamo aggiungere "‘Choose your language" come avviso per il visitatore. Selezionare la posizione del modulo in base al template che si sta utilizzando e la lingua impostata su "Tutte". Salvare il modulo.

Vediamo il frontend.

Frontend Joomla! multilingue
Frontend Joomla! multilingue

Abbiamo ottenuto un sito Joomla! multilingue perfettamente funzionante. Joomla! 3.7 nasce con il nuovo componente "Associazione Multilingue" che rende più semplice la scrittura e la modifica dei contenuti con diverse traduzioni.