Sito Multilingua con Switcher CSS

 In Web Design

Quando serve uno Switcher CSS?

Volendo creare un intero sito Multilingua sconsiglio l’uso della soluzione che sto per esporre nell’articolo.
Capita però spesso di trovarsi limitati nel tempo o nel budget, di dover intervenire su piccole parti di grossi siti o voler tradurre solo una piccola porzione di testo su una pagina.

Ci sono poi siti che permettono di creare pagine o parti di tali in codice ponendo forti limitazioni, come accade su molte piattaforme di vendita.

Quando si interviene su un sito che non adotta un CMS, troppo grande per voler modificare tutta la struttura, si vuole (o deve) evitare l’uso di javascript o plugin… la migliore soluzione è creare uno Switcher CSS che cambi la lingua evitandoci di dover visualizzare il testo seguito dalla traduzione ed evitando, in parte, gli svantaggi che ciò porterebbe all’indicizzazione della pagina.

Nel nostro caso vedremo come integrare in una pagina 3 lingue diverse (Italiano, Inglese e Spagnolo), scegliendo quale lingua usare come predefinita e come creare lo switcher.

Come si fa?

Per prima cosa interveniamo direttamente sul codice HTML, in modo estremamente semplice e in 3 passi:

  1. Aggiungere al body una classe che conterrà la lingua di default del sito (nel nostro caso l’Italiano)

    <body class=”it”>

  2. Inseriamo quindi 3 button dove vogliamo che appaia il nostro switcher per le lingue

    <button onclick=”document.body.className=’it'”>Italiano</button>
    <button onclick=”document.body.className=’en'”>English</button>
    <button onclick=”document.body.className=’es'”>Spanish</button>

  3. L’ultimo passo serve ad inserire il contenuto nelle diverse lingue, possiamo usare tag come <p> ma il mio consiglio per avere un codice più pulito è di dividere in 3 <div> le diverse lingue così da risultare più pratico anche un futuro intervento di modifica sul codice o l’aggiunta di una quarta lingua o sezione. Quello che dobbiamo fare è aggiungere ai div il relativo attributo lang

    <div lang=”it”>Contenuto in Italiano</div>
    <div lang=”en”>Contenuto in Inglese</div>
    <div lang=”es”>Contenuto in Spagnolo</div>

Fatto questo abbiamo finito di intervenire sul codice HTML e ci resta solo un ultimo velocissimo passo per completare il nostro Switcher CSS, bisogna appunto intervenire sul foglio di stile.
Abbiamo infatti impostato il contenuto di 3 <div> in 3 diverse lingue e “ordinato” a 3 button di cambiare la classe del body nella lingua selezionata (oltre aver impostato una lingua predefinita), ma ci manca ancora la regola che permetta di visualizzare solo la lingua corrente. Per farlo interveniamo sul nostro foglio di stile, nascondendo le lingue non selezionate grazie al selettore :not

Basterà quindi aggiungere una sola regola al nostro CSS per completare il nostro switcher:

body:not(.en) :lang(en),
body:not(.it) :lang(it),
body:not(.es) :lang(es) {
display: none;
}

Indicizzazione

Normalmente scrivere in più lingue sulla stessa pagina confonde i motori di ricerca e risulta un ostacolo alla visibilità della pagina stessa sui motori di ricerca.

Il metodo esposto in questo articolo non risolve totalmente il problema, per la creazione di grossi siti multilingua è consigliabile utilizzare metodi più complessi ed efficaci. Tuttavia indicando l’attributo lang per le varie lingue diamo utili informazioni ai motori di ricerca limitando al minimo i danni e risolvendo il problema senza bisogno di utilizzare javascript che possono creare incompatibilità o peggio ancora essere disabilitati dall’utente.

Per piccoli progetti e interventi chirurgici su pagine web uno Switcher CSS resta una validissima scelta non invasiva e molto facile da eseguire.

Post suggeriti

Leave a Comment

Contattami

Hai domande? Puoi scrivermi utilizzando il form seguente e sarai ricontattato il prima possibile.

Illeggibile? Cambia il testo. captcha txt

Inizia a digitare e premi Enter per effettuare una ricerca