Slide 1

Slide 1 text

WORDPRESS Y AJAX Cómo usar Ajax en nuestro sitio web usando lo que nos ofrece su API. @felixzapata @madridwordpress

Slide 2

Slide 2 text

¿QUÉ ES AJAX? Básicamente puede entenderse como una manera de refrescar partes de nuestra página:

Slide 3

Slide 3 text

AJAX EN WORDPRESS ¿Qué necesitamos?

Slide 4

Slide 4 text

UN EVENTO Que el usuario realice una acción en nuestra página.

Slide 5

Slide 5 text

UNA PETICIÓN Enviaremos datos al servidor para que realice algún tratamiento con ellos.

Slide 6

Slide 6 text

UN MANEJADOR En nuestro servidor necesitaremos que se encargue de tratar los datos que ha recibido.

Slide 7

Slide 7 text

UNA RESPUESTA Enviada de nuevo a la página para que sea tratada.

Slide 8

Slide 8 text

HOOKS NECESARIOS ¿Cómo le decimos a WordPress qué funciones van a ocuparse de manejar los datos devueltos?

Slide 9

Slide 9 text

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 ' ) ;

Slide 10

Slide 10 text

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 ' ) ;

Slide 11

Slide 11 text

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 > ' ;

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

DEMUÉSTRALO Vale, veamos un ejemplo práctico.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content