blog banner

Mostrar un estilo css según idioma en WPML

La solución simplemente es usar el selector de atributos de idioma [lang=»en-US»] de la etiqueta html general para separar los estilos. Este método también serviría para otros sistemas de traducción siempre y cuando tengan este atributo.

Alguna vez me he encontrado con la necesidad de cambiar algún elemento css según el idioma de la web. Con frecuencia trabajo con WPML, que es de los sistemas de traducción para WordPress más completos y he tenido que buscar una manera de modificar un elemento concreto únicamente en un idioma.

Este entorno no agrega ninguna clase en el código HTML que indique en qué idioma nos encontramos por lo que no es evidente cómo realizar estos cambios. Así que el método que he acabado usando es acceder al elemento a través del selector de atributo «lang» del elemento html principal de la web que sí que contiene un valor que identifica el idioma.

De este modo podemos tener el siguiente css:

html[lang="en-US"] a{color:#f00}
html[lang="es-ES"] a{color:#00f}

De este modo tendremos todos los enlaces genéricos en inglés en rojo mientras los que estén en las páginas de español estarán en azul.

Es un método simple pero que nos puede resolver bastantes problemas. Yo lo he usado para reemplazar alguna imagen superpuesta a otros elementos y que contenía un texto de oferta, mostrando el idioma correspondiente.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *