/ JavaScript

Cargar Automaticamente la Siguiente Paginación Del Loop WordPress Con la Librería JS Infinite Scroll

La gran mayoría ya conoce la paginación estándar, es aquella donde nos carga un botón para dirigirnos hacia publicaciones antiguas, retroceder a las publicaciones recientes y algunos detalles más.

Demo paginación estandar

Paginación estándar

Pero bueno ahora vamos a implementar una paginación infinita, que se carga automáticamente cuando el usuario llegue al final de la página, utilizando el mouse. Para lograr esta hazaña vamos a utilizar la librería JavaScript Infinite Scroll.

Para poder realizar este tutorial vamos a implementar un pequeño tema Wordpress.

Datos técnicos

Estos son los frameworks y librerías que utilizaremos.

Tema WordPress

Archivos esenciales para poder crear un tema WordPress.

Archivos PHP

Estos son los archivos PHP esenciales para el tema.

header.php

<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <!-- Etiquetas meta requeridos -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Demo Infinite Scroll</title>
    <?php
    //Cargar los archivos css, js ...
    wp_head();
    ?>
  </head>
  <body>

index.php

<?php get_header( ); ?>
<section class="container">
	<div id="articles" class="row">
		<?php
		//**********Comienza el bucle**********
		if ( have_posts() ) : while ( have_posts() ) : the_post();
		?>
		<article class="col-12 article-item">
			<h2><?php the_title( ); ?></h2>
			<p><?php the_excerpt(); ?></p>
		</article>
		<?php
			// Detiene el ciclo (pero ten en cuenta el "else:" - vea la siguiente linea).
	 		endwhile;
		else :
			echo '<h4 class="p-4 mt-4 mb-4 message-error">Lo sentimos, no hay publicaciones para mostrar.</h4>';
			//REALMENTE detén del ciclo.
		endif;
		 ?>
	</div>
	<div class="row justify-content-md-center">
		<div class="col-8">
			<?php
                //Paginación
				the_posts_pagination( array(
			 	 	'screen_reader_text' => 'Navegación de entradas',
					'prev_text'	=> '&laquo;',
					'next_text'	=> '&raquo;',
			 	 ) );
			 ?>
			 <!--HTML Infinite Scroll-->
			<div class="page-load-status" style="display: none;">
				<div class="infinite-scroll-request loader-ellips">
					<span class="loader-ellips__dot"></span>
					<span class="loader-ellips__dot"></span>
					<span class="loader-ellips__dot"></span>
					<span class="loader-ellips__dot"></span>
				</div>
				<p class="infinite-scroll-last text-center">Fin del contenido</p>
				<p class="infinite-scroll-error text-center">No hay más páginas para cargar</p>
			</div>
		</div>
	</div>
</section>
<?php get_footer( ); ?>

footer.php

		<p class="text-center">&copy; <a href="https://01luisrene.com" target="_blank">01luisrene</a></p>
		<?php
			//Cargar los archivos js, ...
			wp_footer();
		?>
	</body>
</html>

functions.php

<?php
//Cargamos nuestros archivos CSS y JS
function add_css_js(){
	//Librería CSS de Bootstrap
	wp_enqueue_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
	//Cargo el fichero (style.css), que se encuentra alojado en la raíz del proyecto
	wp_enqueue_style('style', get_stylesheet_uri());

	//Quito la librería jQuery antigua que se agrega por defecto
	wp_deregister_script('jquery');
	//Librería JS jQuery
	wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', null, '3.3.1', false);

	//Librería JS Infinite Scroll
	wp_register_script(
	 'infinite_scroll',
	 get_template_directory_uri() . '/js/infinite-scroll.pkgd.min.js',
	 array('jquery'),
	 '3.0.5',
	 true
	);

	//Validar para que cargue solo en el home
	/*
	Este código es solo de ejemplo puedes agregar
	las condiciones que quieras (is_author(), is_archive(), ...) o quitarla
	*/

	if ( is_home() ):
	 wp_enqueue_script( 'infinite_scroll' );
	endif;
}
add_action('wp_enqueue_scripts', 'add_css_js');

//Agregamos el código JavaScript de Infinite Scroll en el wp_footer
function script_infinite_scroll() {
	//Validar para que el script cargue solo en el home
	/*
	Este código es solo de ejemplo puedes agregar
	las condiciones que quieras (is_author(), is_archive(), ...) o quitarla
	*/
	if ( is_home() ):
		echo '
			<script>
			//Contenedor de los ítems
			var $container = jQuery("#articles").infiniteScroll({
				append: "article", //ítems
				path: ".next", //Clase que envía a la siguiente página
				status: ".page-load-status", //Contenedor de los estados
				hideNav: ".pagination", //Contenedor de la paginación a ocultar
				//history: false //Habilita esta opción para no actualizar el historial y la URL utiliza
			});

			//Usar eventos de infinite scroll de v2
			$container.on( "load.infiniteScroll", function( event, response, path, items ) {
				console.log( "Cargando página: " + path );
			});
		</script>
		';
	endif;
}
add_action( 'wp_footer', 'script_infinite_scroll', 100 );

Archivos CSS

Archivos CSS style.css importante con la información del tema WordPress y screen.css contiene estilos personalizables.

style.css

/*
Theme Name: Demo Infinite Scroll
Author: Luis Rene Mas Mas
Author URI: http://01luisrene.com/
Description: Tema para realizar una demo de Infinite Scroll.
Version: 1.0
License: MIT
Tags: infinite-scroll, infinite, scroll
*/
@import url("css/screen.css");

css/screen.css

Recuerda crear en la raíz del proyecto la carpeta css, el cual contendra el archivo screen.css.

/*Contenedor de los ítems*/
.article-item{
  word-wrap: break-word;
}
/*Paginación*/
.navigation.pagination{
	display: block;
	text-align: center;
	margin-bottom: 2.5rem;
}
.pagination .nav-links{
	width: 100%;
}


/*================CSS Infinite Scroll================*/

/*Animaciones @keyframes*/
@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}

/*Contenedor de los mensaje de los diferentes estados*/
.page-load-status {
  margin: 2.5rem 0;
}

/*Animación cargando*/
.loader-ellips {
  font-size: 20px;
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  position: absolute;
  display: block;
  width: 1em;
  height: 1em;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  border-radius: .5em;
  background: #dd1c2a;
}

.loader-ellips__dot:nth-child(1) {
  -webkit-animation-name: reveal;
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  -webkit-animation-name: slide;
  animation-name: slide;
}

.loader-ellips__dot:nth-child(3) {
  left: 1.5em;
}

.loader-ellips__dot:nth-child(4) {
  left: 3em;
  -webkit-animation-name: reveal;
  animation-name: reveal;
  animation-direction: reverse;
}
/*Fin de la animación cargando*/

/*Mensaje de fin del contenido y no posts*/
.infinite-scroll-last,
.message-error{
  background: #EA3B8D;
  color: #fff;
  font-size: 2.5rem;
}

Librería Infinite Scroll

Agrega la librería Infinite Scroll en la carpeta js. El código es extenso para agregarlo aquí, ademas no tiene sentido por que lo puedes descargar junto con el demo.

Recuerda visitar https://infinite-scroll.com/, para revisar la documentación te lo recomiendo.

Demo Infinite Scroll - WordPress

DEMO

Demo Infinite Scroll
Luis Rene Mas Mas

Luis Rene Mas Mas

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más