Si tenemos que hacer una versión de nuestra página web WordPress en otro idioma, podemos usar uno de los muchos plugins que existen para ello. Pero muchos requieren que tengamos una instalación de WordPress Multisite. En este artículo te enseñaremos a instalar y usar un plugin para añadir nuevos idiomas a tu WordPress sin necesidad de tener un multisite. Este plugin se llama 012 Ps Multi Languages, y en este momento está en su versión 1.2 y ha sido probado en la versión 3.4.2 de WordPress.

Con este plugin añadiremos los idiomas extras que necesitemos, de manera que en nuestro panel de administración aparecerán nuevos campos para cada uno de los idiomas que activemos. Por ejemplo, para una web en español y francés, por cada entrada que creemos, ésta tendrá un título y una ventana de contenido diferentes para cada uno de los idiomas. Estos nuevos campos se añadirán a cada entrada o página que ya estuvieran creadas antes de instalar el plugin, por lo que no tendremos que crearlas de nuevo, tan solo añadir el contenido del nuevo idioma. ¡Ojo! esto no es un plugin traductor, con éste tenemos que añadir los contenidos para cada idioma y la traducción corre de nuestra cuenta (o del traductor de turno).

Bueno, me dejo de rollos y vamos al lío. Empezaremos descargando e instalando el plugin. Podéis hacerlo desde la web del plugin o bien directamente desde la opción ‘Añadir Nuevo’ de la pestaña Plugins de nuestro panel de administración si buscamos “012 Ps Multi Languages“. Una vez instalado, no lo actives todavía hasta realizar los siguientes pasos:

1 – Configurar los idiomas en el archivo config.php del plugin multiidioma.

Este archivo, que se encuentra en la carpeta ‘config’ contiene la configuración de los idiomas que vamos a usar en nuestra web. Debemos elegir cuál será el idioma predeterminado (en principio español o el que ya tengamos) y el resto de idiomas que vamos a añadir. No es complicado de hacer. Lo primero es renombrar el archivo ya que por defecto viene como ‘_config.php’ y deberemos quitarle el guión bajo.

Después basta con cambiar los valores de los arrays que se definen dentro de él. Por ejemplo, el primero que encontramos es éste:

$this->multilingual = array(
‘en’ => ‘English’,
‘zh’ => ‘Chinese’,
‘ja’ => ‘Japanese’,
‘fr’ => ‘French’,

);

y deberemos de dejarlo con los idiomas que vayamos a necesitar, en este caso español y francés:

$this->multilingual = array(
‘es’ => ‘Español’,
‘fr’ => ‘French’

);

aparte de éste array, encontraremos otras tres líneas que debemos cambiar:

  • En multilingual_code elegiremos de nuevo los idiomas pero en este caso para definir los códigos de los mismos. Estos códigos podemos encontrarlos dentro del archivo multilingual_code.txt que incluye el plugin.
  • En search_multilingual_title pondremos el texto “Resultados de la búsqueda” en los diferentes idiomas.
  • Y por último en la función
      define( ‘MULTILINGUAL_WPLANG’ , ‘en’ );
    debemos cambiar el código de idioma ‘en’ por el del idioma principal de la web. El resto de líneas puedes dejarlas tal cual de momento.

2 – Modificar el archivo header.php de nuestro theme.

En este archivo es donde insertaremos el código necesario para que el plugin funcione. En primer lugar, debemos añadir al comienzo del contenido de la etiqueta <head> la siguiente línea:

<?php if ( function_exists( ‘ps_012_m17n_bread_crumb’ ) ) ps_012_m17n_bread_crumb(); ?>

Ahora, donde queramos que aparezcan los enlaces para cambiar de idioma, por ejemplo en la cabecera de la página, insertaremos ésta línea:

<?php if ( function_exists( ‘ps_012_multilingual_list’ ) ) ps_012_multilingual_list(); ?>

Con ésto, tenemos listo el plugin y podemos proceder a activarlo. Si lo hacemos, veremos un par de enlaces en forma de lista con los idiomas que hemos elegido. Pero si queremos aprovecharnos del plugin completamente, éste incluye una carpeta con las imágenes de las banderas que representan a cada idioma que podremos usar para que aparezcan en lugar de esta lista de idiomas. En seguida lo veremos, pero antes activaremos el plugin para ver que todo va bien.

