Paginación Ajax usando jQuery en WordPress

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

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:

Código:

<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.


Código:

<script type="text/javascript" charset="utf-8">
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');
 
    });
 
});
</script>


#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:


Código:

<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.

Código:

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.