Cómo Crear Scroll de Paginación Infinita

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La paginación scroll infinita se inspira en Facebook y en Twitter. Se trata simplemente de el sistema de paginación en la que el usuario tiene que desplazarse hacia el final de la página para seguir leyendo más artículos. Es una manera de mejorar la experiencia del usuario en un sitio web, pero si está mal implementado, también puede crear una mala experiencia. Si vas a implementar este tipo de paginación, asegúrate de no incluir enlaces importantes al final de la página. El motivo de esto es que cuando un usuario intente hacer clic en ese enlace concreto, la página cargará automáticamente nuevas entradas y desplazará de nuevo cada vez el enlace al final de la página. También puedes establecer una posición fija para el área del footer o hacer que tu sidebar esté visible siempre.

Paso 1 Planifica Tu Paginación

Es importante que planifiques por adelantado la paginación, dónde deseas incluirla, y cómo vas a procesarla. Una forma habitual de crear la paginación consiste en listar los números de página al final de la misma. Sin embargo, al usar este método, no aparecerán más números de página al finalizar la lista de tus artículos, ya no es necesiria. Es posible usar esta paginación en cualquier tema siempre que no incluyas excesiva información en la sección del footer ya que posiblemente el efecto resultante no sea el más deseable.

Nuestra paginación scroll infinito usará jQuery y la funcionalidad de ajax para solicitar y cargar los nuevos artículos a mostrar al usuario. En este tutorial, usaré el tema Twenty Ten como ejemplo, puedes ver aquí la demo con la que estamos trabajando.

Paso 2 Crear la Función Ajax

Usaremos la funcionalidad ajax del propio WordPress para hacer la llamada a la paginación. Primero, prepara la función básica de nuestra paginación, por favor inserta el siguiente código en el archivo functions.php de tu tema.

function wp_infinitepaginate(){ 
    $loopFile        = $_POST['loop_file'];
    $paged           = $_POST['page_no'];
    $posts_per_page  = get_option('posts_per_page');

    # Load the posts
    query_posts(array('paged' => $paged )); 
    get_template_part( $loopFile );

    exit;
}

Esta función se usará para invocar tu paginación, básicamente enviaremos dos variables a la función mediante ajax, una es para el número de página y la otra para el archivo de plantilla que vamos a usar en nuestra paginación. Para que la funcionalidad ajax de WordPress pueda usar esta función, necesitamos el siguiente código.

1	add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // for logged in user
2	add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // if user not logged in

La acción por defecto del ajax de WordPress sería wp_ajax_(nombre de nuestra accion), de ahí proviene el nombre infinite_scroll que usamos en nuestro código de muestra. Tenemos que añadir dos acciones, una para los usuarios logueados y otra para los que no hayan iniciado sesión.

Después tendremos que crear la función ajax que enviará las dos variables que necesitamos para la paginación. Puedes usar los hooks de WordPress para insertar esta función ajax de WordPress o insertarla directamente en el archivo header.php de nuestro tema.

<script type="text/javascript">
function loadArticle(pageNumber) {
  $.ajax({
		url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
		type:'POST',
		data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', 
		success: function(html){
			$("#content").append(html);    // This will be the div where our content will be loaded
		}
	});
	return false;
}
</script>

Esta será la llamada básica ajax que vamos a hacer y usaremos "infinite_scroll" como nombre para nuestra acción. WordPress llamará automáticamente a nuestra función wp_infinitepaginate(); ya que la hemos definido previamente en nuestro archivo functions.php.

Paso 3 Determinar Cuando el Usuario se Desplaza al Final de la Página

Para habilitar la paginación de scroll infinito, tenemos que determinar el momento en el que el usuario alcance el final de la página. Podemos conseguir esto a través de jQuery mediante el siguiente código.

<script type="text/javascript">
            $(window).scroll(function(){
                    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                          // run our call for pagination
                    }
            }); 
</script>

Ahora ya podemos saber cuándo el usuario llega al final de la página. Después tenemos que invocar la función loadArticle dentro de la función del desplazamiento. estoy añadiendo un contador que será usado para mostrar el número de página de nuestra llamada.

<script type="text/javascript">
            var count = 2;
            $(window).scroll(function(){
                    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                       loadArticle(count);
                       count++;
                    }
            }); 

            function loadArticle(pageNumber){    
                    $.ajax({
                        url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
                        type:'POST',
                        data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', 
                        success: function(html){
                            $("#content").append(html);   // This will be the div where our content will be loaded
                        }
                    });
                return false;
            }
</script>

