Cómo crear web multiidioma en WordPress con Polylang

Quizás hayas encontrado la necesidad de traducir tu página de WordPress a varios idiomas y que ello sea compatible y óptimo para el SEO Internacional de tu web. Pues bien, a continuación encontrarás un tutorial completo sobre cómo crear una web multiidioma en WordPress con el plugin de Polylang.

Esta guía paso a paso es válida tanto si ya tienes tu web creada y publicada como si empiezas una desde cero. Obviamente el segundo caso es mucho más sencillo puesto que, entre otras cosas, cuesta menos ir traduciendo poco a poco que traducir absolutamente todo en una web que tiene cientos de entradas en un único idioma.

Por lo tanto, mi recomendación, si empiezas una página de WordPress desde el inicio, es que no dejes este apartado para más tarde. El primer plugin que debes instalar es Polylang para que tengas todos los menús de traducción disponibles desde el inicio, que no se te escape ninguna traducción de ningún elemento y que el trabajo se te haga mucho más ameno.

Antes de comenzar con el tutorial asegúrate de tener un contenido mínimo en tu WordPress como, por ejemplo, dos entradas, dos categorías y dos etiquetas. Con eso será más que suficiente para poder probar la instalación del plugin de traducción de WordPress Polylang.

Instalación y configuración de Polylang

El primer paso consiste en instalar el plugin de Polylang en WordPress. Para ello iremos a “Plugins” a través del menú lateral, buscaremos “Polylang” y seleccionaremos el botón de “Instalar ahora”:

Configuración inicial de Polylang

A continuación seguiremos los siguientes pasos para instalar y configurar el plugin multiidioma Polylang:

• Acceder al asistente de configuración que se encuentra disponible tras activar el plugin. Si en algún momento quieres acceder a él de nuevo puedes hacerlo a través del menú lateral “Idiomas”, sección “Idiomas” (si no has realizado la configuración inicial) o sección “Configuración” (si has realizado la configuración inicial).
• Añadir los idiomas que queramos, en nuestro caso seleccionaremos el español y el inglés.
  

  

• Configurar la traducción de medios. Este apartado sirve para que, si lo tenemos activado, podamos traducir los atributos de los medios subiéndolos una única vez.
  Por ejemplo, para una imagen, si tenemos esta opción activada, podemos subirla una sola vez y establecer la traducción del texto alternativo y el título de la imagen.
  Si tienes una página web donde la mayoría de imágenes son distintas para cada idioma lo recomendado es que no actives esta opción puesto que cada imagen va a tener su propia url, título y descripción y no será necesario traducir sus atributos.
  Un ejemplo de ello sería un tutorial de WordPress con capturas de pantalla, las versiones en español e inglés no comparten imágenes, cada versión tiene distintas capturas y con sus propios atributos.
  Si, por el contrario, tienes una web de WordPress donde la mayor parte de imágenes son iguales para todos los idiomas, lo recomendado es que actives esta opción, subas las imágenes una única vez para todos los idiomas y traduzcas sus atributos title y alt.
  Como puedes imaginar, la ventaja de traducir medios consiste en el ahorro de almacenamiento pero, por contrapartida, es muy difícil y enrevesado tener imágenes distintas para cada idioma y, por lo tanto, depende completamente de qué sitio web estés construyendo.
  

  

• Configurar contenido sin idioma. Este apartado nos permite asignar un idioma al contenido que actualmente no lo tenga. Esto se refiere a que, si tenemos entradas, páginas, categorías o etiquetas sin idioma se les asignará a todas ellas el idioma que seleccionemos en este apartado.

Configuración avanzada de Polylang

Ahora es el turno de seguir los siguientes pasos para la configuración adicional de Polylang:

• Configura los enlaces permanentes a través de “Ajustes”, “Enlaces permanentes”. No debes seleccionar la opción “Simple”, cualquier configuración es válida, aunque recomiendo la opción de “Nombre de la entrada” o “Estructura personalizada” con el valor “/%category%/%postname%/”.
• Accedemos al menú de idiomas de WordPress que nos permitirá modificar completamente Polylang.
• Modifica el orden de los idiomas, de tal manera que el número 0 sea tu idioma por defecto (el que tiene una estrella) y el resto como veas oportuno. El orden indica en qué posición aparece en el selector de idioma que veremos más adelante.
  

  

