WordPress y Ajax

Grupo Meetup WordPress Madrid. Cómo usar correctamente Ajax en nuestro sitio web realizado con WordPress usando lo que nos ofrece su API. La charla está basada un poco en una que se hizo en la WordCamp de 2010 de Philadelphia. La charla está orientada a desarrolladores con conocimientos de PHP y/o JavaScript.

Transcript

1. WORDPRESS Y AJAX Cómo usar Ajax en nuestro sitio web usando lo que nos ofrece su API. @felixzapata @madridwordpress
2. ¿QUÉ ES AJAX? Básicamente puede entenderse como una manera de refrescar partes de nuestra página:
3. AJAX EN WORDPRESS ¿Qué necesitamos?
4. UN EVENTO Que el usuario realice una acción en nuestra página.
5. UNA PETICIÓN Enviaremos datos al servidor para que realice algún tratamiento con ellos.
6. UN MANEJADOR En nuestro servidor necesitaremos que se encargue de tratar los datos que ha recibido.
7. UNA RESPUESTA Enviada de nuevo a la página para que sea tratada.
8. HOOKS NECESARIOS ¿Cómo le decimos a WordPress qué funciones van a ocuparse de manejar los datos devueltos?
9. WP_AJAX_MY_ACTION Proporciona interacciones asíncronas en nuestra página sólo para usuarios que estén logados. f u n c t i o n m y _ c u s t o m _ h a n d l e r ( ) { } / / e n d m y _ c u s t o m _ h a n d l e r a d d _ a c t i o n ( ' w p _ a j a x _ m y _ c u s t o m _ h a n d l e r ' , ' m y _ c u s t o m _ h a n d l e r ' ) ;
10. WP_AJAX_NOPRIV_MY_ACTION Proporciona interacciones asíncronas en nuestra página todos los usuarios. f u n c t i o n m y _ c u s t o m _ h a n d l e r ( ) { } / / e n d m y _ c u s t o m _ h a n d l e r a d d _ a c t i o n ( ' w p _ a j a x _ n o p r i v _ m y _ c u s t o m _ h a n d l e r ' , ' m y _ c u s t o m _ h a n d l e r ' ) ;
11. VALE, PERO ¿CÓMO LANZO LA PETICIÓN CUANDO EL USUARIO REALIZA UNA ACCIÓN? admin-ajax.php? action=funcion_que_tratara_los_datos&parámetro=valor_del_parámetro $ n o n c e = w p _ c r e a t e _ n o n c e ( " g e t _ d e t a l l e _ p r o y e c t o _ n o n c e " ) ; $ l i n k = a d m i n _ u r l ( ' a d m i n - a j a x . p h p ? a c t i o n = g e t _ d e t a l l e _ p r o y e c t o & i d = ' . g e t _ t h e _ i d ( ) . ' & n o n c e = ' . $ n o n c e ) ; e c h o ' < l i > < a h r e f = " ' . $ l i n k . ' " > ' . w p _ g e t _ a t t a c h m e n t _ i m a g e ( $ p o s t _ t h u m b n a i l _ i d , " f u l l " ) . ' < / a > < / l i > ' ;
12. UN POCO DE SEGURIDAD wp_create_nonce: crea un aleatorio y finito en el tiempo. wp_verify_nonce: verifica que el valor creado previamente es correcto y puede usarse.
13. DEMUÉSTRALO Vale, veamos un ejemplo práctico.
14. RECURSOS Y ENLACES DE INTERÉS WordPress and Ajax A Primer on Ajax in the WordPress Dashboard – Laying the Foundation A Primer on Ajax in the WordPress Dashboard – Requesting and Responding A Primer on Ajax in the WordPress Frontend: Understanding the Process A Primer on Ajax in the WordPress Frontend: Actually Doing It