Cómo agregar correctamente JavaScripts y estilos en WordPress

¿Quieres aprender a añadir correctamente JavaScripts y hojas de estilo CSS en WordPress? Muchos usuarios de DIY a menudo cometen el error de llamar directamente a sus scripts y hojas de estilo en plugins y temas. En este artículo, le mostraremos cómo añadir correctamente JavaScripts y hojas de estilo en WordPress. Esto será particularmente útil para aquellos que están empezando a aprender el tema de WordPress y el desarrollo de plugins.

Error común al agregar scripts y hojas de estilo en WordPress

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

Algunos usan erróneamente la función wp_head para cargar sus scripts y hojas de estilo.

123456

Mientras que 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 carga jQuery manualmente y otro plugin carga jQuery a través del método apropiado, entonces tiene que cargar jQuery dos veces. Si se carga en cada página, esto afectará negativamente la velocidad y el rendimiento de WordPress.

También es posible que las dos sean versiones diferentes que también pueden causar conflictos.

Dicho esto, echemos un vistazo a la forma correcta de añadir scripts y hojas de estilo.

¿Por qué hacer cola de guiones 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 que nadie está pisando los dedos de los pies de otro, WordPress tiene un sistema de colas. Este sistema proporciona una forma programable de cargar JavaScripts y hojas de estilo CSS.

Usando 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 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 encolar correctamente los scripts en WordPress?

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

12345678910?phpfunction 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:

Comenzamos por registrar nuestro script a través de la función wp_register_script(). Esta función acepta 5 parámetros:

  • $handle – Handle es el nombre único de su script. El nuestro se llama «my_amazing_script»
  • $src – src es la ubicación de su script. Estamos utilizando la función plugins_url para obtener la URL correcta de nuestra carpeta de plugins. Una vez que WordPress lo encuentre, 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, así que hemos establecido que el valor sea verdadero. Si quieres cargar el script en el encabezado, entonces lo harías falso.

Después de proporcionar todos los parámetros en wp_register_script, podemos llamar al script en wp_enqueue_script() que hace que todo suceda.

El último paso es usar el gancho de acción wp_enqueue_scripts para cargar el script. Ya que este es un código de ejemplo, lo hemos añadido justo debajo de todo lo demás.

Si estabas añadiendo esto a tu tema o plugin, entonces puedes colocar este gancho de acción donde el script es realmente necesario. Esto le permite reducir el espacio de memoria de su plugin.

Ahora algunos se preguntarán por qué estamos dando el paso extra de registrar primero el script y luego ponerlo en cola. Bueno, esto permite a otros propietarios de sitios eliminar el registro de su script sin modificar el código central de su plugin.

Encolar correctamente los estilos en WordPress

Al igual que los scripts, también puede poner en cola sus hojas de estilo. Mira el ejemplo de abajo:

1234567?>

En lugar de usar wp_enqueue_script, ahora estamos usando wp_enqueue_style para añadir nuestra hoja de estilos.

Note que hemos usado wp_enqueue_scripts action hook tanto para estilos como para scripts. A pesar del nombre, esta función funciona para ambos.

En los ejemplos anteriores, hemos utilizado la función plugins_url para apuntar a la ubicación del script o estilo que queríamos encolar.

Sin embargo, si está usando la función enqueue scripts en su tema, entonces simplemente use get_template_directory_uri() en su lugar. Si está trabajando con un tema hijo, utilice get_stylesheet_directory_uri().

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

123456789

Valora el post

Deja un comentario