Añadir Javascript a los temas de WordPress de la manera correcta

Category: Tutorial 38 0

Hay una forma específica de añadir Javascript a tu tema de WordPress para prevenir cualquier conflicto con los plugins o los temas principales de WordPress. El problema es que muchos “desarrolladores” llaman a sus archivos Javascript directamente en el archivo header.php o footer.php que es la forma incorrecta de hacerlo.

En esta guía te mostraré cómo llamar correctamente tus archivos javascript usando tu archivo functions.php para que se carguen directamente en la etiqueta de cabecera o pie de página de tu sitio. De esta manera, si estás desarrollando un tema para la distribución y tu usuario final quiere modificar los scripts a través de un tema hijo que pueda o si están usando minificación/caching u otros plugins de optimización funcionarán correctamente. Y si estás trabajando con un tema hijo, tus scripts se añaden de la forma correcta, sin copiar los archivos header.php o footer.php en tu tema hijo, que no deberían ser necesarios nunca (cuando se trabaja con un tema bien codificado)

Forma incorrecta de añadir Javascript a los temas de WordPress

Llamar al javascript en su archivo header.php o footer.php como se muestra abajo, NO es la forma correcta y lo recomiendo altamente en contra, muchas veces causa conflictos con otros plugins y hacer las cosas manualmente cuando se trabaja con un CMS nunca es una buena idea.

<script src="https://site.com/wp-content/themes/mytheme/js/my-script.js"></script>

La forma correcta de añadir Javascript a los temas de WordPress

Lo mejor para añadir javascript a tu tema de WordPress es hacerlo a través del archivo functions.php usando wp_enqueue_script. Usar la acción wp_enqueue_scripts para cargar tu javascript ayudará a mantener tu tema fuera de problemas.

Ejemplo

wp_enqueue_script( my-script, get_template_directory_uri() . /js/my-script.js, array(), true );

El código de arriba cargará el archivo my-script.js en su sitio. Como puedes ver, sólo he incluido el $handle pero también puedes añadir dependencias para tu script, el número de versión y si lo cargas en el encabezado o en el pie de página (por defecto es el encabezado).

La función wp_enqueue_script() puede ser técnicamente usada en cualquier tema o archivo de plantilla de plugin pero si estás cargando scripts globales querrás colocarla en el archivo function.php de tu tema o en un archivo separado específicamente destinado a cargar scripts en el sitio. Pero si sólo quieres cargar un script en un archivo de plantilla específico (por ejemplo, en las entradas de la galería) podrías colocar la función directamente en el archivo de plantilla, sin embargo, personalmente recomiendo mantener todos los scripts en un solo lugar y usar condicionales para cargar los scripts según sea necesario.

Guiones alojados en WordPress

Una cosa genial de WordPress es que ya hay un montón de scripts alojados y registrados que puedes usar en el desarrollo de tu tema. Por ejemplo, jQuery, que se utiliza en casi todos los proyectos, debe ser cargado SIEMPRE desde WordPress y nunca alojado en un sitio de terceros como Google. Así que antes de añadir un script personalizado a tu proyecto comprueba la lista de scripts registrados para asegurarte de que no está ya incluido en WordPress y si lo está deberías cargarlo en lugar de registrar el tuyo propio.

Usando el gancho de cola de WordPress

Anteriormente mencionamos la función necesaria para cargar un script en su sitio, sin embargo, cuando se trabaja con archivos que no son de plantilla, como el archivo functions.php, se debe agregar esta función dentro de otra función enganchada en los ganchos apropiados de WordPress, de esta manera sus scripts se registran con todos los demás scripts registrados por WordPress, los plugins de terceros y su tema padre cuando se utiliza un tema hijo.

WordPress tiene dos ganchos de acción diferentes que puedes usar para llamar a tus guiones.

  1. wp_enqueue_scripts – acción usada para cargar los scripts en el front-end
  2. admin_enqueue_scripts – acción usada para cargar scripts en el WP admin

Aquí hay un ejemplo (que se añadiría al archivo functions.php) de cómo crear una función y luego usar el gancho de WordPress para llamar a tus guiones.

/**  * Enqueque un guión  */ function myprefix_enqueue_scripts() {     wp_enqueue_script( my-script, get_template_directory_uri() . /js/mi-script.js, array(), true ); } add_action( wp_enqueue_scripts, myprefix_enqueue_scripts ); 

Nota : ¿Ves como estamos usando la función "get_template_directory_uri" al definir la ubicación de tu script? Esta función crea una URL para tu carpeta de temas. Si estás trabajando con un tema hijo, querrás usar "get_stylesheet_directory_uri" en su lugar para que apunte al tema hijo y no al tema padre.

Añadiendo el código de JavaScript en línea

Aunque puedes pegar fácilmente javascript en línea en cualquier archivo de plantilla mediante la etiqueta del script, puede ser una buena idea usar también ganchos de WordPress para añadir tu código en línea, especialmente cuando se trata de un plugin de núcleo o código de tema. A continuación se muestra un ejemplo de cómo añadir scripts inline a tu sitio:

function myprefix_add_inline_script() {     wp_add_inline_script(mi-script, alert("hello world");, after ); } add_action( wp_enqueue_scripts, myprefix_add_inline_script ); 

Lo que esto hará es añadir su javascript en línea después del script "mi-script" registrado anteriormente. Cuando se utiliza wp_add_inline_script sólo se puede añadir código inline antes o después de un script ya registrado, así que si estás intentando modificar el código de un script en particular asegúrate de que se carga después de él, o si sólo necesitas añadir algún código personalizado puedes engancharlo al script jquery que generalmente se carga en la mayoría de los temas de WordPress y si no puedes utilizar el wp_enqueue_script para cargar la versión alojada de WordPress de jQuery.

Con este método la gente puede eliminar fácilmente sus scripts en línea a través de un tema para niños o un complemento de plugin, mantiene todo su javascript personalizado organizado de forma ordenada y es analizado por WordPress, lo que puede ser más seguro. Y si estás usando un tema secundario puedes cargar tus scripts a través del archivo functions.php en lugar de copiarlos en el encabezado.php o el pie.php en el tema secundario.

Dicho esto, si estás trabajando en un tema para niños no necesitas hacer esto, puedes simplemente volcar tu código en el encabezado usando el wp_head o los ganchos wp_footer como en el ejemplo de abajo:

add_action( wp_footer, function() { ?> 	wp_footer, función() { ?>..; 		( function( $ ) { 			"Usar estrictamente"; 			$( documento ).on( listo, función() { 				// Su código personalizado aquí 			} ); 		} ( jQuery ) ); 	...y la escritura..; };?php } );

Related Articles