Como carregar posts WordPress com AJAX
Estou executando um canal no YouTube onde posto vídeos relacionados a programação e software. Recentemente, um dos assinantes me perguntou como carregar uma postagem do WordPress com AJAX. Em resposta a ele, decidi escrever um post sobre sua pergunta. Portanto, neste artigo, estudamos como carregar uma postagem do WordPress com AJAX usando um botão carregar mais e rolar a página.
A diferença entre carregar mais e uma rolagem de página é bastante simples. Ao usar o botão carregar mais, você precisa clicar em um botão para ver o próximo conjunto de postagens. E na rolagem de página, quando você rola para o final de uma janela de visualização, o próximo conjunto de postagens deve ser carregado automaticamente.
Vamos supor que você tenha algumas postagens e precise exibir 2 postagens no carregamento da página e, em seguida, clicando em ‘Carregar mais’ ou em ‘Rolagem da página’, as próximas 2 postagens devem ser exibidas. Este processo continuará até que todas as suas postagens sejam exibidas.
Crie uma nova página chamada ‘Blog’. Para exibir suas postagens na página Blog, crie um modelo personalizado page-blog.phpno diretório de seu tema ativo.
Agora, quando os usuários visitam a página do seu blog, eles devem ver 2 postagens. Portanto, adicione o código abaixo em seu arquivo de modelo personalizado.
<div class="entry-content">
<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '2',
'paged' => 1,
);
$blog_posts = new WP_Query( $args );
?>
<?php if ($blog_posts->have_posts() ): ?>
<div class="blog-posts">
<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
</div>
<div class="loadmore">Load More...</div>
<?php endif; ?>
</div>Aqui, usei a chave ‘paginada’ e passei o valor ‘1’ para ela. ‘paginado’ é uma chave usada no WordPress quando se trata de paginação. ‘paged’ => 1 significa a primeira página.
Você notaria o elemento div com a classe ‘loadmore’. Ao clicar em Carregar mais, faremos uma chamada Ajax e obteremos o próximo conjunto de postagens.
Carregar Postagens WordPress com Ajax no Botão Carregar Mais
Para fazer uma chamada Ajax, você precisa incluir o arquivo JS no ambiente WordPress. Crie um custom.jsarquivo dentro do jsdiretório e, em seguida, adicione o código abaixo no functions.phparquivo.
function blog_scripts() {
// Register the script
wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security' => wp_create_nonce( 'load_more_posts' ),
);
wp_localize_script( 'custom-script', 'blog', $script_data_array );
// Enqueued script with localized data.
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );A seguir, vamos escrever um pouco de jQuery e dar uma chamada Ajax que em troca dará os próximos posts.
custom.js
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore', function() {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
if($.trim(response) != '') {
$('.blog-posts').append(response);
page++;
} else {
$('.loadmore').hide();
}
});
});
});O que estamos fazendo aqui é pegar uma ‘página’ de variável javascript com valor inicial 2, pois vamos começar com a paginação de segunda página. Estou incrementando esta variável ‘página’ após receber a resposta do Ajax. Depois de obter a resposta, vou anexá-la à lista de postagens existentes.
Eu também usei o parâmetro de ação como ‘load_posts_by_ajax’ para uma chamada Ajax que precisa ser mapeada com ações do WordPress. Abra seu functions.phparquivo e adicione o código abaixo a um arquivo.
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');Nas ações do WordPress acima, chamamos a função de retorno de chamada load_posts_by_ajax_callbackque irei definir na próxima etapa. Você pode definir esta função em seu functions.php.
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '2',
'paged' => $paged,
);
$blog_posts = new WP_Query( $args );
?>
<?php if ($blog_posts->have_posts() ): ?>
<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php
endif;
wp_die();
}Agora, quando você clicar no botão ‘Carregar mais’, ele carregará as próximas postagens por meio do Ajax e retornará em resposta. O código JavaScript escrito acima trataria do restante.
Carregar Postagens WordPress com Ajax na Rolagem da Página
Alguns usuários podem não querer um botão carregar mais para exibir as postagens com Ajax. Em vez disso, eles preferem que as postagens sejam exibidas assim que o usuário atingir o final de uma janela de visualização.
Para conseguir isso, você precisa escrever uma lógica que capture o evento no final de uma janela de visualização, o resto do código é o mesmo que o botão ‘Carregar mais’. Abaixo está o código jQuery para rolagem de página.
jQuery(window).scroll(function($) {
if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height()) {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
if($.trim(response) != '') {
$('.blog-posts').append(response);
page++;
} else {
$('.loadmore').hide();
}
});
}
});É isso! Você pode ir em frente e experimentar. Gostaria de saber sua opinião e sugestões nos comentários abaixo.