Come risolvere i problemi di stile e CSS dei selettori di lingua

Alcuni temi che includono generatori di menu personalizzati potrebbero non visualizzare correttamente i selettori di lingua di WPML. Qui forniamo i passaggi per la risoluzione dei problemi relativi allo stile dei selettori di lingua.

Per tua comodità, presentiamo anche una descrizione dettagliata del CSS utilizzato nel selettore di lingua nel menu di WPML, nel caso in cui tu stia cercando personalizzazioni avanzate.

Come risolvere i problemi di visualizzazione dei selettori di lingua a tendina e nel menu

Come in ogni processo di debug, ci sono alcuni passaggi iniziali per rilevare se qualcosa sta interferendo con il corretto rendering del tuo selettore di lingua.

1. Aggiungi temporaneamente un selettore di lingua nel footer, che ha un CSS molto semplice e funzionerà su quasi tutti i siti.
2. Rimuovi temporaneamente qualsiasi CSS personalizzato e usa il selettore di lingua di WPML con le sue impostazioni predefinite
3. Usa il debugger CSS del tuo browser e verifica se ci sono evidenti conflitti CSS. Se trovi la causa, puoi sovrascrivere lo stile CSS nella pagina WPML → Lingue, nella sezione Opzioni del selettore di lingua. Lì, fai clic sul link CSS aggiuntivo.

Se ci sono problemi tra il tema e WPML, il team di supporto di WPML lavorerà con il nostro team di compatibilità e l’autore del tema per fornirti una soluzione adeguata.

Classi CSS per lingua

Di seguito è riportato l’elenco delle classi CSS per ogni lingua:

• wpml-ls-slot-{slug}: ad es. “wpml-ls-slot-sidebar-1”.
• wpml-ls-item.
• wpml-ls-item-{language_code}: ad es. “wpml-ls-item-en”.
• wpml-ls-current-language: solo per l’elemento della lingua attuale.
• wpml-ls-menu-item: solo per i selettori di lingua nei menu.
• wpml-ls-first-item: per indirizzare il primo elemento della lingua nell’elenco.
• wpml-ls-last-item: per indirizzare l’ultimo elemento della lingua nell’elenco)

Se è necessario modificare le classi CSS per ogni lingua, WPML offre l’hook di filtro wpml_ls_model_language_css_classes.

Ad esempio, supponiamo che tu debba aggiungere una classe my-custom-item-class per ogni lingua. In tal caso, puoi aggiungere un codice come il seguente al file functions.php del tuo tema:

add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}

Classi CSS del wrapper del selettore di lingua

Di seguito è riportato l’elenco delle classi CSS per il wrapper del selettore di lingua:

• wpml-ls
• wpml-ls-{group}-{slug}: ad es. “wpml-ls-statics-footer”.
• wpml-ls-{template-slug}: ad es. “wpml-ls-legacy-dropdown-click”.
• wpml-ls-rtl: per le lingue RTL.
• wpml-ls-touch-device: questa classe viene aggiunta per i dispositivi mobili e tablet.

Nella tabella seguente mostriamo come vengono costruite le classi CSS a seconda di {group} e {slug}:

Come prima, se hai bisogno di aggiungere una classe CSS personalizzata per il wrapper del tuo selettore di lingua, puoi usare il nostro hook di filtro wpml_ls_model_css_classes . Un codice come il seguente nel file functions.php del tuo tema aggiungerà una classe CSS my-custom-wrapper-class:

add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}

Nota: WPML inietta solo alcuni elementi per l’opzione del selettore di lingua nei menu. Di conseguenza, non ha alcuna classe wrapper.

Personalizzare un selettore di lingua con il CSS

Possiamo aggiungere facilmente alcuni stili CSS personalizzati nella pagina WPML → Lingue, nella sezione Opzioni del selettore di lingua. Lì, fai clic sul link CSS aggiuntivo.

Esempio 1: Visualizzare la lingua attuale in grassetto

.wpml-ls-current-language {
font-weight: bold;
}

Esempio 2: Cambiare la dimensione del carattere solo per il selettore di lingua nel footer

.wpml-ls-statics-footer {
    font-size: 18px;
}

Esempio 3: Dare un po’ di margine a destra dopo l’ultimo elemento della lingua

.wpml-ls-last-item {
    margin-right: 10px;
}

Puoi anche combinare i selettori per avere un target migliore.

Esempio 4: Aggiungere il testo in grassetto per la lingua attuale del selettore di lingua nel footer

.wpml-ls-statics-footer .wpml-ls-current-language {
   font-weight: bold;
}

Esempio 5: Fissare la larghezza di un selettore di lingua in un menu

nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}