SummArg | Cursos y recursos para webmasters

08/04/2011

Utilizar paginación AJAX en WordPress

Con un poco de jQuery podemos añadir a nuestro WordPress una navegación AJAX, en donde sólo se recarga la entrada siguiente o anterior y no el resto del sitio. El método de wpcanyon es sumamente simple de implementar y tiene dos variantes. En el video podrán observar la primera de ellas.

Implementación

En el archivo single.php ubicamos las líneas en donde se insertan los links para el artículo anterior y el siguiente. Lo reemplazamos por el siguiente código, en donde se ubican los links en lista desordenada con el id postPagination

<ul id="postPagination">
	<li><?php next_posts_link('&laquo; Anterior') ?></li>
	<li><?php previous_posts_link('Siguiente &raquo;') ?></li>
</ul>

Ahora en el header.php del theme insertamos el comportamiento que tendrá este id.

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
	jQuery('#postPagination a').live('click', function(e){
		e.preventDefault();
		var link = jQuery(this).attr('href');
		jQuery('#content').html('Cargando...');
		jQuery('#content').load(link+' #contentInner');
	});
});
</script>

Reemplazaremos #content y #contentInner por los divs que estemos usando para mostrar nuestro contenido. Debería quedar de este modo.

<div id="content">
    <div id="contentInner">
        El contenido  y las líneas de paginación deben ir aquí dentro.
    </div>
</div>

Si queremos adornar la modificación colocando un efecto fadein / fadeout, entonces reemplacemos el código del header.php por el siguiente:

jQuery(document).ready(function(){
	jQuery('#postPagination a').live('click', function(e){
		e.preventDefault();
		var link = jQuery(this).attr('href');
		jQuery('#content').fadeOut(500).load(link + ' #contentInner', function(){ jQuery('#content').fadeIn(500); });
	});
});

Descargar los archivos modificados para el theme Classic de WordPress.

Dejar un comentario

  1. hola men necesito esto urgente para mi pagina crees q me puedas echar una mano.. no me quiere funcionar..

  2. Podés postear en nuestro foro de WordPress o enviarme un MP.

Dejar un comentario