加载更多帖子（自定义Wordpress查询/ Ajax）+自定义循环

Question

我有一个自定义循环，我正在努力通过JS / Ajax加载更多帖子。

template.php

<div class="soft-wrap recent">
                    <h2>Your Recent Downloads</h2>
                    <!-- Recent Downloads -->
                    <?php

                        $recentDownloads = $wpdb->get_results("SELECT * FROM wp_chart WHERE user_id = $user_ID GROUP BY post_id ORDER BY datetime DESC LIMIT 18");

                        foreach ($recentDownloads as $recentDownload) {
                            $recent_ids[] = $recentDownload->post_id;
                        }

                        $recentLoop = array(
                            'post_type' => array( 'acapella' ),
                            'post__in' => $recent_ids,
                            'orderby'=>'post__in',
                            'posts_per_page' => 5
                        );

                        $wp_query = new WP_Query( $recentLoop );
                    ?>

                    <ul class="acapellas row">

                    <?php if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

                    <?php get_template_part( 'includes/list', 'acapella' ); ?>

                    <?php endwhile; ?>

                    <?php
                    global $wp_query; // you can remove this line if everything works for you

                    // don't display the button if there are not enough posts
                    if (  $wp_query->max_num_pages > 1 )
                        echo '<div class="misha_loadmore">More posts</div>'; // you can use <a> as well
                    ?>

                    <?php endif; ?>

                    </ul>
                </div>

myloadmore.js

jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
$('.misha_loadmore').click(function(){

    var button = $(this),
        data = {
        'action': 'loadmore',
        'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
        'page' : misha_loadmore_params.current_page
    };

    $.ajax({ // you can also use $.post here
        url : misha_loadmore_params.ajaxurl, // AJAX handler
        data : data,
        type : 'POST',
        beforeSend : function ( xhr ) {
            button.text('Loading...'); // change the button text, you can also add a preloader image
        },
        success : function( data ){
            if( data ) { 
                button.text( 'More posts' ).prev().before(data); // insert new posts
                misha_loadmore_params.current_page++;

                if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page ) 
                    button.remove(); // if last page, remove the button

                // you can also fire the "post-load" event here if you use a plugin that requires it
                // $( document.body ).trigger( 'post-load' );
            } else {
                button.remove(); // if no data, remove the button as well
            }
        }
    });
});

}）;

functions.php

function misha_my_load_more_scripts() {

global $wp_query; 

// In most cases it is already included on the page and this line can be removed
wp_enqueue_script('jquery');

// register our main script but do not enqueue it yet
wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );

// now the most interesting part
// we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP
// you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()
wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
    'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
    'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
    'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
    'max_page' => $wp_query->max_num_pages
) );

wp_enqueue_script( 'my_loadmore' );

}

add_action（'wp_enqueue_scripts'，'misha_my_load_more_scripts'）;

function misha_loadmore_ajax_handler（）{

// prepare our arguments for the query
$args = json_decode( stripslashes( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
$args['post_status'] = 'publish';

// it is always better to use WP_Query but not here
query_posts( $args );

if( have_posts() ) :

    // run the loop
    while( have_posts() ): the_post();

        // look into your theme code how the posts are inserted, but you can use your own HTML of course
        // do you remember? - my example is adapted for Twenty Seventeen theme
        get_template_part( 'template-parts/post/content', get_post_format() );
        // for the test purposes comment the line above and uncomment the below one
        // the_title();


    endwhile;

endif;
die; // here we exit the script and even no wp_reset_query() required!

}

add_action（'wp_ajax_loadmore'，'misha_loadmore_ajax_handler'）; // wp_ajax_ {action} add_action（'wp_ajax_nopriv_loadmore'，'misha_loadmore_ajax_handler'）; // wp_ajax_nopriv_ {action}