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.

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.

20 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.

  6. Helena Contestar

    Buenas Raul

    Yo lo tengo todo perfecto y no me da ningún problema, sin embargo, el conmutador de idiomas no me funciona en el menú. Es decir, aparece todo, pero el link parece que no funciona, sin embargo inspeccionando se puede ver que es un enlace y que lleva a donde debería. He intentado modificar una clase que se llama “not-clickable-item”, que no se por que se le pone si es el selector de idiomas, y tampoco hace nada.

    • admin Autor del artículoContestar

      Buenas,
      esa clase “not-clickable-item”, no debería estar. Como su nombre indica hace que el elemento no sea clickable. Se me ocurre quitarlo del menú y volverlo a añadir. Puedes ver el código en esta página http://www.saregune.net/es/, que lo tengo añadido y funciona correctamente.

      Un saludo.

  7. Celeste Contestar

    Hola!!!
    Estoy usando el Plugin de Polylang en un sitio web, ya lo había usado en otros dos más y todo perfecto. Pero ahora, en este nuevo que estoy construyendo no me aparecen las banderas. Por más que lo instalo y verifico, solo me aparecen los idiomas en texto, así este activada la casilla “Displays flags” me muestra texto, si también le pongo “Displays language names” me aparecen dos textos con el lenguage.
    Espero obtener tu valiosa ayuda y estoy muy agradecida!!

    Un saludo.

    • admin Autor del artículoContestar

      Buenas,
      ¿has inspeccionado el elemento? Sería interesante saber el HTML y los estilos CSS que está cargando. En el CSS debería tener la clase li.lang-item. Por otra parte, también puedes comprobar si las banderas están en la carpeta del plugin /wp-content/plugins/polylang/flags, esto lo puedes hacer mediante un cliente FTP.
      Un saludo.

  8. Alfonso Contestar

    Hola!! Quisiera saber si me puedes ayudar. Tengo el widget del conmutador Polylang de idiomas y tengo un problema. Cuando cambio a otro idioma se me cambia al idioma elegido, pero al pinchar en otro enlace dentro de la misma, me dirige de nuevo a la web en español y no permanece en el idioma último seleccionado. ¿Sabrías a que se debe? Espero tu respuesta cuando puedas. Muchas gracias de antemano! Un saludo

      • Alfonso Contestar

        Buenos días, si. A cualquier enlace del menú. Al cambiar el idioma se cambia todo el menú al idioma elegido, pero al pinchar en el enlace retorna a la página en español. Para comprobarlo, mira en la web http://www.elbisabueloeladio.com. Gracias!!

        • admin Autor del artículoContestar

          Las URL de los items del menú siempre enlazan a la parte de español. Prueba añadir al meńu un enlace personalizado, con la URL de la página en inglés.

  9. Jose Contestar

    Tengo un problema tengo una plantilla y el menu esta esta estructurado de la siguiente forma: Menu – Logo – Menu. Osea que tengo 2 menus diferentes en el header. Quiero poner el cambio de idioma a la derecha de la página pero solo cambia el menú de la derecha y no el de la izquierda por lo tanto la página se queda traducida solo la parte derecha. ¿Como podría hacer para cuando cambies de idioma se cambiaran los dos menus? Gracias un saludo.

Deja un comentario

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