Question

当用户向下滚动时，我试图在我的WordPress网站上使用AJAX加载更多帖子。我进行了研究，并找到了我尝试实施的教程。我可以调用我的帖子，但是它们似乎没有滚动显示，所有帖子都显示在页面加载中。

任何帮助将不胜感激。

functions.php

function misha_my_load_more_scripts() {

    global $wp_query; 

    wp_enqueue_script('jquery');

    wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/js/myloadmore.js', array('jquery') );

    wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
        'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php',
        'posts' => json_encode( $wp_query->query_vars ), 
        '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(){

      $args = array(
      'cat' => -21,
      'post_type' => 'post',
      'posts_per_page' => 5,
      'paged' => 1,
      'tax_query'      => array(
        array(
            'taxonomy' => 'series',
            'operator' => 'NOT EXISTS'
        )
    )

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

    $the_query = new WP_Query ( $args ); 

    if($the_query->have_posts()) : 
      while($the_query->have_posts()) : 
         $the_query->the_post();

    get_template_part( 'template-parts/post/content', get_post_format() );

        endwhile;

    endif;
    die; 
}

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}

myloadmore.js

jQuery(function($){
    var canBeLoaded = true, 
        bottomOffset = 2000; 

    $(window).scroll(function(){
        var data = {
            'action': 'loadmore',
            'query': misha_loadmore_params.posts,
            'page' : misha_loadmore_params.current_page
        };
        if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) && canBeLoaded == true ){
            $.ajax({
                url : misha_loadmore_params.ajaxurl,
                data:data,
                type:'POST',
                beforeSend: function( xhr ){
                    canBeLoaded = false; 
                },
                success:function(data){
                    if( data ) {
                        $('#main').find('div:last-of-type').after( data ); 
                        canBeLoaded = true; 
                        misha_loadmore_params.current_page++;
                    }
                }
            });
        }
    });
});

content.php

<div class="feed-container row">
 <div class="col-sm-6">
    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
    <a href="<?php the_permalink(); ?>"><img src="<?php echo $image[0]; ?>" class="img-fluid"></a>
  </div>

  <div class="col-sm-6">

    <?php
      $categories = get_the_category();
        if ( $categories ) :
            $deepChild = get_deep_child_category( $categories );
    ?>
    <p class="category"><?php echo $deepChild->name; ?></p>

      <?php endif; ?>

      <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

  </div>
</div><!-- END ROW-->

front-page.php

<div id="main" class="container-fluid">
  <?php misha_loadmore_ajax_handler(); ?>
</div><!-- END CONTAINER -->

WordPress上的AJAX滚动加载不起作用

0 个答案: