Blog

Requests Ajax en tu tema de WordPress, como debe ser

Jugando un poco con jQuery y WordPress es algo que me gusta hacer, pero no habia tenido el tiempo de saber como WordPress manejaba los request de Ajax para devolver algo especifico.

En este ejemplo solicitaremos una imagen de un post especifico como para una galeria.

Antes de empezar

  • Estar familiarizado con el theming de WordPress
  • Saber jQuery y de preferencia haber usado el $.ajax del mismo framework
  • HTML5

Saber que quierer hacer

Una de las cosas mas importantes es saber que tengo para enviar y que deseo que me devuelva la consulta. En nuestro caso usaremos los atributos de data de HTML5, el functions.php y una de las funciones que mas me gustan de jQuery, $.ajax.

Generar el markup

<ul class="gallery-list">
<?php $gallery = new WP_Query('post_type="gallery"&showposts=-1');
  while ($gallery->have_posts()) : $gallery->the_post(); ?>
     <li><a href="<?php the_permalink() ?>" data-id="<?php the_ID(); ?>"><?php the_title(); ?></a></li>
  <?php endwhile; ?>
</ul>
<div id="view-port"><div class="drop"></div></div>
  • Con este codigo hacemos un ciclo que busca todos los posts del post_type Gallery.
  • El div con ID view-port nos servirá para colocar la imagen que mandaremos a llamar.

El Javascript

$('.gallery-list a').click(function(e){
	var tid = $(this).attr('data-id');
	$('#image-viewport .drop').fadeOut(200);
	$.ajax({
		url : '<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php',
		type : 'POST',
		async : false,
		data : { action : 'theid', id : tid },
		success : function(data){
			$('#image-viewport .drop').html(image).fadeIn(400);
		}
	});
	e.preventDefault();
});
  • A los hipervinculos de el ul.gallery-list al darles click tomamos el atributo data-id que en HTML5 son validos
  • Hacemos un fadeOut del div que contendrá la información
  • Hacemos el request de Ajax, donde la url <?php bloginfo(‘wpurl’); ?>/wp-admin/admin-ajax.php , es la direccion que tiene el control de como WordPress maneja los llamados de Ajax.
  • El action de la data, es algo muy importante, en este caso yo le he dado theid, podría ser cualquier nombre a fin a la función.

En el tema de WordPress

Este codigo lo colocamos en el functions.php o en /functions/custom-functions.php en TRF.

function thumb_caller(){
	if(isset($_POST['id'])){
		$id = $_POST['id'];
		$out  = get_the_post_thumbnail( $id, 'gallery');
		if(!$out){
			$out = '<img src="'. get_bloginfo('stylesheet_directory') .'/images/no-image-950x430.png" width="950" height="430" alt="No image" />';
		}
	} else {
		$out = _e('No parameter was given...');
	}
	echo $out;
        die();
}
add_action('wp_ajax_nopriv_theid', 'thumb_caller');
  • thumb_caller es mi función que manda a llamar el thumbnail, de tamaño gallery si no tiene thumbnail llamo una imagen del mismo tamano.
  • Sino existe un parámetro llamado id, simplemente devuelvo un texto
  • Luego anado esa funcion al hook wp_ajax_nopriv_the_id donde, para que funcione es wp_ajax_nopriv_[el parametro de action], es no_priv porque es para uso del front end, si fuera para uso del backend seria, wp_ajax_[el parametro de action]

Y listo!