Personalizza il selettore di lingua WPML: posizionamento, stile e comportamento

Cosa può fare il selettore di lingua di WPML

Già pronto all’uso, WPML produce un selettore che:

• Mostra tutte le lingue attive sul tuo sito, nell'ordine che preferisci.
• Etichetta ogni lingua con il suo nome nativo (Deutsch, Français) o nella lingua attuale del sito (tedesco, francese), a tua scelta.
• Mostra facoltativamente le bandiere (uno sprite che si adatta al tuo tema).
• Gestisce in modo elegante le traduzioni mancanti: salta la lingua oppure rimanda alla home page di quella lingua.
• Può essere posizionato in qualsiasi menu di WordPress, in qualsiasi area widget, nel footer o in linea sopra e sotto gli articoli.
• È disponibile in un blocco Gutenberg per qualsiasi layout del page builder.
• Può essere nascosto in pagine specifiche in cui sarebbe d'intralcio (404, checkout, account).
• Memorizza nella cache il suo HTML renderizzato per un caricamento rapido della pagina.

La maggior parte dei siti utilizza i posizionamenti integrati e le impostazioni predefinite. Gli sviluppatori di temi che hanno bisogno di un maggiore controllo possono creare un selettore personalizzato nel codice utilizzando l'API di WPML.

Dove si trovano le impostazioni

Apri WPML > Impostazioni > Selettori di lingua. La pagina è raggruppata per domanda, non per scheda dell'interfaccia utente. Scegli la sezione che corrisponde a ciò che desideri modificare.

Quali lingue appaiono e in quale ordine

La scheda Opzioni del selettore di lingua ha un'area drag-and-drop che elenca tutte le lingue attive. L'ordine in questa sezione determina l'ordine in ogni selettore sul sito. Trascina le lingue verso l'alto o verso il basso e salva.

Nella stessa scheda, scegli:

• Etichetta nativa o nella lingua attuale. Mostra Deutsch (nativa) o tedesco (lingua attuale). L'etichetta nativa è più invitante per chi parla quella lingua; quella nella lingua attuale è più chiara per i visitatori alle prime armi.
• Bandiere attivate o disattivate e il formato della bandiera.

Cosa succede quando manca una traduzione

Non tutte le pagine sono tradotte in ogni lingua. L'opzione Come gestire le lingue senza traduzione decide cosa fa il selettore per una lingua che non ha una traduzione della pagina corrente:

• Salta la lingua (predefinito). La lingua scompare dal selettore per questa pagina. È l'esperienza utente più pulita; i visitatori vedono solo le lingue che possono effettivamente leggere.
• Collega alla home della lingua per le traduzioni mancanti. La voce del selettore mostra invece la home page della lingua. Utile quando vuoi che ogni lingua sia sempre raggiungibile da qualsiasi pagina, ma i visitatori potrebbero finire su contenuti che non si aspettavano.

La scelta ha implicazioni sull'esperienza utente su cui vale la pena riflettere attentamente.

Dove appare il selettore

Cinque posizionamenti, ognuno attivabile in modo indipendente nella stessa pagina Impostazioni:

• Selettore di lingua nel menu. Inserisci il selettore in qualsiasi menu di WordPress (header, footer, barra laterale, ovunque il tuo tema assegni i menu). Aggiungine più di uno se desideri posizionamenti diversi per ciascun menu. Ogni selettore nel menu ha la sua riga di anteprima che mostra dove si trova.
• Selettore di lingua nel widget. Aggiungi il selettore a qualsiasi area widget registrata dal tuo tema: barre laterali, zone dell'header, colonne del footer.
• Selettore di lingua nel footer. Un singolo interruttore globale che renderizza automaticamente il selettore in fondo a ogni pagina.
• Link in linea alle traduzioni degli articoli. Una singola casella di controllo che mostra i link “questo articolo è disponibile in X” sopra o sotto ogni articolo.
• Selettori di lingua personalizzati. Quando i posizionamenti integrati non sono sufficienti, gli sviluppatori di temi possono richiamare l'API del selettore di WPML da qualsiasi file di template. La pagina Impostazioni espone un pulsante Personalizza per le opzioni di rendering.

Nascondi il selettore in pagine specifiche

Alcune pagine non hanno bisogno di un selettore: la tua pagina 404, le schermate dell'account, il checkout. Le regole di visualizzazione condizionale di WPML ti permettono di nascondere il selettore per singola pagina senza ricorrere al CSS display:none nel tuo tema.

Puoi impostare regole per singola pagina nella stessa pagina Impostazioni > Selettori di lingua. Scegli le pagine in cui vuoi che il selettore sia nascosto; la regola si applica a tutti i posizionamenti del selettore contemporaneamente.

Preserva i parametri URL

Quando un visitatore fa clic sul selettore, WPML ricostruisce l'URL per la lingua di destinazione. Per impostazione predefinita, i parametri della stringa di query (?utm_source=newsletter, parametri di filtro, ecc.) vengono eliminati. Questo interrompe le campagne di analisi e gli elenchi filtrati.

Il campo Preserva gli argomenti dell'URL elenca le chiavi di query che vuoi mantenere durante il cambio. Tutto ciò che inserisci qui (uno per riga) viaggia con il visitatore verso l'URL tradotto.

CSS personalizzato per il selettore

Una singola area di testo sotto CSS aggiuntivo applica lo stile a tutti i selettori sul sito contemporaneamente. È utile per adattare il selettore al tuo tema senza toccare i file del tema.

Memorizzare nella cache il template del selettore

La scheda Prestazioni ha una singola casella di controllo: Memorizza nella cache i template del selettore di lingua. Se attivata, WPML memorizza nella cache l'HTML renderizzato di ogni posizionamento del selettore, velocizzando il caricamento delle pagine su un sito molto trafficato.

Attenzione: quando modifichi un'opzione del selettore e non vedi la modifica riflessa sul front-end, la cache è il primo posto da controllare. Disattivala, ricarica e le tue modifiche appariranno. Quindi riattiva la cache per la produzione.

Selettori personalizzati nel codice del tema

Per i siti in cui i posizionamenti integrati non sono adatti (un selettore in una posizione specifica all'interno dell'header della pagina, un menu a discesa personalizzato renderizzato dal tuo tema, qualsiasi cosa al di fuori di un menu o di un'area widget di WordPress), WPML espone un'API che permette agli sviluppatori di temi di creare un selettore personalizzato.

La scheda Selettori di lingua personalizzati ha un interruttore Abilita e un pulsante Personalizza. Una volta abilitato, il codice del template del tema può renderizzare il selettore ovunque utilizzando l'API PHP documentata di WPML.