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

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-en para a versão inglesa
• link-es para 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 en e es com os códigos linguísticos corretos para o seu sítio
• Substituir .link-en e .link-es com 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. Informações complementares

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