• Establece el idioma por defecto en la pantalla anterior a través de la estrella. El idioma por defecto será aquel que, si el usuario o su navegador no indican ninguno de los que están en la lista, le aparezca al usuario. Es por ello que recomiendo seleccionar un idioma lo más genérico posible, como el inglés.
• Crea traducciones para el nombre de la web y, opcionalmente, los formatos de fecha y hora, dentro de la sección “Traducciones”.
• Establece cómo serán las url por idioma dentro de “Ajustes”, “Modificaciones de URL”. Mi recomendación es que selecciones la opción “El idioma se establece por el nombre del directorio” para tener los idiomas por carpetas y que selecciones la opción de “eliminar /idiomas/” para tener urls más cortas y SEO friendly.
  No obstante, si así lo decides, puedes configurar el plugin para que permita que el idioma se indique por dominio o subdominio.
  

  

• Activa la opción de “Detectar el idioma del navegador”. Aunque esta opción no funciona si tenemos cachés en WordPress, no está de más tenerla activada.

El resto de opciones las dejaremos por defecto.

Cómo traducir categorías y etiquetas en WordPress

Para traducir categorías y etiquetas con Polylang iremos a “Entradas”, “Categorías” o “Etiquetas”. Ambos menús son casi idénticos por lo que explicaremos solo uno de ellos.

Si lo que queremos es traducir una categoría o etiqueta nueva iremos a la parte izquierda donde introduciremos el nombre, el slug (cómo se verá en la url), la categoría superior o padre si la tuviera, la descripción (importante para SEO) y el idioma de la misma. Por ahora la parte de “Traducción” la dejaremos en blanco puesto que no disponemos de ninguna traducción para una categoría o etiqueta nueva:

Una vez creada en el idioma por defecto del sitio iremos a la tabla derecha y pulsaremos sobre el botón “+” del idioma correspondiente al que queramos realizar la traducción:

Y rellenamos los datos igual que antes excepto que, en el apartado de idioma verificamos que tenemos seleccionado el idioma al que estamos traduciendo (inglés) y en el apartado de traducciones verificamos que tenemos seleccionada la categoría original, es decir, la del idioma del que estamos traduciendo (español):

Si lo que queremos es traducir una categoría o etiqueta existente, es decir, creada antes de instalar el plugin, lo haremos igual que antes, a través del icono “+” situado a la derecha de cada una de ellas.

Recuerda revisar la categoría por defecto “Sin categoría” puesto que el plugin la traduce automáticamente de manera errónea con el mismo nombre y un slug incorrecto:

Finalmente, recuerda revisar los slug, si dos categorías tienen el mismo slug Polylang añade el código de idioma a continuación automáticamente. Si quieres que tengan el mismo slug para distintos idiomas tendrás que utilizar la versión de pago de Polylang.

Traducir entradas y páginas con Polylang

Los pasos para traducir una página o entrada nueva son:

• Creamos nuestra entrada como siempre, a través de “Entradas”, “Añadir nueva entrada”.
• Establecemos el idioma de la entrada en la parte derecha inferior, dentro de la sección “Entrada”, “Idioma”.
  

  

• Creamos la traducción en el resto de idiomas a través del menú “Entradas”, “Todas las entradas” seleccionando el botón “+” correspondiente a la entrada que queremos traducir:
  

  

• Verificamos el idioma y la traducción correspondiente en el apartado inferior. El idioma es el lenguaje actual de la entrada y la traducción es la entrada en el resto de lenguajes que no son el actual.
  

  

• Finalmente verificamos que son correctas las entradas que hemos creado y que tienen las categorías adecuadas.
  

  

Cómo crear menú selector de idioma en Polylang y WordPress

Llegados a este punto donde tenemos toda nuestra web de WordPress traducida estarás pensando… Todo esto está muy bien, tengo todo traducido y demás pero… ¿Cómo permitir al usuario que cambie de idioma a través de un menú?. Pues bien, seguiremos los siguientes pasos para crear un menú selector de idioma para Polylang y WordPress:

