Un selettore di lingua consente ai visitatori di selezionare la lingua in cui desiderano leggere il contenuto. WPML vi consente di aggiungere un selettore di lingua in diversi modi: in un menu, come widget o nel piè di pagina del sito. Potete anche utilizzarlo per mostrare i link sopra o sotto i post, offrendoli in altre lingue.

I selettori di lingua aggiunti utilizzando WPML funzioneranno e avranno un bell’aspetto con qualsiasi tema.

I selettori di lingua del vostro sito vengono aggiunti e personalizzati su WPML -> pagina Languages (Lingue).

Opzioni del selettore di lingua globale

La prima sezione relativa ai selettori di lingua è quella delle impostazioni globali, come l’ordine delle lingue. Nota: queste opzioni vengono applicate a tutti i selettori di lingua che aggiungete.

La sezione principale delle opzioni dei selettori di lingua

La sezione principale delle opzioni dei selettori di lingua

Impostazioni per mantenere gli argomenti degli URL

La sezione delle opzioni dei selettori di lingua è caratterizzata da una finestra di dialogo chiamata Preserve URL arguments (Mantieni gli argomenti degli URL).

Gli argomenti degli URL potrebbero essere necessari per alcuni plug-in e potreste volerli mantenere quando passate da una lingua all’altra. Questo è lo scopo di questa funzione. Gli argomenti che desiderate mantenere devono essere aggiunti qui come elenco separato da virgole.

Finestra di dialogo

Finestra di dialogo “Preserve URL arguments” (Mantieni gli argomenti degli URL)

Prendiamo in considerazione il seguente esempio di utilizzo di questa funzione:

  • Supponete di aggiungere i seguenti argomenti: bar, foo.
  • Traducete il post “Hello world” (Ciao mondo).
  • Nel front-end, aprite il post “Hello world” (Ciao mondo) e aggiungetelo alla fine dell’URL: ?bar=10&foo=100&lost=1000 (notate che abbiamo aggiunto i due argomenti + lost)
  • Passate da una lingua all’altra: l’URL terminerà soltanto con ?bar=10&foo=100

Sezioni separate per diversi tipi di selettori di lingua

Ogni tipo di selettore di lingua ha la sua sezione separata. Le opzioni selezionate per i diversi tipi di selettori di lingua vengono applicate rispettivamente a ciascun selettore. La pagina Languages (Lingue) mostra un’anteprima funzionante per i diversi selettori di lingua attivi sul sito, come mostrato nella seguente immagine.

Sezioni separate per ciascun tipo di selettore di lingua

Sezioni separate per ciascun tipo di selettore di lingua

Ciascuna sezione ha il suo pulsante “add” (aggiungi) per aggiungere un altro selettore di lingua di quel tipo, un’icona a forma di “matita” per modificare il selettore esistente e un’icona a forma di “cestino“.

Controllo completo su ciascun selettore di lingua

Ciascun tipo di selettore di lingua ha le sue impostazioni. Ciò vi permette di avere il pieno controllo indipendente dei contenuti e dell’aspetto.

Ad esempio, la seguente immagine mostra una finestra di dialogo con le impostazioni per il selettore di lingua a menu.

Impostazioni per il selettore di lingua a menu

Impostazioni per il selettore di lingua a menu

Anteprima live che mostra le opzioni del selettore di lingua

Modificando le impostazioni del selettore di lingua, l’anteprima si aggiorna. L’anteprima è “schematica”. Non carica il CSS del front-end (non è una buona idea caricarla nell’amministrazione di WordPress), quindi l’attuale selettore di lingua avrà uno stile diverso. Tuttavia vi mostra l’effetto delle diverse opzioni, le impostazioni dei colori, l’ordine e il contenuto.

Struttura dell’HTML dei selettori di lingua a menu

A partire dalla versione 3.6, WPML non esegue più il rendering dei selettori di lingua con il suo HTML. Al suo posto inserisce gli elementi del “selettore di lingua” nella struttura a menu. In questo modo il tema esegue il rendering del selettore di lingua semplicemente come le altre voci di menu.

Sostanzialmente questo consente al selettore di lingua di avere un aspetto migliore sul sito, assumendo l’aspetto delle regole del CSS del vostro tema.

Selettore di lingua a menu sul front-end

Selettore di lingua a menu sul front-end

Personalizzare i selettori di lingua a menu

La versione 3.6 di WPML ha aggiunto una nuova classe CSS, wpml-ls-menu-item, appositamente per i selettori di lingua a menu. Questa classe semplifica la personalizzazione delle voci del selettore di lingua a menu (link).

Ad esempio, se il vostro sito utilizza il tema Twenty Sixteen e il vostro selettore a menu visualizza soltanto le bandiere delle lingue, il rendering del front-end risulterà strano. Come potete vedere nella seguente immagine, la larghezza delle voci di menu è insolitamente ampia.

Selettore di lingua con le sole bandiere con il tema Twenty Sixteen

Selettore di lingua a sole bandiere con il tema Twenty Sixteen

Potete risolverlo facilmente utilizzando la classe CSS wpml-ls-menu-item.


li.wpml-ls-menu-item ul li a {

width: auto;

}

Non serve modificare il file CSS del vostro tema, basta aggiungere le regole personalizzate alla sezione Additional CSS (CSS aggiuntivo) sotto le opzioni del selettore di lingua.

Ora la larghezza delle voci dell’elenco sono migliorate, come visualizzato nell’immagine seguente.

Selettore di lingua a menu dopo l'applicazione del CSS personalizzato

Selettore di lingua a menu dopo l’applicazione del CSS personalizzato

Visualizzare i selettori di lingua di WPML nelle posizioni personalizzate

A volte è necessario aggiungere un selettore di lingua in una posizione personalizzata specifica. Potete farlo all’interno dei modelli PHP del vostro tema o direttamente all’interno delle pagine e dei post.

Nota: le impostazioni globali per i selettori di lingua nelle posizioni personalizzate vengono impostati nello stesso posto degli altri selettori del sito, nella sezione Language switcher options (Opzioni dei selettori di lingua), sulla pagina Languages (Lingue).

Utilizzare le azioni PHP

Per visualizzare il selettore di lingua all’interno dei file dei modelli PHP del vostro tema potete utilizzare le seguenti due azioni:

  • do_action(‘wpml_add_language_selector’);: genera come output il selettore di lingua basato sulle opzioni impostate nella sezione Custom Language Switchers (Selettori di lingua personalizzati).
  • do_action( ‘wpml_footer_language_selector’ );: genera come output il selettore di lingua basato sulle opzioni impostate nella sezione Footer language switcher (Selettore di lingua del piè di pagina), anche se l’opzione Show language switcher in footer (Mostra selettore di lingua nel piè di pagina) è disattivata.

Utilizzare i codici abbreviati di WPML

All’interno dei post e delle pagine potete utilizzare uno dei due codici abbreviati di WPML sottostanti. Anche qui la differenza sta nella visualizzazione del selettore di lingua.

  • [wpml_language_selector_widget]: genera come output il selettore di lingua basato sulle opzioni impostate nella sezione Custom Language Switchers (Selettori di lingua personalizzati).
  • [wpml_language_selector_footer]: genera come output il selettore di lingua basato sulle opzioni impostate nella sezione Footer language switcher (Selettore di lingua del piè di pagina), anche se l’opzione Show language switcher in footer (Mostra selettore di lingua nel piè di pagina) è disattivata.

I vostri selettori di lingua personalizzati

Se necessario potete anche creare il vostro selettore di lingua unico. Un selettore di lingua personalizzato vi consentirà di includere tutte le opzioni desiderate, in qualsiasi modo preferiate. Spesso la gente lo utilizza per mostrare le bandiere della propria lingua o per ordinare le lingue in modi speciali.

Un selettore di lingua personalizzato

Un selettore di lingua personalizzato

Esistono due modi per farlo: utilizzare i modelli twig o utilizzare l’API PHP.

A partire dalla versione 3.6, WPML è caratterizzato dal supporto per la creazione di selettori di lingua personalizzati utilizzando i modelli twig. Questo è l’approccio più semplice e preferito e non include la programmazione PHP. L’aspetto migliore dell’utilizzo dei modelli twig è che potete includerli facilmente nei temi e appariranno come opzioni per gli utenti.

L’altro modo è creare selettori di lingua personalizzati utilizzando l’API PHP. Questo approccio richiede la conoscenza del PHP.