O Poder do Fluxo: Como a Timeline Infinita Reduz a Taxa de Rejeição

// functions.php

function mit_enqueue_infinite_scroll() {
    // 1. Enqueue o script no rodapé
    wp_enqueue_script( 'mit-infinite-scroll', get_template_directory_uri() . '/js/infinite-scroll.js', array('jquery'), null, true );

    // 2. Passa dados PHP para o JavaScript
    global $wp_query;
    wp_localize_script( 'mit-infinite-scroll', 'mit_scroll_params', array(
        'ajax_url'    => admin_url( 'admin-ajax.php' ), // URL padrão para requisições AJAX
        'current_page' => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1, // Página atual
        'max_pages'   => $wp_query->max_num_pages, // Número total de páginas
        'query_vars'  => json_encode( $wp_query->query ), // Parâmetros da query atual (para manter filtros)
        'container_selector' => '.post-list-container', // Seletor do container onde os posts são inseridos
        'next_selector' => '.pagination a.next', // Seletor do link "Próxima página" (usado como fallback)
    ) );
}
add_action( 'wp_enqueue_scripts', 'mit_enqueue_infinite_scroll' );

// functions.php

function mit_load_more_posts() {
    $paged = $_POST['page'] + 1; // Calcula o número da próxima página a ser carregada
    
    // Decodifica os parâmetros da query principal para manter o contexto (categoria, busca, etc.)
    $args = json_decode( stripslashes( $_POST['query_vars'] ), true );
    $args['paged'] = $paged; // Sobrescreve a página
    $args['post_status'] = 'publish';
    
    // Nova Query do WordPress
    $new_query = new WP_Query( $args );

    if ( $new_query->have_posts() ) :
        while ( $new_query->have_posts() ) : $new_query->the_post();
            // CHAME O TEMPLATE PART DO SEU POST
            // Adapte o 'content' para o nome do seu arquivo template-part
            get_template_part( 'template-parts/content', get_post_format() ); 
        endwhile;
    endif;

    wp_reset_postdata(); // Restaura os dados globais
    die(); // Obrigatório no final das funções AJAX no WordPress
}

// Registra a função para usuários logados e deslogados
add_action( 'wp_ajax_mit_load_more', 'mit_load_more_posts' );
add_action( 'wp_ajax_nopriv_mit_load_more', 'mit_load_more_posts' );

// infinite-scroll.js

jQuery(document).ready(function($) {
    // 1. Variáveis de estado
    var canLoad = true; // Impede requisições múltiplas
    var currentPage = mit_scroll_params.current_page; // Página atual (inicia em 1)
    var maxPages = mit_scroll_params.max_pages; // Total de páginas
    var container = $(mit_scroll_params.container_selector); // Seletor do container de posts
    var bottomOffset = 500; // Distância do fundo em que o carregamento será acionado (em pixels)

    // Apenas executa se houver mais de uma página
    if (currentPage >= maxPages) {
        canLoad = false;
        // Opcional: Remover paginação padrão para evitar confusão
        $(mit_scroll_params.next_selector).parent().remove(); 
    }

    // 2. Monitoramento do Scroll
    $(window).scroll(function() {
        // Verifica se o usuário chegou no ponto de carregamento E se podemos carregar
        if ( $(window).scrollTop() + $(window).height() >= $(document).height() - bottomOffset && canLoad == true ) {
            
            // Trava o carregamento para evitar múltiplas chamadas
            canLoad = false;
            
            // Incrementa a página para a próxima requisição
            currentPage++;

            // Opcional: Exibir um indicador de carregamento (você deve estilizá-lo com CSS)
            // container.after('<div class="loading-indicator">Carregando...</div>'); 

            // 3. Requisição AJAX
            $.ajax({
                url: mit_scroll_params.ajax_url,
                type: 'POST',
                data: {
                    action: 'mit_load_more', // Ação definida no PHP
                    page: currentPage, // Número da página a carregar
                    query_vars: mit_scroll_params.query_vars // Contexto da busca
                },
                success: function(response) {
                    // $('.loading-indicator').remove(); // Remover indicador
                    
                    if (response) {
                        // 4. Manipulação do DOM: Injeta o novo conteúdo
                        container.append(response); 

                        // 5. Destrava o carregamento se houver mais páginas
                        if (currentPage < maxPages) {
                            canLoad = true;
                        } else {
                            // Fim da linha: Não há mais posts a carregar
                            container.after('<div class="end-of-content">Você viu tudo!</div>');
                        }
                    } else {
                        // Caso a requisição retorne vazio (fim dos posts)
                        canLoad = false;
                    }
                },
                error: function(xhr, status, error) {
                    // Lidar com erros
                    // $('.loading-indicator').remove();
                    canLoad = true; // Tentar novamente
                    console.error("Erro no AJAX: " + error);
                }
            });
        }
    });
});

<div class="post-list-container">
    <?php 
    if ( have_posts() ) : 
        while ( have_posts() ) : the_post();
            get_template_part( 'template-parts/content', get_post_format() ); 
        endwhile;
    endif;
    ?>
</div>

<div class="pagination">
    <?php next_posts_link( 'Próxima página &raquo;' ); ?>
</div>