¿Cómo colocar un icono-bandera en el menú para un cambio de idioma en WordPress?

Bandera de mexico
Luis Cota

Luis Cota

¡Hola! mi nombre es Luis Cota me dedico a diseñar páginas web desde el año 2007, Soy Diseñador Gráfico, fundador de LAPMEDIA un Studio Creativo en México.

Si te gusta, compártelo

Compartir en facebook
Compartir en linkedin
Compartir en twitter
Compartir en email

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 !

servidores wordpress

Recibe las últimas noticias

No te pierdas de consejos en Marketing, Diseño web, posicionamiento SEO y mucho más.

Explora nuestro blog