Paginación Ajax usando jQuery en WordPress

Trabajando con wordpress es muy fácil lograr una paginación simple (Paginación con WP Query, mas avanzada), como por ejemplo el siguiente código:

<ul>
    <li><?php next_posts_link('&laquo; Older Entries') ?></li>
    <li><?php previous_posts_link('Newer Entries &raquo;') ?></li>
</ul>

El código anterior nos permite avanzar a la página anterior y página siguiente, luego de realizar el loop básico de wordpres.

Pero para hacer que funcione tenemos que añadir un ID a la paginacion, por ejemplo:

<ul id='Paginacion'>
	<li><?php next_posts_link('&laquo; Older Entries') ?></li>
	<li><?php previous_posts_link('Newer Entries &raquo;') ?></li>
</ul>

Ahora solo tenemos que hacer que funcione con ajax. Copia y pega el código de abajo en el archivo header.php de tu tema.

jQuery(document).ready(function(){

	jQuery('#Paginacion a').live('click', function(e){
		e.preventDefault();
		var link = jQuery(this).attr('href');
		jQuery('#main-col').html('Loading...');
		jQuery('#main-col').load(link+' #content');

	});

});

#Paginacion a en esta linea se especifica así, porque cada pagina apunta a un enlace.

Ahora solo tienes que cambiar el #content y #main-col con el ID de div que utilices en tus paginas. Por ejemplo si utilizas una estructura como esta:

<div id='main-col'>
    <div id='content'>
        <!-- contenido del post -->
    </div>
</div>

Agregando animación Fade

Si quieres darle un efecto fade al contenido cuando cambies de pagina solo modifica el script de arriba por este.

jQuery(document).ready(function(){

	jQuery('#Paginacion a').live('click', function(e){
		e.preventDefault();
		var link = jQuery(this).attr('href');
		jQuery('#main-col').fadeOut(500).load(link + ' #content', function(){ jQuery('#main-col').fadeIn(500); });
	});
});

Eso es todo, es algo bien sencillo y básico para lograr una paginación Ajax usando jQuery en WordPress.

Recomendado