Selettore personalizzato delle lingue

Amir

Aggiornato: Maggio 22, 2024

Quando sviluppi siti multilingue con WPML, potresti aver bisogno di un selettore delle lingue personalizzato. Scopri come farlo con alcuni semplici PHP e CSS.

WPML ti permette di aggiungere selettori delle lingue ai tuoi menu, Widget, 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 ti mostreremo come aggiungere un selettore flottante delle lingue. Un selettore delle lingue fluttuante ha un aspetto fantastico e rende più facile per i tuoi clienti visualizzare il tuo sito nella loro lingua.

Un sito che utilizza il selettore fluttuante delle lingue

Segui questi tre passaggi principali:

Aggiungi il codice PHP che visualizza il selettore delle lingue
Crea il tuo selettore delle lingue con i CSS
Aggiornare le impostazioni del selettore delle lingue

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

La parte dello styling

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.

Utilizza i seguenti passaggi per aggiungere il codice CSS:

Vai a WPML → Lingue.
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 i bordi arrotondati e il box-shadow. Ovviamente puoi personalizzarlo come vuoi.

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, devi regolare alcune impostazioni in modo che il selettore delle lingue visualizzi solo le bandiere.

Utilizza i seguenti passaggi:

Vai a WPML → Lingue.
Scorri in basso fino a Selettori personalizzati delle lingue e clicca su Abilita.
Clicca sul pulsante Personalizza.
Per Cosa includere nel selettore delle lingue, seleziona Bandiera e deseleziona le altre opzioni.
Clicca su Salva.

Language switcher options — Visualizzare solo la bandiera nel selettore fluttuante delle lingue

Ecco fatto! Ora dovresti avere un bel selettore delle lingue personalizzato sul sito web:

Horizontal language switcher — Il selettore delle lingue sul Frontend

Bonus: selettore verticale fluttuante delle lingue

Potresti anche creare un selettore verticale delle lingue, come nella schermata 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;
}