Cada vez que el usuario de desplace al final de la página, el contador incrementará y esto nos posibilitará pasar el número de la página a nuestra función wp_infinitepage() dentro del archivo functions.php de nuestro tema. con las funciones para el desplazamiento y loadArticle, ahora podemos invocar la función ajax desde nuestro tema WordPress, pero el resultado podría no aparecer si no hemos definido el archivo del loop dentro de la carpeta de nuestro tema.

Paso 4 Preparar Nuestro Tema

Lo más importante, tenemos que preparar el div que contendrá el nuevo contenido que hemos solicitado con nuestra función ajax. En el tema Twenty Ten ya existe un div que podemos aprovechar, se trata del div id="content", así que incluiremos el id de este div en nuestra función ajax. Si utilizas otros temas que no envuelven su lazo en un div, puede envolver simplemente la función de bucle como el siguiente código de ejemplo para lograr el mismo resultado.

1	<div id="content"> loop content </div>

A continuación necesitaremos un archivo de bucle para esto. El tema veinte diez ya tiene un archivo de bucle incluido, esta es la razón principal por qué elegí 20:10 en este ejemplo, porque es más fácil para cualquier persona que quiera hacer referencia a esto más adelante. Si no tienes cualquier loop.php, simplemente cree un nuevo archivo de bucle y copiar la función de bucle en su index.php en el nuevo archivo y cargado en la carpeta de tu tema. Para cualquier persona que use el tema veinte diez, desea comentar la paginación incluida en el archivo porque no lo necesitamos ya (consulte el archivo de fuente tutorial sobre cómo hacer esto).

Paso 5 Añadir el Loader Ajax

Esto es opcional, solo para darle un toque agradable a nuestra paginación infinito scroll. Vamos a añadir una imagen de ajax loader como nos golpeó la parte inferior de la página. Puedes añadir el siguiente código a tu footer.php

1	<a id="inifiniteLoader">Loading... <img src="<?php bloginfo('template_directory'); ?>/images/ajax-loader.gif" /></a>

y después añadir el siguiente CSS en nuestra hoja de estilo.

a#inifiniteLoader{
	position: fixed;  
	z-index: 2;  
	bottom: 15px;   
	right: 10px; 
	display:none;
}

A continuación añadimos unas pocas líneas de código a nuestra función de jQuery para mostrar y ocultar este elemento cargador de ajax.

  <script type="text/javascript">
        jQuery(document).ready(function($) {
            var count = 2;
            $(window).scroll(function(){
                    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                       loadArticle(count);
                       count++;
                    }
            }); 

            function loadArticle(pageNumber){    
                    $('a#inifiniteLoader').show('fast');
                    $.ajax({
                        url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
                        type:'POST',
                        data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', 
                        success: function(html){
                            $('a#inifiniteLoader').hide('1000');
                            $("#content").append(html);    // This will be the div where our content will be loaded
                        }
                    });
                return false;
            }
    
        });
       
    </script>

El cargador ajax aparecerá una vez el usuario llega a la parte inferior de la página y ocultar una vez terminada la solicitud ajax.

Paso 6 Limitaciones Adicionales para Mejorar el Desplazamiento Infinito

Hasta ahora, ya tenemos un scroll infinito trabajo, pero una cosa es que falta. La función se mantenga desencadenando cada vez que un usuario llega a la página de fondo aunque hay no más post a mostrar. Esto es algo que no queremos tener. Vamos a añadir un control en nuestro scroll funcionar por lo que se detendrá cuando hay no más páginas a mostrar,.

<script type="text/javascript">
var count = 2;
var total = <?php echo $wp_query->max_num_pages; ?>;
$(window).scroll(function(){
	if  ($(window).scrollTop() == $(document).height() - $(window).height()){
		if (count > total){
			return false;
		}else{
			loadArticle(count);
		}
		count++;
	}
}); 
</script>

Añadimos un nuevo total de var a la función que devolverá las páginas totales disponibles en nuestro sitio. Esto se utilizará para que ninguna llamada adicional se realizará a la página si se ha llegado a la página máximo. Otra cosa que querría añadir es una restricción donde esta función se cargará. Buscamos solo quiere esto en nuestra página web, archivo o tal vez, pero no en el nuestro solo post y página. Para que nos envuelva un simple PHP si otra función en nuestro código jQuery.

1	if (!is_single() \|\| !is_page()):
2	// our jQuery function here
3	endif;

Eso es prácticamente todo que lo necesario para la paginación, consulte los archivos de origen por ejemplo código utilizado en este tutorial. Los archivos se basan en el tema veinte diez.

Conclusión

Ahora podrá utilizar esta función en cualquiera de su tema, si tienes otras sugerencias o preguntas sobre este tutorial, no dude en dejar un comentario o contactarme vía twitter. Me encantaría compartir cualquier idea con vosotros.