Prima stesura
July 3, 2013
Updated
December 30, 2019

Gli sviluppatori possono creare i propri selettori di lingua personalizzati utilizzando la chiamata API icl_get_languages da WPML. In questo tutorial troverai tutti i dettagli di icl_get_languages ed esempi di selettori di lingua personalizzati creati con esso.

Panoramica veloce:

  1. Chiamate icl_get_languages per ottenere l’elenco delle traduzioni per la pagina attualmente visualizzata
  2. Scrivete la vostra funzione PHP che esegue in rendering del selettore di lingua
  3. Inserite il vostro selettore di lingua nel vostro tema

Ottenimento dell’elenco delle (altre) lingue

Utilizzate icl_get_languages() per ottenere un elenco di traduzioni per qualsiasi pagina. Se state utilizzando WPML 3.2 o una versione successiva, dovreste considerare di utilizzare il filtro hook simile wpml_active_languages.

Utilizzo:

icl_get_languages('skip_missing=N&orderby=KEY&order=DIR&link_empty_to=str')

* N=0/1
* KEY=id/code/name/custom (name -> translated_name), (default: id)
* DIR=asc/desc (default: asc)
* link_empty_to = str (default: empty funziona in combinazione con skip_missing=0 e consente di utilizzare link personalizzati per le lingue che non dispongono di traduzioni per l’elemento corrente. {% lang} può essere utilizzato come segnaposto per il codice della lingua)

Note:

  • Il parametro skip_missing indica alla funzione come trattare le lingue senza traduzioni.
  • La combinazione di orderby e order consente di creare il selettore di lingua a discesa o i selettori di lingua in cui le lingue vengono sempre visualizzate nella stessa posizione.
  • L’ordine personalizzato può essere definito nell’amministratore di WordPress in WPML » Languages (Lingue) » Language Switcher Options (Opzioni di cambio lingua)

La funzione restituisce un array con voci per lingua. Ad esempio, per un sito di WordPress che viene eseguito in inglese, francese e italiano, restituirà questo:

Array
(
 [en] => Array
 (
 [id] => 1
 [active] => 1
 [native_name] => English
 [missing] => 0
 [translated_name] => English
 [language_code] => en
 [country_flag_url] => http://yourdomain/wpmlpath/res/flags/en.png
 [url] => http://yourdomain/about
 )

 [fr] => Array
 (
 [id] => 4
 [active] => 0
 [native_name] => Français
 [missing] => 0
 [translated_name] => French
 [language_code] => fr
 [country_flag_url] => http://yourdomain/wpmlpath/res/flags/fr.png
 [url] => http://yourdomain/fr/a-propos
 )

 [it] => Array
 (
 [id] => 27
 [active] => 0
 [native_name] => Italiano
 [missing] => 0
 [translated_name] => Italian
 [language_code] => it
 [country_flag_url] => http://yourdomain/wpmlpath/res/flags/it.png
 [url] => http://yourdomain/it/circa
 )
)

Ogni lingua ha il suo array di parametri, che la funzione del vostro tema può utilizzare per creare qualsiasi selettore di lingua.

  • id: ID di riferimento interno
  • active: questa è la lingua attualmente attiva (è attiva esattamente una lingua)
  • native_name: il nome nativo della lingua (mai tradotto)
  • translated_name: il nome della lingua tradotto nella lingua attualmente attiva
  • country_flag_url: l’URL di un’immagine PNG con la bandiera del Paese
  • url: il link alla traduzione in quella lingua
  • missing: 1 se manca la traduzione per quell’elemento, 0 se esiste.

Gestione delle traduzioni mancanti

Alcune pagine potrebbero non essere tradotte in tutte le lingue. Potete dire a icl_get_languages cosa restituire per le lingue senza traduzioni.

Se ‘skip_missing=1’, queste lingue non appariranno nell’output. Se ‘skip_missing=0’, appariranno tutte le lingue e le lingue con traduzioni mancanti rimanderanno alla pagina iniziale di quella lingua.

Come utilizzare le funzioni del tema

Potete creare i vostri selettori di lingua come preferite. Qui mostreremo due usi popolari.

Le funzioni PHP esemplificative che stiamo mostrando qui dovrebbero essere inserite nel vostro file functions.php (nella cartella del tema), non aggiunte al plug-in.

Questo post è disponibile anche in…

Supponendo di voler aggiungere una riga in fondo (o in alto) a ciascun post, indicando in quali altre lingue è disponibile. Questa funzione dovrebbe restituire solo i post tradotti esistenti e se non è disponibile alcuna traduzione, non dovrebbe generare nulla.

