O WPML fornece um seletor de idiomas fácil de usar, mas às vezes você não quer que ele apareça em todas as páginas. Aprenda como exibi-lo ou ocultá-lo apenas em páginas específicas.
Você pode fazer isso facilmente usando algumas linhas de CSS.
Como exibir o seletor de idiomas apenas em páginas específicas
Passo 1: Ocultar o seletor de idiomas em todas as páginas
Primeiro, você precisa verificar qual classe o nosso seletor de idiomas está usando.
Você pode verificar isso usando as Ferramentas de Desenvolvedor do navegador:
- Acesse o seu site no front-end e pressione a tecla F12 no seu teclado.
- Use a ferramenta “inspecionar” para selecionar o seletor de idiomas e a marcação HTML dele aparecerá.
Estas são duas classes comuns de seletor de idiomas:
- Classe wpml-ls-menu-item quando o seletor aparece em um menu
- Classe wpml-ls quando o seletor aparece no rodapé
Assim que você souber a classe correta, vá para a página Aparência → Personalizar , clique em CSS adicional e adicione o seguinte CSS ao seu site.
Ocultar o seletor de idiomas do menu
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}Isso ocultará o seletor de idiomas em todas as páginas.
Como alternativa, você pode adicionar essas regras de estilo ao arquivo style.css do seu tema, mas certifique-se de usar um tema filho. Caso contrário, seus estilos personalizados serão perdidos quando você atualizar o tema.
Para obter informações detalhadas sobre as classes CSS do seletor de idiomas, visite nossa página sobre estilização CSS para seletores de idiomas.
Passo 2: Exibir o seletor de idiomas em uma página específica
No próximo passo, você precisa adicionar outro trecho de CSS para exibir o seletor de idiomas apenas nas páginas desejadas.
O WordPress adiciona automaticamente classes específicas à tag body de cada página. Isso permite que você direcione o seletor de idiomas em uma página específica.
Para encontrar a classe, abra a página na qual você quer exibir o seletor de idiomas no front-end. Novamente, use a ferramenta de inspeção do navegador e procure a tag body.
Você verá algo assim:
Encontrar a classe de 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">
Neste caso, a classe page-id-2 é adicionada apenas a esta página específica. O número representa o ID desta página e você pode usá-lo para criar o seu trecho.
O trecho completo deve ficar assim:
Ocultar o seletor de idiomas do 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;
}Lembre-se de substituir a classe page-id-2 pela classe da sua página.
Veja algumas das classes específicas que você pode usar:
- page-id-X: Usado para páginas (substitua o X pelo ID da página)
- postid-X: Usado para posts (substitua o X pelo ID do post)
- home: Usado para a página inicial
- single-post: Usado para todos os posts (não um específico)
- page: Usado para todas as páginas (não uma específica)
Como ocultar o seletor de idiomas apenas em páginas específicas
Ocultar o seletor de idiomas em páginas específicas é muito parecido com os passos anteriores. Mas em vez de ocultá-lo em todas as páginas, você o ocultará apenas em uma página específica.
Para isso, você só precisa obter a classe específica da página e, em seguida, usá-la para ocultar o seletor de idiomas dessa página.
O seu trecho de CSS deve ficar assim:
Ocultar o seletor de idiomas apenas na página com 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;
}Lembre-se de substituir a classe page-id-2 pela sua classe específica.