Ajax en WordPress | Adrenalina

Ajax en WordPress

Publicado Por | 10 febrero , 2014 | Blog Adrenalina, Desarrollo Web | No Comments
ajax_wordpress

Ajax o Javascript asíncrono y xml (Asynchronous Javascript And Xml) nos permite que las webs sean mas interactivas, ya que nos permite realizar acciones sin necesidad de recargar la página. Una de las aplicaciones más conocidas que lo usa es Google Suggest, fijaos como a cada letra que escribres las sugerencias se actualizan. O google maps, haced zoom, arrastrad el mapa…todo es prácticamente instantáneo, no hay necesidad de recargar la página.

Para conseguir estos efectos, ajax realiza peticiones XMLHttpRequest contra el servidor en segundo plano mediante javascript, es decir, sin necesidad de recargar la página enviamos información al servidor y este nos responde pero en ningún momento el usuario se dará cuenta de este intercambio. Una vez recibida la respuesta del servidor es tarea de javascript o jquery gestionar dicha respuesta para generar la sensación de interacción.

 

howajaxworks

Como funciona ajax en WordPress?

Ya que ajax ya se usa en el escritorio de WordPress, ya ha sido implementado. Todo lo que necesitamos es usar las funciones a nuestra disposición. De hecho, si no usamos las funciones de WordPress, nuestras llamadas de ajax no funcionarán.
En WordPress cada petición de ajax debe pasar por admin-ajax.php, que se encuentra en la carpeta wp-admin. Cada petición debe proporcionar un pedazo de información (mediante get or post) a la que llamaremos action. Basandonos en esta acción, wordpress dispone de 2 hooks:
wp-ajax_*
wp_ajax_nopriv_*
donde el * es nuestra acción.
Usando el primer hook la acción solo se disparará para usuarios logeados, mientras que la segunda solo se disparará para usuarios no logeados por separado.

Un ejemplo

Primero deberemos habilitar un espacio en nuestra página para poder ver los cambios, por ejemplo.

‹div›
‹input type="submit" id="btn-test" /›
‹div id="ajaxresponse"›‹/div›
‹/div›

Seguidamente debemos cargar el script que realizará la llamada, en este caso llamaremos al archivo ajax-test.js , que hookearemos al init para que se incluya siempre en nuestra página.

function myjquery(){
wp_enqueue_script( 'ajax-text.js', 
get_bloginfo('template_directory') . "/js/ajax-test.js", 
array( 'jquery' ) 
);
}
add_action( 'init', 'myjquery' );

Este archivo contendrá la función que realizará la llamada ajax y el tratamiento de la información resultante.
Para ello pondremos un evento de click en el input que disparará la llamada de ajax

jQuery(document).ready(function() {
var valuebtn = “ok”
jQuery("#btn-test").click(function(){
jQuery.post(ajaxurl, {
dataType: "jsonp",
action: 'thisisatest',
valuebtn : valuebtn,
}, function(response) {
jQuery("#ajaxresponse").append(data);
});
});
});

Finalmente añadiremos el tratamiento de la llamada en nuestro functions.php, y lo hookeamos a los usuarios logeados y no logeados.

function thisisatest(){
//podemos capturar datos mediante post, de haberlos
$valuebtn = $_POST['valuebtn'];
$results = "
‹h2›Correcto!‹/h2›
";
die($results);
}
add_action( 'wp_ajax_nopriv_ thisisatest', 'thisisatest' );
add_action( 'wp_ajax_thisisatest', 'thisisatest' );

Esto es un ejemplo muy simple pero imaginad las funcionalidades que podemos llegar a conseguir en nuestro blog si introducimos más tratamiento de la información en nuestra función o envellecemos el output del resultado.

Utilizando ajax podremos incrementar la interactividad de nuestro blog.

Autor: Lluis Torns

Estudiamos y analizamos su negocio en profundidad, definimos objetivos y planteamos la estrategia de marketing más adecuada centrándonos en conseguir cada uno de los objetivos propuestos. Solicita Presupuesto Ahora

Uso de cookies

En este sitio web utilizamos cookies propias y de terceros para mejorar nuestros servicios, para que usted tenga la mejor experiencia de usuario y analizar su visita. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.