WordPress utiliza varios frameworks Javascript para hacer diversos efectos y mejorar a interfaz, además de que algunos themes se aprovechan de esto para añadir mejoras al diseño utilizando funciones que ofrecen estos frameworks. Recurrir a estos métodos ocasiona un aumento del tiempo de carga de la página y del ancho de banda consumido por el servidor al enviar los archivos solicitados al usuario, sin embargo, podemos hacer que WordPress cargue estos archivos desde servidores externos que nos reducen el ancho de banda gastado y que, en algunos casos, son más rápidos que nuestro servidor. Además, usar este método también nos permite cargar automáticamente la versión más actualizada de los diversos frameworks, evitando tener que volver a subir las nuevas versiones a nuestro servidor.

En este artículo me centraré en jQuery, jQuery UI y Prototype, los frameworks que utiliza actualmente Sumolari.com, pero antes de hacer que WordPress cargue los archivos desde servidores externos (usaremos los de Google), veremos primero el método general.

wp_deregister_script, wp_register_script y wp_enqueue_script

WordPress tiene varias funciones para gestionar el código Javascript que se carga en cada página. Esta funciones permiten, a grandes rasgos, añadir un script con un nombre identificatorio (del cual se definen la URL del archivo, las dependencias, la versión o incluso si se puede cargar en el pie de página o no), eliminarlo o cargarlo.

Para el primero de todos los usos, recurriremos a la función wp_register_script. Esta función tiene 5 parámetros: $handle, $src, $deps, $ver e $in_footer.

[php]wp_register_script( $handle, $src, $deps, $ver, $in_footer );[/php]

La primera de todas debe contener el nombre identificatorio del script. Yo recomiendo usar nombres coherentes, así evitamos posibles problemas al usar muchos scripts y no distinguir unos de otros por su nombre.

El segundo parámetro de la función indica la URL del archivo a cargar. Tanto el primer parámetro como éste son obligatorios, los otros tres son opcionales y son, por orden de aparición, la matriz que indica las dependencias (estas dependencias se deben indicar usando el nombre identificatorio del script correspondiente), la versión del archivo a cargar (se utiliza para evitar problemas con la caché y demás, pero en muchos casos basta con dejarlo en blanco) y si el script se puede cargar al final de la página o no.

La función wp_deregister_script es la que elimina un script previamente registrado. Esto nos permitirá eliminar los script registrados por WordPress y añadir los nuestros modificados. El uso sería el siguiente:

[php]wp_deregister_script( $handle );[/php]

La función wp_enqueue_script es la que le indica a WordPress que debe cargar cierto script. Admite los mismos parámetros que wp_register_script, sólo que en la primera, a diferencia de la segunda, el nombre identificatorio le indica a la función qué script debe cargar (ya que esta función no registra ningún script) y sólo usará los demás parámetros en caso de no existir el script solicitado.

El uso es el siguiente:

[php]
wp_enqueue_script( $handle ); // Mínimo
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); // Parámetros opcionales
[/php]

Tenéis más información sobre estas funciones en el Codex de WordPress.

Dicho lo cual ya podemos pasar a aplicar lo visto hasta ahora.

Cargando jQuery, jQuery UI y Prototype desde los servidores de Google

Una pequeña aclaración antes de comenzar: podemos cargar cualquier script de WordPress (lista completa) desde cualquier servidor, de hecho veréis como no es nada complicado hacerlo.

Los scripts están alojados en los servidores de Google, que ofrecen una buena velocidad y se actualizan con cada nueva versión. También almacenan versiones antiguas de los frameworks, con lo que podemos optar por cargar una versión actualizada, la última o una más antigua.

El proceso para cargar los scripts es el siguiente:

1. Eliminamos (des-registramos) el script correspondiente a los frameworks jQuery, jQuery UI y Prototype de WordPress
2. Registramos de nuevo los tres scripts anteriores, cambiando la URL de los archivos
3. Cargamos los scripts recién registrados

Esto en código quedaría así:

[php]
// jQuery
wp_deregister_script(‘jquery’); // Des-registramos jQuery
wp_register_script(‘jquery’, ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, ”); // Registramos de nuevo jQuery, con la URL de la última versión del framework alojada en el servidor de Google
wp_enqueue_script(‘jquery’); // Cargamos jQuery

// jQuery-UI
wp_deregister_script(‘jquery-ui-core’); // Des-registramos jQuery-UI
wp_register_script(‘jquery-ui-core’, ("http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"), false, ”); // Registramos de nuevo jQuery-UI, con la URL de la última versión del framework alojada en el servidor de Google
wp_enqueue_script(‘jquery-ui-core’); // Cargamos jQuery-UI

// Prototype
wp_deregister_script(‘prototype’); // Des-registramos Prototye
wp_register_script(‘prototype’, ("http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"), false, ”); // Registramos de nuevo Prototype, con la URL de la última versión del framework alojada en el servidor de Google
wp_enqueue_script(‘prototype’); // Cargamos Prototype
[/php]

Como veis, no tiene mucho misterio y es muy fácil ampliarlo a otros scripts. Como siempre, cualquier duda o sugerencia la podéis hacer en los comentarios.

Nota: La versión que carga por defecto WordPress de jQuery incluye una llamada a la función  jQuery.noConflict, por lo que en el primer script que utilice jQuery deberemos hacer una llamada a esta función para asegurar que todos los scripts funcionen correctamente.