[Thủ Thuật WP] Thêm tính năng Infinite Scroll trong WordPress

Bài viết hướng dẫn thêm button "Load More" trong WordPress và tự động tải bài viết khi scroll xuống - Cuộn vô hạn (Infinite Scroll) bằng những đoạn code nhỏ. 

Thêm bottom "Load More" - "Xem Thêm"

Bỏ qua bước này nếu bạn muốn tự động trai bài viết khi scroll (cuộn trang)

Chèn đoạn code hiển thị button ngay dưới phân trang của theme TwentySeventeen - index.php (dòng 55), có thể xóa nếu bạn ko cần.

Dùng  $wp_query->max_num_pages  để kiểm tra đủ bài đăng để hiển thị button hay không.

Note: bài viết sử dụng theme TwentySeventeen.

<?php
global $wp_query; // xóa nếu nó hoạt động với bạn
 
// Không hiển thị button khi bài viết không đủ
if (  $wp_query->max_num_pages > 1 )
	echo '<div class="misha_loadmore">More posts</div>'; // có thể thay thế nó bằng thẻ <a>
?>

Thêm style cho button để trông đẹp hơn

.misha_loadmore{
	background-color: #ddd;
	border-radius: 2px;
	display: block;
	text-align: center;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing:1px;
	cursor:pointer;
	text-transform: uppercase;
	padding: 10px 0;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;  
}
.misha_loadmore:hover{
	background-color: #767676;
	color: #fff;
}

Khai báo file Javascript và tham số AJAX

Thêm đoạn code dưới vào file functions.php trong theme

function misha_my_load_more_scripts() {

	global $wp_query;  //Trong hầu hết các trường hợp, nó đã được đưa vào trang và dòng này có thể bị xóa

	wp_enqueue_script('jquery');
	// đăng ký file javascript
	wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );
 
      // chúng ta sẽ khai báo AJAX từ file Javascript đến PHP
	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 ),
		'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' );

Có thể thay thế ajaxurl trên bằng admin_url('admin-ajax.php'), Chú ý nếu không có tham số này bạn sẽ gặp ngay lỗi "ajaxurl is not defined".

Code Javascript để thực hiện AJAX

Có 2 cách làm ở đây: 

1. Tạo Button và click thì mới load ra

2. Là tự động load khi scroll 

Tạo file myloadmore.js trong thư mục theme và thêm đoạn script bên dưới

Cách 1: Dùng Button 

jQuery(function($){ // sử dụng jQuyery để tránh lỗi  "$ is not defined" 
	$('.misha_loadmore').click(function(){
 
		var button = $(this),
		    data = {
			'action': 'loadmore',
			'query': misha_loadmore_params.posts,
			'page' : misha_loadmore_params.current_page
		};
 
		$.ajax({ 
			url : misha_loadmore_params.ajaxurl, // AJAX handler
			data : data,
			type : 'POST',
			beforeSend : function ( xhr ) {
				button.text('Loading...'); 
			},
			success : function( data ){
				if( data ) { 
					button.text( 'More posts' ).prev().before(data); // xuát hiện post mới 
					misha_loadmore_params.current_page++;
 
					if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page ) 
						button.remove(); // Nếu ko là trang cuối thì ẩn nó đi
 
				} else {
					button.remove(); // nếu ko có data trả về thì cũng xóa nút
				}
			}
		});
	});
});

Cách 2: Tự động load khi scroll

jQuery(function($){
	var canBeLoaded = true, // tham số này chỉ cho phép gọi thi thỏa điều kiện
	    bottomOffset = 2000; //khoảng cách bottom khi bạn muốn thực hiện load post
 
	$(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 ){
					// gắn giá trị false cho đến khi load post thành công
					canBeLoaded = false; 
				},
				success:function(data){
					if( data ) {
						$('#main').find('article:last-of-type').after( data );// nơi chén data trả về
						canBeLoaded = true; 
						misha_loadmore_params.current_page++;
					}
				}
			});
		}
	});
});

 Thêm đoạn script vào PHP để lấy dữ liệu trả về 

Thêm đoạn code dưới vào file functions.php

        function misha_loadmore_ajax_handler(){
 
            // lấy tham số truyền đến
            $args = json_decode( stripslashes( $_POST['query'] ), true );
            $args['paged'] = $_POST['page'] + 1; // trang tiếp theo sẽ lấy
            $args['post_status'] = 'publish';
           
            // thực hiện câu query
            query_posts( $args );
           
            if( have_posts() ) :
           
                // chạy vòng lặp lấy content
                while( have_posts() ): 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}