WPML offre un selettore di lingua facile da usare, ma a volte potresti non volerlo mostrare in tutte le pagine. Scopri come mostrarlo o nasconderlo solo in pagine specifiche.
Puoi farlo facilmente con poche righe di CSS.
Mostrare il selettore di lingua solo in pagine specifiche
Passaggio 1: nascondere il selettore di lingua in tutte le pagine
Per prima cosa, devi verificare quale classe utilizza il nostro selettore di lingua.
Puoi verificarlo usando gli Strumenti per sviluppatori del browser:
- Visita il tuo sito sul front-end e premi il tasto F12 sulla tastiera.
- Usa lo strumento “ispeziona” per selezionare il selettore di lingua e ne comparirà il markup HTML.
Ecco due classi comuni per un selettore di lingua:
- La classe wpml-ls-menu-item quando il selettore appare in un menu
- La classe wpml-ls quando il selettore appare nel footer
Una volta individuata la classe corretta, vai alla pagina Aspetto → Personalizza , fai clic su CSS aggiuntivo e aggiungi il seguente CSS al tuo sito.
Nascondere il selettore di lingua nel menu
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}In questo modo il selettore di lingua verrà nascosto in tutte le pagine.
In alternativa, puoi aggiungere queste regole di stile al file style.css del tuo tema, ma assicurati di usare un tema child. Altrimenti, il tuo stile personalizzato andrà perso quando aggiorni il tema.
Per informazioni dettagliate sulle classi CSS del selettore di lingua, visita la nostra pagina sullo stile CSS per i selettori di lingua.
Passaggio 2: mostrare il selettore di lingua in una pagina specifica
Nel passaggio successivo, devi aggiungere un altro snippet CSS per mostrare il selettore di lingua solo nelle pagine che desideri.
WordPress aggiunge automaticamente classi specifiche al tag body di ogni pagina. Questo ti permette di agire sul selettore di lingua di una pagina specifica.
Per trovare la classe, apri la pagina in cui vuoi mostrare il selettore di lingua sul front-end. Anche in questo caso, usa lo strumento di ispezione del browser e cerca il tag body.
Vedrai qualcosa di simile a questo:
Trovare la classe id
<body class="page-template-default page page-id-2 logged-in admin-bar wp-embed-responsive is-light-theme singular has-main-navigation customize-support">
In questo caso, la classe page-id-2 viene aggiunta solo a questa pagina specifica. Il numero rappresenta l’ID di questa pagina e puoi usarlo per costruire il tuo snippet.
Lo snippet completo dovrebbe avere questo aspetto:
Nascondere il selettore di lingua nel menu – completo
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}
/*Display Language Switcher only in the page with ID 2*/
body.page-id-2 .wpml-ls-menu-item {
visibility: visible !important;
}
body.page-id-2 .wpml-ls {
visibility: visible !important;
}Ricorda di sostituire la classe page-id-2 con la classe della tua pagina.
Ecco alcune delle classi specifiche che puoi usare:
- page-id-X: usata per le pagine (sostituisci X con l’ID della pagina)
- postid-X: usata per gli articoli (sostituisci X con l’ID dell’articolo)
- home: usata per la homepage
- single-post: usata per tutti gli articoli (non uno specifico)
- page: usata per tutte le pagine (non una specifica)
Nascondere il selettore di lingua solo in pagine specifiche
Nascondere il selettore di lingua in pagine specifiche è molto simile ai passaggi precedenti. Ma invece di nasconderlo in tutte le pagine, lo nasconderai solo in una pagina specifica.
Per farlo, ti basta individuare la classe specifica della pagina e usarla per nascondere il selettore di lingua in quella pagina.
Il tuo snippet CSS dovrebbe avere questo aspetto:
Nascondere il selettore di lingua solo nella pagina con ID 2
/*Hide Language Switcher only on the page with ID 2*/
/*Menu Language Switcher*/
body.page-id-2 .wpml-ls-menu-item {
visibility: hidden !important;
}
/*Footer Language Switcher*/
body.page-id-2 .wpml-ls {
visibility: hidden !important;
}Ricorda di sostituire la classe page-id-2 con la tua classe specifica.