Come aggiungere Ajax ad un tema WordPress

di | 10 Febbraio 2019

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

[js]
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
});
[/js]
Scrivere funzione Php che restituisca codice Html

nel file functions.php:
[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’);
[/php]

Associare la chiamata Ajax ad un evento

Qui metto 2 possibilità:
A) Click su un bottone:
[js]jQuery(‘#bottone’).click(function(){
//chiamata Ajax
});[/js]
B) Dopo uno scroll (tipo scroll infinito)
[js]jQuery(document).bind(‘scroll’, function () {
if(jQuery(window).scrollTop() >= jQuery(‘.divcontenitore’).offset().top + jQuery(‘.divcontenitore’).outerHeight() – window.innerHeight){
//Chiamata Ajax
});[/js]
E questo è tutto!