function icl_post_languages(){
 $languages = icl_get_languages('skip_missing=1');
 if(1 < count($languages)){
 echo __('Questo post è disponibile anche in: ');
 foreach($languages as $l){
 if(!$l['active']) $langs[] = '<a href="'.$l['url'].'">'.$l['translated_name'].'</a>';
 }
 echo join(', ', $langs);
 }
}

Ciò che questa funzione fa è:

  1. Ottenere l’elenco delle lingue da WPML – $languages = icl_get_languages(‘skip_missing=1’);
  2. Controllare che ci sia più di una lingua per questo post – if(1 < count($languages))
  3. Creare l’output, saltando la lingua attualmente visualizzata – if(!$l[‘active’])

Note:

  1. Il messaggio passa attraverso gettext. Questo è molto importante, in modo che questo messaggio, che aggiungerete ai post in diverse lingue, appaia nella lingua corretta: __(‘Questo post è disponibile anche in: ‘);
  2. I nomi delle lingue utilizzati sono i nomi delle lingue tradotte. Ciò garantirebbe che l’intera frase sia scritta nella lingua corretta: $l[‘translated_name’]

Il risultato è questo:

Messaggio sui post disponibili in altre lingue
Messaggio sui post disponibili in altre lingue

Per includere questo messaggio nei post, aggiungete una chiamata a icl_post_languages() da single.php.

Elenco di nomi di lingue e bandiere per il piè di pagina

Anche se avete un selettore di lingua nella parte superiore della pagina, è una buona idea aggiungere un elenco di nomi e le bandiere delle lingue nel piè di pagina. Molte persone scorrono subito a fine pagina per avere un’idea migliore di ciò che le aspetta, quindi posizionarvi un importante selettore di lingua con buona probabilità aiuterebbe i visitatori stranieri.

function languages_list_footer(){
 $languages = icl_get_languages('skip_missing=0&orderby=code');
 if(!empty($languages)){
 echo '<div id="footer_language_list"><ul>';
 foreach($languages as $l){
 echo '<li>';
 if($l['country_flag_url']){
 if(!$l['active']) echo '<a href="'.$l['url'].'">';
 echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
 if(!$l['active']) echo '</a>';
 }
 if(!$l['active']) echo '<a href="'.$l['url'].'">';
 echo icl_disp_language($l['native_name'], $l['translated_name']);
 if(!$l['active']) echo '</a>';
 echo '</li>';
 }
 echo '</ul></div>';
 }
}

Questa funzione effettua quanto segue:

  1. Se esiste una lingua di traduzione, crea un DIV e avvia un elenco non ordinato: if(!empty($languages)){ echo ‘<div id=”footer_language_list”><ul>’;
  2. Passa in ressegna ognuna delle lingue e la aggiunge come voce di elenco.
  3. Se non è la lingua attiva, la collega anche a quella pagina in quella lingua:if(!$l[‘active’]) echo ‘<a href=”‘.$l[‘url’].'”>’;
  4. Aggiunge la bandiera della lingua: <img src=”‘.$l[‘country_flag_url’].'” alt=”‘.$l[‘language_code’].'” width=”18″ height=”12″ />
  5. Aggiungete i nomi delle lingue native e tradotte, se sono diverse: echo icl_disp_language($l[‘native_name’], $l[‘translated_name’]);

La funzione icl_disp_language() è creata da WPML. Il suo scopo è quello di controllare se i due argomenti (native_language_name, translated_language_name) sono diversi. Se lo sono, li restituisce entrambi, altrimenti li restituisce una sola volta.

Dovremmo anche aggiungere alcuni CSS per dare uno stile a questo elenco di lingue. Questo CSS centrerà l’elenco delle lingue nel piè di pagina e lo formatterà un po’:

#footer_language_list{
 margin-bottom: 25px;
 text-align: center;
}

#footer_language_list ul{
 list-style: none;
 margin:0;
 padding:0;
}

#footer_language_list ul li img{
 margin-right:5px;
}

#footer_language_list ul li{
 display:inline;
 margin:0 5px 0 5px;
 padding:0;
}

#footer_language_list ul li a, #footer_language_list ul li a:visited{
 color: #fff;
 text-decoration:underline;
}

#footer_language_list ul li a:hover, #footer_language_list ul li a:active{
 color: #fff;
}

Ecco il selettore di lingua:

Piè di pagina delle lingue
Piè di pagina delle lingue

Per aggiungere il vostro tema, aggiungete la chiamata a languages_list_footer al file footer.php .

