无限加载代码模块(按钮触发)

wptutor 无限加载代码模块(按钮触发)已关闭评论 48 浏览量

HTML

<div id="main-content primary" class="site-main">
    <div id="posts-container">
        <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $posts_per_page = 6; // Number of posts to load each time
        
        $args = array(
            'post_type' => 'post',
            'posts_per_page' => $posts_per_page,
            'paged' => $paged,
            'post_status' => 'publish'
        );
        
        $query = new WP_Query($args);
        
        if ($query->have_posts()) :
            while ($query->have_posts()) : $query->the_post();
                ?>
                <article class="post-item" id="post-<?php the_ID(); ?>">
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="post-meta">
                        <span>By <?php the_author(); ?></span>
                        <span>on <?php the_date(); ?></span>
                    </div>
                    <div class="post-excerpt">
                        <?php the_excerpt(); ?>
                    </div>
                    <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                </article>
                <?php
            endwhile;
        endif;
        wp_reset_postdata();
        ?>
    </div>
    
    <?php if ($query->max_num_pages > 1) : ?>
        <div id="load-more-container">
            <button id="load-more-btn" data-page="1" data-max-pages="<?php echo $query->max_num_pages; ?>">
                <span class="btn-text">Load More Posts</span>
                <span class="loading-text" style="display: none;">Loading...</span>
            </button>
        </div>
    <?php endif; ?>
</div>

JAVASCRIPT

jQuery(document).ready(($) => {

	let btn = $('#load-more-btn');
	var page = 2;
	var loading = false;
	var maxPages = parseInt(btn.data('max-pages'));


	btn.on('click',function(e){
		e.preventDefault();

		//阻止重复提交 
		if (loading) return;


		loading = true;


		//show loading status 
		$(this).addClass('loading');

		$('.btn-text').hide();


		$('loading-text').show();

		//ajax request 
		
		$.ajax({

			url:ajax_params.ajax_url,
			type:'POST',
			data:{
				action:'load_more_posts',
				page:page,
				nonce:ajax_params.nonce,

			},

			success:(res) => {

				if (res) {
					//add new posts to container with fade in effect
					var newPosts = $(res).hide().fadeIn(600);

					$('#posts-container').append(newPosts);

					page++; //increase page for next load;

					//hide btn if we reach the last page;
					if (page > maxPages) {

						$('#load-more-container').fadeOut();
					} else {}

				} else {

					//no more posts 
					$('#load-more-container').html('<p>No more posts to load</p>');
				}

			},

			error: function() {
				alert('Error loading posts.Please try again later');
			},

			complete:function() {
				//'reset loading state'
				loading = false;
				$('#load-more-btn').removeClass('loading');
				$('.btn-text').show();
				$('.loading-text').hide();

			}


		})

	})

})

PHP

<?php add_action( 'wp_enqueue_scripts','enqueue_infinite_load_js' );


function enqueue_infinite_load_js() {

	wp_enqueue_script('infinite-load-js', get_template_directory_uri() . '/js/infinite-load.js',array('jquery'),'1.0.1',true);

	wp_localize_script( 'infinite-load-js', 'ajax_params', array(
		'ajax_url'  => admin_url('admin-ajax.php'),
		'nonce'  => wp_create_nonce( 'load_more_nonce' )


	) );

}


add_action( 'wp_ajax_load_more_posts', 'load_more_posts_callback' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts_callback' );

function load_more_posts_callback() {
	if (!isset($_POST['nonce']) && !wp_verify_nonce( $_POST['nonce'], 'load_more_nonce' )) {
		wp_die('secutiry check failed');
	}

	$page = $_POST['page'];

	$posts_per_page = 6;

	$args = array(
		'post_type'  => 'post',
		'posts_per_page'  => 6,
		'paged'  => $page,
	);

	$query = new WP_Query($args);

	if ($query->have_posts()) {

		while ($query->have_posts()) {
			$query->the_post(); ?>

			<article class='post-item' id='post-<?php the_ID(); ?>'>
				<h2><a href="<?php the_permalink(  ); ?>"><?php the_title(); ?></a></h2>
				<div class="post-meta">
					<span>BY <?php the_author(); ?></span>
					<span>on <?php the_date(); ?></span>
				</div>

				<div class="post-excerpt">
					<?php the_excerpt(); ?>
				</div>

				<a href="<?php the_permalink(  ); ?>" class="read-more">Read More</a>


				
			</article>

		    
	<?php	}
		
	}


	wp_reset_postdata();
	wp_die();



}