Selettore di lingua personalizzato

Quando sviluppi siti multilingue con WPML, potresti aver bisogno di un selettore di lingua personalizzato. Scopri come farlo con del semplice codice PHP e CSS.

WPML ti permette di aggiungere selettori di lingua ai tuoi menu, widget, footer e ai siti che utilizzano l’Editor del sito (precedentemente noto come Full Site Editing), completi di opzioni di personalizzazione e bandiere integrate. Tuttavia, potresti aver bisogno di qualcosa di più particolare per il tuo sito.

In questo tutorial, ti mostreremo come aggiungere un selettore di lingua fluttuante. Un selettore di lingua fluttuante è bello da vedere e consente ai tuoi clienti di visualizzare più facilmente il tuo sito nella loro lingua.

Segui questi tre passaggi principali:

1. Aggiungi il codice PHP che esegue il rendering del selettore di lingua
2. Personalizza lo stile del tuo selettore di lingua con il CSS
3. Aggiorna le impostazioni del tuo selettore di lingua

La parte in PHP

Il primo passaggio consiste nell’aggiungere il codice PHP responsabile del rendering del selettore di lingua nella tua pagina. Per farlo, crea una funzione che aggiunge un contenitore div con all’interno il selettore di lingua. 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 venga visualizzato nel footer, quindi utilizziamo la nostra nuova funzione con l’hook wp_footer di WordPress.

Il codice PHP completo avrà questo aspetto.

//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 (child).

La parte di stile

Una volta inserito il codice precedente, abbiamo già un nuovo selettore di lingua nel footer del nostro sito. Ora è il momento di personalizzarlo in modo che sia fluttuante nell’angolo in basso a destra del sito. Puoi farlo utilizzando l’attributo CSS position: fixed.

Segui questi passaggi per aggiungere il codice CSS:

1. Vai su WPML → Impostazioni → Selettori di lingua.
2. Nella scheda Opzioni del selettore di lingua, espandi CSS aggiuntivo.

In alternativa, puoi aggiungere questo codice CSS andando su Aspetto → Personalizza e facendo clic su CSS aggiuntivo.

L’esempio seguente aggiunge alcune personalizzazioni extra come bordi arrotondati e box-shadow. Naturalmente, puoi personalizzarlo come preferisci.

/*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, devi regolare alcune impostazioni in modo che il selettore di lingua visualizzi solo le bandiere.

Segui questi passaggi:

1. Vai su WPML → Impostazioni → Selettori di lingua → Selettori di lingua personalizzati.
2. Scorri verso il basso fino a Selettori di lingua personalizzati e fai clic su Abilita.
3. Fai clic sul pulsante Personalizza.
4. Alla voce Cosa includere nel selettore di lingua, lascia spuntata l’opzione Bandiera e deseleziona Nome nativo della lingua, Nome della lingua nella lingua attuale e Lingua attuale.
5. Fai clic su Salva.

Ecco fatto! Ora dovresti avere un bel selettore di lingua personalizzato sul sito:

Bonus: selettore di lingua fluttuante verticale

In alternativa, potresti creare un selettore di lingua verticale, come nello screenshot qui sotto:

Per farlo, sostituisci semplicemente il CSS precedente con il codice seguente:

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