Spanish (Español) translation by Rodney Martinez (you can also view the original English article)
En esta serie, echaremos un vistazo a cómo internacionalizar nuestros proyectos WordPress. Para los que quieren unirsenos, les recomiendo que revisen la primer publicación en la serie para que demos un vistazo a todas las funciones que son suministradas en WordPress para ayudar a internacionalizar nuestros strings.
Y aunque es útil, aún no ayuda a explicar que es internacionalización. Como dijimos en la primer publicación:
Internacionalización es el proceso de desarrollar un plugin de modo que pueda ser traducido con mucha facilidad en otros idiomas.
Dado que WordPress domina aproximadamente el 25% de la web y que la web no es local para su país de origen, tiene sentido asegurarse que el trabajo que producimos puede ser traducido en otros lugares.
Queda claro que esto no significa que usted, como programador, es responsable por traducir todos los strings en su código base a varios idiomas que sus clientes pueden usar. En vez de eso, significa que use apropiadamente la APIs para garantizar que alguien más puede venir y ofrecer traducciones para ellos.
Antes de seguir adelante, recordemos:
- Internacionalización, a menudo se refiere a i18n, que es el proceso por el cual construimos nuestro programa para que pueda ser traducido.
- Localización es cuando tomamos los strings y los internacionalizmos y luego los traducimos a la ubicación apropiada.
Bastante fácil para entender en éste punto, ¿cierto? Sin embargo, hay mucha información allá afuera sobre como hacer esto, y puede ser muy difícil separar la señal del ruido, especialmente, si es usted es nuevo haciendo esto.
Peso eso es lo que estas series de tutoriales tienen por objeto hacer: para asegurarse, usted está armado con todo lo que necesita saber para internacionalizar adecuadamente su proyecto WordPress, entender lo que está haciendo y entender cómo probarlo.
Durante los próximos dos artículos, vamos a crear un plugin sencillo que está adecuadamente internacionalizado. Además, vamos a ver cada pieza del plugin que va dentro del código base para internacionalizar para garantizar que comprendimos todo.
En el siguiente artículo, daremos un vistazo en una de las herramientas que he encontrado muy útil para localizar su trabajo y cómo probar que la localización está funcionando bien.
Dicho eso, vamos a comenzar.
Empezando
Para este tutorial en particular, voy a usar la última versión de WordPress que está disponible a través de Subversion. Si tiene una copia local de WordPress instalada y es una versión reciente, ¡eso es magnífico!
Si, de lo contrario, si quiere vivir al filo de la navaja, entonces siéntase con la libertada de revisar esta guía para conseguir la última versión del código.
Finalmente, no va a afectar el trabajo que usted está haciendo, pero es una oportunidad de expandir sus habilidades como desarrollador un poco más.
Preparando el Plugin
Con una copia de WordPress instalada en su máquina, está listo para empezar a trabajar en el plugin. Note que para el propósito de este tutorial, vamos a desarrollar un plugin increíblemente básico.
El propósito no es entender cómo construir un plugin, debido a que ya hemos abordado eso en otros cursos y, también, en otros tutoriales, sin embargo, se trata de entender los nuevos matices que tiene la internacionalización del código base para que entienda qué es lo que está haciendo mientras continua avanzando con el trabajo que estará haciendo en sus proyectos en curso o futuros.
1. Crear el Directorio del Plugin y del Bootstrap
Primero, localice el directorio wp-content/plugins y cree un nuevo directorio llamado tutsplus-i18n. Este es el directorio en el cual vamos a guardar nuestros archivos del plugin. Acertadamente está nombrado como Tuts+ Internationalization.
Continúe y cree un solo archivo en el directorio que será usado para iniciar el plugin. Llame al archivo tutsplus-i18n.php.
Antes de que continuemos, necesitamos decidir qué es lo que hará éste plugin. Ya sabemos que necesitamos mostrar algo al usuario para que pueda practicar la internacionalización (y la ubicación). Esto significa que debería ser un componente UI para el plugin.
Para que al fin, vamos a crear un plugin sencillo que presentará un nuevo ítem del menú debajo del menú Tools. Llameremos al ítem submenú; Server Info, y usaremos datos que están disponibles en PHP para mostrar una pantalla de contenido al usuario en una manera amigable.
Quizás esto podría ser utilizado para el propósito de enviar un registro de depuración para un proveedor si algo sale mal con el plugin.
2. Defina el Plugin
Estoy suponiendo que ya está familiarizado con cómo crear un plugin básico. Si no es así, tenemos una buena cantidad de tutoriales y cursos disponibles sobre cómo hacer eso (como ya lo mencione). Además, el Codex, tiene algo de información sobre cómo empezar a hacer eso.
Si no está familiarizado con cómo hacer eso, entonces le recomiendo revisar los recursos arriba. Con eso dicho, vamos a continuar y a definir los conceptos básicos de nuestro plugin.
Para comenzar, necesitamos definir el encabezado del plugin. Abra tutsplus-i18n.php, y asegúrese que incluye la siguiente información:
<?php /** * The plugin bootstrap File_Upload_Upgrader::cleanup * * @link https://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676 * @since 1.0.0 * @package TutsPlus_i18n * * @wordpress-plugin * Plugin Name: Tuts+ Internationalization * Plugin URI: http://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676 * Description: Easily view internationalized server information. * Version: 1.0.0 * Author: Tom McFarlin * Author URI: https://tommcfarlin.com * Text Domain: tutsplus-i18n * License: GPL-2.0+ * License URI: http://www.gnu.org/licenses/gpl-2.0.txt */
Una vez hecho, guarde el archivo y navegue a la pantalla Plugins en WordPress. Ahí, debería de ver una entrada para el plugin que usted ya creado.
Garantizado, no hará nada hasta este punto, pero podrá ver que vamos en la dirección correcta. Asimismo, observe que agregamos una etiqueta que a menudo no ve con los proyectos WordPress, y que es la etiqueta Text Domain. Esto es lo que estaremos usando para ayudar a internacionalizar nuestro plugin.
Aquí están los detalles específicos de esta etiqueta:
Si usted está traduciendo un plugin o un tema, entonces necesitará usar un dominio de texto para indicar que todos los textos pertenece a ese plugin. Esto incrementa la transferibilidad y ya juega mejor con las herramientas que existen en WordPress. El dominio de texto debe de coincidir con el "slug" del plugin.
Obviamente, hemos definido nuestro dominio de texto como tutsplus-i18n. Verá esto utilizado a través de lo que queda del código base en el resto del tutorial.
Finalmente, no olvide asegurarse en actualizar las etiquetas Author y Author URI para que ajuste su nombre y, también, su página de inicio.
3. Introducir el Elemento del Menú
Lo primero que queremos hacer es introducir un elemento submenú al menú Tools. Para hacer esto, vamos a aprovechar la ventaja del hook: add_submenu_page, ofrecido por WordPress.
Observe que estamos usando la función __(), la cual discutimos en la primer publicación en este tutorial para garantizar que el elemento de texto del menú está apropiadamente internacionalizado para la traducción. Además, note que el segundo parámetro pasado a la función es el mismo como el dominio de texto definido en el encabezado del plugin.
<?php
add_action( 'admin_menu', 'tutsplus_i18n_add_submenu_page' );
/**
* Adds a new submenu item to the Tools menu that will display server
* information to the user.
*
* The menu item is internationalized so that we can provide proper translations
* for users who are outside of our own locale.
*/
function tutsplus_i18n_add_submenu_page() {
add_submenu_page(
'tools.php',
__( 'Server Information', 'tutsplus-i18n' ),
__( 'Server Information', 'tutsplus-i18n' ),
'manage_options',
'tutsplus-i18n-menu',
'tutsplus_i18n_display_submenu_page'
);
}
Ahora, eso no es suficiente. Si usted ha leído la documentación enlazada que presentamos arriba, entonces usted sabe que también necesitamos definir una función que mostrará el contenido de la página. En el código de arriba, hemos mencionado la función como: tutsplus_i18n_display_submenu_page, pero, en realidad, no hemos definido la función.
Vamos a seguir y hacer eso ahora. Lo haremos simple para que el plugin, de hecho, ejecute. La página no mostrará nada, pero el plugin continuará la función.
<?php
/**
* Displays the content of the page associated with the new Server Information
* menu item located in the Tools menu.
*/
function tutsplus_i18n_display_submenu_page() {
echo '';
}
En este punto, usted puede activar su plugin y ver el contenido debajo del menú Tools. Nada será traducido hasta este momento, sin embargo, debería ver un nuevo elemento de menú.
Y cuando usted hace clic sobre el elemento, entonces usted debería de ver algo como la pantalla de arriba. Está en blanco. Pero está bien porque en la siguiente sección vamos a colocar algo de información en la pantalla.
4. Agregando la pantalla del Plugin
Dependiendo acerca de cuales plugins y códigos usted haya estudiado cuando estaba trabajando en los plugins en WordPres, usted ha visto código escrito en una de dos formas (o quizá en ambas) como se relaciona para mostrar una pantalla del plugin.
- Todas las líneas de código HTML y la codificación dentro del archivo principal del plugin.
- El HTML está incluido en un archivo externo que está incluido por medio de archivo PHP principal.
Soy fanático de lo segundo porque creo que ayuda a hacer el código más sostenible. Así que para el propósito de este ejemplo, vamos a seguir ese planteamiento. En este punto, cree un segundo archivo en el directorio de su plugin y llámelo tutsplus-i18n-ui.php.
Después, añada el siguiente código al archivo. Los discutiremos en más detalle justo después de que haya tenido oportunidad de revisarlo.
<?php
/**
* The user interface for the plugin.
*
* @link http://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676
* @since 1.0.0
* @package TutsPlus_i18n
*/
?>
<div class="wrap">
<h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
<span class="description"><?php esc_html_e( 'Information about the environment in which WordPress is running.', 'tutsplus-i18n' ); ?></span>
<table id="tutsplus-i18n-table">
<thead>
<tr>
<th>
<?php esc_html_e( 'Server Key', 'tutsplus-i18n' ); ?>
</th>
<th>
<?php esc_html_e( 'Server Value', 'tutsplus-i18n' ); ?>
</th>
</tr>
</thead>
<tbody>
<?php // This counter is used to determine even/odd rows for styles. ?>
<?php $i = 0; ?>
<?php foreach ( $_SERVER as $key => $val ) { // Input var okay. ?>
<?php // Determine if we're on an odd or even row. ?>
<?php $striped = ( $i % 2 ) ? 'even' : 'odd'; ?>
<tr class="<?php echo esc_attr( $striped ); ?>">
<th>
<?php echo $key ; ?>
</th>
<td>
<?php echo $val; ?>
</td>
</tr>
<?php // Increase the counter by one. ?>
<?php $i++; ?>
<?php } ?>
</tbody>
</table>
</div>
Dese cuenta que aquí vamos a crear el elemento table que mostrará todos los keys y los valores encontrados en PHP: la colección $_SERVER.
Quizás lo más importante que se debe observar aquí es que estamos usando esc_html_e() para nuestra función internacionalización y estamos usando los operadores modulus para ayudarnos a proporcionar algo de estilo para la pantalla.
5. Aplicando estilo al Plugin.
Técnicamente, en este punto, el plugin funcionará. Vamos adelantarnos un paso más y nos vamos a asegurar de que la pantalla luce un poco mejor.
Primero, cree el archivo tutsplus-i18n.css en la raíz del directorio de su plugin y agregue el siguiente código:
#tutsplus-i18n-table {
margin-top: 20px;
border: 1px solid #ccc;
padding: 10px;
}
#tutsplus-i18n-table thead th {
font-size: 15px;
height: 40px;
}
#tutsplus-i18n-table thead,
#tutsplus-i18n-table tbody {
font-family: 'Monaco', 'Menlo', 'Courier New', Monospace;
}
#tutsplus-i18n-table tbody td {
height: 30px;
padding: 5px;
}
#tutsplus-i18n-table tbody tr.odd {
background: #fff;
}
Luego, añada una función para el archivo plugin que adecuadamente encolará este archivo pero solamente en la pantalla Server Information:
<?php
add_action( 'admin_enqueue_scripts', 'tutsplus_i18n_dashboard_styles' );
/**
* Add styles to the table displayed in the Server Info page available from the
* Tools menu.
*/
function tutsplus_i18n_dashboard_styles() {
// Only register the stylesheet if we're on the Server Information page.
if ( 'tools_page_tutsplus-i18n-menu' !== get_current_screen()->id ) {
return;
}
wp_enqueue_style(
'tutsplus-i18n-css',
plugin_dir_url( __FILE__ ) . '/tutsplus-i18n.css',
array(),
'1.0.0',
'all'
);
}
En este punto, el plugin debería tener una pantalla levemente mejor:
No, esto no es necesario, sin embargo, ayuda a garantizar que el plugin se ve un poco más legible en el contexto de lo que estamos haciendo.
¿Qué hay acerca de la Programación Orientada a Objetos?
Para aquellos a quienes le ha encantado seguir mis cursos y tutoriales, saben que prefiero escribir mi código en la programación orientada a objetos que en lugar de la programación procedimental.
Cuando se trata de enseñar un nuevo concepto, me trato de enfocar en las lecciones tan claro como sea posible. Al final, siempre a menudo encuentro que usar la programación procedimental enseña algo como esto que crea menos confusión que cuando se está usando la programación orientada a objetos.
Es decir, la programación orientada a objetos supone que usted tiene un claro entendimiento de ciertos conceptos que tal vez no podría tener cuando va a través del código base. Y si ese es el caso, entonces no será capaz de enfocarse en el material principal de este tutorial.
De este modo, los temas primario que estamos aspirando revisar no tienen nada que ver con la programación orientada a objetos pero con el entendimiento de cómo internacionalizar y, en última instancia, localizar un proyecto WordPress.
En conclusión
En este punto, tenemos un plugin funcional que puede ser descargado, instalado y que se ejecuta dentro de la instalación de WordPress. Aunque está internacionalizado, no tenemos ningún archivo en esa localización para mostrar cómo funciona ese proceso. Usted puede descargar una copia del plugin desde la barra lateral de esta página.
En el siguiente tutorial, vamos a dar un vistazo a cómo podemos crear nuestros archivos localización y recrear otro lugar para probar nuestras traducciones, y además, veremos algunas herramientas que están disponibles para que nosotros las usemos.
Mientras está esperando por el siguiente episodio, no olvide ver lo que tenemos disponible en Envato Market para ayudar a construir su creciente conjunto de herramientas para WordPress o para ejemplos de código para estudiar y llegar a ser mejor conocedor en WordPress.
Si está interesando en aprender más acerca de WordPress desde una perspectiva de desarrollo, observe que trabajo exclusivamente con WordPress y a menudo escribo al respecto. Puede ponerse al día con mis cursos y tutoriales visitando mi página de perfil y puede seguir mi blog y, también, Twitter a través de @tommcfarlin, en donde hablo sobre el desarrollo de software en el contexto de WordPress.
Como de costumbre, por favor, no dude en dejar algún comentario o preguntas en la sección de comentarios que está debajo.
Referencias
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
