Tutorial del tema de WordPress para principiantes – Parte 8: Traducción

En esta lección aprendemos cómo funciona la traducción (o también conocida como i18n) en WordPress y cómo hacer los ajustes necesarios en nuestras plantillas. También aprenderemos cómo configurar PoEdit correctamente para crear un archivo de traducción para nuestro tema, listo para ser traducido a diferentes idiomas.

¿Por qué molestarse en agregar soporte de traducción?

Todos los temas, al menos los que se hacen públicos para uso de otras personas además del desarrollador, deben estar disponibles para su traducción. Esto se llama internacionalización (i18n para abreviar), y permite que las personas traduzcan los textos que agregas en tu tema a otro idioma.

La forma en que funciona es que usted, como autor de temas o desarrollador de complementos, envuelve todos sus textos (como "Leer más", "Sin publicaciones") en ciertas funciones. Estas funciones hacen que WordPress pueda recogerlos e inyectarlos. una traducción si existe Dentro de su tema (o complemento) puede agregar archivos de un determinado tipo de archivo para cada idioma traducido, o asegurarse de que otras personas puedan crear su propia traducción en su propio idioma.

Esto es muy útil para las personas que desean usar WordPress y su tema (o complemento) en un idioma diferente al idioma original en el que fue escrito (que generalmente es inglés). Pero también se puede utilizar para cambiar ciertos textos a algo diferente dentro del mismo idioma.

Si está interesado en el tema, WordPress Codex tiene una larga y buena guía de documentación sobre i18n para desarrolladores.

Implementando i18n en nuestro tema

Ya hicimos la primera parte en el paso anterior de esta serie de tutoriales de temas, donde agregamos load_theme_textdomainla función de configuración de nuestro tema. En caso de que lo hayas olvidado, esto es lo que agregamos:

load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');

El primer argumento es el identificador, esta es una cadena única que usará para agrupar todos los textos que pertenecen a su tema. Repetirá este identificador cada vez que haga que un texto sea traducible. El segundo argumento le dice a WordPress dónde están los archivos de traducción. Los definimos para residir en una subcarpeta ‘ lang‘ en nuestro directorio de temas.

No se preocupe si esta carpeta no existe o no contiene ningún archivo; nada fallará. Si WordPress no encuentra la carpeta ni los archivos de traducción correctos, volverá por defecto a los textos que tenemos en el tema.

El siguiente paso es revisar todo nuestro código y encontrar cualquier resultado de texto que deba ser traducible. Es una buena práctica asegurarse de cubrir absolutamente todos los textos. Nada es más molesto que usar un tema o un complemento en el que el autor codificó textos que hacen que sea imposible traducirlos o cambiarlos de alguna manera.

Cómo hacer que los textos sean traducibles

Lo que hacemos con todos los textos es ponerlos dentro de una de las funciones gettext de WordPress, que normalmente son _e()o __(). El primero es un guión bajo con "e" que se usa cuando desea repetir el texto al mismo tiempo. El segundo tiene dos guiones bajos y se usa cuando no desea reproducirlo sino almacenarlo o usarlo en una variable.

WordPress tiene más funciones gettext que sirven para propósitos más específicos, por ejemplo, esc_html__()y más. Sin embargo, no entraremos en detalles para aquellos en este tutorial._n()``_x()

Las funciones gettext toman dos parámetros; primero el texto en sí, y segundo el identificador que definiste en load_theme_textdomain. En este caso es ‘ wptutorial‘.

Por ejemplo, si tienes algo como esto:

echo 'Read more';

Tendrás que reemplazarlo con:

_e('Read more', 'wptutorial');

Y de manera similar para almacenar en una variable;

$myvariable = 'Read more';

Tiene que ser escrito así:

$myvariable = __('Read more', 'wptutorial');

¡Ahora necesitamos encontrar todos los textos en nuestras plantillas! Si has seguido este tutorial al pie de la letra, no son muchos. Tenemos algunas cadenas en index.phpy algunas en single.php.

Agregar soporte de traducción en nuestro tema

Comencemos index.phpy ubiquemos el mensaje "No hay publicaciones, lo siento" que agregamos si el bucle no contenía ninguna publicación. Envolvemos este texto dentro _e()porque todavía queremos repetirlo. Así que esto es lo que obtenemos:

Debido a que usó _e(), no debería ver ningún cambio cuando presiona actualizar en la página principal o en el archivo. Pero bajo el capó, ¡este texto ahora es traducible!

Tenemos este mismo texto en nuestro single.phpy page.php. Actualícelos de la misma manera que lo hicimos en index.php. Agregamos algunos textos más en single.php, así que así es como se ve después de hacer que todos los textos sean traducibles:

A partir de ahora, todos los textos que agreguemos en nuestro tema nos aseguraremos de envolverlos dentro __()o _e().

Archivos de traducción

Hay dos formas de proporcionar archivos de traducción a su tema;

• Proporcione un .potarchivo
• o proporcionar un par de .poy .moarchivos.

Se .potrecomienda el archivo -para un tema que vende o regala a otros usuarios, porque con este archivo es muy fácil generar un archivo de traducción para un nuevo idioma. Sin embargo, no es fácil (ni gratis) crear uno de esos archivos. Si está familiarizado con WP-CLI (línea de comandos de WordPress) o Grunt, puede seguir las pautas en la documentación de WordPress aquí. Si no, la otra alternativa podría ser para ti.

