Personalizar el conmutador de idiomas del plugin Polylang

Cuando estamos usando el plugin de idiomas Polylang, en nuestro sitio web, este nos ofrece un conmutador, para que los usuarios de nuestra web, cambien el idioma de esta.

Para ello el plugin Polylang, nos ofrece un widget, que podremos insertar en cualquiera de las áreas de widgets que disponemos en nuestra plantilla y también una opción para insertarlo en los menús. Esta última opción, me dio mucha guerra a la hora de encontrarla, ya que una vez situados en Apariencia -> Menús, hay veces que es posible que no aparezca por defecto. Hay que desplegar las Opciones de pantalla y marcar la checkbox correspondiente para que aparezca.

Una vez metido el conmutador bien en un área de widgets o bien en nuestro menú, podemos elegir entre que salga el nombre de los idiomas disponibles, las banderas o ambas.

Ahora vamos a ver como poder meter nuestros propios diseños para este conmutador. Hasta hoy lo que hacía era elegir la opción de que muestre las banderas y luego sustituía estas por mis diseños con el mismo nombre, por ejemplo: con los idiomas español y euskera, el plugin Polylang carga las banderas desde la ruta /wp-content/plugins/polylang/flags, en la última versión la bandera del País Vasco es basque.png y la de España, es.png. Entonces sobreescribía estos .png por mis diseños con el mismo nombre. El problema viene, en que cada vez que se actualiza el plugin, elimina estas imágenes y hay que volver a ponerlas, además a veces el plugin carga estas imágenes con algún tipo de caché y no las coge de este directorio.

En definitiva, he buscado otra manera de conseguir lo mismo y no tener que preocuparnos de las actualizaciones del plugin Polylang. Vamos con ello. Lo primero, vamos a elegir la opción de que el conmutador de idiomas muestre el nombre de los lenguajes. Después vamos añadir estilos a nuestra CSS.

li.lang-item a{
opacity:0;
}

li.lang-item-es{
background: url(http://raulperez.tieneblog.net/wp-content/uploads/2017/12/es.png) no-repeat center center;
}

li.lang-item-eu{
background: url(http://raulperez.tieneblog.net/wp-content/uploads/2017/12/eu.png) no-repeat center center;
}

Los selectores los he sacado con el inspector de elementos del navegador. En el primero, oculto el texto de los enlaces del conmutador, con la propiedad opacity, de manera que el texto no se ve pero el enlace sigue funcionando. En los dos siguientes, pongo de fondo la imagen que he diseñado yo, para cada idioma.

11 comentarios sobre “Personalizar el conmutador de idiomas del plugin Polylang

  1. Mario Contestar

    Hola Raul:

    Me llamo MArio y lelvo un tiempo con mi web.
    Decidí darle un lavado de cara y compre un tema nuevo, personalizable al 100%.
    ME descargue tanto polylang como lingotek para poder traducir mi sito a inglés.

    Durante unos días, todo iba correctamente puesto que tenía puesto el conmutador de idioma en el menu superior de mi web.

    Un día, me cabree con el trabajo que había realizado así que elimine todo y empecé de cero. cRee una nueva pagina de wordpress.

    Me reinstale el tema con los plugins correspondientes así como polylang y lingotek.

    En la primera vez, en los menús, me aparecía directamente el conmutador de idioma pero ahora, no me aparece por ningún lado.

    Intenté seguir los pasos que comentas en tu post acerca de las opciones de configuración de pantalla pero soy incapaz de encontrarlas.

    Que puedo hacer? Me podrías indicar donde están?

    Muchas gracias.

    Un saludo, Mario

      • Mario Contestar

        Solucionado. Me aparecía en la sección widgets pero no en el menu para poder ponerlo al mismo nivel que este.

        El problema era que no me meti en opciones de pantalla dentro del menu para activar la casilla del conmutador de idioma. A partir de ahí apareció donde yo quería pero ahora me surge otro problemas más.

        Estoy en la pagina tienda y pincho en el conmutador de idioma y me carga shop, todo en orden, pero pulso en contacto o en el inicio y no traduce nada del menu. La pagina si pero no el menu. y si doy en el menu a contacto, por ejemplo, me carga la pagina española y no la inglesa, que era donde me debia redirigir al estar previamente en la pagina inglesa de tienda.

        Vamos, me traduce el menu solo si pulso en tienda y luego en la banderita, sino, no me traduce el menu.

        Que puede ocurrir?

        Mil gracias por tu tiempo

  2. miriam Contestar

    Hola Raúl! muy buen artículo! Tengo un problema…modifico sobre el tema de avada los links de redes sociales pero solo se cambian en español, en inglés, no sé como editarlos ya que desde los ajustes generales del tema no me da la opción. Podrías ayudarme?
    gracias!

  3. stefano corso Contestar

    saludos primeramente quiero agradecerte por tu publicación, tengo un problema estoy utilizando polylang pero al seleccionar el idioma en el menú me manda a una pagina diferente y no al home que puedo hacer?

    • admin Autor del artículoContestar

      Buenas,
      prueba a revisar en los ajustes del plugin, las modificaciones de URL, también quizás pueda ser problema de los ajustes generales, en la sección de Enlaces Permanentes.
      Un saludo.

  4. esinhache Contestar

    Hola, buenas noches.

    Buscando solución a mi problema he visto el comentario de MARIO (8 FEBRERO, 2018): no le aparecía el conmutador de idiomas para incluirlo en la zona de menú principal.

    Al final lo solucionó: “Solucionado. Me aparecía en la sección widgets pero no en el menu para poder ponerlo al mismo nivel que este. El problema era que no me meti en opciones de pantalla dentro del menu para activar la casilla del conmutador de idioma. A partir de ahí apareció donde yo quería pero ahora me surge otro problemas más.”

    Yo no se como hacerlo… no se a que se refiere con “opciones de pantalla” para actiivar la casilla…

    Puedes ayudarme?

    • admin Autor del artículoContestar

      Hola,
      Para encontrar esa opción, primero debes situarte en la sección Apariencia -> Menús, para acceder a esta puedes hacerlo a través del menú lateral izquierdo del panel de administración. Una vez allí, en la esquina superior derecha, verás dos cuadrados en los que pone Opciones de pantalla y Ayuda. Despliegas el de Opciones de pantalla y hay una casilla para marcar el conmutador de idiomas. Cuando esté marcada aparecerá la opción para añadirla al menú.

      Un saludo.

  5. Mauricio Contestar

    Muy buen artículo, gracias por la ayuda. Sabes que tengo todo algunas partes traducidas y referenciadas correctamente, pero cuando añado el selector de idioma en el menu principal, solamente me muestra un idioma a pesar de tener configurados EN y ES, tal vez alguna idea de que podria estar pasando.
    Muchas gracias nuevamente

    • admin Autor del artículoContestar

      Hola,

      se me ocurre que quizás sea alguna opción de las que ofrece el Conmutador de idioma. Cuando añades el Conmutador al menú, se puede desplegar y aparecen una serie de opciones, con una checkbox para marcar y desmarcarlas. Entre ellas está Ocultar el idioma actual, Ocultar los idiomas sin traducción. Puede que alguna de estas esté marcada.

      Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *