En el siguiente tutorial vamos a hacer que una plantilla a medida, o página estática, de WordPress sea multidioma. Aprenderemos a utilizar un sistema interno para que nuestro sitio puedan albergar multiples idiomas (2 o más) consiguiendo que los visitantes tengan una experiencia multilenguaje cómoda y agradable.
Antes de continuar debes conocer unos conceptos importantes propios de un software en varios idiomas. Si ya has trabajado en otro sistemas similares puedes saltarte los siguientes puentos:
- Archivo PO: Fichero con las palabras o frases que deben ser traducidas. Puede ser editables manualmente con cualquier editor de texto, aunque hay muchos preparados para esta labor.
- Archivo MO: Compilado del archivo PO listo para ser leído por nuestro WordPress o cualquier otro sistema compatible.
- Loco Translate: Plugin gratuito de WordPress que te permite escanear tus páginas para crear archivos PO y MO.
- Polylang: Plugin que añade funcionalidades multilenguaje a WordPress (selector de idiomas, rutas en varios idiomas…), se alimenta de los archivos PO y MO.
Ahora sin más preámbulos iniciaremos los 6 pasos necesarios.
1. Identifica dominio.
Buscamos el archivo style.css que estará en la carpeta de nuestro tema. Al abrirlo con nuestro editor de código favorito nos encontraremos con un similar al siguiente ejemplo.
/*
Theme Name: Estudio Pixelmouse
Theme URI: https://wordpress.org/themes/
Author: Programador Web Valencia
Author URI: https://programadorwebvalencia.com
Description: En un lugar de la mancha...
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: estudio
Tags: Ejemplo, tutorial, estudio
*/
Buscamos Text Domain. Dentro de WordPress todo se divide como si fueran barrios, llamados Dominios, cada plugin o tema alberga un nombre diferente para evitar problemas a la hora de implementar funcionalidades. En el ejemplo posee el valor estudio, pero puede ser cambiado por lo que quieras (consejo: evita espacios o acentos). Si no quieres hacerlo, simplemente apunta bien que pone ahí.
2. Crear página estática.
Haremos una plantilla de página estática para visualizar el contenido que queramos. Por ello hacemos un archivo con el nombre plantilla-inicio.php con el siguiente contenido:
<?php
/**
* Template Name: Inicio
*/
get_header(); ?>
<h1>Bienvenido a mi web</h1>
<a href="#">Pulsa aquí para continuar</a>
<?php get_footer(); ?>
Es el momento de indicar que los textos serán traducibles. Para ese propósito debemos envolver cualquier elemento que deseemos que sea multidioma entre la siguiente estructura.
<?= __('El texto', 'dominio') ?>
La plantilla quedaría de la siguiente manera.
<?php
/**
* Template Name: Inicio
*/
get_header(); ?>
<h1><?= __('Bienvenido a mi web', 'estudio') ?></h1>
<a href="#"><?= __('Pulsa aquí para continuar', 'estudio') ?></a>
<?php get_footer(); ?>
3. Generar los archivos PO/MO
Para generarlos los archivos podemos utilizar cualquier software, como puede ser Poedit, o un plugin de WordPress que se encargue de ello. Usaremos Loco Translate por disponer de todas las herramientas en un mismo lugar.
Instalamos Loco Translate.
En el menú aparecerá una nueva opción con el mismo nombre. Entramos en Home. Después entramos en la plantilla que estemos usando, en el ejemplo se denomina Estudio Pixelmouse.
Ahora pulsamos New language.
Le decimos que no queremos ninguna plantilla: Skip template.
Elegimos el idioma base, ya que hemos escrito en castellano así mismo lo indicamos. Y, muy importante, le decimos que los genere en una carpeta que la tengamos localizada como languages/themes/estudio-xxxxx.po
Ya hemos creado el idioma, ahora nos pide que traduzcamos. En la parte superior se listan las frases que ha detectado, algunas de la plantilla otras internas de WordPress, y en la parte inferior nos dejará una caja en blanco para darle la traducción. Vamos a darle el mismo origen, Source text, que destino, Español translation, ya que castellano no tiene traducción al castellano.
Guardamos. Ahora vamos a crear la traducción al inglés. Pusamos en Home-> Nombre de nuestro tema -> New language.
En esta ocasión elegimos el idioma de Shakespeare, y le indicamos que guarde los archivos PO/MO en el mismo lugar que el castellano.
Traducimos, ahora sí, al idioma que necesitamos.
Cuando terminemos guardamos. Hemos terminado de traducir la página, aunque aún no veremos los resultados. Solo hemos traducido, no integrado en WordPress.
4. Indica donde están los archivos PO/MO.
Debemos indicarle a WordPress donde está la carpeta que alberga los archivos PO/MO generados en el paso anterior. En la carpeta del tema creamos, o modificamos, el archivo functions.php y agregamos las siguientes líneas.
<?php
load_theme_textdomain( 'estudio', get_template_directory().'../languages/themes' );
Guardamos y salimos, no será necesario volver aquí.
5. Crear la página a partir de la plantilla.
Para que WordPress pueda trabajar con los ficheros PO/MO y nos gestione algunas tareas secundarios (como las rutas, selector de idioma, cadenas pequeñas…) usaremos un plugin llamado Polylang.
Lo instalamos.
En el menú lateral veremos la opción Languages o Idiomas. Al entrar deberemos configurarle los 2 idiomas que queremos gestionar: Español e Inglés.
En Choose a language seleccionamos Español y pulsamos Add new language.
Repetimos con Engish.
Solo queda crear la página estática. Vamos a Páginas y Añadir nueva.
Seleccionamos Plantilla->Inicio, sino la página no usará el HTML del primer paso.
Podrás ver por la banderita de Language que estamos editando en castellano, por lo que escribimos un título en el mismo idioma.
Publicamos.
Entramos de nuevo. Esta vez apretamos en el símbolo plus (+) que acompaña la bandera americana para agregar el segundo idioma a la página estática. Escribimos el título en inglés.
Publicamos.
Si queremos que esta página sea la primera que se muestre a los visitantes habrá que ir a Ajustes->Lectura.
A continuación Tu página de inicio muestra->Una página estática->Portada->Título castellano.
Si entras en la página la encontrarás en castellano. Solo nos falta añadir un botón para que los visitantes puedan cambiar el idioma.
6. Incluir un selector de idioma.
En la plantilla añadimos el siguiente código.
<!-- Selector de idioma -->
<ul>
<?php pll_the_languages(); ?>
</ul>
<!-- Fin selector de idioma -->
Quedando de la siguiente forma.
<?php
/**
* Template Name: Inicio
*/
get_header(); ?>
<!-- Selector de idioma -->
<ul>
<?php pll_the_languages(); ?>
</ul>
<!-- Fin selector de idioma -->
<h1><?= __('Bienvenido a mi web', 'estudio') ?></h1>
<a href="#"><?= __('Pulsa aquí para continuar', 'estudio') ?></a>
<?php get_footer(); ?>
Será generado un sencillo menú que funcionará a la perfección. Por supuesto será editable con un poco de CSS.
Espero que te sirva ampliar tus conocimientos. Deja un comentario si te ha sido de utilidad el tutorial.
{{ comments.length }} comentarios