Traducir menú de navegación con WordPress y Polylang y HTML dinámico

Quizás ya hayas instalado Polylang en tu web de WordPress para tener un sitio web multiidioma correctamente configurado para el SEO internacional, pero has llegado al punto en el que necesitas una personalización o configuración avanzada de WordPress y Polylang para aspectos tales como:

• Insertar código PHP en WordPress para poder utilizar las funciones de lenguaje de Polylang y otros plugins.
• Conocer cuál es la función PHP para obtener el idioma actual con Polylang de la web y así realizar determinadas personalizaciones en función del lenguaje.
• Insertar bloques Gutenberg dinámicos por idioma y secciones HTML de tal manera que determinadas partes de tu web se vean distintas según el idioma seleccionado.
• Cómo traducir el menú o sidebar de WordPress con Polylang de manera que, según el lenguaje del usuario, el menú de navegación aparezca en un idioma u otro.

Pues bien, todas estas cosas y alguna más son las que trataremos en este tutorial completo sobre traducciones e idiomas con WordPress y Polylang.

Código PHP en WordPress con plugin WPCode

El primer paso para traducir el menú de navegación de WordPress con Polylang es instalar el plugin WPCode el cual nos permitirá insertar código PHP en nuestra web y bloques Gutenberg de manera condicional, según el idioma:

Este plugin no solo permite insertar código PHP en WordPress, también permite introducir la etiqueta de Google Tag Manager en el head y body:

A continuación haremos una prueba para verificar que podemos insertar código PHP en WordPress:

• Vamos a “Fragmentos de código”, “Añadir fragmento”, “Añade tu código personalizado (Nuevo fragmento de código)”.
• Seleccionamos “Fragmento de código PHP”, lo activamos en el selector superior y seleccionamos la opción de “Shortcode”. Como código meteremos lo siguiente:
  
  

  

  echo 'Prueba insertar código PHP en WordPress';

• Guardamos el fragmento y apuntamos el shortcode que se ha generado:
  

  

• Introducimos un bloque Gutenberg de tipo shortcode en el diseñador de WordPress con el valor que copiamos en el paso anterior:
  

  

• Finalmente verificamos que el código PHP se ha ejecutado en WordPress correctamente:
  

  

Función PHP para el idioma actual con Polylang

El siguiente paso consiste en conocer qué función de Polylang nos da el lenguaje actual y utilizarla dentro del código PHP a través de un shortcode.

Para ello iremos a la documentación oficial de Polylang sobre funciones donde podremos ver todas las funciones de Polylang que podemos utilizar en nuestra web de WordPress.

En concreto nos interesa la función PHP pll_current_language la cual nos devuelve el lenguaje actual en formato nombre completo o slug (opción por defecto si no le pasamos ningún parámetro).

Iremos, por lo tanto, al editor de fragmentos de código del plugin WPCode y modificaremos el fragmento que creamos antes como prueba y cambiaremos su código por el siguiente:

if(pll_current_language()=='es'){
    echo '<u>El idioma actual es:</u>';
}else if(pll_current_language()=='en'){
    echo '<u>Current language is:</u>';
}else{    
    echo '<u>Current language is:</u>';
}
echo ' ',pll_current_language();

Y, a continuación, visitaremos nuestra página web para visualizar la prueba de funciones PHP en WordPress y Polylang:

Una vez que conocemos esto, como podéis observar, es sencillo extrapolarlo a casos más complejos como la traducir el menú de navegación de WordPress o crear HTML y bloques Gutenberg dinámicos según el lenguaje.

Bloques Gutenberg dinámicos por idioma con WordPress y Polylang

Como habéis podido observar en la sección anterior, una vez que conocemos cómo insertar código PHP en WordPress y obtener el lenguaje actual, es cuestión de imaginación y de conocer tus necesidades para que puedas personalizar completamente tu sitio multiidoma según el lenguaje.

En este apartado veremos los pasos para crear bloques Gutenberg dinámicos por idioma y secciones HTML con WordPress y Polylang:

• Abrimos el editor de temas y localizamos la sección que queramos personalizar. En nuestro caso, como queremos introducir el título de la tabla de contenido, iremos a “Plantillas”, “Entradas individuales”.
  

  

• Pulsamos “Editar” dentro de “Entradas individuales” y activamos la vista de lista para localizar la parte del contenido. Será antes de este bloque de Gutenberg donde insertaremos el código necesario.
• Creamos los bloques Gutenberg por idioma que necesitemos, en nuestro caso serán dos grupos con una cabecera h2 cada uno. A continuación abrimos el editor de código.
  

  

• Apuntamos el código HTML de ambos bloques y no guardamos los cambios puesto que insertaremos dichos bloques a través de un shortcode y PHP.
  

  

• Creamos un fragmento de código PHP dinámico por idioma o condicional con el plugin WPCode, siguiendo la lógica del ejemplo anterior donde utilizábamos códigos de idioma. Recuerda apuntar el código de shortcode generado.
  La diferencia con el ejemplo anterior es que en vez de poner “el idioma actual es español” pondremos, para cada idioma, su bloque Gutenberg correspondiente o código HTML:
  

  

if(pll_current_language()=='es'){
    echo '<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50"},"margin":{"bottom":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--50)"><!-- wp:heading -->
    <h2 class="wp-block-heading">Tabla de contenido</h2>
    <!-- /wp:heading --></div>
    <!-- /wp:group -->';
}else{    
    echo '<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50"},"margin":{"bottom":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--50)"><!-- wp:heading -->
    <h2 class="wp-block-heading">Table of contents</h2>
    <!-- /wp:heading --></div>
    <!-- /wp:group -->';
}

• Insertamos el código shortcode donde queramos a través del editor de temas. En nuestro caso lo introduciremos antes del contenido de cada entrada.
  

  

• Finalmente verificamos nuestro bloque Gutenberg dinámico por idioma. Para ello iremos a una entrada (o donde lo hayas creado) y cambiaremos el idioma para ver si está todo correcto.
  

  

Cómo traducir menú o sidebar dinámico con Polylang y WordPress

Quizás esta sea la parte más complicada puesto que combina todo lo aprendido anteriormente y, además, se complica un poco dado que los menús de navegación en WordPress 6 se hacen a través de los Navigation o bloques Gutenberg de navegación.

No obstante no te asustes porque veremos todos los pasos para traducir el menú de navegación de WordPress con Polylang:

• Abrimos el editor del tema y localizamos el apartado de “Navegación”. Dentro de este encontraremos un único menú, lo duplicamos y les damos un nombre descriptivo, utilizaremos uno para cada idioma:
  

  

• Personalizamos los menús de navegación de cada idioma a nuestro gusto, añadiendo entradas, páginas y/o categorías. Recuerda que cada menú debe tener rutas relativas que dirijan al idioma correspondiente.
  

  

• Guardamos el postId de cada menú. Este número se encuentra en la url del editor de temas de WordPress cuando estás editando el menú de navegación concreto.
  En nuestro caso el id para el español es el 26 y el id para el inglés es el 4.
  

  

• Buscamos y copiamos el código HTML del menú de navegación actual, el que se muestra insertado en la web, a través de la vista de código del diseñador de WordPress. En nuestro caso se encuentra dentro de la cabecera y, como podéis observar, apunta al menú en inglés:
  

  

• Creamos una función PHP condicional por idioma a través del plugin WPCode para introducir el menú dinámicamente por idioma. Le damos un nombre descriptivo, seleccionamos “Fragmento PHP”, seleccionamos el tipo Shortcode, pegamos el código que os adjunto a continuación y, una vez guardado, copiamos el shortcode generado para introducirlo posteriormente:
  

  

• Finalmente insertamos el shortcode a través del editor de temas de WordPress para incluir el menú condicional por idioma.
  

  

• Y comprobamos que nuestro menú por idioma con Polylang funciona correctamente, ya solo es cuestión de darle un poco de estilo y dejarlo bonito: