Come visualizzare/nascondere i contenuti in una lingua specifica?

In questo articolo, imparerete a visualizzare e/o nascondere i contenuti in una lingua specifica.

Se si desidera visualizzare determinati contenuti solo in una lingua specifica (ad esempio, un pulsante con un link), seguire la procedura seguente:

1. Creare due elementi diversi

Nel sito web originale, creare due elementi:

• Uno per la lingua originale
• Uno per la lingua tradotta

Entrambi gli elementi saranno presenti nella versione originale, ma solo uno verrà visualizzato alla volta grazie a una regola CSS.

2. Aggiungere un selettore CSS per ogni elemento

Assegnare un selettore CSS univoco (classe o ID) a ciascun elemento. Ad esempio:

• link-en per la versione inglese
• link-es per la versione spagnola

Non siete sicuri di cosa sia un selettore CSS? Consultate la sezione "Cos'è un selettore CSS?" qui di seguito.

3. Aggiungere alcuni CSS personalizzati

Una volta aggiunta la classe/ID agli elementi che si desidera nascondere/visualizzare, andare nella Dashboard di Weglot > Selezionare il progetto > Impostazioni > Language Switcher e inserire questo codice nel campo "Custom CSS":

html:not([lang="en"]) .link-en{   
   display: none!important; 
}
html:not([lang="es"]) .link-es {   
   display: none!important; 
}

Come funziona:

• :not() è una pseudo-classe CSS che significa "quando NON è questa lingua".
• Ad esempio, html:not([lang="es"]) significa "nascondi questo elemento quando la lingua selezionata non è lo spagnolo".

Non dimenticate di:

• Sostituire en e es con i codici linguistici corretti per il vostro sito
• Sostituire .link-en e .link-es con i nomi delle classi o degli ID reali

Non sapete come accedere al vostro codice sorgente? Trovate maggiori informazioni qui sotto.

Se la lingua originale è l'inglese con un codice breve en-US, ecco il codice finale da utilizzare:

html:not([lang="en-US"]) .link-en {
   display: none!important;
}
html:not([lang="es"]) .link-es {
   display: none!important;
}

Infine, se si desidera applicare il codice per una terza lingua, come il tedesco, è possibile aggiungere una sola riga di CSS personalizzato. L'aspetto sarà questo:

html:not([lang="en-US"]) .link-en {
  display: none!important;
}
html:not([lang="es"]) .link-es {
   display: none!important;
}
html:not([lang="de"]) .link-de {
  display: none!important;
}

4. Informazioni aggiuntive

Che cos'è un selettore CSS?

I selettori CSS sono utilizzati per trovare o selezionare gli elementi HTML (elementi delle pagine) che si desidera modellare, modificare o, nel nostro caso, nascondere. Quando aggiungete del contenuto al vostro sito web originale, dovreste essere in grado di aggiungere un selettore CSS ad esso.

Ad esempio, è possibile

- Trovare un campo dedicato a seconda del CMS, dell'app o del plugin utilizzato per creare i contenuti:

Oppure

- Aggiungete manualmente la classe o l'ID direttamente nell'HTML, in modo che appaia come questo:

<a class="link-en">English button</a>
<a class="link-es">Botón en Español</a>

Successivamente, dovrete utilizzare le regole CSS per nascondere gli elementi che non devono essere visualizzati in base alla lingua selezionata.

Come si accede al codice sorgente?

Per accedere al codice sorgente, è possibile fare clic con il tasto destro del mouse su un punto qualsiasi della homepage del sito e cliccare su "Visualizza sorgente pagina":