Hay una forma específica de agregar Javascript a su tema de WordPress para evitar conflictos con complementos o 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 usando su archivo functions.php para que se carguen directamente en la etiqueta de encabezado o pie de página de su sitio. De esta forma, si está desarrollando un tema para su distribución y su usuario final quiere modificar los scripts a través de un tema secundario, puede hacerlo o si está usando minificación/caché u otros complementos de optimización, funcionarán correctamente. Y si está trabajando con un tema secundario, sus scripts se agregan de la manera correcta, sin copiar los archivos header.php o footer.php en su tema secundario, que nunca deberían ser necesarios (cuando se trabaja con un tema bien codificado)
Manera incorrecta de agregar Javascript a los temas de WordPress
Llamar a 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.
<script src="https://site.com/wp-content/themes/mytheme/js/my-script.js"></script>
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 secuencia de comandos, el número de versión y si cargarlo en el encabezado o pie de página (el valor predeterminado es el encabezado).
La función wp_enqueue_script() técnicamente se puede usar 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 diseñado específicamente para cargar scripts en el sitio. Pero si solo está buscando cargar un script en un archivo de plantilla específico (por ejemplo, en las 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 guiones registrados para asegurarse de que no esté ya incluido en WordPress y, si lo está, debe cargarlo en lugar de registrar el suyo propio.
Uso del gancho de puesta en cola de WordPress
Anteriormente mencionamos la función necesaria para cargar una secuencia de comandos en su sitio, sin embargo, cuando trabaja con archivos que no son de plantilla, como su archivo functions.php, debe agregar esta función dentro de otra función conectada a los ganchos adecuados de WordPress, de esta manera sus secuencias de comandos obtienen registrado con todos los demás scripts registrados por WordPress, complementos de terceros y su tema principal cuando usa un tema secundario.
WordPress tiene dos ganchos de acción diferentes que puede usar para llamar a sus scripts.
- wp_enqueue_scripts – acción utilizada para cargar scripts en el front-end
- 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 secundario, querrá usar «get_stylesheet_directory_uri» en su lugar para que apunte a su tema secundario y no al tema principal.
Agregar 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 ganchos de WordPress para agregar su código en línea, especialmente cuando se trata de un complemento principal o un código de tema. A continuación se muestra un ejemplo de cómo agregar secuencias de comandos 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» previamente registrado. Al usar 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, o si solo necesita agregar un código personalizado, puede enganchar al script jquery que generalmente cargan la mayoría de los temas de WordPress y, si no, puede usar wp_enqueue_script para cargar la versión de jQuery alojada en WordPress.
Al usar este método, las personas pueden eliminar fácilmente sus scripts en línea a través de un tema secundario o 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 secundario, puede cargar sus scripts a través de su archivo functions.php en lugar de copiar los archivos header.php o footer.php en su tema secundario.
Dicho esto, si está trabajando en un tema secundario, no necesita hacer esto, simplemente puede volcar su código en su encabezado, ya sea usando los ganchos wp_head o wp_footer, como el ejemplo a continuación:
add_action( 'wp_footer', function() { ?>
<script>
( function( $ ) {
'use strict';
$( document ).on( 'ready', function() {
// Your custom code here
} );
} ( jQuery ) );
</script>
<?php } );