WPML offre il suo selettore di lingua, implementato come elenco di lingue a discesa. È abbastanza flessibile, ma non sempre a sufficienza.

Potete creare i vostri selettori di lingua personalizzati e inserirli nel tema. Vi mostrerò come aggiungere un elenco di lingue disponibili per i post e un elenco di lingue per il piè di pagina.

Ottenere l’elenco delle (altre) lingue

Per ottenere un elenco di traduzione per ogni pagina, utilizzate icl_get_languages(). Uso:

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), (predefinito: id)
* DIR=asc/desc (predefinito: asc)
* link_empty_to = str (predefinito: vuoto, funziona con skip_missing=0 e consente di utilizzare i link personalizzati per le lingue che non hanno traduzioni dell’elemento corrente. {%lang} può essere usato come segnaposto per il codice della lingua)

Note:

  • Il parametro skip_missing indica alla funzione come gestire le lingue senza traduzioni.
  • La combinazione di orderby e order consente di creare selettori di lingua a discesa o selettori di lingua in cui le lingue vengono visualizzate sempre nella stessa posizione.
  • L’ordine custom può essere definito nell’area di amministrazione di WordPress alla voce WPML » Lingue » Opzioni selettore di lingua

La funzione restituisce una matrice con le voci per lingua. Ad esempio, per un sito di WordPress disponibile in inglese, francese e italiano, restituirà:

Array
(
 [0] => 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
  )

 [1] => 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
  )

 [2] => 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 la sua matrice di parametri, utilizzabili dalla vostra funzione del tema per creare qualsiasi selettore di lingua.

  • id: id di riferimento interno
  • active: questa è la lingua attualmente attiva (giustamente, una sola lingua è attiva)
  • 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 all’immagine PNG con la bandiera del Paese
  • url: il link alla traduzione in quella lingua
  • missing: 1 se manca la traduzione di quell’elemento, 0 se esiste.

Gestire le traduzioni mancanti

Alcune pagine potrebbero non essere tradotte in tutte le lingue. Con icl_get_languages potete indicare cosa restituire per le lingue a cui manca la traduzione.

Se ‘skip_missing=1’, queste lingue non compariranno tra i risultati. Se ‘skip_missing=0’, compariranno tutte le lingue e le lingue a cui manca la traduzione verranno reindirizzate alla pagina iniziale della relativa lingua.

Come utilizzare i selettori di lingua nelle funzioni del vostro tema

Potete creare i vostri selettori di lingua in qualsiasi modo. Ecco due usi popolari.

Le funzioni PHP esemplificative che mostriamo qui devono essere integrate al vostro file functions.php (nella cartella del tema), non devono essere aggiunte al plug-in.

Questo post è disponibile anche in…

Supponete di voler aggiungere una linea, in fondo (o in cima) ad ogni post, per indicare in quali altre lingue è disponibile. Questa funzione restituirà solamente i post tradotti esistenti e se le traduzioni non sono disponibili, non mostrerà nulla.

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

Questa funzione:

  1. Ottiene un elenco di lingue da WPML – $languages = icl_get_languages(‘skip_missing=1’);
  2. Verifica che vi sia più di una lingua per questo post – if(1 < count($languages))
  3. Crea i risultati, saltando la lingua attualmente visualizzata – if(!$l[‘active’])

Note:

  1. Il messaggio passa per gettext. Questo è molto importante, perché consente a questo messaggio, che va ad aggiungersi ai post delle diverse lingue, di apparire nella lingua corretta:  __(“Questo post è disponibile anche in: “);
  2. I nomi delle lingue utilizzati sono i nomi delle lingue tradotti. Questo garantirà che l’intero sito sia scritto nella lingua corretta: $l[‘translated_name’]

Il risultato è il seguente:

Messaggio sul post disponibile in altre lingue
Messaggio sul post disponibile in altre lingue

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

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

Anche se avete un selettore di lingua in cima alla pagina, è buona norma aggiungere un elenco dei nomi delle lingue e delle bandiere nel piè di pagina. Molte persone scorrono subito in fondo alla pagina per farsi una panoramica generale, quindi posizionarvi un selettore di lingua migliorerà senz’altro la navigazione dei 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:

  1. Se è presente una lingua di traduzione qualsiasi, crea un DIV e inizia un elenco non ordinato: if(!empty($languages)){ echo ‘<div id=”footer_language_list”><ul>’;
  2. Passa in rassegna ciascuna lingua e le aggiunge come voci dell’elenco.
  3. Se non è la lingua attiva, si collega anche a quella pagina in quella lingua: if(!$l[‘active’]) echo ‘<a href=”‘.$l[‘url’].'”>’;
  4. Aggiunge una bandiera della lingua: <img src=”‘.$l[‘country_flag_url’].'” alt=”‘.$l[‘language_code’].'” width=”18″ height=”12″ />
  5. Aggiunge sia il nome nativo della lingua che quello tradotto, se sono diversi: echo icl_disp_language($l[‘native_name’], $l[‘translated_name’]);

La funzione icl_disp_language() viene creata da WPML. La sua funzione è verificare se i due argomenti (native_language_name, translated_language_name) sono diversi. Se lo sono, li restituisce entrambi, altrimenti ne restituisce uno solo.

Dobbiamo anche aggiungere un CSS per dare forma a questo elenco di lingue. Questo CSS centrerà l’elenco delle lingue nel vostro piè di pagina e gli conferirà un certo formato:

#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 aggiungerlo al vostro tema, aggiungete la chiamata a languages_list_footer al file footer.php.

* Nota: potete cambiare facilmente questo selettore di lingua orizzontale con un selettore di lingua verticale. Sarà sufficiente rimuovere l’istruzione display: inline dal CSS.

Selettore di lingua composto solamente dalle bandiere

Semplice funzione per visualizzare le bandiere collegate alle traduzioni della pagina corrente.

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 href="'.$l['url'].'">';
            echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
            if(!$l['active']) echo '</a>';
        }
    }
}

I risultati di questa funzione devono essere configurati a parte. Ad esempio, posizionando la funzione in un blocco div e definendo gli 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 a bandiera

Sostituire le bandiere dei Paesi e modificare i nomi delle lingue

WPML comprende un’interfaccia grafica utente per modificare le informazioni delle lingue. Andate su WPML->Lingue e cliccate su Modifica lingue. Riuscirete a modificare i nomi delle lingue, le loro impostazioni locali e scegliere diverse bandiere.

'skip_missing=0&orderby=name'