Se você deseja um recurso moderno para seu tema WordPress, com certeza deveria experimentar o Infinite Scroll do Jetpack. Este é o famoso recurso utilizado por sites gigantes e famosos como Facebook, Twitter e Google+.

O que o Infinite Scroll faz é simplesmente carregar novos posts automaticamente assim que o usuário chega ao final da página, fazendo com que a mesma não tenha fim (dependendo da quantidade de posts, é claro). Este é o modelo de paginação mais avançado que temos atualmente, e não é muito complicado ativar o recurso. Na verdade, a equipe do WordPress já fez o trabalho duro adicionando o módulo do Infinite Scroll no Jetpack, você só precisa ativa-lo no seu functions.php.

Vamos ver como adicionar suporte para o Infinite Scroll do Jetpack no seu tema WordPress abaixo.

Ativando o Infinite Scroll no functions.php

Primeiramente, abra o seu arquivo functions.php e adicione o seguinte ao final:

// Adiciona o suporte para o elemento #tp-post-content
add_theme_support( 'infinite-scroll', array(  
	'container' => 'tp-post-content',  
	'render'    => 'tp_jp_infinite_scroll_render',  
	'footer'    => false,  
)); 

// Adiciona novos posts pelo arquivo loop-index.php
function tp_jp_infinite_scroll_render() {  
	get_template_part( 'loop', 'index' );  
}

Perceba que acima temos duas funções, ambas necessárias para renderizar os novos posts com o Jetpack Infinite Scroll. No “container”, você deve adicionar o ID do elemento que sustenta todos os artigos do seu blog.

Para nosso caso, estou utilizando o tema Tutsup Two (que já tem suporte para infinite scroll). Se você olhar o arquivo index.php, vai perceber que existe um elemento que tem o ID tp-post-content. Veja:

<?php if ( ! defined('ABSPATH')) exit; ?>

<?php get_header();?>

<main class="tp-container">
	<div class="tp-row tp-content-page clearfix"> 
		<div id="tp-post-content" class="tp-cols tp-post-content tp-col-3-2x">
			<div class="tp-col-content">
				<?php get_template_part('loop', 'index'); ?>
				<?php tutsup_main_pagination();?>
			</div>
		</div> <!-- .cols col-N -->
		
		<div class="tp-cols tp-col-3">
			<div class="tp-col-content fill-right-left">
				<div class="tp-sidebar-content fill-right-left">
					<?php get_sidebar(); ?>
				</div>
			</div>
		</div> <!-- .cols col-N -->
		
	</div> <!-- .row -->
</main> <!-- .container -->

<?php get_footer(); ?>

Perceba na linha 7, que estamos chamando exatamente o mesmo arquivo que utilizamos na função do Infinite Scroll.

Observação: Neste caso, estamos utilizando um arquivo separado para criar o loop, que é o que a maioria dos temas fazem. Este arquivo chama-se loop-index.php. Se o seu tema não tem o loop separado da estrutura, considere modificar um pouco seus arquivos para fazê-lo.

Saiba mais em PHP, HTML e CSS em temas WordPress.

Agora você só precisa baixar o Jetpack e ativar o módulo “Rolar infinito“:

Jetpack Rolar Infinito

Jetpack Rolar Infinito

Veja uma demonstração em nosso showcase do tema Tutsup Two.

Em caso de dúvidas, basta perguntar nos comentários.