¿Cómo mostrar/ocultar contenidos en un idioma específico?

En este artículo, aprenderá a mostrar y/u ocultar contenidos en un idioma específico.

Si desea mostrar determinados contenidos sólo en un idioma concreto (por ejemplo, un botón con un enlace), siga los pasos que se indican a continuación:

1. Cree dos elementos diferentes

En su página web original, cree dos elementos:

• Uno para su idioma original
• Uno para la lengua traducida

Ambos elementos existirán en su versión original, pero sólo se mostrará uno a la vez gracias a una regla CSS.

2. Añada un selector CSS para cada elemento

Asigne un selector CSS único (clase o ID) a cada elemento. Por ejemplo

• link-en para la versión inglesa
• link-es para la versión en español

¿No está seguro de lo que es un selector CSS? Consulte la sección "¿Qué es un selector CSS?" más abajo.

3. Añada custom CSS

Una vez que haya añadido la clase/ID a los elementos que desea ocultar/mostrar, vaya a su Dashboard de Weglot > Seleccione su proyecto > Configuración > Conmutador de idioma e introduzca este código en el campoCustom CSS":

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

Cómo funciona:

• :not() es una pseudoclase CSS que significa "cuando NO es este idioma".
• Por ejemplo, html:not([lang="es"]) significa "ocultar este elemento cuando el idioma seleccionado no sea el español".

No lo olvide:

• Sustituya en y es con los códigos de idioma correctos para su sitio
• Sustituya .link-en y .link-es con sus nombres reales de clase o ID

¿No está seguro de cómo acceder a su código fuente? A continuación encontrará más información.

Si su idioma original es el inglés con un código corto en-US, éste es el código final que tendrá que utilizar:

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

Por último, si desea aplicar el código para un tercer idioma, como el alemán, puede añadir una sola línea de custom CSS. Tendrá el siguiente aspecto:

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. Información adicional

¿Qué es un selector CSS?

Los selectores CSS se utilizan para encontrar o seleccionar elementos HTML (elementos de sus páginas) a los que desee aplicar estilo, editar o, en nuestro caso, ocultar. Cuando añada contenido a su página web original, debería poder añadirle un selector CSS.

Por ejemplo, puede

- Busque un campo específico en función del CMS, la aplicación o el plugin que utilice para crear el contenido:

O

- Añada manualmente la clase o el ID por usted mismo directamente en el HTML, para que tenga este aspecto:

<a class="link-en">English button</a>
<a class="link-es">Botón en Español</a>

Después, tendrá que utilizar reglas CSS para ocultar el elemento que no deba mostrarse según el idioma seleccionado.

¿Cómo puedo acceder a mi código fuente?

Para acceder a su código fuente, puede hacer clic con el botón derecho del ratón en cualquier lugar de la página principal de su sitio web y hacer clic en "Ver código fuente de la página":