Hướng dẫn load bài viết sử dụng AJAX genesis framework

Bài viết này mình hướng dẫn các bạn cách load  bài viết sử dụng AJAX mà không phải load lại trang, rất tiện dụng cho những bạn dùng mạng yếu, không mất nhiều thời gian để tải trang khác…

Chú ý: Load more này hoạt động trên tất cả các trang, ngoài home, trang chuyên mục, lưu trữ bài viết…

Xem thêm

>> Hướng dẫn thêm chữ NEW vào bài viết mới genesis

>> Làm thế nào để thanh nav nổi trên màn hình genesis theme

>> Tổng hợp code tùy biến nút Next Page và Previous Page trong Genesis Framework

Hướng dẫn load bài viết sử dụng AJAX trong Genesis.

Bước 1: Tạo một tệp có tên load-more.js trong thư mục js của child theme và dán mã 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 template_load-more.php trong trong child theme.

Dán toàn bộ code này.

<?php

/**
 * 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: Dán mã bên dưới vào cuối file functions.php.

/**
 * 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;
}

Bước 4: Thêm mã sau đây trong style.css.

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

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

Lưu lại.