* Nota: è possibile modificare orientamento da questo selettore di lingua orizzontale a un selettore di lingua verticale. Basta rimuovere l’istruzione display: inline dal CSS.

Selettore di lingua soltanto con le bandiere

Semplice funzione per la visualizzazione delle bandiere collegate alle traduzioni della pagina corrente.

Language selector with flags only
function language_selector_flags(){
    $languages = icl_get_languages('skip_missing=0&orderby=code');
    if(!empty($languages)){
        foreach($languages as $l){
            if(!$l['active']) echo '<a class="wpml-ls-item" href="'.$l['url'].'">';
            echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
            if(!$l['active']) echo '</a>';
        }
    }
}

Lo stile dell’output di questa funzione deve essere conferito separatamente. Ad esempio inserendo la funzione in un blocco div e definendo stili personalizzati per i tag img.

<div id="flags_language_selector"><?php language_selector_flags(); ?></div >

Il CSS:

#flags_language_selector img{
 margin:1px;
 border:1px solid #333;
}
Selettore di lingua con le bandiere

Selettore di lingua che mostra solo le lingue inattive

L’esempio di codice in questo articolo può essere utilizzato per creare un selettore di lingua con le seguenti caratteristiche:

  • Viene visualizzato orizzontalmente
  • Si collega a un menu specifico
  • Utilizza bandiere delle lingue e nomi nativi
  • Mostra solo lingue inattive

Dovreste aggiungere questo codice al file functions.php del vostro tema. Una soluzione ancora migliore è quella di aggiungerlo al file function.php del tema figlio del vostro tema.

Per impostazione predefinita, il codice funziona bene con i temi WordPress predefiniti (Twenty Sixteen, Twenty Fifteen, ecc.) con theme_location == ‘primary’.

Questo è il selettore di lingua nel tema Twenty Sixteen quando la lingua corrente è l'inglese.
Questo è il risultato nel tema Twenty Sixteen quando la lingua corrente è l’inglese.

Far funzionare il codice con il vostro tema

Altri temi possono utilizzare altre posizioni dei temi. Pertanto, se il codice non funziona per il vostro tema, per farlo funzionare seguite i seguenti passaggi.

  1. Rimuovete il commento alla riga In altre parole, rimuovete le doppie barre (//) all’inizio della riga contenente il codice di cui sopra.
  2. Visitate il front-end del vostro sito. Visualizzerete le posizioni del tema come [theme_location] => my-theme-location.
  3. Selezionate la posizione del menu desiderata, ad esempio my-theme-location e modificate la linea:
if ( $languages && $args->theme_location == 'primary') {

In:

if ( $languages && $args->theme_location == 'my-theme-location') {

Se non siete sicuri della posizione giusta da utilizzare, potete semplicemente provare le posizioni dei menu una per una.

  1. Annullate le modifiche apportate nel primo passaggio, in modo che la riga corrisponda al codice originale.

Il codice

// Filtrate wp_nav_menu() per aggiungere link aggiuntivi e altri output
// Mostrate soltanto l'altra lingua nel selettore di lingua
// Utilizzate il nuovo filtro: https://wpml.org/wpml-hook/wpml_active_languages/ 
add_filter('wp_nav_menu_items', 'new_nav_menu_items', 10, 2);
function new_nav_menu_items($items, $args) {
 // rimuovete il commento per trovare la posizione del menu del vostro tema
 //echo "args:<pre>"; print_r($args); echo "</pre>";

 // ottenete le lingue
 $languages = apply_filters( 'wpml_active_languages', NULL, 'skip_missing=0' );

 // add $args->theme_location == 'primary-menu' nel condizionale se vogliamo specificare la posizione del menu.

 if ( $languages && $args->theme_location == 'primary') {

 if(!empty($languages)){

 foreach($languages as $l){
 if(!$l['active']){
 // bandiera con il nome nativo
 $items = $items . '
<li class="menu-item"><a href="' . $l['url'] . '"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /> ' . $l['native_name'] . '</a></li>

';
 //solo bandiera
 //$items = $items . '
<li class="menu-item menu-item-language"><a href="' . $l['url'] . '"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /></a></li>

';
 }
 }
 }
 }

 return $items;
}

Sostituzione delle bandiere dei Paesi e modifica dei nomi delle lingue

WPML include una GUI per modificare le informazioni linguistiche. Andate su WPML->Languages (Lingue) e cliccate su Edit languages (Modifica lingue). Riuscirete a cambiare i nomi delle lingue, modificare i loro valori locali e scegliere diverse bandiere.

'skip_missing=0&orderby=name'