Cómo internacionalizar tu sitio web de WordPress

El 30 de septiembre de 2017, la comunidad internacional de WordPress se unió durante 24 horas para traducir el ecosistema de WordPress. Por tercera vez, #WPTranslationDay fusionó un maratón de traducción de todo el día con eventos digitales y del día del colaborador diseñados para promover el valor de crear experiencias accesibles para usuarios globales, mejor conocido como «localización». Como comunidad de código abierto, todos deberíamos esforzarnos por localizar nuestras contribuciones de código abierto. Sin embargo, antes de que puedas transcribir tus activos digitales, debes internacionalizar tu base de código. Los términos “internacionalización” y “localización” a menudo se usan indistintamente, aunque técnicamente representan dos aspectos diferentes del proceso de traducción.

• La internacionalización (I18N) es el proceso de internacionalizar o adaptar tu tema o complemento para traducirlo a cualquier idioma del mundo.
• La localización (L10N) es el proceso posterior de localizar o traducir tus herramientas internacionalizadas a un idioma determinado.

WordPress está actualmente completamente localizado para más de 65 idiomas y ofrece traducciones parciales para 95 configuraciones regionales adicionales. El uso internacional sigue aumentando a medida que se introducen más localizaciones.

Los usuarios de WordPress que no hablan inglés superaron a los usuarios de habla inglesa en 2014, y sin darse cuenta continúan diluyendo el porcentaje de pastel de los usuarios en inglés en 2017 a medida que crecen esfuerzos como #WPTranslateDay. A medida que WordPress se vuelve cada vez más accesible desde el punto de vista lingüístico, el conocimiento de I18N y L10N es esencial para que los desarrolladores de complementos y temas prosperen en la economía global de WordPress. Para las empresas en escala, estas habilidades de desarrollo pueden abrir puertas a los mercados extranjeros. La accesibilidad web, incluida la accesibilidad lingüística, es buena para los negocios y mejor para las personas. Como continuación de #WPTranslationDay, aquí hay una guía actualizada para internacionalizar tus complementos y temas de WordPress. Aquí hay una breve descripción general del proceso que exploraremos hoy.

• Descubrimiento
  • Conoce los archivos de traducción
    • Archivo POT
    • Archivo PO
    • Archivo MO
  • GlotPress y paquetes de idiomas
  • Haz una copia de seguridad y prepara tu entorno
• Complemento I18N
  • Encabezado del complemento
  • Cargar dominio de texto
  • Auditoría de cadenas
  • Generar archivo POT
• Tema I18N
  • Encabezado del tema
  • Cargar dominio de texto
  • Auditoría de cadenas
  • Generar archivo POT
• JavaScript I18N
• Recursos adicionales

Descubrimiento  #

Conoce los archivos de traducción  #

WordPress usa la biblioteca GNU gettext para facilitar I18N. Primero, familiaricémonos con los archivos de traducción gettext generados a lo largo del proceso. Archivo de plantilla de objeto portátil (POT) Durante el proceso I18N, usaremos una herramienta para encontrar cadenas internacionalizadas y generar un archivo POT que contiene todo el texto traducible en sus complementos y tema. Archivo de objeto portátil (PO) En apariencia, no hay diferencias notables entre un archivo POT y un archivo PO. Son sintácticamente iguales y solo se diferencian por sus propósitos previstos. Después de generar un archivo POT, un traductor debe interpretar las cadenas de texto a tu idioma preferido. El archivo PO eventualmente contendrá cadenas de texto en su idioma nativo, así como las traducciones apropiadas. Archivo de objeto de máquina (MO) Finalmente, el archivo PO se convierte en un documento legible por máquina o en un archivo de objeto de máquina. Este archivo vivirá en tu directorio de temas o complementos para que WordPress lo invoque cuando sea el momento de ofrecer una versión traducida.

Haz copias de seguridad y prepara tu entorno  #

Antes de modificar cualquier marcado, haz una copia de seguridad de tu complemento, tema o de todo tu sitio (¡lo que sea que estés internacionalizando!) Y pon tus entornos de desarrollo en orden. Asegúrate de realizar una auditoría rápida de complementos si planeas localizar tu sitio web. Elimina o desactiva los complementos que ya no estés utilizando activamente. Esta rápida auditoría te ahorrará tiempo a largo plazo.

