Páginas multiidioma con Wordpress

Lengua

Cómo mostrar en varios idiomas una web realizada con páginas Wordpress. El sistema descrito no usa ningún plugin. Lo que haremos será parchear el tema actual.

Introducción

Se trata de adaptar las páginas de una web creada con WordPress para que el contenido se pueda mostrar en varios idiomas.

Al describir este método no vamos a tener en cuenta las entradas de WordPress. Es decir, nos fijaremos únicamente en el contenido estático, no en la bitácora.


PÁGINAS

1) Las páginas de contenido

Supongamos que la web está organizada en una página de inicio y en varios contenidos. Por ejemplo pongamos que son 5 páginas, a saber: Inicio, Equipo, Servicio, Catálogo y Contacto. Supongamos además que estas páginas las queremos en 3 idiomas: Catalán, Español e Inglés. Esto quiere decir que en total hemos de crear 15 páginas.

Futuras direcciones URL

CatalánEspañolInglés
Inicio/ca/es/en
Equipo/ca/equip/es/equipo/en/team
Servicio/ca/servei/es/servicio/en/service
Catálogo/ca/cataleg/es/catalogo/en/catalogue
Contacto/ca/contacte/es/contacto/en/contact

Para conseguir las anteriores direcciones URL hemos de editar cada página y modificar el Enlace permanente y la Página superior.

Para las páginas en español sería lo siguiente:

Enlace permanentePágina superior
Inicioes
EquipoequipoInicio (es)
ServicioservicioInicio (es)
CatálogocatalogoInicio (es)
ContactocontactoInicio (es)

Hasta aquí ya hemos conseguido que todos los contenidos tengan una URL dependiente del idioma

2) La página de inicio

Hemos de crear una página más —a la que llamaremos index— que será la de inicio por omisión de nuestra web http://mi.web/ y que no está vinculada a ningún idioma. Con esta habremos creado un total de 16 páginas. Para que sea de inicio hemos de ir a Ajustes de lectura, marcar Página estática y seleccionarla en Portada.

En dicha página podríamos mostrar los enlaces al inicio de cada idioma:

    <ul>
      <li><a href="/ca">Català</a></li>
      <li><a href="/es">Español</a></li>
      <li><a href="/en">English</a></li>
    </ul>

De todas maneras esta página nunca llegará a verse cuando hayamos completado todo el proceso de multiidioma. Lo que queremos conseguir es que cuando llegue un visitante a nuestra web se redireccione automáticamente al idioma que toque:

  1. Ves al idioma indicado en la cookie de idioma si es que existiese. Esta cookie se establecerá al seleccionar en un futuro menú selector de idiomas.
  2. Ves al idioma preferido del navegador web si es que coincide con algunos de los idiomas de nuestra web.
  3. Ves al idioma predeterminado que habremos establecido previamente.

MENÚS

3) Los menús de navegación

Por cada idioma crearemos un menú de navegación. Marcaremos como Menú principal el menú del idioma predeterminado. Más adelante conseguiremos que salga el menú que toca según el idioma seleccionado.

El nombre de los menús es importante. Se van a llamar:

  • menu_ca el de catalán
  • menu_es el de español
  • menu_en el de inglés

¿Cómo se hace? Ves a Apariencia, luego Menús y pulsa el enlace crea un nuevo menú.

Aquí se muestra un ejemplo con el menú en español:

4) El menú selector de idioma

Hay que crear un menú más, al que llamaremos menu_langs, para que el visitante de la web pueda cambiar de idioma. Recordaremos su elección guardando una cookie.

Hemos de colocar el menú en algún lugar del tema actual. Lo podríamos marcar como Menú secundario o Menú inferior.

Hemos de crear tres opciones, una por idioma, de tipo Enlace personalizado con las siguientes propiedades:

URLEtiqueta de navegación
?lang=caCatalà
?lang=esEspañol
?lang=enEnglish

Como se puede apreciar se trata de enviar el código del idioma en un parámetro GET llamado lang.

Visualización de los menús

Aquí se muestra como podrían quedar los menús en un ordenador y en un dispositivo móvil:


TEMA

5) La clase MyLang

Instalación

La clase MyLang y la variable $myLang se encuentra en el archivo MyLang.php. Dicho archivo se ha de descargar y colocar en la raíz del sitio WordPress.

Configuración

  • La constante AVAILABLE_LANGS indica la lista de los idiomas disponibles
  • La constante DEFAULT_LANG indica el código del idioma por omisión

El cometido del código

  • Obtiene el idioma a partir de:
    1. El parámetro GET de la URL: ?lang=xx
    2. La posible cookie de idioma
    3. El idioma preferido del navegador web si es que está disponible
    4. El idioma por omisión
  • Cuando se selecciona un idioma en el menú idioma:
    • Recuerda el idioma almacenando una cookie
    • Redirecciona a la página inicio del idioma: /ca, /es o /en
  • Cuando estamos en la página index:
    • Redirecciona a la página de inicio del idiioma: /ca, /es o /en
  • Informa del idioma actual: $myLang->get()
    Resultados posibles: ca, es o en
  • Informa del menú actual: $myLang->menu()
    Resultados posibles: menu_ca, menu_es o menu_en

6) Parchea el tema actual

Es necesario ejecutar el código anterior en cada página de nuestro sitio WordPress. Para ello tenemos que buscar y editar el archivo header.php del tema actual de WordPress. La ruta será algo como lo siguiente:

.../miweb/wp-content/themes/tema_actual/header.php

Abre dicho archivo con un editor de texto plano como Notepad++ o Geany y realiza los siguientes cambios:

a) Añade el siguiente código al principio del archivo

<?php require_once "MyLang.php"; ?>

b) Idioma de la página web

Busca la etiqueta <html … > y cambiala por:

<html lang="<?php echo $myLang->get() ?>" >

c) Menú de contenido

Busca el texto 'theme_location' => 'primary-menu' y cambialo por:

'menu' => $myLang->menu()

Ejemplo con todos los cambios aplicados

<?php require_once "MyLang.php"; ?>
…
<html lang="<?php echo $myLang->get() ?>" >
…  
$slide_nav = wp_nav_menu( array( 'menu' => $myLang->menu(), 'container' => '', … ) );
…
$primaryNav = wp_nav_menu( array( 'menu' => $myLang->menu(), 'container' => '', … ) );
…

Actualización del tema

¡Importante! Si actualizas el tema de WordPress o lo cambias por otro tema, tendrás que volver a realizar de nuevo todos los pasos del parche.

Comentarios

Proinf.net, ©2003-2019 ci 3.1.10 (CC) Esta obra está bajo una licencia de Creative Commons Este software está sujeto a la CC-GNU GPL