Cách tải bài viết theo yêu cầu bằng AJAX trong Genesis

Bài viết này dựa trên hướng dẫn tuyệt vời của Bill Erickson có tiêu đề Infinite Scroll trong WordPress.

Chúng tôi sẽ thêm nút Tải thêm bên dưới các bài đăng trên trang Bài đăng và Lưu trữ trong Genesis. Khi nhấp vào, chúng tôi sẽ tải tập hợp Bài đăng tiếp theo bên dưới các bài hiện tại trên trang mà không cần sử dụng plugin như mô-đun cuộn vô hạn của Jetpack.

Báo giá Bill,

Vấn đề với cuộn vô hạn Jetpack (và các plugin khác giống như nó) là chúng phải làm việc với mọi chủ đề, vì vậy hãy sử dụng một cách tiếp cận khá khó hiểu. Họ thực sự tải trang tiếp theo (như nhấp vào liên kết “Tiếp theo” trong phân trang của bạn), sau đó chỉ chọn các bài đăng trong khu vực nội dung và chèn vào đó. Bạn đang tải toàn bộ trang khi chỉ tải các bài đăng cần thiết sẽ hiệu quả hơn.

Nó cũng có thể gây ra sự cố với mạng quảng cáo vì bạn đang tăng số lần xem trang của mình. Cuộn vô hạn là “lần xem trang” khi Jetpack tải trang để lấy các bài đăng, nhưng quảng cáo hiển thị trên trang đó không được một người thực sự nhìn thấy.

Cuối cùng, với công cụ đó, bạn chỉ có thể lưu trữ các trang vì chúng có nút “Tiếp theo” mà Jetpack có thể nhấn. Cách tiếp cận được mô tả ở trên có thể được sử dụng trong bất kỳ trường hợp nào. Khi bạn đang ở trên một bài đăng, bạn có thể tải đoạn trích của các bài đăng khác, giống như tôi đã làm trên Pinch of Yum.

Để hiểu cách giải pháp hoạt động, hãy xem bài viết của Bill.

Tôi đã thêm vào một dòng logic để đảm bảo rằng nút Tải thêm không xuất hiện khi bộ kết quả cuối cùng được hiển thị.

Bước 1

Tạo một tệp có tên load-more.js trong js thư mục của chủ đề con có như sau:

jQuery(function($){

	// $('.post-listing').append( '<button class="load-more">Load More</button>' );
	// var button = $('.post-listing .load-more');
	var page = 2;
	var loading = false;

	$('body').on('click', '.load-more', function(){
		if( ! loading ) {
			loading = true;
			$(this).remove();
			var data = {
				action: 'be_ajax_load_more',
				page: page,
				query: beloadmore.query,
			};
			$.post(beloadmore.url, data, function(res) {
				if( res.success) {
					$('.post-listing').append( res.data );
					// $('.post-listing').hide().append( res.data ).fadeIn(500); // to have fadeIn effect
					// $('.post-listing').append( button );
					page = page + 1;
					loading = false;
				} else {
					// console.log(res);
				}
			}).fail(function(xhr, textStatus, e) {
				// console.log(xhr.responseText);
			});
		}
	});

});

Bước 2

Tạo một tệp có tên say, template_load-more.php trong chủ đề con có như sau:

/**
* Javascript for Load More
*
*/
function be_load_more_js() {

global $wp_query;
$args = array(
'url' => admin_url( 'admin-ajax.php' ),
'query' => $wp_query->query
);

wp_enqueue_script( 'be-load-more', get_stylesheet_directory_uri() . '/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' );

add_action( 'genesis_before_loop', 'sk_opening', 20 ); // a high priority of 20 to make this appear below .archive-description
function sk_opening() {
echo '<div class="post-listing">';
}

add_action( 'genesis_after_loop', 'sk_closing' );
function sk_closing() {
// echo '</div>';
echo '<button class="load-more">Load More</button></div>';
}

// Remove Archive Pagination
remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );

genesis();

Bước 3

Thêm phần sau vào functions.php của chủ đề con :

/**
* AJAX Load More
* @link http://www.billerickson.net/infinite-scroll-in-wordpress
*/
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();
printf( '<article %s>', genesis_attr( 'entry' ) );

do_action( 'genesis_entry_header' );

do_action( 'genesis_before_entry_content' );

printf( '<div %s>', genesis_attr( 'entry-content' ) );
do_action( 'genesis_entry_content' );
echo '</div>';

do_action( 'genesis_after_entry_content' );

do_action( 'genesis_entry_footer' );

echo '</article>';
// endwhile; endif; wp_reset_postdata();
endwhile; if ( $_POST['page'] < $loop->max_num_pages ) { echo '<button class="load-more">Load More</button>'; } 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' );

/**
* Template Redirect
* Use template_load-more.php for Posts page and all archives.
*/
add_filter( 'template_include', 'custom_blog_archives_template', 99 );
function custom_blog_archives_template( $template ) {

if ( is_home() || is_archive() ) {
$new_template = locate_template( array( 'template_load-more.php' ) );
if ( '' != $new_template ) {
return $new_template ;
}
}

return $template;
}

Cảnh báo: Việc sử dụng Chuyển hướng mẫu theo khối mã trên sẽ làm cho home.php, archive.php, category.php và bất kỳ tệp nào khác tôn trọng hệ thống phân cấp mẫu WordPress (nếu có) không hiệu quả. Nếu việc sử dụng các mẫu như vậy là cần thiết, hãy xem xét sử dụng get_template_part () để bao gồm mã của template_load-more.php trong các tệp riêng lẻ đó.

Bước 4

Thêm phần sau vào style.css của chủ đề con :

.post-listing {
	margin-bottom: 40px;
}

.load-more {
	display: table;
	margin: 0 auto;
}

Người giới thiệu:

genesis / lib / structure / loops.php