Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
Recuerdo haber pensado:"¿Para qué diablos necesitamos JavaScript, cuando tenemos Flash?" cuando tenía catorce años. Aunque todavía recuerdo cómo disfrutaba codificando cosas con ActionScript 2.0 en aquellos tiempos, me di cuenta de cuánto se puede lograr con JavaScript y acabé enamorándome de él. No soy un experto en JavaScript (todavía) pero puedo decir que me he olvidado de Flash por mucho tiempo.
En lo que respecta a WordPress, la mayor plataforma a nivel mundial para crear blogs y gestionar contenido, JavaScript es - por supuesto - muy útil para muchas cosas: "sliders" o deslizadores de contenido, "lightboxes" o galerías de cajas de luz, fluidos carritos de compra, elementos de la interfaz de usuario como pestañas o acordeones ... lo que quieras. Pero, ¿cómo debemos usar JavaScript con WordPress?
Devolver o reflejar un montón de elementos de script HTML es una forma de hacerlo - pero es erróneo. En este tutorial, vamos a ver cómo poner en cola archivos JavaScript dentro de nuestras páginas y cómo pasar datos traducibles al código JavaScript.
Los dos problemas al usar JavaScript en proyectos de WordPress
Básicamente existen dos problemas importantes con los que te podrías encontrar si inyectas archivos JavaScript directamente en WordPress con código HTML:
- Código duplicado en la misma página: Supongamos que has creado un plugin para WordPress y necesitas incluir jQuery. Haces
echode la etiqueta descriptadecuada en el<head>¡y funciona! Pero ¿qué pasa si otro plugin quiere usar también jQuery - ¿cómo sabría que jQuery ya está cargado en el<head>? No lo sabría, e incluso aunque el otro plugin incluyese jQuery de la manera correcta, la página todavía tendría dos instancias de jQuery, porque no lo eres. - Problemas con la traducción: Imaginemos que estás creando un plugin de galería lightbox y necesitas pasar cadenas como "Siguiente", "Anterior" e "Imagen X de Y". ¿Cómo lo harías sin reflejar JavaScript en línea en el
<head>?
La manera correcta de usar JavaScript con WordPress
La solución al primer problema consiste simplemente en "registrar" y "poner en cola" los archivos JS con las dos funciones principales de WordPress: wp_register_script() y wp_enqueue_script(). La solución al segundo problema es aún más fácil: la función core wp_localize_script() te permite pasar datos traducibles a tu código JS.
Registrar archivos JavaScript
Antes de que puedas "poner en cola" los archivos JavaScript, primero debes "registrarlos". Y eso se hace simplemente usando una función llamada wp_register_script():
1 |
|
2 |
<?php wp_register_script( $name, $url, $dependencies, $version, $load_in_footer ); ?> |
Algunos puntos sobre los parámetros:
- Name (obligatorio, cadena): el nombre del script. Puedes elegir el nombre que desees, siempre que no lo use otro script.
- URL (obligatorio, cadena): la dirección URL del script. No hay necesidad de explicar esto, ¿verdad? :)
- Dependencias (opcional, matriz): los nombres de otros scripts de los que depende nuestro script. Por ejemplo, si el script depende de jQuery, deberá cargarse después de haber cargado jQuery. En este caso, debes utilizar
array( 'jquery' )para este parámetro. - Version (opcional, cadena): el número de versión del script. Puedes elegir entre proporcionar una cadena, establecer el parámetro en
nullo dejarlo vacío. Si lo estableces en string, se agregará al código de salida comomy-script.js?ver-1.2. Si dejas el parámetro vacío, lo que se añadirá como número de versión será la versión de tu instalación WordPress. Si lo establece ennull, no se agregará nada. - Load in Footer (opcional, booleano): Al poner en cola este script registrado, se cargará en la sección del
<head>. Pero si estableces este parámetro entrue, se cargará justo antes del cierre de la etiqueta<body>.
También puede "anular el registro" de scripts que ya están registrados por el núcleo u otros plugins con la función wp_deregister_script(). Solo acepta un parámetro 'name', que proporciona el nombre del script que va a ser "desregistrado". Obviamente.
Hay un montón de scripts en el Codex de WordPress que ya están registrados en el núcleo. Aunque, deberías revisar el listado para comprobar la versión actual de WordPress, ya que se refiere a WordPress versión 3.3 y podría estar desactualizado.
Incluir en cola archivos JavaScript
Puedes registrar un script, pero eso no significa que se vaya a cargar automáticamente. Después de registrar tus scripts, debes "ponerlos en cola" con la función wp_enqueue_script():
1 |
|
2 |
<?php wp_enqueue_script( $name, $url, $dependencies, $version, $load_in_footer ); ?> |
Algunas notas sobre los parámetros:
- Name (obligatorio, cadena): el nombre del script.
- URL (opcional, cadena): la dirección URL del script. Como puedes ver, esta vez el parámetro URL es opcional porque si ya has registrado el script, bastaría con proporcionar el nombre y ya lo tendrías listo. Pero si no has registrado el script, debes proporcionar una dirección URL para este parámetro.
- Dependencies (opcional, matriz): los nombres de otros scripts de los que depende el nuestro.
- Version (opcional, cadena): el número de versión del script.
- Load in footer (opcional, booleano): Si se establece en
true, el script se cargará justo antes del cierra de la etiqueta<body>.
También puedes "eliminar de la cola" scripts con la función wp_dequeue_script(). Similar a la función wp_deregister_script(), y que solo acepta un parámetro 'name'.
Puedes comprobar el "estado" de un script con la función wp_script_is(). Por ejemplo, si deseas comprobar si 'my-script' está en cola, sencillamente usa wp_script_is( 'my-script', 'queue' ) en una instrucción if.
Ganchos para poner en cola tus scripts
La forma correcta de poner en cola tus scripts (y también los estilos) consiste en utilizar los siguientes ganchos:
- wp_enqueue_scripts - Esto pone en cola los scripts en el front-end de tu sitio web.
- admin_enqueue_scripts - Esto pone en cola los scripts en el back-end de tu sitio web.
- login_enqueue_scripts - Esto pone en cola los scripts en la pantalla de inicio de sesión.
1 |
|
2 |
<?php
|
3 |
function my_scripts_loader() { |
4 |
wp_enqueue_script( 'my-js', 'filename.js', false ); |
5 |
}
|
6 |
add_action( 'wp_enqueue_scripts', 'my_scripts_loader' ); |
7 |
?>
|
Debido a problemas de compatibilidad, no debes usar los ganchos admin_print_scripts o admin_print_styles.
Para más información sobre la inclusión de JavaScript (¡y CSS!) en tus temas y plugins, puedes consultar Cómo incluir JavaScript y CSS en tus temas y plugins de WordPress disponible en Tuts+.
Pasar datos traducibles dentro de JavaScript
Cuando se trata de localización, JavaScript siempre es un problema con WordPress... porque mucha gente no conoce la simple y pequeña función llamada wp_localize_script():
1 |
|
2 |
<?php
|
3 |
$l10n_data = array( |
4 |
'nextItem' => __( 'Next', 'my-script' ), |
5 |
'prevItem' => __( 'Previous', 'my-script' ), |
6 |
'imageTitle' => __( 'Image %d of %d', 'my-script' ) |
7 |
);
|
8 |
|
9 |
wp_localize_script( |
10 |
'name-of-the-script', // (required) the name of the script, 'my-script' for example |
11 |
'nameOfTheObject', // (required) the name of the script, 'my-script' for example |
12 |
$l10n_data // (required) the data to be passed, which can be translatable with the __() function |
13 |
);
|
14 |
?>
|
Después de registrar, poner en cola y localizar el script, puedes pasar la variable localizada en el script utilizando el nombre del objeto y los nombres de los datos, como alert( nameOfTheObject.prevItem );!
Puedes consultar el artículo escrito por Pipping Williamson para un análisis más exhaustivo.
Conclusión
Hay un motivo por el que WordPress es el sistema de gestión de contenido más extendido del mundo: Su potencia proviene de su flexibilidad. Y creo que este tutorial demuestra (una vez más) lo flexible que es.
Este tutorial cubre prácticamente lo que ofrece WordPress en relación al uso de JavaScript para nuestros proyectos. ¿Tienes más consejos o técnicas sobre JavaScript y WordPress? ¡Cuéntanos!
