¿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.

2. Añada selectores CSS para cada elemento

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 primer lugar, cree dos elementos diferentes en su página web original. Un elemento será para su idioma original, y el segundo será para el idioma al que desea traducirlo. Estos dos elementos estarán presentes en la versión original, pero nunca se mostrarán al mismo tiempo debido a una solución de CSS (más información a continuación).

2. Añada un selector CSS para cada elemento

Tendrá que añadir un selector CSS específico (clase o ID) para cada elemento. Por ejemplo, "link-en" para el icono que desea vincular a la URL en inglés y "link-es" para el icono vinculado a la URL en español. Si no sabe lo que es un selector CSS, encontrará más información a continuación.

3. Añada un CSS personalizado

A continuación, vaya a su Weglot Dashboard > Seleccione su proyecto > Ajustes > Conmutador de idioma e introduzca este código en el campo "Custom CSS":

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

Aquí, la propiedad :not() es una pseudoclase de negación que coincide con un elemento que no está representado.

Por ejemplo, la condición html:not([lang="es"]) significa simplemente "cuando el idioma no es el español". Eso significa que el código indicará a su sitio web que ocultar ese elemento concreto cuando el idioma no es el español.

No olvide sustituir los idiomas y las clases correctas en el código anterior por sus respectivos idiomas. Asegúrese también de que las abreviaturas 'en' y 'es' son las que está utilizando.

Para encontrar el código de su idioma original, tendrá que ir a su código fuente. El código aparece en la parte superior:

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

Entonces, 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,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,html:not([lang="es"]) .link-es, 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 los elementos que desea estilizar, editar o, en nuestro caso, ocultar. Cuando añada contenido a su sitio web original, debería poder añadirle un selector CSS.

Por ejemplo, puede

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

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

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