Un cliente me solicitó agregar la opción de cambio de idioma en el menú principal, deberá de aparecer la bandera perteneciente al idioma en la que se traducirá la página web, por lo que me di a la tarea de buscar opciones para mostrar de una forma gráfica y amigable de redireccionar al usuario hacia la versión traducida.
Lo primero que tienes que hacer es entrar a esta página, vamos a seleccionar las banderas de los lenguajes que necesitemos en este caso será Español e Inglés.
1.- Seleccionamos el tamaño de las banderas
2.- Descarga el archivo a nuestra computadora
Al descomprimir la carpeta podrás observar los siguientes archivos
Cuenta con la versión CSS normal y su versión minificada.
En este caso elegiré la versión CSS normal, a continuación te comparto el código
.flag {
display: inline-block;
width: 16px;
height: 11px;
background: url(‘flags.png’) no-repeat;
}
.flag.flag-mx {
background-position: 0 0;
}
.flag.flag-us {
background-position: -16px 0;
}
3.- Dirígete a tu página de wordpress, darás clic en personalizar /css adicional y pegaras el código:
.flag {
display: inline-block;
width: 16px;
height: 11px;
background: url(‘flags.png’) no-repeat;
}
.flag.flag-mx {
background-position: 0 0;
}
.flag.flag-us {
background-position: -16px 0;
}
Das clic en guardar, no desesperes a un no aparecerá tu icono con bandera de lenguaje en el menú hasta que lo demos de alta.
Enseguida da clic en enlaces personalizados
En Etiqueta de personalización vas a incluir la siguiente ruta
¡Ojo! no olvidar subir la bandera “flags.png” a nuestra galería de wordpress
Y listo podemos ver nuestro menú con los beneficios de CSS y un Flag PNG en WordPress.
Espero te sirve este minitutorial, lo probe en responsive y se ve bastante bien si usas Generatepress, no lo he probado en otras plantillas me gustaria me dieras tu feedback para ver si ocupo actualizar el post.
¡Que pases un lindo dia, saludos !
