Diferencia entre wp_register_script y wp_enqueue_script

La entrada Diferencia entre wp_register_script y wp_enqueue_script se publicó primero en KungFuPress por Kung Fu Press

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

¿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. Merece la pena darle un vistazo.

Referencias

• 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/
• Codex: function wp_register_script
• Codex: function wp_enqueue_script
• Codex: functions wp_localize_script

Entradas relacionadas

• ¿Cuál es la diferencia entre is_single() e is_singular()?

La entrada Diferencia entre wp_register_script y wp_enqueue_script se publicó primero en KungFuPress por Kung Fu Press