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.

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

Primeiro, crie dois elementos diferentes no seu sítio Web original. Um elemento será para a sua língua original e o segundo será para a língua para a qual pretende traduzir. Estes dois elementos estarão presentes na versão original, mas nunca serão apresentados ao mesmo tempo devido a uma solução alternativa CSS (mais informações abaixo).

2. Adicionar um seletor CSS para cada elemento

Terá de adicionar um seletor CSS específico (classe ou ID) para cada elemento. Por exemplo, "link-en" para o ícone que pretende ligar ao URL em inglês e "link-es" para o ícone ligado ao URL em espanhol. Se não sabe o que é um seletor CSS, encontrará mais informações abaixo.

3. Adicionar algumas CSS personalizadas

Depois, vá ao seu Weglot Dashboard > Selecione o seu projeto > Definições > Language Switcher e introduza este código no campo "Custom CSS":

html:not([lang="en"]) .link-en{   
   display: none!important; 
}
html:not([lang="es"]) .link-es {   
   display: none!important; 
}

Aqui, a propriedade :not() é uma pseudo-classe de negação que corresponde a um elemento que não está representado.

Por exemplo, a condição html:not([lang="es"]) significa simplesmente "quando a língua não é o espanhol". Isto significa que o código dará instruções ao seu sítio Web para esconder esse elemento específico quando a língua não é o espanhol.

Não se esqueça de substituir as línguas certas e as classes certas no código acima pelas suas respectivas línguas. Além disso, certifique-se de que as abreviaturas "en" e "es" são as que está a utilizar.

Para encontrar o código da sua língua original, tem de aceder ao seu código fonte. O código é apresentado na parte superior:

Não sabe como aceder ao seu código-fonte? Encontre mais informações abaixo.

Depois, 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. Informações complementares

O que é um seletor CSS?

Os selectores CSS são utilizados para encontrar ou selecionar os elementos 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:

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":