Diferencia entre wp_register_script y wp_enqueue_script
Tags: funciones, css, javascript, rendimiento
Published: 2019-11-05 07:06:03

---
title: Diferencia entre wp_register_script y wp_enqueue_script
published: true
tags: Funciones,css,javascript,rendimiento
canonical_url: https://kungfupress.com/diferencia-entre-wp_register_script-y-wp_enqueue_script/
---

La entrada [Diferencia entre wp_register_script y wp_enqueue_script](https://kungfupress.com/diferencia-entre-wp_register_script-y-wp_enqueue_script/) se publicó primero en [KungFuPress](https://kungfupress.com) por [Kung Fu Press](https://kungfupress.com/author/kungfupress/)

Muchas veces me he preguntado cuándo debo usar `wp_register_script()` antes de `wp_enqueue_script()` y si realmente la primera sirve para algo.

Si necesitas cargar un fichero javascript en todas las ocasiones en que se cargue tu página puedes ahorrarte la llamada a `wp_register_script()` y utilizar sólo `wp_enqueue_script()`.

Si sólo usaras `wp_register_script()` el script no se cargaría. Como su propio nombre indica, esta función lo único que hace es registrar el script, decir en qué orden quieres cargarlo y si tiene alguna dependencia, pero necesita `wp_enqueue_script()` para que el script realmente se cargue.

## Entonces ¿cuándo tengo que usar wp\_register\_script? 

Bien, imagina que estás usando un shortcode para mostrar un formulario, una tabla dinámica o cualquier otra cosa que necesite llamar un fichero JavaScript.

Sólo deberías cargar este script si el shortcode se está utilizando en la página o entrada actual. El problema es que cuando se carga el shortcode ya es tarde para hacer la llamada al script porque la cabecera ya se ha cargado.

Al final lo que hacen muchos desarrolladores es cargar los scripts junto con el plugin, pero entonces se cargan siempre y no sólo cuando se utilice el shortcode. Para solucionar este problema existe la función `wp_register_script()`. 

Cuando uses esta función todos los parámetros se los puedes pasar directamente a ella, luego cuando llames a `wp_enqueue_scripts()` sólo necesitas pasarle el “handler” del script.

A continuación te pongo un ejemplo de como deberías cargar el script correctamente:

```
<?php
// Cuando WP cargue la cabecera llama a este hook y tu script quedará registrado

add_action( 'wp_enqueue_scripts', 'kfp_Idea_List_scripts' );

function Kfp_Idea_List_scripts(){ 
  wp_register_script(
    'kfp-vote-link', 
    plugins_url('../js/vote-link.js', __FILE__), 
    array('jquery')
  );
}
add_shortcode('kfp_idea_list', 'Kfp_Idea_list');

function Kfp_Idea_list(){ 
  // El script sólo se carga si se utiliza el shortcode 
  wp_enqueue_script('kfp-vote-link’); 
  /* El shortcode hace lo que tenga que hacer */
} 
```

Si quieres ver este código en su contexto visita [https://github.com/kungfupress/kfp-vota-ideas](https://github.com/kungfupress/kfp-vota-ideas)

## ¿Y si tengo que usar wp\_localize\_script?

Se aplica lo mismo. En los casos mas simples puedes usar `wp_enqueue_script()` y luego `wp_localize_script()` para pasar parámetros al script. Pero siempre en ese orden porque el «handler» o identificador del script que utilizas en `wp_localize_script()` lo defines este caso en `wp_enqueue_script()`.

Si utilizas `wp_register_script()` puedes llamar a `wp_localize_script()` inmediatamente después y ya lo tienes preparado para cuando llames a `wp_enqueue_script()`

## ¿Cuál es la diferencia entre wp\_register\_style y wp\_enqueue\_style? 

Pues la misma que hay entre `wp_register_script()` y `wp_enqueue_script()`. Todo lo que te he contado arriba aplica para estas dos.

Por cierto, recuerda que el «hook» para ambos es siempre el mismo: `'wp_enqueue_scripts'`. No existe  `'wp_enqueue_styles'`

## ¿Porqué meterme en todo este lío y no usar simplemente wp\_enqueue? 

Por rendimiento y optimización de recursos. Debes intentar cargar los mínimos scripts y hojas de estilo que necesites, pero debido al orden de carga de WordPress, hay veces que no sabrá que tiene que cargar un script u hoja de estilo hasta muy avanzado el proceso de carga de la página.

Por eso es importante, en esos casos, registrarlos antes con `wp_register_script()` o `wp_register_style()`

## ¿Cómo puedo forzar que mi script se cargue en el footer en lugar del head? 

Esta es una de las opciones de las funciones `wp_register_script()` y `wp_enqueue_script()`. Hay que poner a true el último parámetro que recibe la función.

`wp_register_script( string $handle, string|bool $src, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )`

Por cierto, que en el Codex de WordPress tienes una [lista completa de todos los scripts que se cargan por defecto con WordPress](https://developer.wordpress.org/themes/basics/including-css-javascript/#default-scripts-included-and-registered-by-wordpress). Merece la pena darle un vistazo.

## Referencias

- [WordPress wp\_enqueue\_script() vs. wp\_register\_script()](https://jhtechservices.com/wordpress-wp_enqueue_script-vs-wp_register_script/) – JH Tech Services 
- WordPress Theme Handbook: Including CSS & JavaScript – [https://developer.wordpress.org/themes/basics/including-css-javascript/](https://developer.wordpress.org/themes/basics/including-css-javascript/)
- [Codex: function wp\_register\_script](https://developer.wordpress.org/reference/functions/wp_register_script/)
- [Codex: function wp\_enqueue\_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)
- [Codex: functions wp\_localize\_script](https://developer.wordpress.org/reference/functions/wp_localize_script/)

## Entradas relacionadas

- [¿Cuál es la diferencia entre is\_single() e is\_singular()?](https://dev.to/juananruiz/cual-es-la-diferencia-entre-issingle-e-issingular-5gjk)

La entrada [Diferencia entre wp\_register\_script y wp\_enqueue\_script](https://kungfupress.com/diferencia-entre-wp_register_script-y-wp_enqueue_script/) se publicó primero en [KungFuPress](https://kungfupress.com) por [Kung Fu Press](https://kungfupress.com/author/kungfupress/)