Come caricare il contenuto di un post tramite ajax in WordPress

Pubblico questa risorsa, per cercare di venire in contro a chi come me ha dovuto affrontare in WordPress, la questione “Caricamento dei post tramite chiamata Ajax” ed ha riscontrato difficolà nei vari link presenti in rete.

Nel codice che vedremo io ho strutturato la pagina in modo che un determinato Custom Post venisse aperto tramite finestra in style modal.

Gli step che vedremo sono molto semplici:

• Creazione della funzione che gestirà il contenuto
• Gestione differenti template in base al post type
• Creazione link
• Richiamo/associazione della chiamata Ajax tramite jQuery

Creazione della funzione che gestirà il contenuto

Creiamo ora la nostra funzione PHP che gestirà la query in base alla chiamata ajax per caricare il contenuto richiesto, inseriamo quindi il seguente codice sempre nel nostro functions.php

function load_post() {
if ( isset( $_POST['id'] ) && isset( $_POST['id'] ) && wp_verify_nonce($_POST['load_post_nonce'], 'load_post-nonce') ) {
   $id = absint($_POST["id"]);
$post_type= sanitize_text_field($_POST["post_type"]);
  $myquery = new WP_Query(array(   'p' => $id , 'post_type' => $post_type ));
  while ($myquery->have_posts()): $myquery->the_post();
        
    get_template_part( 'template_parts/ajax', $post_type );
    
  endwhile;
  die(); 
  }
}
add_action( 'wp_ajax_load_post', 'load_post' );
add_action( 'wp_ajax_nopriv_load_post', 'load_post' );

Vediamo nei dettagli questa funzione, non fa altro che creare una query custom tramite l’ID del post che si vuol richiamare e la tipologia del post, questo è stato fatto per far sì che la funzione possa essere il più universale possibile, in quanto si può usare oltre che per i normali post, anche per i Custom Post Type creati in base alle proprie esigenze.
Nel ciclo while, invece che l’output desiderato, ho inserito la funzione

get_template_part();

grazie alla quale vado a richiamare all’interno della cartella “template_parts” il file “ajax-post_type.php” dove tramite la variabile $_POST[‘post_type’] andrò a recuperare la tipologia del post e richiamare quindi il template che ho creato ad hoc (es. ajax-staff.php o ajax-promo.php).

vediamo inoltre che subito dopo la funzione vado ad aggiungere l’azione al mio tema tramite add_action utilizzando le funzioni

wp_ajax_NOME_FUNZIONE

e

wp_ajax_nopriv_NOME_FUNZIONE

importante per non sbagliare di utilizzare sempre il nome della funzione

add_action( 'wp_ajax_NOME_FUNZIONE', 'NOME_FUNZIONE' );

Gestione differenti template in base al post type

Come nell’esempio qui sopra riportato, vediamo ora come ho generato il mio file template:

ID, 'custom_field_impostato', true );

?>

    
X
    

        

            

                

            
        
        

            

                
                
            
 
        
    

Questa struttura la scegliete voi in base alle vostre esigenze e in base a ciò che dovete/volete mostrare e tramite CSS potrete mostrare il contenuto come fosse una modal oppure mostrare il contenuto creando un effetto slide.

Creazione link

Nel nostro loop in home page o ovunque voi vogliate usare la chiamata ajax, vediamo come strutturare il link

Maggiori Dettagli

analizziamo il link:
la classe: ne ho impostata una che mi servirà per la funzione jQuery che andremo a vedere a breve, nella quale definirò che al suo click venga trattata la chiamata ajax.
href: imposto l’ID di un div* dislocato nel nostro codice

, nel quale verrà destinato il contenuto della chiamata.
id e data-type: prelevo i dati che sfrutterò per creare la corretta query che mi estrarrà il contenuto richiesto

*= al div sopra segnalato, ho impostato una classe hide con la quale lo nascondo tramite CSS alla quale alternerò una classe open per mostrarlo (con le regole css che meglio si adattano alla situazione

Richiamo/associazione della chiamata Ajax tramite jQuery e localizzazione dello script

Ultima cosa ho creato un file js (es.richieste-ajax.js) che ho impostato per tutto il tema tramite la funzione custom_scripts() e sempre nella stessa ho provveduto a localizzare lo script ed impostare l’url di admin-ajax.php che serve per le chiamate Ajax.

function custom_scripts() {
    wp_enqueue_script('richieste_ajax', get_template_directory_uri().'/js/richieste-ajax.js',array('jquery'),'1.0',true);
wp_localize_script( 'richieste_ajax', 'richieste_ajax_vars', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ),'nonce' => wp_create_nonce('load_post-nonce'), ) );
}
add_action( 'wp_enqueue_scripts', 'scripts' );

ma andiamo a vedere il file in questione come è strutturato:

jQuery(function($){
		    $( 'a.ajaxPost' ).on( 'click', function( e ) {
		        e.preventDefault();
		        var post_id = $(this).attr( 'id' );
		        var post_type = $(this).attr( 'data-type' );
		        jQuery.ajax({
		        	url:richieste_ajax_vars.ajaxurl,  // questa è la variabile che abbiamo impostato con il primo script
		            type: "POST",
		            data: {
		                action: 'load_post', // questo è il richiamo alla funzione che deve gestire la chiamata
		                id: post_id, //questo è il passaggio da js a php dell'ID del post da richiamare
		                post_type: post_type   //questo è il passaggio da js a php della tipologia di post da richiamare
                                load_post_nonce:richieste_ajax_vars.nonce
		            },
		            success: function(response, satus, call) {
		                $("#ContenutoPost").html(response);   //tramite questa stringa comunico che il div con id ContenutoPost sia la destinazione della mia chiamata ajax
		                console.log("Success", arguments);    //mostron in console l'esito della chiamata - può essere commentata la riga
                  
                  	jQuery('#ContenutoPost').removeClass('hide').addClass('open'); //tramite questa stringa, alterno le classi open e hide per mostrare o nascondere il div
                    if (jQuery('#ContenutoPost').hasClass('open')) { //se il div ha la classe open, quindi è visualizzato farò in modo che al clic al di fuori del contenuto o sulla X, venga chiuso
                        jQuery("#ContenutoPost").mouseup(function(e)
                            {   
                            var subject = $('.modalPost');

                            if(e.target.id != subject.attr('id') && !subject.has(e.target).length)
                            {
                                jQuery('#ContenutoPost').removeClass('open').addClass('hide');
                            }

                            });
                        jQuery('.closeModal').click(function(event){
                            event.preventDefault();
                            jQuery('#ContenutoPost').removeClass('open').addClass('hide');
                        });
		              }
                    },
		            error: function(err) {
		                console.log("Error", arguments); //nel caso di errori stampa il contenuto dell'errore - può essere commentata la riga
		            }
		        });
                    });
	    });

Mi auguro di aver fatto cosa gradita e chiarito dubbi in merito all’utilizzo di Ajax, su WordPress.

Cosa ne pensate?