Si has llegado hasta aquí, probablemente estás buscando instalar y configurar Polylang en tu sitio WordPress con Elementor. Es una excelente manera de tener tu web en varios idiomas y, ya que tengo que instalarlo y configurarlo para un cliente de Liberty Dreams LTD, esta es una gran oportunidad para preparar este artículo donde guiarte paso a paso en el proceso.
¿Por qué Polylang y no WPML?
Tradionalmente el plugin multilingüe por excelencia en WordPress siempre fue el WPML (WordPress MultiLingual) y yo incluso, cuando tuve la agencia en Estonia, llegué a tener licencia de pago de este plugin por unos años para webs de clientes (en su época). Sin embargo, en mi opinión personal (que puede estar equivocada) se ha vuelto muy «comercial» con los años, limitando mucho la versión gratuita. Cosa logica al estar consolidado en el mercado.
Por otro lado, han ido surgiendo opciones mas modernas, como Polylang, que permiten hacer muchas cosas de forma gratuita, (por supuesto, tiene versión «pro» también, pero no vamos a entrar en eso en este post). Creo recordar que WPML en su momento solamente dejaba 2 idiomas en la versión gratuita y si querías más, tenías que pagar. No se si han cambiado esa política a día de hoy. Polylang si permite mayor cantidad de idiomas.
Sin embargo, no te lleves de este análisis superficial. Yo lo que te recomiendo es que te informes bien y veas las distintas opciones disponibles en el momento en que leas esto. Es importante que lo tengas claro antes de instalar un plugin multi-idioma, y que investigues qué cosas te permite hacer y si esto se adapta a tus necesidades. Por ejemplo, cómo afectan las URLs canónicas a tu estrategia de SEO. En este artículo no lo vamos a abarcar, ya que solamente vamos a cubrir lo que es instalar y configurar Polylang y su integración con Elementor. Para tener un dominio distinto para cada idioma, en cambio, WPML funciona mejor. Todo depende de tu proyecto.
Sin embargo, cuando te embarcas en la instalación y configuraciíonde un plugin multi-idioma para tu sitio web WordPress debes tomar muchas decisiones de configuración que luego supone un coste de oportunidad muy grande deshacer o revertir. La migración entre unos plugins y otros es compleja y problemática, por lo que es mejor sentarte a decidir e investigar antes de tocar nada en la web. Para este cliente, primero nos sentamos a ver las opciones y, para lo que ellos necesitan específicamente, Polylang en este momento era la opción que mejor se adaptaba.
Dicho esto, empecemos.
Instalación de Polylang
Los primeros pasos son como cualquier plugin de WordPress. Nos vamos a «plugins -> añadir nuevo»
Después en el buscador ponemos «Polylang» y en el plugin correcto (lo ves en la captura) pulsas «instalar»
Estará unos segundos instalando… déjalo que termine
y después tendrás que activarlo:
Al «activar» nos aparece el asistente de configuración inicial de Polylang:
Asistente de configuración inicial
Al instalar Polylang por primera vez en tu WordPress aparece un asistente que te guia paso a paso en la configuración.
El primer paso es elegir los idiomas en los que estará el sitio web. En el caso del cliente al que le estoy haciendo la configuración estos idiomas son «español de España», y «catalán». No olvides incluir el idioma «base» del contenido que ya tienes (español de España, en este proyecto). Mucha gente solamente pone los idiomas nuevos, y luego tiene que volver atrás a este paso.
Simplemente hay que elegir un idioma en el desplegable y darle a «añadir idioma», tantas veces como idiomas vayas a añadir a la web. Una vez conoces el proceso, es fácil seleccionar tantos idiomas como planees tener. Más adelante también podrás añadir idiomas adicionales si surge ampliar el proyecto, pero si lo tienes previsto de entrada, es más fácil.
A efectos del ejemplo de la web con la que estamos trabajando, el idioma base sería «español de España» (de aquí en adelante, «español» a secas, para abreviar) y nos quedaría así:
Después de esta pantalla, le damos a «continuar»
En la siguiente pantalla nos da la opción de traducir título, metadescripción etc. de las imágenes, vídeos, audios etc. (El «multimedia» o «medios» de la web)
Polylang te permite traducir el texto adjunto a tus archivos multimedia, como el título, el texto alternativo, el pie de foto o la descripción. Al traducir un archivo multimedia, este no se duplica en tu disco duro; sin embargo, verás una entrada por idioma en la biblioteca multimedia. Al insertar archivos multimedia en una publicación, solo se mostrarán los archivos multimedia en el idioma de la publicación actual. Útil si tienes banners con textos en distintos idiomas, por ejemplo.
En mi caso lo vamos a activar porque las traducciones que me pasa el cliente son bastante detalladas (incluso URLs) y «por si acaso» prefiero tener todas las opciones abiertas, además queda ya preparado por si se ponen «tiquis miquis» con el SEO en el futuro. Nosotros como empresa a este cliente no le llevamos SEO, pero por si nos da instrucciones para las metadescripciones de las imágenes y demás… ya lo tenemos activo. Mucho menos engorroso que activarlo a posteriori y andar corrigiendo. Adapta esta decisión a tu caso particular.
El siguiente paso será elegir el idioma por defecto del contenido existente en la web. Aquí es donde mucha gente tiene que volver atrás al paso inicial, porque solamente te va a dejar elegir entre los idiomas que seleccionaste para la web en la primera pantalla. En nuestro caso no cometimos ese error, y como todo el contenido actual está en español, esa es la opción que seleccionamos.
En el siguiente paso nos habla de la homepage. Va a crearnos versión en cada idioma y será cosa nuestra crear/montar los textos en cada idioma. Eso lo haremos después.
y con esto termina el asistente
Para salir de aquí simplemente le damos a «volver al dasboard».
Plugins adicionales que instalar
En el caso particular que estoy trabajando, voy a añadir dos plugins adicionales:
- Connect Polylang for Elementor, porque la web está hecha con Elementor y esto me facilita compatibilidad, especialmente para cabecera y footer.
- Polylang Duplicate Content Addon, porque precisamente al estar hecha con elementor tengo que mantener el diseño original maquetado y cambiar textos, y esto me hace mas sencillo el trabajo sin estar guardando plantillas, importándolas etc.
El segundo podemos desinstalarlo para aligerar peso una vez terminemos el trabajo de maquetación de las traducciones de las páginas estáticas de la web. La web de este cliente es una web corporativa informativa y casi todo son landings estáticas con Elementor (y un diseño bastante sobrecargado que hizo «alguien» y ahí dejó, lo típico).
Si quieres saber más sobre las webs que pasan por muchas manos y qué pasa con eso, te recomiendo este otro post.
Los dos plugins adicionales que voy a instalar son los de la imagen:
Empezar a traducir páginas en Elementor
Ahora, para empezar a montar las traducciones, nos vamos a «páginas» y ahí tenemos ya columnas con banderitas para cada idioma. Es importante identificar el idioma de la página que queremos editar y con el «+» o el lápiz ver si ya existe la traducción en ese idioma o hay que crearla.
El «+» es para crearla y el lápiz para editar, cuando existe ya.
A partir de aquí ya cada proyecto coge su derrotero. Con esta breve guia tienes lo necesario para tener Polylang funcionando, incluso con Elementor, y ahora simplemente ires cosa de ir duplicando cada contenido que quieras traducir e irlo montando, como si lo hicieras «normal». Los plugins que te recomenté harán tu trabajo más fácil.
Editar la Home
Durante la instalación de Polylang, en el asistente, el sistema generó una home en blanco para cada idioma adicional. Creo que el primer paso debe ser editar esto para dejarla lista. Podemos acceder o bien desde el lápiz en el idioma, o pinchando directamente en la página para editarla.
¿Qué hacer cuando no puedes duplicar el contenido de Elementor a otros idiomas?
A pesar de que para este proyecto instalé el «Polylang Duplicate Content Addon», no me permitió duplicar el contenido de algunas páginas estáticas de Elementor al principio, así que tuve que optar por el «método tradicional» en algunos casos. Esto no es rehacer todo a ojo (tampoco hay que pasarse…) sino crear una plantilla local y exportarla. Si el plugin te da problemas, o decidiste no instalarlo, te explico el método en este apartado.
Para ello, dentro de la vista de «Editar con Elementor» de la página en cuestión vamos a la esquina superior derecha y, junto al botón de «Publicar» encontraremos una flechita. Al pulsar sale un desplegable y elegimos «guardar como plantilla»
Mi consejo es que le pongas un nombre descriptivo que sea inequívoco. Con el tiempo, se van a acumular bastantes plantillas aquí una vez le cojas el gusto a esto de copiar diseños de un sitio a otro. También es útil para tener una copia de un diseño antes de ponerte a editarlo (por si se rompe algo, o como referencia) e incluso Elementor te permite incrustar estas plantillas en otras partes de la web directamente con un shortcode. Esto es útil si tienes un apartado que se repite en varios lugares, como una CTA (Call to Action) o algo así.
En mi caso me ha quedado así:
El siguiente paso será abrir el editor de Elementor en la nueva página y pulsar el icono de la carpeta:
Nos vamos al apartado de «Plantillas», buscamos la que hemos guardado hace un momento y le damos a «importar». Si no aparece, hay que darle al icono de las dos flechas. Lo ves mas claro en la siguiente captura:
Y ya tienes una copia exacta lista para editar con todo el diseño y configuraciones (márgenes y demás) idénticos al original. Cambia los textos y guarda. Repite el proceso con el resto de páginas. Aquí la cosa ya se vuelve mas «tediosa» que «técnica». Si has trabajado antes con Elementor será «lo típico» que haces siempre.
Igualmente, trabajando días posteriores en el proyecto si me funcionó el plugin y pude ir un poco más rápido. Como esto depende muchas veces de versiones, actualizaciones y demás… tienes los dos métodos cubiertos en este artículo por lo que sea de una forma u otra, tienes todo lo necesario para enfrentarte a lo que te encuentres.
Editar menús de navegación en los distintos idiomas
Si estás editando la web en varios idiomas, lo más normal es que tengas que editar el menú principal (y otros menús) para cada idioma, de forma que diga «el equipo«, «the team» etc, en cada idioma según corresponda y enlazando a la landing traducida en cuestión.
Esto es fácil de solucionar en Polylang, basta con ir dentro del dashboard de WordPress a Apariencia -> Menús
Ahí verás que el sistema te genera posiciones para cada idioma, por ejemplo para el «menú principal». La manera más simple es usar esas posiciones para mapear los menús. Con Elementor no importa tanto porque puedes hacer aparecer los menús que quieras donde te parezca, pero si usas Temas de WordPress rígidos esto si es importante, por compatibilidad.
Dependiendo del diseño de la cabecera, es posible que solamente necesites hacer este ajuste para tener un menú traducido para cada idioma, sin andar usando dos cabeceras en paralelo. No olvides añadir un selector de idioma en el diseño de la cabecera, es una buena práctica. Ya que vas a tener la web en varios idiomas, es bueno «que se sepa», por si el usuario quiere elegir un idioma diferente.
Resolver errores comunes
En este apartado hablaremos de algunas dificultades que pueden aparecer al empezar a trabajar con Polylang y Elementor.
Redirecciones raras, páginas en segundo idioma que no cargan
Al instalar Polylang es posible que algunas páginas de idiomas no lleven a donde tienen que ir. Si te ocurre esto, cabe la posibilidad de que tengas que regenerar los enlaces permanentes. Para ello debes ir a opciones -> enlaces permanentes y, sin necesidad de tocar nada, darle a guardar. Esto regenerará la configuración del .htaccess. (Muy similar a lo que expliqué en este otro post).
También es posible que tengas que limpiar la caché, si tienes plugins como LS Caché o similares.
Cambiar idioma de una página existene y/o asociar una traducción
En cualquier momento puedes cambiar el idioma de un contenido desde dentro del menú de edición de WordPress. Basta con elegir en el lateral el idioma del contenido que estás editando mediante un desplegable, También puedes asociar otros contenido como traducciones mediante el buscador que está justo debajo.
En la captura de ejemplo el idioma del contenido sería «catalán»y habría una traducción en español llamada «Política de Cookies».
Conclusión
En este artículo hemos aprendido a instalar Polylang desde cero y dar los primeros pasos para traducir una web con Elementor, resolviendo algunos problemas por el camino. Espero que te haya resultado útil. Si tienes alguna duda específica que no hayamos cubierto, déjamelo en los comentarios, y trataré de cubrirlo en próximos posts o responderte directamente.
Además, si no quieres pasar por este tipo de configuraciones tediosas, te comento que en Liberty Dreams LTD ofrecemos un servicio de hosting con mantenimiento para tu web que te incluye todo este tipo de gestiones. Tienes toda la información en este enlace.
