WordPress: implementare l'infinite scroll

In WordPress è relativamente semplice implementare l'infinite scroll.

Creiamo l'action AJAX in functions.php:

function my_get_posts() {
    $offset = $_GET['offset'];
    $html = '';
    if( isset( $offset ) && filter_var( intval( $offset ), FILTER_VALIDATE_INT ) ) {
      $args = array(
        'posts_per_page' => 3,
        'post_status' => 'publish',
        'offset' => $offset
       );
       $loop = new WP_Query( $args );

       while( $loop->have_posts() ) {
         $loop->the_post();
         // Creiamo la stringa HTML con il contenuto dei post
       }
       wp_reset_postdata();
     }

    echo $html;
    exit();
}

add_action( 'wp_ajax_my_posts', 'my_get_posts' );
add_action( 'wp_ajax_nopriv_my_posts', 'my_get_posts' );

Quindi il codice jQuery:

(function( $ ) {
var getPosts = function() {
    if( $( "#posts-wrap" ).length ) {
        var offset = 3; // 3 post alla volta
        var $content = $( "#posts-wrap" );
        var loading = false;
        var ajaxUrl = "http://" + location.host + "/wp-admin/admin-ajax.php";

        $content.data( "offset", offset );

        $( window ).scroll(function() {
            if( ( ( $( this ).scrollTop() + $( this ).height() ) + 250 ) >= $( document ).height() ) {
              if( loading === false ) {
                loading = true;
                var data = {
                  action: "my_posts",
                  offset: $content.data( "offset" )
                };
                $.when( $.get( ajaxUrl, data ) ).done(function( posts ) {
                    $content.append( posts ).data( "offset", parseInt( $content.data( "offset" ), 10 ) + 3 );
                    loading = false;
                });
              }
            }
        });
    }
}

$(function() {
  getPosts();
});
})( jQuery );