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 código, 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 interface 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.

¿Qué hay de los plugins para agregar scripts a WordPress?

Otra de las formas para agregar scripts externos a WordPress es el usar un plugin que facilite el trabajo. Hay muchos de ellos en el repositorio que permiten hacerlo. La mayoría con diversas opciones diferentes para cada caso.

Sin embargo, los plugins no siempre solucionan el problema. El cual se agrava si no sabemos como es que JavaScript funciona. Y aún más si no se sabe detectar errores.

Un script puede ser agregado mediante un plugin correctamente. Pero a la hora de ejecutarse, puede arrojar errores. Mismos que impiden su correcta ejecución. Estos errores muchas veces van más allá de lo que un plugin puede solucionar.

En esos casos, es importante mirar entonces a la consola del navegador. Muchas veces encontraremos ahí que es lo que está sucediendo. Como por ejemplo el caso de la «$» de jQuery, la cual ya había explicado. O incluso otros errores como contenido mixto o errores en el código.

Esas son cosas que requieren más pericia para ser corregidas.

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. Para el desarrollador, la consola será siempre una de las mejores herramientas.

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.

Y cuando todo haya fallado. Siempre será buena idea preguntar. Ya que puede haber alguien dispuesto a ayudar.

The post Formas de agregar scripts externos a WordPress appeared first on Endless Manifesto.

Saber PHP es algo que invariablemente te va a ayudar. Igualmente mirar el Codex de WordPress… pero al final del día, muchas cosas se condensan en una sola frase: Mira el código fuente.

Entendiendo los Hooks y Transients en WordPress

Hay quienes han hecho un esfuerzo para documentar que hooks se usan y en que momento. Incluso puedes encontrar infografías muy buenas que te dan una guía visual. Eso da mucha luz, pero siempre quedará la duda en algunos casos.

¿Qué es un hook o gancho?

Para ponerlo en palabras simples, es un punto en el cual vamos a “adjuntar el código que queramos”. ¿Eh? Sí. Básicamente llegamos y pegamos el código que queremos en el lugar al cual queremos.

Existen dos formas de hacerlo: Como filtro o como acción. Pero no te enredes con los términos, ya que su diferencia es prácticamente semántica. ¿Por qué? Porque la función para agregar acciones es un alias de la misma para agregar filtros.

Pero eso no significa que debas intercambiarlas a placer. Si cambias información, usa “add_filter”. Si cambias el comportamiento usa “add_action”. A la larga tu código se entenderá mejor.

Un ejemplo

Por ejemplo, la forma más fácil “pegar” código es con un tema y una función. Digamos que tenemos el archivo functions.php y que queremos probar los hooks. Por ejemplo, iniciaríamos con esto:

View the code on Gist.

Una vez que tengamos la función, la magia empieza cuando agregamos “add_filter”:

View the code on Gist.

Con ella, le decimos a WordPress que ejecute nuestra función (agregada como filtro) cuando le toque al hook indicado. En este caso, use uno arbitrario. Es muy probable que no funcione para nada.

Hasta ahí todo bien con el ejemplo. ¿Entonces como saber donde debo agregarla para que se ejecute? Aquí es donde las cosas se complican un montón y es importante mirar el código.

Como mencione en una entrada anterior, tuve que mirar el código para darme una idea. En ese caso, estuve buscando la función “do_action”. ¿Por qué? Porque ella es la que da la pauta de donde se van a realizar los cambios.

De esa forma sabemos exactamente en donde se va a “pegar” el código que queremos. Pero ten en cuenta que no podrás cambiar nada antes de ese punto (ni después, a menos que haya otro hook que te lo permita).

El ejemplo simple quedaría así para que funcione:

View the code on Gist.

Igualmente buscando y mirando el uso de “do_action” y “apply_filters”, obtendrás el nombre del hook el cual tienes que usar y que “variables” le pasará. Con ello tendrás el 90% del trabajo hecho.

Aunque google será tu amigo por un buen rato.

Recuerda, podemos agregar cuantas funciones queramos a un hook. Por ejemplo, con varios “add_filter” en diferentes momentos con diferentes funciones. Incluso podemos indicar en que orden se ejecutarán.

¿Qué hay de los transients?

Para hacer la historia corta con ellos, se trata básicamente de “variables”. Imagina que son como “cookies” o “sesiones”. Pero en vez de afectar a un solo usuario, podemos usar su contenido para todo el sitio. Son usadas especialmente para guardar consultas complejas.

Por ejemplo, aquí tengo el siguiente ejemplo:

View the code on Gist.

Eso se lo agregué a un tema para hacer “algo” una vez al día.

La gran ventaja, es que podemos recuperar el valor de un transitent fácilmente con “get_transient”. Solo necesitas el nombre y listo. Pero ojo, si este ya se encuentra expirado no regresará valor alguno. Esa es su naturaleza, temporal. No es buena idea usarlos para información permanente.

¿Por que expiran? Bueno, es una de sus características. Cuando asignamos su valor con “set_transient”, debemos de definir un tiempo tras el cual expirará (ok, podemos asignar “0” o no asignar nada para que jamás expiren, pero esa es otra historia… no deben de ser usados para almacenar información permanente).

Igualmente pueden ser fácilmente borrados con “delete_transient”, si queremos deshacernos de ellos antes de que expiren.

Estos son más fáciles de usar, pero abren un nuevo universo de posibilidades.

Conclusión sobre los Hooks y Transients en WordPress

He estado invirtiendo el tiempo que puedo para poder entender de fondo todas las características que tiene WordPress.

PHP me ha ayudado mucho, aunque me he topado con muchas entradas en blogs que dan por sentado que ya sabes como funciona lo expuesto aquí. Eso puede frustrar un poco, ya que a veces no se entiende el contexto.

Quizá sea idea tomar un curso que me facilite el camino. Solo es cuestión de hacerme del tiempo.

The post Hooks y Transients en WordPress appeared first on Endless Manifesto.