Agregar Javascript a los temas de WordPress de la manera correcta

Existe una forma específica de agregar Javascript a su tema de WordPress para evitar conflictos con los complementos 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, le mostraré cómo llamar correctamente a sus archivos javascript utilizando su archivo functions.php para que se carguen directamente en la etiqueta de encabezado o pie de página de su sitio. De esta manera, si está desarrollando un tema para su distribución y su usuario final quiere modificar los scripts a través de un tema secundario, pueden hacerlo o si están usando minificación / almacenamiento en caché u otros complementos de optimización, funcionarán correctamente. Y si está trabajando con un tema hijo, sus scripts se agregan de la manera correcta, sin copiar los archivos header.php o footer.php en su tema hijo, lo que nunca debería ser necesario (cuando se trabaja con un tema bien codificado)

Manera incorrecta de agregar Javascript a los temas de WordPress

Llamar al javascript en su archivo header.php o footer.php como se muestra a continuación, NO es la forma correcta y recomiendo encarecidamente que no lo haga, a menudo causa conflictos con otros complementos y hacer las cosas manualmente cuando se trabaja con un CMS nunca es una buena idea.

La forma correcta de agregar Javascript a los temas de WordPress

Lo mejor para agregar javascript a su tema de WordPress es hacerlo a través del archivo functions.php usando wp_enqueue_script. El uso de la acción wp_enqueue_scripts para cargar su javascript ayudará a mantener su tema fuera de problemas.

Ejemplo

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

El código anterior cargará el archivo my-script.js en su sitio. Como puede ver, solo he incluido $ handle, pero también puede agregar dependencias para su script, número de versión y si cargarlo en el encabezado o pie de página (el predeterminado es el encabezado).

La función wp_enqueue_script () se puede usar técnicamente en cualquier tema o archivo de plantilla de complemento, pero si está cargando scripts globales, querrá colocarlo en el archivo function.php de su tema o en un archivo separado específicamente destinado a cargar scripts en el sitio. Pero si solo está buscando cargar un script en un archivo de plantilla específico (por ejemplo, en publicaciones de la galería), puede 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 guiones según sea necesario.

Scripts alojados en WordPress

Una cosa interesante 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 usa en casi todos los proyectos, SIEMPRE debe cargarse desde WordPress y nunca alojarse en un sitio de terceros como Google. Entonces, antes de agregar un script personalizado a su proyecto, verifique la lista de scripts registrados para asegurarse de que no esté incluido en WordPress y, si lo está, debe cargar ese en lugar de registrar el suyo.

Usando el gancho de cola de WordPress

Anteriormente mencionamos la función necesaria para cargar un script en su sitio, sin embargo, cuando trabaje con archivos que no son de plantilla, como su archivo functions.php, debe agregar esta función dentro de otra función enganchada en los ganchos adecuados de WordPress, de esta manera sus scripts se obtienen registrado con todos los demás scripts registrados por WordPress, complementos de terceros y su tema principal cuando se usa un tema secundario.

WordPress tiene dos ganchos de acción diferentes que puede usar para llamar a sus scripts.

  1. wp_enqueue_scripts – acción utilizada para cargar scripts en el front-end
  2. admin_enqueue_scripts – acción utilizada para cargar scripts en el administrador de WP

Aquí hay un ejemplo (que se agregaría a su archivo functions.php) de cómo crear una función y luego usar el gancho de WordPress para llamar a sus scripts.

/**
 * Enqueue a script
 */
function myprefix_enqueue_scripts() {
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts' );

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

Adición de código JavaScript en línea

Si bien puede pegar fácilmente javascript en línea en cualquier archivo de plantilla a través de la etiqueta de secuencia de comandos, puede ser una buena idea usar también enlaces de WordPress para agregar su código en línea, especialmente cuando se trata de un complemento central o código de tema. A continuación, se muestra un ejemplo de cómo agregar scripts en línea a su sitio:

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

Lo que esto hará es agregar su javascript en línea después del script “my-script” registrado previamente. Cuando usa wp_add_inline_script, solo puede agregar código en línea antes o después de un script ya registrado, por lo que si está tratando de modificar el código de un script en particular, asegúrese de que se cargue después de él, o si solo necesita agregar algún código personalizado que pueda enganchar a la secuencia de comandos jquery que generalmente se carga en la mayoría de los temas de WordPress y, si no, puede usar wp_enqueue_script para cargar la versión alojada de WordPress de jQuery.

Al usar este método, las personas pueden eliminar fácilmente sus scripts en línea a través de un tema secundario o un complemento de complemento, mantiene todo su javascript personalizado perfectamente organizado y WordPress lo analiza, lo que puede ser más seguro. Y si está utilizando un tema hijo, puede cargar sus scripts a través de su archivo functions.php en lugar de copiar los archivos header.php o footer.php a su tema hijo.

Dicho esto, si está trabajando en un tema hijo, no necesita hacer esto, simplemente puede volcar su código en su encabezado usando los ganchos wp_head o wp_footer como el ejemplo a continuación:

add_action( 'wp_footer', function() { ?>