¿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 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 custom CSS
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{
display: none!important;
}
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 {
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 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, 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:
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":