Los archivos .poy .motrabajan juntos. WordPress requiere una .motraducción de textos, pero este archivo no es legible por humanos. Por lo tanto, tenemos el .poarchivo que es legible para nosotros. Con el software adecuado, genera el .moarchivo cada vez que realiza cambios.

La desventaja de los archivos .poy .moes que necesita generar un par para cada idioma, y ​​una vez que lo haya traducido a un idioma, no hay una manera fácil de vaciar todas las traducciones para hacer otro idioma nuevo.

Necesitas un programa para editar .poty .poarchivar. El más común es PoEdit. PoEdit es gratuito y funciona tanto para iOS como para Windows. Pero algunas funciones avanzadas (como generar un .potarchivo) desafortunadamente requieren una versión paga. Usaremos la versión gratuita para crear un .poarchivo para nuestro tema.

Descarga e instala PoEdit para seguir el resto del tutorial.

Creando un archivo .po para nuestro tema con PoEdit

Hacer un archivo de traducción para inglés generalmente no tiene ningún sentido cuando todos los textos en nuestro tema están en inglés de todos modos, pero para los propósitos de este tutorial, crearé un archivo de traducción al inglés.

1 Abra PoEdit y haga clic en Archivo > Nuevo…

2 Se le pedirá que elija un idioma. Elija el idioma que desee, por ejemplo, inglés.

3 Pulse Guardar (Ctrl+S). Localice la carpeta de su tema e ingrese la /lang/subcarpeta. (Si no lo creó en el último paso, créelo ahora). El nombre de su archivo es fundamental. Para los temas, debe nombrarse solo su código de idioma. Para inglés americano sería en_US, para noruego es nb_NO. Búscalo en Google o consulta esta descripción general para encontrar el código de tu idioma. Lo nombraremos en_US.po.

4 En el menú, haga clic en Catálogo > Propiedades…

5 En la primera pestaña, puede completar cierta información, como el nombre de su proyecto (tema), o cambiar el idioma, pero no es necesario. Le recomiendo que mantenga el juego de caracteres en UTF-8 ya que esto es lo que escribimos para WordPress.

6 Haga clic en la pestaña Rutas de origen. Aquí deberá definir en qué carpetas debe buscar el archivo para los textos traducibles. Las rutas son relativas y, como ya lo guardamos en una subcarpeta de nuestro tema, sabemos que debe subir un directorio. Presione el botón + debajo del cuadro Rutas y elija Agregar carpetas. Elija su directorio de temas. Esto debería agregar un elemento de ruta "." (sube una carpeta). Vuelva a verificar que "Ruta base" se refiere a su directorio de tema raíz.

7 Haga clic en la siguiente pestaña, "Palabras clave de fuentes". Aquí debe decirle a PoEdit qué funciones ha utilizado para los textos traducibles (por ejemplo __, _e, esc_html_eetc.). Haga clic en el botón + para agregar cada función y escríbalas sin "()". Depende de usted si desea cubrir todas sus bases y agregar todas las funciones gettext de WordPress, pero en este tutorial sabemos que solo hemos usado dos. Entonces agregamos dos elementos; __()y _e(). Suma las funciones sin ningún paréntesis.

8 Pulse Aceptar.

9 Todo lo que queda es decirle a PoEdit que escanee las rutas proporcionadas en busca de funciones usando __()y _e()(o lo que haya proporcionado). Para ello, presione el botón "Actualizar desde el código". (La versión de Windows tiene el texto en el botón, pero la versión de iOS no, por lo que para iOS debe presionar el botón, que generalmente es el último en la barra de herramientas; un ícono de archivo con un ícono de "rehacer" en la parte superior. Haga clic en el botón "Actualizar desde el código" y debería ver todos los textos enumerados con una interfaz para la traducción:

¡Agradable!

Archivos de traducción generados

Ahora puede usar PoEdit para traducir cada cadena, pero no lo haremos aquí ya que no tiene sentido traducir de inglés a inglés. Recuerde presionar Guardar para actualizar y generar un .moarchivo, y cada vez que agregue otro texto en su tema, debe presionar el botón "Actualizar desde el código" nuevamente. Luego aparecerán los nuevos cambios en tus plantillas.

Si revisa la /langsubcarpeta en la carpeta del directorio de su tema, debería ver dos archivos; el .poarchivo que acabamos de crear y un .moarchivo con el mismo nombre, generado por nosotros al guardarlo en PoEdit.

Puede hacer una copia del en_US.poarchivo y cambiarle el nombre a un código de idioma diferente. Pero recuerde que PoEdit no ofrece una forma sencilla de borrar todas las cadenas traducidas; Tendrías que borrar uno por uno. Esta es la razón por la que apesta para los usuarios que desean traducir su tema en un idioma diferente. Entonces, si tiene la posibilidad de crear un .potarchivo, debe hacerlo.

WordPress buscará el archivo de traducción según el idioma definido en el menú de administración Configuración > Idioma del sitio. Si agregó un idioma diferente al inglés, puede probarlo cambiando el idioma del sitio y ver si aparece su traducción.