Come aggiungere Ajax ad un tema WordPress

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!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *