Come visualizzare/nascondere i contenuti in una lingua specifica?

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

2. Aggiungere selettori CSS per ogni elemento

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

Per prima cosa, create due elementi diversi nel vostro sito web originale. Un elemento sarà per la lingua originale e il secondo per la lingua in cui si vuole tradurre il sito. Questi due elementi saranno presenti nella versione originale, ma non verranno mai visualizzati contemporaneamente a causa di un workaround del CSS (maggiori informazioni di seguito).

2. Aggiungere un selettore CSS per ogni elemento

È necessario aggiungere un selettore CSS specifico (classe o ID) per ogni elemento. Ad esempio, "link-en" per l 'icona che si vuole collegare all'URL inglese e "link-es" per l 'icona collegata all'URL spagnolo. Se non sapete cosa sia un selettore CSS, troverete maggiori informazioni qui di seguito.

3. Aggiungere alcuni CSS personalizzati

Quindi, 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, html:not([lang="es"]) .link-es {   
   display: none!important; 
}

Qui, la proprietà :not() è una pseudo-classe di negazione che corrisponde a un elemento non rappresentato.

Ad esempio, la condizione html:not([lang="es"]) significa semplicemente "quando la lingua non è lo spagnolo". Ciò significa che il codice indicherà al sito web di nascondersi quel particolare elemento quando la lingua non è lo spagnolo.

Non dimenticate di sostituire le lingue e le classi giuste nel codice qui sopra con le vostre rispettive lingue. Inoltre, assicurarsi che le abbreviazioni 'en' ed 'es' siano quelle che si stanno utilizzando.

Per trovare il codice della lingua originale, è necessario accedere al codice sorgente. Il codice è visualizzato in alto:

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,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,html:not([lang="es"]) .link-es, 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 che si desidera modellare, modificare o, nel nostro caso, nascondere. Quando si aggiungono contenuti al sito web originale, si dovrebbe essere in grado di aggiungere un selettore CSS ad essi.

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:

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":