Skip Navigation
Updated
August 16, 2021

Quando si sviluppano siti multilingue con WPML, potrebbe essere necessario un selettore di lingua personalizzato. Imparate come effettuare questa operazione con alcuni semplici PHP e CSS.

In questo tutorial mostreremo come aggiungere un selettore di lingua fluttuante. Un selettore di lingua fluttuante ha un bell’aspetto e semplifica ai vostri clienti la visualizzazione del vostro sito nella loro lingua.

Un sito che utilizza il selettore di lingua fluttuante

Seguite questi tre passaggi principali:

  1. Aggiungete il codice PHP che esegue il rendering del selettore di lingua
  2. Date uno stile al vostro selettore di lingua con il CSS
  3. Aggiornate le impostazioni del vostro selettore di lingua

La parte del PHP

Il primo passo è aggiungere il codice PHP responsabile del rendering del selettore di lingua sulla vostra pagina. Per questo create una funzione che aggiunge un contenitore div con il selettore di lingua al suo interno. Possiamo utilizzare l’azione wpml_add_language_selector per eseguire il rendering del selettore di lingua

In questo esempio vogliamo che il nuovo selettore di lingua sia visualizzato nel piè di pagina, quindi usiamo la nostra nuova funzione con l’hook wp_footer di WordPress.

Il codice PHP completo avrà il seguente aspetto:

Language switcher PHP
//WPML - Add a floating language switcher to the footer
 add_action('wp_footer', 'wpml_floating_language_switcher'); 
 
 function wpml_floating_language_switcher() { 
    echo '<div class="wpml-floating-language-switcher">';
        //PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

Potete copiarlo e aggiungerlo al file functions.php del vostro tema (figlio).

La parte dello stile

Con il codice precedente in atto, abbiamo già un nuovo selettore di lingua aggiunto al piè di pagina del nostro sito web. Ora è il momento di personalizzarlo in modo che fluttui nell’angolo in basso a destra del sito web. Potete effettuarlo utilizzando l’attributo CSS position: fixed.

Utilizzate i seguenti passi per aggiungere il codice CSS:

  1. Andate su WPML → Languages (Lingue).
  2. Scorrete verso il basso alle opzioni del selettore di lingua ed espandete la sezione CSS aggiuntivo.

In alternativa potete aggiungere questo codice CSS andando su Appearance (Aspetto) → Customize (Personalizza) e cliccate su Additional CSS (CSS aggiuntivo).

L’esempio seguente aggiunge alcune personalizzazioni extra come bordi arrotondati e ombreggiature della casella. Naturalmente potete personalizzarlo a piacere.

Language Switcher Styling
/*Removing some default CSS from our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

La parte delle impostazioni

Infine è necessario regolare alcune impostazioni in modo che il selettore di lingua visualizzi solo le bandiere.

Utilizzate le seguenti fasi:

  1. Andate su WPML → Languages (Lingue).
  2. Scorrete in basso fino a Selettori di lingua personalizzati e clicca su Enable (Attiva).
  3. Cliccate il pulsante Customize (Personalizza).
  4. Per What to include in the language switcher (Cosa includere nel selettore di lingua), selezionate Flag (Bandiera) e deselezionate le altre opzioni.
  5. Cliccate Save (Salva).
Language switcher options
Visualizzate solo la bandiera nel selettore di lingua fluttuante

Questo è quanto! Ora dovreste avere un bel seelettore di lingua personalizzato sul sito web:

Horizontal language switcher
Il selettore di lingua sul front end

Bonus: selettore di lingua verticale fluttuante

Invece potreste anche creare un selettore di lingua verticale, come lo screenshot qui sotto:

Vertical language switcher
Selettore di lingua verticale

Per questo basta sostituire il CSS precedente con il seguente codice:

Vertical Language Switcher CSS
/*Removing some default CSS our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
.wpml-floating-language-switcher .wpml-ls-item {
  display: block;
}
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 20px;
  right: 0px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px 0 0 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  z-index: 999;
}