Come aggiungere Ajax ad un tema WordPress

By | 17 febbraio 2017

Dato che mi capita spesso di dover aggiungere una chiamata Ajax ad un tema WordPress, ho deciso di scrivere questo post innanzitutto come futuro riferimento per il sottoscritto, se poi sarà utile a qualcun altro, ne sarò lieto.

Per aggiungere una chiamata Ajax ad un tema WordPress servono 3 passaggi:

  1. Aggiungere e configurare chiamata Ajax con Jquery
  2. Scrivere funzione Php che restituisca codice Html
  3. Associare la chiamata Ajax ad un evento

Aggiungere e configurare una chiamata Ajax con JQuery


var param;
jQuery.ajax({
url:/wp-admin/admin-ajax.php,
type:'POST',
data:'action=my_action¶m=' + param,
success:function(html){
var newItems = jQuery(html);
jQuery('.divdestinazione').isotope( 'insert', newItems );},

//in alternativa, è possibile usare jQuery.append(html), uso isotope solo perchè mi capita spesso di utilizzarlo nei miei progetti
//Se serve, aggiorna param
});

Scrivere funzione Php che restituisca codice Html

nel file functions.php:


function my_function(){
$var = $_POST['param'];
//genero il codice html (un loop?) che verrà passato alla funzione "success" nella chiamata
echo $html;
}
add_action('wp_ajax_my_action', 'my_function');
add_action('wp_ajax_nopriv_my_action', 'my_function');

Associare la chiamata Ajax ad un evento

Qui metto 2 possibilità:

A) Click su un bottone:
jQuery(‘#bottone’).click(function(){

//chiamata Ajax

});

B) Dopo uno scroll (tipo scroll infinito)


jQuery(document).bind('scroll', function () {
if(jQuery(window).scrollTop() >= jQuery('.divcontenitore').offset().top + jQuery('.divcontenitore').outerHeight() - window.innerHeight){
//Chiamata Ajax

});

E questo è tutto!

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn