La guía completa para el uso adecuado de JavaScript con WordPress

Recuerdo haber pensado "¿Para qué diablos necesitamos JavaScript cuando tenemos Flash?" cuando tenia catorce. Aunque todavía recuerdo cómo disfruté codificando cosas con ActionScript 2.0 en ese entonces, vi cuánto se puede lograr con JavaScript y me enamoré de él. No soy un experto en JavaScript (todavía), pero puedo decir que he terminado con Flash durante mucho tiempo..

Cuando se trata de WordPress, la plataforma de blogs y sistema de gestión de contenido más grande del mundo, JavaScript es - por supuesto - muy útil para muchas cosas: controles deslizantes de contenido, galerías de lightbox, carritos de compras elegantes, elementos de IU como pestañas o acordeones ... lo que sea. Pero, ¿cómo debemos usar JavaScript con WordPress??

Volviendo o haciendo eco de un montón de HTML guión Los elementos son una forma de hacerlo, y es incorrecto. En este tutorial, vamos a ver cómo encolar Archivos JavaScript dentro de nuestras páginas y cómo pasar datos traducibles al código JavaScript.

Los dos problemas durante el uso de JavaScript en proyectos de WordPress

Hay básicamente dos problemas importantes que puede encontrar si inyecta archivos JavaScript directamente en WordPress con código HTML:

Código duplicado en la misma página: Digamos que creaste un complemento de WordPress y necesitas incluir jQuery. Tú eco el correcto guión etiqueta en el ¡y funciona! Pero, ¿qué pasaría si otro plugin también quiere usar jQuery? ¿Cómo sabría que jQuery ya está cargado en el ? No lo haría, e incluso si el otro plugin incluye jQuery. la manera correcta, la página lo haría todavía tienes dos instancias de jQuery, porque no eres.
Problemas con la traducción: Digamos que está creando un complemento de galería de lightbox y necesita pasar cadenas como "Siguiente", "Anterior" e "Imagen X de Y". ¿Cómo lo haces sin hacer eco de JavaScript en línea en el ?

La forma correcta de usar JavaScript con WordPress

La solución al primer problema es simplemente "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 del segundo problema es aún más fácil: el núcleo. wp_localize_script () La función le permite pasar datos traducibles a su código JS.

Registro de archivos JavaScript

Antes de poder "poner en cola" los archivos JavaScript, primero debe "registrarlos". Y eso se hace simplemente usando una función llamada wp_register_script ():

Algunas notas sobre los parámetros:

Nombre (requerido, cadena): El nombre del script. Puede elegir el nombre que desee, siempre que no sea utilizado por otro script.
URL (requerido, cadena): La URL del script. No hay necesidad de explicar esto, ¿verdad? :)
Dependencias (opcional, matriz): El nombre (s) de otros scripts de los que depende nuestro script. Por ejemplo, si su script depende de jQuery, deberá cargarse después de jQuery. En este caso, deberías usar array ('jquery') para este parámetro.
Versión (opcional, cadena): El número de versión de su script. Puede elegir entre proporcionar una cadena, estableciendo el parámetro en nulo o dejarlo vacío. Si lo configura en cadena, se agregará al código de salida como my-script.js? ver = 1.2. Si deja el parámetro vacío, la versión de su instalación de WordPress se agregará como número de versión. Si lo pones a nulo, nada será agregado.
Cargar en pie de página (opcional, booleano): Al poner en cola este script registrado, se cargará en el sección. Pero si establece este parámetro en cierto, Se cargará justo antes del cierre. etiqueta.

También puede "anular el registro" de los scripts que ya están registrados por el núcleo u otros complementos con el wp_deregister_script () función. Solo acepta un 'nombre' parámetro, que proporciona el nombre de la secuencia de comandos para ser "desregistrado". Obviamente.

Hay un montón de scripts en el Códice de WordPress que ya están registrados en el núcleo. Sin embargo, debe revisar la lista de la versión actual de WordPress, ya que se refiere a la versión 3.3 de WordPress y puede estar desactualizada..

Encolando archivos JavaScript

Puede registrar un script, pero eso no significa que se vaya a cargar automáticamente. Después de registrar sus scripts, debe "ponerlos en cola" con la wp_enqueue_script () función:

Algunas notas sobre los parámetros:

Nombre (requerido, cadena): El nombre del guión..
URL (opcional, cadena): La URL del script. Como puedes ver, esta vez el parámetro URL es Opcional porque si ya has registrado el script, puedes proporcionar el nombre y listo. Pero si no registró su script, debe proporcionar una URL para este parámetro.
Dependencias (opcional, matriz): El nombre (s) de otros scripts de los que depende nuestro script.
Versión (opcional, cadena): El número de versión de tu script..
Carga en pie de página (opcional, booleano): Si se establece en cierto, el script se cargará justo antes cierra.

También puede "en cola" scripts con el wp_dequeue_script () función. Similar a wp_deregister_script () función, solo acepta un 'nombre' parámetro.

Puede verificar el "estado" de un script con el wp_script_is () función. Por ejemplo, si desea comprobar si 'mi-guión'se pone en cola, simplemente use wp_script_is ('mi-script', 'cola') en un Si declaración.

Enganches para poner en cola sus scripts

La forma correcta de poner en cola sus scripts (y sus estilos, también) es usando los ganchos a continuación:

wp_enqueue_scripts - Éste pone en cola los scripts en la parte delantera de su sitio web..
admin_enqueue_scripts - Éste pone en cola los scripts en el extremo posterior de su sitio web..
login_enqueue_scripts - Este encola scripts en tu pantalla de inicio de sesión.

Debido a problemas de compatibilidad, usted no debe usar los ganchos nombrados admin_print_scripts o admin_print_styles.

Para obtener más información sobre cómo incluir JavaScript (y CSS!) En sus temas y complementos, puede consultar Cómo incluir JavaScript y CSS en sus temas y complementos de WordPress por Japh Thomson en Wptuts+.

Pasar datos traducibles dentro de JavaScript

Cuando se trata de la localización, JavaScript siempre es un problema con WordPress ... porque mucha gente no conoce la pequeña función llamada wp_localize_script ():

  __ ('Next', 'my-script'), 'prevItem' => __ ('Previous', 'my-script'), 'imageTitle' => __ ('Image% d of% d', 'my- guión ')); wp_localize_script ('name-of-the-script', // (requerido) el nombre del script, 'my-script' por ejemplo 'nameOfTheObject', // (requerido) el nombre del script, 'my-script' por ejemplo, $ l10n_data // (requerido) los datos que se pasarán, que se pueden traducir con la función __ ()); ?>

Después de registrar, poner en cola y localizar el script, puede pasar la variable localizada en su script utilizando el nombre del objeto y los nombres de los datos, como alerta (nameOfTheObject.prevItem);!

Puede consultar el artículo de Pipping Williamson para un análisis más completo..

Terminando

Hay una razón por la que WordPress es el sistema de gestión de contenido más grande del mundo: su poder proviene de su flexibilidad. Y creo que este tutorial demuestra (una vez más) lo flexible que es.

Este tutorial cubre prácticamente todo lo que WordPress ofrece sobre el uso de JavaScript para nuestros proyectos. ¿Tienes más consejos o técnicas sobre JavaScript y WordPress? Cuéntanos sobre eso!

Código