Cómo añadir correctamente JavaScripts y Estilos en WordPress

¿Quieres aprender a añadir correctamente JavaScripts y hojas de estilo CSS en WordPress? Muchos usuarios de bricolaje suelen cometer el error de llamar directamente a sus scripts y hojas de estilo en plugins y temas. En este artículo, te mostraremos cómo añadir correctamente JavaScripts y hojas de estilo en WordPress. Esto será especialmente útil para aquellos que están empezando a aprender a desarrollar temas y plugins para WordPress.

Error común al añadir scripts y hojas de estilo en WordPress

Muchos nuevos desarrolladores de plugins y temas de WordPress cometen el error de añadir directamente sus scripts o CSS en línea en sus plugins y temas

Algunos utilizan erróneamente el wp_head para cargar sus scripts y hojas de estilo

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

Aunque el código anterior puede parecer más fácil, es la forma incorrecta de añadir scripts en WordPress, y conduce a más conflictos en el futuro.

Por ejemplo, si cargas jQuery manualmente y otro plugin carga jQuery a través del método adecuado, entonces tienes jQuery cargándose dos veces. Si se carga en cada página, esto afectará negativamente a la velocidad y al rendimiento de WordPress.

También es posible que se trate de versiones diferentes, lo que también puede causar conflictos.

Dicho esto, veamos la forma correcta de añadir scripts y hojas de estilo

¿Por qué poner en cola scripts y estilos en WordPress?

WordPress tiene una fuerte comunidad de desarrolladores. Miles de personas de todo el mundo desarrollan temas y plugins para WordPress

Para asegurarse de que todo funciona correctamente, y de que nadie pisa a otro, WordPress tiene un sistema de cola. Este sistema proporciona una forma programable de cargar JavaScripts y hojas de estilo CSS

Utilizando las funciones wp_enqueue_script y wp_enqueue_style, le dices a WordPress cuándo cargar un archivo, dónde cargarlo y cuáles son sus dependencias.

Este sistema también permite a los desarrolladores utilizar las bibliotecas de JavaScript incorporadas que vienen con WordPress en lugar de cargar el mismo script de terceros varias veces. Esto reduce el tiempo de carga de la página y ayuda a evitar conflictos con otros temas y plugins

¿Cómo poner en cola correctamente los scripts en WordPress?

Cargar correctamente los scripts en WordPress es muy fácil. A continuación se muestra un código de ejemplo que debes pegar en tu archivo de plugins o en el archivo functions.php de tu tema para cargar correctamente los scripts en WordPress.

?php
function wpb_adding_scripts() {

wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);

wp_enqueue_script('my_amazing_script');
}
 
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Explicación:

Empezamos registrando nuestro script a través del wp_register_script() función. Esta función acepta 5 parámetros:

• $manejo - Handle es el nombre único de tu script. El nuestro se llama "mi_guión_asombroso"
• $src - src es la ubicación de tu script. Estamos utilizando la función plugins_url para obtener la URL adecuada de nuestra carpeta de plugins. Una vez que WordPress encuentre eso, entonces buscará nuestro nombre de archivo amazing_script.js en esa carpeta.
• $deps - deps es para la dependencia. Como nuestro script utiliza jQuery, hemos añadido jQuery en el área de dependencias. WordPress cargará automáticamente jQuery si no se está cargando ya en el sitio.
• $ver - Este es el número de versión de nuestro script. Este parámetro no es necesario.
• $in_footer - Queremos cargar nuestro script en el pie de página, por lo que hemos establecido el valor como verdadero. Si quieres cargar el script en la cabecera, entonces lo harías falso.

Después de proporcionar todos los parámetros en wp_register_scriptpodemos llamar al script en wp_enqueue_script() que hace que todo ocurra

El último paso es utilizar el gancho de acción wp_enqueue_scripts para cargar realmente el script. Como se trata de un código de ejemplo, lo hemos añadido justo debajo de todo lo demás

Si vas a añadir esto a tu tema o plugin, entonces puedes colocar este gancho de acción donde el script sea realmente necesario. Esto te permite reducir la huella de memoria de tu plugin

Ahora algunos se preguntarán ¿por qué vamos a dar el paso extra de registrar el script primero y luego encauzarlo? Bueno, esto permite a los propietarios de otros sitios anular el registro de tu script sin modificar el código principal de tu plugin.

Poner en cola correctamente los estilos en WordPress

Al igual que los scripts, también puedes poner en cola tus hojas de estilo. Mira el siguiente ejemplo

<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

En lugar de utilizar wp_enqueue_script, ahora utilizamos wp_enqueue_style para añadir nuestra hoja de estilo

Observa que hemos utilizado wp_enqueue_scripts gancho de acción tanto para los estilos como para los scripts. A pesar del nombre, esta función sirve para ambos

En los ejemplos anteriores, hemos utilizado plugins_url para señalar la ubicación del script o estilo que queríamos poner en cola

Sin embargo, si utilizas la función de encauzar scripts en tu tema, entonces simplemente utiliza get_template_directory_uri() en su lugar. Si trabajas con un tema hijo, utiliza get_stylesheet_directory_uri()

A continuación se muestra un código de ejemplo:

<?php
 
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . 'https://cdn.wpbeginner.com/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
 
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Esperamos que este artículo te haya ayudado a aprender cómo añadir correctamente jacvascript y estilos en WordPress. También puedes estudiar el código fuente de los principales plugins de WordPress para ver algunos ejemplos de código de la vida real

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.