• Instala el plugin WPCode para poder insertar código PHP en tu web a través de shortcodes. Este plugin lo utilizaremos en otros artículos para funcionalidades avanzadas de Polylang. Además este plugin sirve para modificar el head o el body y meter la etiqueta de Google Tag Manager entre otras cosas.
• Añade el código PHP del menú selector de idioma a través del plugin. Para ello iremos al menú lateral, “Fragmentos de código”, “Añadir fragmento”, “Añade tu código personalizado”.
  

  

• Selecciona “Fragmento de código PHP”, “Shortcode”, dale un título descriptivo, activa el fragmento a través del botón superior, pega el siguiente código en el cuadro de texto y finalmente dale a “Guardar fragmento”:
  

  echo "<ul>", 
      pll_the_languages( array( 'show_flags' => 1,'show_names' => 1,'echo'=>0 ) ), 
  "</ul>";

  

• Apunta el shortcode generado tras guardar el fragmento.
  

  

• Introduce el shortcode a través del diseñador de WordPress en el lugar que desees, lo común es meterlo en el header. Para ello crea un bloque de tipo “Shortcode” y, como valor, pon la cadena de texto que has apuntado en el paso anterior.
  

  

• Introduce el código CSS necesario para eliminar los círculos del selector de idioma. A través del diseñador de WordPress, “Estilos”, “Editar estilos”, en la parte inferior derecha donde pone “CSS adicional”, introduce el siguiente código CSS:
  

  .lang-item {
    list-style: none;
  }

Finalmente, ya tenemos nuestro selector de idioma funcionando en WordPress y Polylang:

Quizás esta sea una forma complicada de insertar el selector de idioma y verás en tutoriales de Polylang que recomiendan utilizar el “Legacy Widget”. No recomiendo el legacy widget de Polylang por varios motivos, el primero es que a veces falla y el segundo es que éste es el método que utilizaremos para traducir el menú sidebar de WordPress e insertar código HTML condicional si fuese necesario.

Comprobar cambio de idioma en entradas, páginas, categorías y etiquetas

Una vez que tenemos WordPress y Polylang configurados correctamente y hemos insertado el selector de idioma, es el momento de comprobar que Polylang funciona correctamente:

• Comprueba la página principal, cambia el idioma y verifica que dicho cambio se aplica correctamente.
• Comprueba una entrada y una página concreta, de nuevo, una vez estés dentro de ésta, cambia el idioma y verifica que todo el contenido cambia de idioma cuando utilizas el selector de idioma de Polylang:
  

  

• Comprueba que, para las categorías y etiquetas, la traducción es correcta:
  

  

Html lang, link hreflang y sitemap multiidioma

Finalmente vamos a verificar la parte más importante para SEO, las etiquetas html lang y link hreflang:

• Html lang es utilizado para indicar el idioma actual de la página de WordPress.
• Link hreflang es utilizado para indicar dónde se encuentran las traducciones de una página concreta, incluida la actual.
• X-default es utilizado para indicar cuál es la traducción por defecto.

Un ejemplo de ello sería el siguiente:

<html lang=”es”>
    <head>
        <link rel="alternate" hreflang="es" href="http://miWeb.com/es/pagina1.html" />
        <link rel="alternate" hreflang="fr" href="http://miWeb.com/fr/pagina1.html" />
        <link rel="alternate" hreflang="pt" href="http://miWeb.com/pt/pagina1.html" />
        <link rel="alternate" hreflang="x-default" href="http://miWeb.com/es/pagina1.html" />
    </head>
</html>

Si inspeccionamos el código generado por Polylang en nuestra web podemos ver todos estos atributos tan importantes para SEO con una excepción, el valor “x-default”, el cual solo se especifica en la página principal de WordPress, no en las entradas.

Respecto al sitemap multiidioma para SEO y Polylang, el plugin no genera un sitemap multiidioma, pero es que no es necesario tener un sitemap multiidioma tal y como indica Google. Con tener las etiquetas mencionadas anteriormente, html lang y link hreflang, es suficiente.

No obstante, si tienes curiosidad, podrás ver que el sitemap generado por WordPress incluye todo el contenido de nuestra web en los distintos idiomas:

Finalmente, si te has quedado con ganas de aprender más, he creado un tutorial para traducir el menú sidebar de WordPress con Polylang y crear código HTML condicional, en función del idioma seleccionado.