¿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

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

Captura de pantalla 2017 09 20 a las 11.27.24 a.m.

2.- Descarga el archivo a nuestra computadora

Al descomprimir la carpeta podrás observar los siguientes archivos

Captura de pantalla 2017 09 20 a las 11.10.10 a.m.
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;

}

Captura de pantalla 2017 09 20 a las 11.11.55 a.m.
Captura de pantalla 2017 09 20 a las 11.36.40 a.m.

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.

Captura de pantalla 2017 09 20 a las 11.13.18 a.m.

Captura de pantalla 2017 09 20 a las 11.15.59 a.m.
Enseguida da clic en enlaces personalizados
En Etiqueta de personalización vas a incluir la siguiente ruta

blank

Captura de pantalla 2017 09 20 a las 11.16.46 a.m.

¡Ojo! no olvidar subir la bandera “flags.png” a nuestra galería de wordpress
Captura de pantalla 2017 09 20 a las 11.41.26 a.m.

Y listo podemos ver nuestro menú con los beneficios de CSS y un Flag PNG en WordPress.

Captura de pantalla 2017 09 20 a las 12.06.18 p.m.
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

Explora nuestro blog