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.

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

  10. Guillermo Meijón Couselo Contestar

    Hola, en primer lugar felicitaciones por el artículo.
    En segundo lugar comentar algo que no sé si puede hacerse.
    Tengo seleccionada, en el menú, la opción de que aparezca desplegable. Pero me gustaría que nen el menú apareciera la palabra “IDIOMA” y que en la lista desplegable aparecieran los nombres de los idiomas.
    Tal y como está por defecto en Polylang, en el menú aparece el nombre del idioma en que está la web.
    Gracias y repito las felicitaciones.

    • admin Autor del artículoContestar

      Buenas, gracias por las felicitaciones.

      Para hacer lo que me comentas, vete al gestor de menús, en Apariencia -> Menús. Una vez allí, añades un Enlace Personalizado. En el campo que pone URL pones: # y en el que pone Texto del Enlace : Idioma.
      Luego añades el Conmutador de Idioma y lo pones como un subelemento del elemento que acabamos de añadir (Idioma). Esto lo consigues arrastrando con el ratón el elemento más a la derecha. Ya no te haría falta marcar la opción de que aparezca desplegable.

      Un saludo.

  11. Guillermo Meijón Couselo Contestar

    Muchas gracias Raúl por tu amable y sabia respuesta.
    No había tenido tiempo hasta ahora de ocuparme del blog, pero tu solución ha funcionado a la perfección.
    Cordiales saludos.
    Guillermo

  12. Belén Contestar

    Hola Raúl,
    Tengo instalado Polylang y tengo dos menús en dos idiomas, las páginas duplicadas en dos idiomas y en el conmutador de idioma solo funciona la opción “Mostrar como menú desplegable” y “Mostrar bandera” si elijo cualquiera de las otras opciones la bandera del Main Menu desaparece y lo más problemático es que en el menú en castellano me sale la bandera española y en el menú inglés la bandera inglesa con lo cual no cambia de idioma. ¿Sabes qué puede estar pasando?.

    • admin Autor del artículoContestar

      Buenas,

      si vas a la sección de Apariencia -> Menús, eliges el menú que quieres editar y luego hay un ajuste importante que está al final de la página, llamado Ajustes del menú, allí tienes unas casilla para marcar la ubicación del menú, tendrás varias llamadas Primary menu Español, Primary menu Ingles y así como tantos idiomas tengas. Y luego se me ocurre que en las opciones del Conmutador de idioma, marca solo la que pone Muestra los nombres de los idiomas. A ver que pasa.
      Un saludo.

  13. Daniel Contestar

    Hola Raúl.
    Felicidades por el artículo, pero sobre todo por tus sabios consejos a todas nuestras dudas.
    Ahí va la mía: estoy tratando de cambiar la url de cada página o portfolio traducido, pero si la edito me dejan de aparecer, con lo que tengo que quedarme con la ruta que me pone por defecto. He trasteado (sin mucho conocimiento) en las Modificaciones de URL, e incluso en Ajustes/Enlaces Permanentes como sugieres más arriba, pero no consigo solucionarlo.
    Te agradecería si supieras orientarme.
    ¡Un saludo y mil gracias!

  14. Carlos Contestar

    Buenas, porque cuando instalo el Polylang en el Divi me desaparece la opción de AJUSTES DE PORTADA del PERSONALIZADOR DE TEMAS?
    Gracias!

  15. laia Contestar

    Buenod días,
    hay opción de que el desplegable del conmutador de idioma de los widgets empiece con una imagen o texto, en vez de un idioma?

    Muchas gracias

    • admin Autor del artículoContestar

      Buenas,

      sí, tendrías que hacer algo parecido a lo que explico en este post, pero en vez de poner opacity:0 al enlace de Polylang, dejarlo como esta y modificar la posición del fondo que quieras poner.
      Un saludo.

  16. Roberto Contestar

    Hola Raul, como puedo hacer para que las banderas aparezcan del lado izquierdo, por default las instala del lado derecho, muchas gracias

Deja un comentario

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