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.
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.
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.
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.
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 entrambi i plugin.
Creare le Categorie nelle diverse lingue
Portarsi in Contenuti ⇒ Categorie ⇒ Nuova Categoria.
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.
Come evidenziato in figura, prestare attenzione ad assegnare la corretta categoria e lingua agli articoli in Inglese e Francese.
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.
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.
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.
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.
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.
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.
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.
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.
Fare click su "Collega modulo per questo menu" per il 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.
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.
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.
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.