En algunas ocasiones deberemos agregar scripts externos a WordPress. Suena sencillo, pero cuando no están diseñados para la plataforma, puede ser un poquito complicado.

Agregar un script debería de ser fácil. Y así es en la mayoría de los casos. Sin embargo hay ocasiones en las cuales los desarrolladores nunca tuvieron en mente WordPress u otro CMS.

Es por eso que a veces se requiere de saber que tan compatible es un código.

Por ejemplo, el siguiente es uno que alguien quería incluir en una instalación de WordPress:

Parece simple, ¿verdad?

Pero al menos hay un problema evidente: Se necesita de jQuery para poder hacerlo, eso nos dice la primera línea.

Antes de siquiera agregar este codigo, es importante el tener al menos una idea de lo que hace y sus necesidades. Podemos ver tutoriales en la internet, pero sin tener una idea será difícil el encontrar una solución real.

Si no tenemos dicha noción, no podremos agregar scripts externos a WordPress de una forma rápida y eficiente.

Solucionando el problema de agregar scripts externos a WordPress

Existen muchas formas de agregar un script en WordPress, sin embargo para este ejemplo hay que tomar ciertas consideraciones. Por ejemplo que la versión de jQuery que se usa en WordPress es diferente.

El jQuery que está instalado viene en modo de compatibilidad. Por lo cual el símbolo “$” no va a funcionar por defecto. Si el código no fue escrito para funcionar bajo dicho modo, es decir cambiando “$” por jQuery, simplemente este arrojará errores.

Es por ello que se necesita modificar una función alrededor del código para hacerlo funcionar. Debería quedar así:

De esta forma, debería de poder correr en cualquier instalación estándar de WordPress con el jQuery incluido por defecto. Solo se le hicieron algunos pequeños cambios a la función anónima para permitir usar “$” al resto del código dentro de ella.

Este segmento de código puede ser entonces agregado de múltiples formas, dependiendo de las necesidades. En cualquier caso, debe de ser agregado al footer.

1. Agregarlo directamente mediante un widget

Esta puede ser la forma más sencilla de agregar el código, pero con el inminente riesgo de que no funcione. Al menos no a la primera.

Pero eso se puede resolver si le añadimos una función que espere a que el documento esté listo. De esta manera el script se ejecutará una vez que el documento web se haya cargado por completo.

De esta forma, en el widget de HTML se podría poner lo siguiente:

No parece complicado. Además de que se puede editar directamente desde la interfase web.

2. Agregarlo mediante un hook y función

Usando una función y el hook “wp_footer” podemos agregar el código que queramos al final de la página. Este código lo debemos de pegar dentro del functions.php o similar.

Gracias a esto, el código deberá de aparecer en la zona de pie de página. No es la forma ideal pero debería de funcionar relativamente bien. Aunque imprimir código así no es la forma más elegante de resolverlo.

3. Agregarlo correctamente mediante wp_enqueue_script

Esta es la forma correcta de agregar un script jQuery, ya que incluso permite que se pueda “optimizar”. Usar correctamente el hook wp_enqueue_scripts permite hacer muchas cosas a la hora de manipular los script a agregarse.

Así es, esto es todo lo que se tiene que hacer para agregarlo. Con ello el script será incluido en el front-end para los visitantes, además de que podrá ser optimizado por los plugins de caché disponibles.

Pero para que funcione se debe de crear un archivo *.js y almacenarlo en un lugar accesible dentro del servidor web. O en su defecto se puede aportar una dirección URL completa.

Este método también permite convertir el código fácilmente en un plugin. Lo cual puede facilitar la vida a la hora de realizar actualizaciones. Permitiendo así mantener menos código.

Conclusiones sobre agregar scripts externos a WordPress

Agregar scripts de jQuery es relativamente sencillo en WordPress. Sin embargo se deben de tener ciertas nociones para evitar problemas.

En el caso de que algo suceda, siempre es bueno mirar la consola que ofrece el navegador web. Siempre nos dará pistas sobre lo que puede estar pasando.

Además hay que recordar que la versión de jQuery que se incluye previene el uso de “$” en las funciones. Por lo cual hay que encapsular el código si nos muestra ese tipo de errores.

Formas de agregar scripts externos a WordPress
4.5 (90%) 2 votes

Este es mi alter ego, el resultado de muchas experiencias, como experimentos en la red. Escribo por placer sobre varias cosas, incluyendo Videojuegos, Internet, Diseño Web, Programación y Seguridad.