Carregar mais posts - Botão Ajax no WordPress

Na postagem de hoje, mostrarei como criar um botão “carregar mais” para mostrar posts adicionais ou tipos de posts personalizados usando o AJAX.

A vantagem disso é que ele melhorará o carregamento da página, pois exibirá apenas uma certa quantidade de posts antes de ter que carregar mais conteúdo.

Então, vamos começar…

Portanto, a primeira coisa que você deve ter é uma lista de postagens a serem exibidas no frontend da seguinte maneira:


    <div id="ajax-posts" class="row">
        <?php
            $postsPerPage = 3;
            $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => $postsPerPage,
            );

            $loop = new WP_Query($args);

            while ($loop->have_posts()) : $loop->the_post();
        ?>

         <div class="small-12 large-4 columns">
                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p>
         </div>

         <?php
                endwhile;
        wp_reset_postdata();
         ?>
    </div>
    <div id="more_posts">Load More</div>

Este código deve ser colocado logo após o wp_localize_script existente. Isso carrega o próprio admin-ajax.php do WordPress, para que possamos usá-lo quando o chamarmos na nossa chamada ajax.

No final do arquivo functions.php, você precisa adicionar a função que carregará os seus posts:


function more_post_ajax(){

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

    header("Content-Type: text/html");

    $args = array(
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= '<div class="small-12 large-4 columns">
                <h1>'.get_the_title().'</h1>
                <p>'.get_the_content().'</p>
         </div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

The final part is the ajax itself. In functions.js or your main JavaScript/jQuery file, you need to input inside the $(document).ready(); environment the following code:-


var ppp = 3; // Post per page
var pageNumber = 1;


function load_posts(){
    pageNumber++;
    var str = ''&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
    $.ajax({
        type: "POST",
        dataType: "html",
        url: ajax_posts.ajaxurl,
        data: str,
        success: function(data){
            var $data = $(data);
            if($data.length){
                $("#ajax-posts").append($data);
                $("#more_posts").attr("disabled",false);
            } else{
                $("#more_posts").attr("disabled",true);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }

    });
    return false;
}

$("#more_posts").on("click",function(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_posts();
});

Com o código acima, agora você terá um botão “carregar mais” na parte inferior de suas postagens, no qual, ao clicar, ele exibirá outros posts. Isso também pode ser usado com tipos de post personalizados.

Se precisar de ajuda para isso, não hesite em entrar em contato na caixa de comentários abaixo. Isso também pode ser usado para carregar automaticamente em scroll. Novamente, se precisar de ajuda com isso, envie-me uma mensagem e terei o maior prazer em ajudá-lo!

WordPress / Web Development Tutorials
(Best WordPress Tutorials)