Menú
Un truquito de css bien chévere para los sitios web multi idiomas.

Un truquito de css bien chévere para los sitios web multi idiomas.

Recientemente, me encargaron modificar un sitio en WordPress, que está en tres idiomas. El principal es español, y gracias a WPML, está también en inglés y portugués. El problemita es que WPML, el Bentley de los plugin de traducción (tanto en calidad como en precio) no traducía algo tan simple como el texto de un botón. Pero a la vez, tan complicado como que el botón redirige a una url diferente por cada idioma.

WPML podría traducir el texto del botón, normalmente, pero asignar una url por idioma, es otra cosa. ¿Cómo podemos hacerlo? Podemos hacerlo con Javascript, por ejemplo. La estrategia sería crear tres botones cada uno con su texto y su link asociado, de los cuales solo uno estaría visible. Para eso usamos getElementById('IDdelBotón').style.display="block" (si es block la propiedad indicada) o "none", para ocultarla. En el caso presente, tendríamos que generar tres líneas de código para cada botón. Esto genera un impacto adicional en las métricas del sitio, y tiene el gran incoveniente de que no funciona cuando si el navegador tiene desactivado javascript. (Puede perfectamente suceder).

Mejor lo hacemos con CSS. De entrada, ya creamos los tres botones que van a estar, inicialmente, dentro del mismo <div>. Uno al lado del otro. Luego, con css, usamos la pseudo clase :lang() con el código de idioma respectivo. Por ejemplo:

#boton_es:lang(es) {
display: block;
}

#boton_es:lang(en) {
display: none;
}

Pero podemos hacer más bien



#boton_es:not:lang(es) {
display: none;
}

Y de esta manera, reducimos todo a tres instrucciones css. Resultado visual final: el mismo botón, que cambia su texto acorde con el idioma seleccionado. Y su link también.

¿Quieres verlo en acción, y jugar un poco con eso? Bueno, abre este link: https://cimmasuites.com.ar/

Gracias por leerme. Nos vemos pronto. Me gustaría conocer tus comentarios u observaciones al respecto.

Comentarios

No hay comentarios. Se el primero!