Como apresentar/ocultar conteúdos numa língua específica?
Neste artigo, ficará a saber como apresentar e/ou ocultar conteúdos numa língua específica.
1. Criar 2 elementos diferentes
2. Adicionar selectores CSS para cada elemento
3. Adicionar algumas CSS personalizadas
Se pretender apresentar determinado conteúdo apenas numa língua específica (por exemplo, um botão com uma ligação), siga os passos abaixo:
1. Criar dois elementos diferentes
No seu sítio Web original, crie dois elementos:
- Um para a sua língua original
- Um para a língua traduzida
Ambos os elementos existirão na sua versão original, mas apenas um será apresentado de cada vez graças a uma regra CSS.
2. Adicionar um seletor CSS para cada elemento
Atribua um seletor CSS único (classe ou ID) a cada elemento. Por exemplo:
link-enpara a versão inglesalink-espara a versão espanhola
Não tem a certeza do que é um seletor CSS? Consulte a secção "O que é um seletor CSS?" abaixo.
3. Adicionar algumas CSS personalizadas
Depois de ter adicionado a classe/ID aos elementos que pretende ocultar/apresentar, vá ao seu Painel de Controlo Weglot > Selecione o seu projeto > Definições > Language Switcher e introduza este código no campo "CSS personalizado":
html:not([lang="en"]) .link-en{
display: none!important;
}
html:not([lang="es"]) .link-es {
display: none!important;
}
Como funciona:
:not()é uma pseudo-classe CSS que significa "quando NÃO é esta língua".- Por exemplo,
html:not([lang="es"])significa "ocultar este elemento quando a língua selecionada não é o espanhol".
Não se esqueça de:
- Substituir
eneescom os códigos linguísticos corretos para o seu sítio - Substituir
.link-ene.link-escom os seus nomes reais de classe ou ID
Não sabe como aceder ao seu código-fonte? Encontre mais informações abaixo.
Se a sua língua original for o inglês com um código curto en-US, aqui está o código final que terá de utilizar:
html:not([lang="en-US"]) .link-en {
display: none!important;
}
html:not([lang="es"]) .link-es {
display: none!important;
}
Finalmente, se pretender aplicar o código a uma terceira língua, como o alemão, pode adicionar apenas uma linha de CSS personalizada. O aspeto será o seguinte:
html:not([lang="en-US"]) .link-en {
display: none!important;
}
html:not([lang="es"]) .link-es {
display: none!important;
}
html:not([lang="de"]) .link-de {
display: none!important;
}
4. Aplicar CSS numa página específica
Às vezes, pode ser necessário aplicar CSS personalizado apenas em determinadas páginas do seu site. Por exemplo, pode ser necessário ocultar o seletor Weglot em URLs que contenham /widget , ou excluir elementos específicos apenas nas páginas do blog.
Isso pode ser feito usando seletores CSS avançados que dependem da página URL canónica ou hreflang etiquetas disponível na página <head> .
Usando a pseudoclasse CSS :has() Combinado com seletores de atributos, o CSS pode "detectar" se o URL da página atual contém um caminho específico.
⚠️ Este método só funciona se o seu site incluir canonical ou hreflang tags no DOM. Sem elas, não é possível direcionar URLs usando apenas CSS.
Exemplo: Ocultar o seletor Weglot apenas em /widget páginas
html:has(head link[rel="alternate"][hreflang="en"][href*="/widget"]) .weglot-container { display: none; }
Isso ocultará o seletor de idiomas Weglot apenas nas páginas que contêm /widget , mantendo-o visível em todos os outros locais.
5. Informações adicionais
O que é um seletor CSS?
Os selectores CSS são utilizados para encontrar ou selecionar elementos HTML (elementos nas suas páginas) que pretende estilizar, editar ou, no nosso caso, ocultar. Quando adiciona conteúdo ao seu sítio Web original, deve poder adicionar-lhe um seletor CSS.
Por exemplo, é possível:
- Encontre um campo dedicado, dependendo do CMS, aplicação ou plug-in que está a utilizar para criar o conteúdo:
Ou
- Adicione manualmente a classe ou o ID diretamente no HTML, para que tenha o seguinte aspeto:
<a class="link-en">English button</a> <a class="link-es">Botón en Español</a>
Depois disso, terá de utilizar regras CSS para ocultar o elemento que não deve ser apresentado de acordo com a língua selecionada.
Como posso aceder ao meu código-fonte?
Para aceder ao seu código-fonte, pode clicar com o botão direito do rato em qualquer parte da página inicial do seu sítio Web e clicar em "Ver código-fonte da página":
