Carregamento de mais posts com AJAX

(@thomaskauai)

Olá, estou fazendo um código que mostra alguns posts mais recentes de uma determinada categoria (até aí tudo bem), então ao final tem um botão “Carregar mais”. Quero fazer esse botão carregar mais posts no loop usando AJAX, mas até então não achei nenhum tutorial que explicasse isso de forma simples e direta.

Se possível, queria fazer isso sem plugin

O meu código do Loop é esse:

<?php
$paged = (get_query_var('page')) ? get_query_var('page') : 1;
$args = array ('category_name' =>'Portfolio', 'posts_per_page' => 6, 'paged'=>$paged);
query_posts($args);
?>
<?php if (have_posts()) : while (have_posts()) : the_post();?>  

<div class="item">
  <a href="<?php the_permalink(); ?>">
	<img src="<?php echo catch_that_image() ?>">
 	<div class="texto">
	<?php the_title( '<h3>', '</h3>' ); ?>
	</div>
  </a>
</div>

<?php endwhile; ?>
<?php post_pagination(); ?>
<?php wp_reset_query(); ?>
<?php endif; ?>

Visualizando 1 resposta (de um total de 1)

matheuscl

(@matheuscl)

8 anos atrás

Primeiro, tente usar o WP_Query, se você quer que carregue mais por AJAX, qual o motivo da paginação? Pode tirar a variavel $paged e setar ela no $args como 1 direto.

Sobre o AJAX, você vai ter que bolar algum esquema para guardar até qual “página” o usuário já carregou, abaixo tem um exemplo de código pra você poder se basear, fiz rapidinho aqui então posso ter deixado algo passar, dê uma olhada certinho.

function wpajax_load_more_posts(){
    $page = sanitize_key( $_POST['page'] ); // Previously saved in JS or somewhere else
    // Arguments
    $args = array(
        'category_name'     => 'Portfolio',
        'posts_per_page'    => 6,
        'paged'             => $page
    );
    // The Query
    $query = new WP_Query( $args );

    // The Loop
    if ( $query->have_posts() ) {
    	$response = array(
    	    'success'   => true,
    	    'message'   => 'Posts recovered with success!',
    	    'data'      => $query->posts
    	);
    } else {
    	$response = array(
    	    'success'   => false,
    	    'message'   => 'Empty posts!'
    	);
    }
    /* Restore original Post Data */
    wp_reset_postdata();
    echo json_encode( $response );
    die();
}
add_action( 'wp_ajax_load_more_posts', 'wpajax_load_more_posts' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'wpajax_load_more_posts' );

Visualizando 1 resposta (de um total de 1)

O tópico ‘Carregamento de mais posts com AJAX’ está fechado para novas respostas.

Carregamento de mais posts com AJAX

Tags de tópico

Visualizações