{"id":24742,"date":"2021-05-20T12:36:00","date_gmt":"2021-05-20T09:36:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24742"},"modified":"2021-10-18T03:11:57","modified_gmt":"2021-10-18T00:11:57","slug":"come-caricare-i-post-di-wordpress-con-ajax","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-caricare-i-post-di-wordpress-con-ajax\/","title":{"rendered":"Come caricare i post di WordPress con AJAX"},"content":{"rendered":"

Gestisco un canale YouTube in<\/a> 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.<\/p>\n

La differenza tra il caricamento in pi\u00f9 e lo scorrimento della pagina \u00e8 abbastanza semplice. Quando si utilizza il pulsante Carica altro, \u00e8 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.<\/p>\n

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\u00e0 fino a quando non verranno visualizzati tutti i tuoi post.<\/p>\n

Crea una nuova pagina chiamata "Blog". Per visualizzare i tuoi post nella pagina del blog, crea un modello personalizzato page-blog.php<\/code>nella directory del tuo tema attivo.<\/p>\n

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.<\/p>\n

<div class=\"entry-content\">\n\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0$args = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_type' => 'post',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_status' => 'publish',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'posts_per_page' => '2',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'paged' => 1,\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0$blog_posts = new WP_Query( $args );\n\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\n\u00a0\u00a0\u00a0\u00a0<?php if ($blog_posts->have_posts() ): ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"blog-posts\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2><?php the_title(); ?><\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php the_excerpt(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php endwhile; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"loadmore\">Load More...<\/div>\n\u00a0\u00a0\u00a0\u00a0<?php endif; ?>\n<\/div><\/code><\/pre>\n
Qui, ho usato la chiave "paged" e gli ho passato il valore "1". ‘paged’ \u00e8 una chiave utilizzata in WordPress quando si tratta di impaginazione. ‘paged’ => 1 indica la prima pagina.<\/p>\n
Noteresti l’elemento div con la classe ‘loadmore’. Facendo clic su Carica altro, effettueremo una chiamata Ajax e riceveremo la prossima serie di post.<\/p>\n
Carica i post di WordPress con Ajax sul pulsante Carica altro<\/h3>\n
Per effettuare una chiamata Ajax, \u00e8 necessario includere il file JS nell’ambiente WordPress. Crea un custom.js<\/code>file all’interno della js<\/code>directory e quindi aggiungi il codice di seguito nel functions.php<\/code>file.<\/p>\n
function blog_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce( 'load_more_posts' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'custom-script' );\n}\nadd_action( 'wp_enqueue_scripts', 'blog_scripts' );<\/code><\/pre>\n
Quindi, scriviamo un po’ di jQuery e diamo una chiamata Ajax che in cambio dar\u00e0 i prossimi post.<\/p>\n
custom.js<\/strong><\/p>\n
var page = 2;\njQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '.loadmore', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'load_posts_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'page': page,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($.trim(response) != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.blog-posts').append(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0page++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.loadmore').hide();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Quello che stiamo facendo qui \u00e8 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.<\/p>\n
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.php<\/code>file e aggiungi il codice seguente a un file.<\/p>\n
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');\nadd_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');<\/code><\/pre>\n
Nelle azioni precedenti di WordPress, chiamiamo la funzione di callback load_posts_by_ajax_callback<\/code>che definir\u00f2 nel passaggio successivo. Puoi definire questa funzione nel tuo functions.php<\/code>.<\/p>\n
function load_posts_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('load_more_posts', 'security');\n\u00a0\u00a0\u00a0\u00a0$paged = $_POST['page'];\n\u00a0\u00a0\u00a0\u00a0$args = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_type' => 'post',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_status' => 'publish',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'posts_per_page' => '2',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'paged' => $paged,\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0$blog_posts = new WP_Query( $args );\n\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\n\u00a0\u00a0\u00a0\u00a0<?php if ($blog_posts->have_posts() ): ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2><?php the_title(); ?><\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php the_excerpt(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php endwhile; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0endif;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
Ora, quando fai clic sul pulsante "Carica altro", caricher\u00e0 i post successivi tramite Ajax e li restituir\u00e0 in risposta. Il codice JavaScript scritto sopra gestirebbe il resto.<\/p>\n
Carica i post di WordPress con Ajax sullo scorrimento della pagina<\/h3>\n
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.<\/p>\n
Per ottenere ci\u00f2, \u00e8 necessario scrivere una logica che acquisisca l’evento alla fine di un viewport, il resto del codice \u00e8 lo stesso del pulsante "Carica altro". Di seguito \u00e8 riportato il codice jQuery per lo scorrimento della pagina.<\/p>\n
jQuery(window).scroll(function($) {\n\u00a0\u00a0\u00a0\u00a0if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height()) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'load_posts_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'page': page,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($.trim(response) != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.blog-posts').append(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0page++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.loadmore').hide();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n
Questo \u00e8 tutto! Puoi andare avanti e provarlo. Mi piacerebbe conoscere i vostri pensieri e suggerimenti nei commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n