3 – Activar el plugin multi-idioma.

Después de activarlo, vamos a ‘Ajustes -> Generales’ y si todo va bien aparecerá abajo del todo los campos para el nuevo idioma, en este caso francés, donde insertaremos el título de la web y la descripción.

nuevos campos en ajustes generales

Si nos vamos al menú páginas o entradas, veremos cómo se ha añadido una columna ‘Título’ con la bandera del idioma nuevo. Si entramos a una página o entrada de blog previamente creada, veremos que ahora, debajo de los campos título y contenido aparecen otros nuevos similares para el nuevo idioma.

Si todo esto aparece, es que el plugin está funcionando perfectamente. Así que vamos a rizar el rizo, usando las banderas como menú de idiomas.

4 – Crear el menú de idiomas con sus banderas.

Este método está basado en el que aparece publicado en el foro de ayuda oficial del plugin con algunos cambios realizados para que funcione perfectamente.

En primer lugar, en la carpeta ‘images’ de nuestra plantilla, debemos crear una subcarpeta llamada ‘flags’ y dentro copiar los archivos .png de las banderas que vayamos a necesitar. Estos archivos están en la carpeta ‘images/flags/’ del plugin. No recomiendo copiar la carpeta completa porque contiene más de un mega en imágenes de banderas y realmente no vamos a usar más de 4 o 5 como mucho. De hecho, una vez elegidos los idiomas, podemos borrar el resto de banderas también de la carpeta del plugin para ahorrar espacio en el hosting.

Ahora, volvamos al archivo header.php, donde haremos algunos cambios. En primer lugar, cambiaremos la última línea que insertamos en el paso número 2 por esta otra:

<?php if ( function_exists( ‘ps_012_multilingual_list’ ) ) $gs=ps_012_multilingual_list(false);?>

Los cambios son los siguientes:

  1. Pasar el parámetro false a la función ps_012_multilingual_list con lo que evitamos que se muestre el menú de idiomas directamente en pantalla y la función nos devuelva los datos en un array.
  2. Guardar éste array en la variable $gs.

Ahora, con los datos guardados en esta variable, insertaremos el siguiente código que leerá el array y mostrará por pantalla las imágenes de las banderas de cada idioma, que serán enlaces para cambiar de lengua.

<?php
$html = ‘<div id=”flags” style=”position: absolute; right: 0; z-index:9999;”>’;
foreach(array_reverse($gs, true) as $key=>$val){
$flags_dir = get_bloginfo(‘template_directory’);
$flags_dir .= ‘/images/flags/’;
$flag_icon = $flags_dir . $key . ‘.png’;
if ( ps_url_exists( $flag_icon )):
if ($val['current']) {
$flag_icon = ‘<img src=”‘.$flag_icon.’” style=”float:right;margin:5px 5px 0 0;padding:1px;border:1px solid #021a40;background-color:#ff0;”>’;
}
else
{
$flag_icon = ‘<img src=”‘.$flag_icon.’” style=”float:right;margin:5px 5px 0 0;padding:1px;border:1px solid transparent;”>’;
}
endif;
$html .= ‘<a href=”‘.$val['url'].’”>’.$flag_icon.’</a>&nbsp’;
}
$html .= ‘</div>’;
echo $html;
?>

 

Las imágenes estarán dentro de un div con id  llamado ‘flag’ que aunque tiene unos estilos CSS por defecto, pueden ser editados al gusto. En este caso están definidos para que aparezcan arriba a la derecha si lo insertamos dentro de la cabecera de la página.

menu wordpress multiidiomas

Si todo hay ido bien, deberemos verlas como se muestran en la imagen de arriba, apareciendo rodeada por un borde la bandera del idioma que esté activo.

Pues hastá aquí este artículo, espero que haya quedado todo claro y sobre todo que les resulte útil ya que seguro que hará más fácil añadir un idioma nuevo una web hecha en WordPress.

Si tienes alguna duda, o propuesta para mejorar el artículo, no dudes en escribir un comentario en esta entrada.