Question

我正在使用本教程为我的网站生成无限滚动：http://www.billerickson.net/infinite-scroll-in-wordpress/

我已将自定义函数be_ajax_load_more添加到我的html中：

<div id="music-feed">
    <div class="song-container">

        <div class="most-recent-feed">
            <?php be_ajax_load_more(); ?>
        </div>
    </div>
    <!--song container -->
</div>

但是当页面加载时，它似乎没有通过整个代码并且不显示帖子。我知道这一点，因为它甚至没有在我的页面html中稍后找到我的get_sidebar.php函数。

您可以在此处在实际网站上查看此问题：https://www.uncvrd.co/recent

这是我的php：

function be_load_more_js() {

  if( ! is_singular( 'post' ) )
    return;
  $query = array( 
    'post__not_in' => array( get_queried_object_id() ), 
    'category_name' => ea_first_term( 'category', 'slug' ), 
    'posts_per_page' => 3 
  );
  $args = array(
    'url'   => admin_url( 'admin-ajax.php' ),
    'query' => $query,
  );
  wp_enqueue_script( 'be-load-more', get_stylesheet_directory_uri() . '/assets/js/load-more.js', array( 'jquery' ), '1.0', true );
  wp_localize_script( 'be-load-more', 'beloadmore', $args );

}
add_action( 'wp_enqueue_scripts', 'be_load_more_js' );
/**
 * AJAX Load More 
 *
 */
function be_ajax_load_more() {
    $args = isset( $_POST['query'] ) ? array_map( 'esc_attr', $_POST['query'] ) : array();
    $args['post_type'] = isset( $args['post_type'] ) ? esc_attr( $args['post_type'] ) : 'post';
    $args['paged'] = esc_attr( $_POST['page'] );
    $args['post_status'] = 'publish';
    ob_start();
    $loop = new WP_Query( $args );
    if( $loop->have_posts() ): while( $loop->have_posts() ): $loop->the_post();
        be_post_summary();
    endwhile; endif; wp_reset_postdata();
    $data = ob_get_clean();
    wp_send_json_success( $data );
    wp_die();
}
add_action( 'wp_ajax_be_ajax_load_more', 'be_ajax_load_more' );
add_action( 'wp_ajax_nopriv_be_ajax_load_more', 'be_ajax_load_more' );

最后是javascript：

jQuery(function($){

    $('.most-recent-feed').append( '<span class="load-more"></span>' );
    var button = $('.most-recent-feed .load-more');
    var page = 2;
    var loading = false;
    var scrollHandling = {
        allow: true,
        reallow: function() {
            scrollHandling.allow = true;
        },
        delay: 400 //(milliseconds) adjust to the highest acceptable value
    };

    $(window).scroll(function(){
        if( ! loading && scrollHandling.allow ) {
            scrollHandling.allow = false;
            setTimeout(scrollHandling.reallow, scrollHandling.delay);
            var offset = $(button).offset().top - $(window).scrollTop();
            if( 2000 > offset ) {
                loading = true;
                var data = {
                    action: 'be_ajax_load_more',
                    page: page,
                    query: beloadmore.query,
                };
                $.post(beloadmore.url, data, function(res) {
                    if( res.success) {
                        $('.most-recent-feed').append( res.data );
                        $('.most-recent-feed').append( button );
                        page = page + 1;
                        loading = false;
                    } else {
                        // console.log(res);
                    }
                }).fail(function(xhr, textStatus, e) {
                    // console.log(xhr.responseText);
                });

            }
        }
    });
});

我现在在网站上总共有9个帖子，仅供参考，你只需访问主页即可看到它们。

AJAX Infinite Scroll无法正常工作

0 个答案: