Update ... Here\'s the Final Code That Worked for Me

这可能并不完美，但对我来说似乎工作得很好，没有任何错误。如果您有任何改进建议，请随时添加。

JS Code

jQuery(document).ready(function($) {

    var count = 2;

    jQuery("#la-chooser").change(function() {
        loadArticlebyCat(this.value);
    });

    function loadArticlebyCat(cat){

        data = {
            action: \'infinite_scroll\', 
            val: cat,
            afp_nonce: afp_vars.afp_nonce,
        };

        jQuery.ajax({
            url: afp_vars.afp_ajax_url,
            type:\'post\',
            data: data,
            success: function( data, textStatus, XMLHttpRequest ) {
                jQuery("#tb-ajax-content").html( data );
                jQuery(\'#infinitBtn span\').html(\'Load More Entries\');
                console.log( textStatus );
                console.log( XMLHttpRequest );
                count = 2;
            },
            error: function( MLHttpRequest, textStatus, errorThrown ) {
                console.log( MLHttpRequest );
                console.log( textStatus );
                console.log( errorThrown );
                jQuery("#tb-ajax-content").html( \'No posts found\' );
            }
        });

        return false;
    }

    jQuery(\'#infinitBtn\').click(function(){
        loadArticle(count);
        count++;
        return false;
    });

    function loadArticle(pageNumber) {

        var cat = jQuery("#la-chooser").val();

        jQuery.ajax({
            url: afp_vars.afp_ajax_url,
            type:\'POST\',
            data: "action=infinite_scroll&page_no="+ pageNumber + "&loop_file=loop&val="+ cat +"&afp_nonce="+afp_vars.afp_nonce,
            success: function(html) {
                if(html=="") {
                    jQuery(\'#infinitBtn span\').html(\'All Entries Loaded\');
                } else {
                    jQuery(\'#infinitBtn span\').html(\'Load More Entries\');
                }
                jQuery("#tb-ajax-content").append(html);
            }
        });

        return false;
    }

});

<小时>

WordPress Functions

请注意，我在子主题中使用了这个，因此如果不使用子主题，您可能希望使用get template directory uri而不是get\\u stylesheet\\u directory\\u uri。

function ajax_filter_posts_scripts() {

    // Register and enqueue script
    wp_register_script(\'afp_script\', get_stylesheet_directory_uri() . \'/js/ajax-filter-posts.js\', false, null, false);
    wp_enqueue_script(\'afp_script\');

    // localize script
    wp_localize_script( \'afp_script\', \'afp_vars\', array(
        \'afp_nonce\' => wp_create_nonce( \'afp_nonce\' ), 
        \'afp_ajax_url\' => admin_url( \'admin-ajax.php\' ),
    ));

}

add_action(\'wp_enqueue_scripts\', \'ajax_filter_posts_scripts\', 100);

function wp_infinitepaginate() {

    // Verify nonce
    $nonce = $_POST[\'afp_nonce\'];   
    if ( !isset( $nonce ) || !wp_verify_nonce( $nonce, \'afp_nonce\' ) )
        die ( \'Permission denied\');

    $paged = $_POST[\'page_no\'];
    $cat = $_POST[\'val\'];
    $args = array(
        \'category_name\' => $cat,
        \'post_status\' => \'publish\',
        \'posts_per_page\' => \'6\',
        \'paged\' => $paged,
    );

    query_posts($args);
    get_template_part(\'custom-loop\');
    wp_reset_query();

    exit;
}

add_action(\'wp_ajax_infinite_scroll\', \'wp_infinitepaginate\');           // for logged in user
add_action(\'wp_ajax_nopriv_infinite_scroll\', \'wp_infinitepaginate\');    // if user not logged in

<小时>

Main Loop Code With Drop-Down Category Selector

<div class="latest-article-chooser clearfix">
    <h1>Latest Blog Posts</h1>
    <p>
        <span>Filter Posts by Category:</span> <select id="la-chooser">
            <option value="">All Categories</option>
                <?php
                    $categories =  get_categories();
                    foreach ($categories as $category) {
                        $option = \'<option value="\'.$category->category_nicename.\'">\';
                        $option .= $category->cat_name;
                        $option .= \' (\'.$category->count.\')\';
                        $option .= \'</option>\'."\\n";
                        echo $option;
                    }
                ?>
        </select>
    </p>
</div>

<div id="tb-ajax-content">

<?php
    if (is_front_page()) { 
        $paged = (get_query_var(\'page\')) ? get_query_var(\'page\') : 1;
    } else {
        $paged = (get_query_var(\'paged\')) ? get_query_var(\'paged\') : 1;
    }
    $count = 1;
    query_posts(array(
        \'post_status\' => \'publish\',
        \'posts_per_page\' => \'6\',
        \'paged\' => $paged,
    ));

    get_template_part(\'custom-loop\');
?>

</div>

<div class="post-clear"></div>

<a class="button sc blue" href="#" id="infinitBtn"><span>Load More Entries</span></a>

<小时>

Custom Loop File (custom-loop.php)

这里包含一些特定于主题的函数，因此您希望用自己的函数（或本机WordPress函数）替换它们。

<?php 
    $count = 1;
    if ( have_posts() ) : while ( have_posts() ) : the_post(); 
?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">

        <div class="entry-wrap">

            <div class="entry-media">
                <?php 
                    if ( tb_option(\'medium_thumb\') ) { 
                        themebeagle_medium_thumbnail(); 
                    } else {
                        themebeagle_large_thumbnail(); 
                    }
                ?>
            </div>

            <div class="entry-container">

                <header class="entry-header">
                    <?php 
                        themebeagle_entry_title();
                        themebeagle_entry_meta(); 
                    ?>
                </header><!-- .entry-header -->

                <div class="entry-content" itemprop="text">
                    <?php themebeagle_excerpt(); ?>
                </div><!-- .entry-content -->

            </div> <!-- .entry-container -->

            <footer class="entry-footer">
                <?php themebeagle_entry_meta_bottom(); ?>
            </footer><!-- .entry-footer -->

        </div> <!-- .entry-wrap -->

    </article> <!-- article.post -->

<?php 
    $count = $count + 1; 
    endwhile; 
    endif; 
    wp_reset_query();
?>