Come caricare i post di WordPress con AJAX
Gestisco un canale YouTube in cui pubblico video relativi alla programmazione e al software. Di recente, uno degli abbonati mi ha chiesto come caricare i post di WordPress con AJAX. In risposta a lui, ho deciso di scrivere un post sulla sua domanda. Quindi, in questo articolo, studiamo come caricare i post di WordPress con AJAX utilizzando un pulsante Carica altro e lo scorrimento della pagina.
La differenza tra il caricamento in più e lo scorrimento della pagina è abbastanza semplice. Quando si utilizza il pulsante Carica altro, è necessario fare clic su un pulsante per visualizzare la serie successiva di post. E durante lo scorrimento della pagina, quando si scorre fino alla fine di un viewport, il prossimo set di post dovrebbe essere caricato automaticamente.
Supponiamo che tu abbia un paio di post e che tu debba visualizzare 2 post al caricamento della pagina e quindi facendo clic su "Carica altro" o su "Scorri pagina" dovrebbero essere visualizzati i prossimi 2 post. Questo processo continuerà fino a quando non verranno visualizzati tutti i tuoi post.
Crea una nuova pagina chiamata "Blog". Per visualizzare i tuoi post nella pagina del blog, crea un modello personalizzato page-blog.phpnella directory del tuo tema attivo.
Ora, quando gli utenti visitano la pagina del tuo blog, dovrebbero vedere 2 post. Quindi, aggiungi il codice qui sotto nel tuo file modello personalizzato.
<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>Qui, ho usato la chiave "paged" e gli ho passato il valore "1". ‘paged’ è una chiave utilizzata in WordPress quando si tratta di impaginazione. ‘paged’ => 1 indica la prima pagina.
Noteresti l’elemento div con la classe ‘loadmore’. Facendo clic su Carica altro, effettueremo una chiamata Ajax e riceveremo la prossima serie di post.
Carica i post di WordPress con Ajax sul pulsante Carica altro
Per effettuare una chiamata Ajax, è necessario includere il file JS nell’ambiente WordPress. Crea un custom.jsfile all’interno della jsdirectory e quindi aggiungi il codice di seguito nel functions.phpfile.
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' );Quindi, scriviamo un po’ di jQuery e diamo una chiamata Ajax che in cambio darà i prossimi post.
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();
}
});
});
});Quello che stiamo facendo qui è che ho preso una variabile javascript "pagina" con valore iniziale 2 mentre inizieremo con l’impaginazione della seconda pagina. Sto incrementando questa variabile "pagina" dopo aver ricevuto la risposta Ajax. Dopo aver ricevuto la risposta, la aggiungo all’elenco dei post esistenti.
Ho anche usato il parametro di azione come "load_posts_by_ajax" per una chiamata Ajax che deve essere mappata con le azioni di WordPress. Apri il tuo functions.phpfile e aggiungi il codice seguente a un file.
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');Nelle azioni precedenti di WordPress, chiamiamo la funzione di callback load_posts_by_ajax_callbackche definirò nel passaggio successivo. Puoi definire questa funzione nel tuo 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();
}Ora, quando fai clic sul pulsante "Carica altro", caricherà i post successivi tramite Ajax e li restituirà in risposta. Il codice JavaScript scritto sopra gestirebbe il resto.
Carica i post di WordPress con Ajax sullo scorrimento della pagina
Alcuni utenti potrebbero non volere un pulsante Carica altro per visualizzare i post con Ajax. Preferiscono invece che i post vengano visualizzati una volta che l’utente raggiunge la fine di un viewport.
Per ottenere ciò, è necessario scrivere una logica che acquisisca l’evento alla fine di un viewport, il resto del codice è lo stesso del pulsante "Carica altro". Di seguito è riportato il codice jQuery per lo scorrimento della pagina.
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();
}
});
}
});Questo è tutto! Puoi andare avanti e provarlo. Mi piacerebbe conoscere i vostri pensieri e suggerimenti nei commenti qui sotto.