¿CÓMO PONER UN ICONO DE BANDERA PARA UN CAMBIO DE IDIOMA EN WORDPRESS?

Por Luis Cota

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
4 Shares

2 thoughts on “¿Cómo colocar un icono-bandera en el menú para un cambio de idioma en WordPress?”

  1. Buenas Luis.
    Buen post! Pero me quedó una duda. Supongo que la cambia al inglés con la bandera de los Estados Unidos, tendrías la opción de volver al Español con la bandera de México (según veo en el CSS). Pero como haces para poner ambas bandera e la etiqueta de personalización? Te descargas un CSS sprite para cada una o te mejor ambas en el mismo archivo?
    Gracias.

    • Hola tomás, este recurso lo utilice por que en ese proyecto que trabaje en su momento hace dos años el cliente me solicito hacer una versión en ingles, pero no queriamos utilizar plugins traductores por lo que se me ocurrio fue montar otro wordpress y ahi poner el copywriting en ingles. Por lo cual el proceso lo repetí pero en esta ocasión invertí las banderas. Puedes ver el ejemplo aquí y acá

      Hoy en día existen plugins que son compatibles con elementor como https://wpml.org/es/ que también te pueden servir para un proyecto.

      Saludos cordiales.

Leave a Comment

1
Hola👋
Te estaba esperando
Powered by