Internacionaliza tus complementos  #

PLUGIN ENCABEZADO  #

Primero, actualizaremos el encabezado del complemento. Específicamente, el dominio de texto y la ruta del dominio. Ejemplo de encabezado de complemento

/*
 Plugin Name: My Rad Plugin
 Plugin URI: https://myradplugin.com
 Description: Custom Plugin That Makes My Site Rad
 Author: Rad Plugin Creator
 Version: 1.0
 Author URI: https://radplugincreator.com
 Text Domain: rad-plugin
 Domain Path: /languages/
 */

Dominio de texto El dominio de texto es un identificador único para que WordPress reconozca todo el texto que pertenece a un complemento y debe coincidir con el slug del complemento. Esto es especialmente importante si tu complemento está alojado en WordPress.org; estos deben coincidir para que GlotPress importe correctamente las traducciones para tu complemento.

En nuestro ejemplo, el archivo del complemento se llama rad-plugin.php y el dominio de texto es rad-plugin

Es posible que ya tengas configurado un dominio de texto. Si no lo haces, recuerda utilizar guiones, no guiones bajos.

Ruta de dominio La ruta del dominio es la carpeta en la que vivirán los archivos de traducción finalizados. Debes crear una nueva carpeta dentro del directorio del complemento, como /languages​​/, y actualizar la ruta del dominio, para que WordPress sepa exactamente dónde buscar los archivos de traducción.

CARGAR TEXTO DOMINIO  #

A continuación, vamos a cargar el dominio de texto agregando la siguiente función a nuestro código. load_plugin_textdomain ()

load_plugin_textdomain( $domain, $abs_rel_path, $plugin_rel_path );

Si hay un archivo de traducción disponible para el idioma del usuario, la función de carga de dominio de texto le dirá a WordPress que lo entregue. Parámetros

• $ domain – dominio de texto (obligatorio)
• $ abs_rel_path – falso (opcional, obsoleto)
• $ plugin_rel_path – /languages​​/ (opcional, ésta es la ruta relativa al directorio que contiene tus archivos de traducción. En nuestro ejemplo, /languages​​/. A partir de 4.6, WordPress buscará estos archivos en el directorio /languages​​/ del complemento, si éste va sin especificar.)

Ejemplo de complemento Rad Para cargar el dominio de texto, lo enlazaremos con la acción ‘plugins_loaded’.

add_action( 'plugins_loaded', 'rad_plugin_load_text_domain' );
function rad_plugin_load_text_domain() {
    load_plugin_textdomain( 'rad-plugin', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
}

AUDITORÍA DE CADENAS  #

El siguiente paso es envolver todas las cadenas de texto del complemento en funciones de traducción. Las funciones de traducción más comunes son __()para devolver una cadena traducida y _e()para hacer eco de una cadena traducida. Ejemplo de complemento Rad

__()
$text = __( 'Super Rad!', 'rad-plugin' );

Esta función funcionará para traducciones simples. Tiene en cuenta dos parámetros; la cadena de texto y el dominio de texto.

_e( 'Super Rad!', 'rad-plugin' );

Esta función simplemente se hace eco del valor. De lo contrario, funciona exactamente como lo hace la función anterior. Hay una gran cantidad de funciones de traducción adicionales que también deben usarse cuando sea apropiado. Otras funciones básicas

__()
_e()
_x()
_ex()
_n()
_nx()
_n_noop()
_nx_noop()
translate_nooped_plural()

Funciones de fecha y número

number_format_i18n() date_i18n()

Funciones de escape No olvides escapar de los datos que se están generando mediante las siguientes funciones de escape.

esc_html__()
esc_html__()
esc_html_x()
esc_attr__()
esc_attr_e()
esc_attr_x()

En nuestro ejemplo de Rad, podríamos tener una línea de código de complemento que se parece a esto:

function create_section() {
    esc_html_e( 'Below are your settings for Rad Plugin', 'rad-plugin' );
}

CREAR UN ARCHIVO POT  #

El último paso es crear un archivo POT. Hay algunas herramientas diferentes disponibles para generar este tipo de archivo, pero para este tutorial, nos ceñiremos a las recomendaciones del códice de WordPress y usaremos Poedit, una GUI fácil de usar para administrar traducciones. Nota: Si tu complemento o tema ya está en el repositorio de WordPress.org, puedes omitir este proceso y generar un archivo POT desde la página de administración. En este caso, no es necesario generar un archivo.po para cada idioma. La introducción de GlotPress y paquetes de idiomas en 2015 simplificó el proceso de traducción; todo lo que se necesita para GlotPress es el archivo.pot, que será importado por WordPress.org y servido a los traductores a través del panel de control translate.wordpress.org. Colaboradores de todo el mundo utilizarán este panel para proporcionar traducciones el #WPTranslateDay.

Descarga Poedit  #

Configuración de Poedit Propiedades de traducción Empieza por ir a Archivo > Nuevo. Luego, selecciona el idioma nativo de tu complemento y presiona Aceptar.

A continuación, selecciona Catálogo > Nuevo. Ingresa el nombre del proyecto, la versión, el contacto y el idioma.

Rutas: Selecciona la pestaña Rutas de origen a continuación. Si se trata de un archivo nuevo, primero deberás guardarlo. Siguiendo nuestro ejemplo, seleccionaríamos Archivo > Guardar como para guardar como un archivo.po en el directorio /languages​​/ dentro de rad-plugin. Nuevamente, el nombre del archivo debe coincidir con el slug de su complemento.

rad-plugin.po 

Después de guardar, ingresa la ruta relativa al directorio donde estarán tus archivos de traducción. En este ejemplo, languajes.

Palabras clave: Selecciona la pestaña Palabras clave de fuentes. Haz clic en el icono + para agregar los nombres de función adecuados.

Hoja de referencia  n.º

__
_e
_x
_ex
_n
_nx
_n_noop
_nx_noop
translate_nooped_plural
number_format_i18n
date_i18n
esc_html__
esc_html__
esc_html_x
esc_attr__
esc_attr_e
esc_attr_x

Luego, puedes hacer clic en Aceptar y luego en Archivo> Guardar. Poedit guardará un archivo.mo y.po. Puedes crear el archivo.pot copiando el archivo.po y agregando una extensión.pot. Los usuarios internacionales pueden usar el archivo.pot de plantilla para traducir las cadenas a su idioma.

Internacionaliza tu tema  #

El proceso para internacionalizar tu tema es prácticamente idéntico al I18N para complementos. Comenzaremos verificando el encabezado del tema y terminaremos generando otro archivo POT.

ENCABEZADO DEL TEMA  #

Verifica el encabezado de tu tema para asegurarte de que tu dominio de texto y la ruta del dominio están configurados. Encabezado de tema de ejemplo

/*
Theme Name: Rad Theme
Author: Rad Theme Author
Text Domain: rad-theme
Domain Path: /languages/
*/

CARGAR DOMINIO DE TEXTO  #

El siguiente paso es cargar un dominio de texto en el archivo functions.php de tu tema esta vez. load_theme_textdomain ()

load_theme_textdomain( 'radtheme', get_template_directory() . '/languages' );

Para que estos archivos se carguen, debes registrarlos con la acción after_setup_theme.

add_action( 'after_setup_theme', 'rad_theme_setup' );
function rad_theme_setup() {
    load_theme_textdomain( 'radtheme', get_template_directory() . '/languages' );
}

AUDITORÍA DE CADENAS  #

¡Es hora de otra auditoría de cadenas! Deberías estar familiarizado con las funciones básicas de traducción en este punto. Echemos un vistazo a algunas traducciones más complicadas. Marcadores de posición: Las variables PHP como el ejemplo siguiente no se traducirán correctamente sin el uso de marcadores de posición.

echo "We added $count rad points."; 

printf () y sprintf () Estas funciones utilizan marcadores de posición como % s, o % d para enteros, para interpolar una cadena de texto con contenido dinámico. Ejemplo de tema Rad

/* Translators: %d is the number of rad points added */

printf( esc_html__( 'We added %d rad points.', 'rad-plugin' ), $count );

Plurales La _n()función puede manejar traducciones de cadenas más complejas como plurales, pero no se recomienda debido a sus limitaciones dentro del software de traducción. En su lugar, puedes escribir una declaración if simple para distinguir entre palabras en singular y en plural. Ejemplo de complemento Rad

If ( 1 === $rad_points_found ) {
    $message = __( '1 rad point', 'rad-plugin' );
} else {
    /* Translators: %s is the number of rad points found */
    $message = sprintf( __( '%s rad points' , 'rad-plugin' ) , $rad_points_found );
}

GENERAR ARCHIVO POT  #

El proceso para generar archivos POT de temas es el mismo que para generar archivos POT de complementos. Exploremos algunos métodos a continuación. Línea de comando Con WordPress Trunk y el paquete gettext GNU instalados, puedes realizar este paso rápidamente ejecutando el script makepot.php en la línea de comandos. Abre la línea de comando y navega hasta el directorio de herramientas I18N.

cd wpdev/tools/i18n/ 

El guión debería verse así:

php path/to/makepot.php wp-theme path/to/rad-theme rad-theme.pot 

El script hará lo suyo y el archivo terminado, rad-theme.pot, terminará en el directorio actual. Tareas grunt Otro método para crear un archivo POT es ejecutar tareas de Grunt usando grunt-wp-i18n o grunt-pot. Los ejecutores de tareas como Grunt pueden automatizar muchas tareas tediosas, como generar archivos POT. Para crear su archivo POT, asegúrate de tener instalado node.js primero. Luego, instala Grunt en tu directorio de idioma a través de la línea de comando, y listo. Ahora, puedes ejecutar rápidamente estos comandos I18N y hacer tu archivo de traducción sin dejar la comodidad de la línea de comandos.

JavaScript I18N  #

Si eres un desarrollador moderno de temas o complementos, es probable que uses JavaScript para manejar algún componente de tu proyecto. wp_localize_script es una función eficaz para extraer datos PHP para proporcionarlos a tus scripts, y es la única forma de traducir JavaScript dentro de WordPress.

WP_LOCALIZE_SCRIPT ()  #

Esta función nos permitirá localizar cadenas del lado del servidor en PHP y proporcionar cadenas de texto como un objeto JavaScript para el script.

wp_localize_script( $handle, $name, $data ); 

PARAMETROS  #

• $ handle: el manejo del script para el que los datos debe estar disponible (obligatorio: debe coincidir con el identificador del script para el que son estos datos, consulta el ejemplo a continuación)
• $ name – nombre del objeto que contiene los datos (obligatorio – debe ser único)
• $ data: una matriz de datos para pasar al script (obligatorio).

EJEMPLO DE PLUGIN RAD  #

add_action( 'wp_enqueue_scripts', 'rad_theme_scripts' );
function rad_theme_scripts() {
    wp_enqueue_script( 'rad-theme-script', get_template_directory_url() . '/js/rad-theme-script.js' );
    wp_localize_script( 'rad-theme-script', 'rad-I18n',
        array(
            'message' => __( 'Super Rad!', 'rad-theme' ),
        ) 
    );
}

ACCESO A DATOS EN JAVASCRIPT  #

El fragmento de código simple a continuación es un ejemplo de cómo acceder a estos datos en su archivo JavaScript.

alert( rad-I18n.message ); 

Recursos adicionales  #

• I18N para desarrolladores de WordPress
• Manual de temas de WordPress: internacionalización
• Manual de complementos de WordPress: internacionalización
• WordPress.tv: I18N

Acabando #

¡Felicidades! Acabas de internacionalizar su tema y/o complemento, haciéndolo accesible para que las personas de todos los idiomas nativos se beneficien. Ya sea que tu proyecto se distribuya a través del repositorio de WordPress o se desarrolle a medida para el sitio web de tu organización, la internacionalización de tus archivos todo tiene ventajas desde el principio.

• Haz que tus contribuciones de código abierto sean accesibles a nivel mundial.
• Genera conversaciones con nuevos clientes en mercados extranjeros.
• Ahorra tiempo y reduce las laboriosas actualizaciones en el futuro.

Siempre internacionalízate.