Salta la navigazione
Pagina iniziale » Documentazione di WPML » Guida introduttiva » Configurazione della lingua » Opzioni del selettore di lingua » Selettore personalizzato delle lingue

Selettore personalizzato delle lingue

Amir
Aggiornato
Dicembre 18, 2023

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.

WPML ti permette di aggiungere selettori delle lingue ai tuoi menu, Widgets, piè di pagina e ai siti utilizzando l’Editor del sito (precedentemente noto come Full Site Editing) completo di opzioni di personalizzazione e bandiere personalizzate. Ma potresti aver bisogno di qualcosa di più speciale per il tuo sito.

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 fluttuante delle lingue

Seguite questi tre passaggi principali:

  1. Aggiungi il codice PHP che rende il selettore delle lingue
  2. Crea il tuo selettore delle lingue con i CSS
  3. Aggiornare le impostazioni del selettore delle lingue

La parte del PHP

Il primo passo consiste nell’aggiungere il codice PHP responsabile del rendering del selettore delle lingue sulla tua pagina. Per questo, crea una funzione che aggiunge un contenitore div con il selettore delle lingue al suo interno. Possiamo utilizzare il metodo wpml_add_language_selector per rendere il selettore delle lingue.

In questo esempio, vogliamo che il nuovo selettore delle lingue venga visualizzato nel piè di pagina, quindi utilizziamo la nostra nuova funzione con il gancio 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>'; 
}

Puoi copiarlo e aggiungerlo al file functions.php del tuo tema (figlio).

La parte dello stile

Con il codice precedente, abbiamo già aggiunto un nuovo selettore delle lingue nel 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. Puoi farlo utilizzando l’attributo CSS position: fixed.

Utilizzate i seguenti passi per aggiungere il codice CSS:

  1. Vai a WPML → Lingue.
  2. Scorri verso il basso fino a Opzioni selettore delle lingue ed espandi la sezione CSS aggiuntivi .

In alternativa, puoi aggiungere questo codice CSS andando su Aspetto → Personalizzato e cliccando su 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. Vai a WPML → Lingue.
  2. Scorri in basso fino a Selettori personalizzati delle lingue e clicca su Abilita.
  3. Clicca sul pulsante personalizzato.
  4. Per Cosa includere nel selettore delle lingue, seleziona Bandiera e deseleziona le altre opzioni.
  5. Clicca su Salva.
Language switcher options
Visualizzare solo la bandiera nel selettore fluttuante delle lingue

Ecco fatto! Ora dovreste avere un bel seelettore di lingua personalizzato sul sito web:

Horizontal language switcher
Il selettore delle lingue sul Frontend

Bonus: selettore di lingua verticale fluttuante

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

Vertical language switcher
Selettore verticale delle lingue

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;
}