Como utilizar AJAX correctamente en WordPress

Como utilizar AJAX correctamente en WordPress es un tema que no todo el mundo conoce o comprende. Hoy les voy a comentar como se debería hacer por ejemplo si quieren obtener posts mediante AJAX y les voy a crear un ejemplo para que lo entiendan.

Primero les quiero aclarar que este ejemplo es para usarlo en el frond-end, es decir donde interactúan la mayoría de usuarios.

Suponiendo que tenemos un formulario de búsquedas en una página como el siguiente:

formulario

<form id="ajax-form" method="post" action="">
<input type="text" name="cadena" id="cadena"/>
<input type="submit" name="enviar" value="enviar"/>
</form>
<div id="posts_container"></div>

Lo primero que tenemos que necesitar es un archivo javascript, vamos a llamarlo ajax-search.js

ajax-search.js

jQuery(document).ready(function($) {
	var cadena='';
	$('#ajax-form').submit(function(e){
                 e.preventDefault();
		 jQuery.post(MyAjax.url, {action : 'buscar_posts' ,cadena : $('#cadena').val() }, function(response) {
			 	$('#posts_container').hide().html(response).fadeIn();
			});
	});
        
});

En este archivo lo que hacemos es que cuando el formulario se envíe, enviamos por AJAX la cadena a buscar y cuando obtenemos respuesta, la ingresemos en el contenedor. Por último hacemos un return false, para que el formulario no se envíe de forma normal.

En este formulario hay que prestar atención a MyAjax.url, que es la dirección a la cual vamos a enviar los parámetros y que equivale a admin-ajax.php. Este archivo es un archivo del core de WordPress y será el encargado de manejar nuestra petición de AJAX.

De donde sale la variable MyAjax.url y por que no escribimos la url directamente? Pues simplemente es porque no sabemos donde se encuentra ese archivo y tendríamos que usar PHP para obtenerla, cosa que no sera cacheable por el navegador. En otras palabras, esta es la forma correcta.

En donde se define la variable y como controlo admin-ajax.php ? La respuesta es en functions.php

functions.php

// Primero incluimos nuestro archivo javascript definido anteriormente
wp_enqueue_script( 'mi-script-ajax',get_bloginfo('stylesheet_directory') . '/js/ajax-search.js', array( 'jquery' ) );
 
// ahora declaramos la variable MyAjax y le pasamos el valor url (wp-admin/admin-ajax.php) al script ajax-search.js
wp_localize_script( 'mi-script-ajax', 'MyAjax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );

//Para manejar admin-ajax tenemos que añadir estas dos acciones.
//IMPORTANTE!! Para que funcione reemplazar "buscar_posts" por vuestra action definida en ajax-search.js

add_action('wp_ajax_buscar_posts', 'buscar_posts_callback');
add_action('wp_ajax_nopriv_buscar_posts', 'buscar_posts_callback');

function buscar_posts_callback() {
	
	global $post;
	$args = array( 'numberposts' => 10, 's' => $_POST['cadena']);
	
	$myposts = get_posts( $args );
        echo '<ul>';
	foreach( $myposts as $post ) :	setup_postdata($post); ?>
		<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
          
        <?php endforeach; 
        echo '</ul>';
	die(); // Siempre hay que terminar con die
}

Voila!! Con eso ya tendríamos nuestro código funcionando como en el ejemplo!! Pero OJO!!!! todavía no le agregamos la seguridad necesaria para impedir que un usuario malintencionado puede escalar privilegios y hacer algo que no debe.
Para ello vamos a modificar nuestros script y les vamos a añadir nonce

Añadimos nonce a los scripts por seguridad

Primero modificamos en nuestro functions.php para agregar la variable y generamos un nonce para que se pueda comprobar en nuestro javascript:

wp_localize_script( 'mi-script-ajax', 'MyAjax', array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'myajax-post-comment-nonce' )  ) );

Ahora ya podemos usarlo en ajax-search.js

jQuery.post(MyAjax.url, {nonce : MyAjax.nonce, action : 'buscar_posts' ,cadena : $('#cadena').val() }, function(response) {
			 	$('#posts_container').hide().html(response).fadeIn();
			});
	});

Y nuevamente en functions.php podemos hacer la comprobación:

function buscar_posts_callback() {
	
	global $post;
        $nonce = $_POST['nonce'];
        if ( ! wp_verify_nonce( $nonce, 'myajax-post-comment-nonce' ) )
        die ( 'Te atrapamos maldito!');
        //el resto del código
}

Y ahora sí!! Podemos buscar posts con AJAX de forma segura.
Espero que les haya gustado este tutorial. Saludos!!!

Via : http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me: