Người Viết : ViKiMi Editor

Hướng dẫn thực hiện Loadmore / Tải thêm danh sách bài Posts sử dụng jQuery Ajax + phương thức $.ajax() + JSON data
Việc thực hiện Load more / tải thêm nội dung danh sách bài Posts là vô cùng hiệu quả. Cho phép tạo ra một Website có thể hiển thị vô số bài Posts mà không hề ảnh hưởng tới tốc độ trang Web. Đồng thời, không hề phải tải lại toàn bộ trang Web, chính vì vậy mà người dùng có thể cảm thấy một Website thân thiện nhất có thể.
Trong phần này, Chúng ta đề cập tới tính năng Load more / tải thêm nội dung danh sách bài Posts với Funtion $.ajax()
Giống như phần trước đã sử dụng function $.post() để tạo tính năng Load more / Tải thêm nội dung danh sách bài Post, tại đây khi sử dụng Function $.ajax() sẽ có những bước thực hiện có tính chất tương đồng giống nhau.
Tuy nhiên, cũng sẽ có những bước thực hiện sẽ khác hoàn toàn khi xử lý với Function $.ajax() kết hợp với JSON.
Các bước thực hiện như sau :
Bước 1 : Thiết kế một trang hiển thị bài viết.
Bạn cần tạo một trang bài viết để hiển thị các bài viết lên trang này.
Thật đơn giản, bạn hãy create một Page có tên là “info”.
Sau đó, chúng ta sẽ viết Code cho Page này theo quy định page template do WordPress quy định. Trong Theme bạn đang kích hoạt, sẽ tạo một custom template có tên page-info.php.
Ở đây, chúng ta đặt tên cho custom temaplte file theo hệ thống phân cấp mẫu của WordPress page – {slug} .php, dựa vào slug của page được tạo ra để đặt tên cho custom template file.
Thiết kế đặt ra là Page Info sẽ hiển thị 10 bài viết đầu tiên. Sau đó khi người dùng thực hiện tải thêm thì sẽ tải thêm tiếp 10 bài viết tiếp theo. Các xử lý đều tuần tự như vậy. Do đó xử lý trong custom template file sẽ như dưới đây. Bạn chú ý đây là xử lý của một file trong WordPress theme và nó chưa có Ajax.
Page – info.php có mã code :
<div class="entry-content"> <?php $args = array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => '10', 'paged' => 1, ); $myposts = new WP_Query( $args ); ?> <?php if ( $myposts->have_posts() ) : ?> <div class="myposts"> <?php while ( $myposts->have_posts() ) : $myposts->the_post(); ?> <h2><?php the_title(); ?></h2> <?php the_excerpt(); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> </div> <div class="loadmore"> Load More... </div> <?php endif; ?> </div><!-- .entry-content -->
Bước 2 : Thực hiện đăng kí file jQuery chứa xử lý jQuery AJAX.
Chúng ta sẽ đăng kí tại file function.php của chủ đề / theme mà bạn đang kích hoạt. Việc này sẽ cho phép bạn tích hợp xử lý Ajax và WordPress.
function info_scripts() { // Register the script wp_register_script( 'info-script', get_stylesheet_directory_uri(). '/js/info.js', array('jquery'), false, true ); // Localize the script with new data $script_data_array = array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'security' => wp_create_nonce( 'load_more_posts' ), ); wp_localize_script( 'info-script', 'blog', $script_data_array ); // Enqueued script with localized data. wp_enqueue_script( 'info-script' ); } add_action( 'wp_enqueue_scripts', 'info_scripts' );
Công việc này có quan trọng hay không? Câu trả lời là rất quan trọng đối với bạn. Nó cho phép bạn đăng kí một file jQuery và yên tâm Website sẽ được bảo vệ tốt hơn. Và dựa vào đăng kí này chúng ta cũng có thể truyền những thông tin quan trọng cần thiết từ WordPress tới file jQuery.
Ở đây, chúng ta đã thực hiện truyền 2 biến chứa thông tin là :
Ajaxurl : Chúng ta sẽ thực hiện gọi đường dẫn url trong WordPress, cụ thể là gọi tới file admin – ajax .php, để thực hiện các yêu cầu xử lý
Security : Chúng ta sẽ truyền một biến None để tránh các cuộc tấn công
Bước 3 : Thực hiện xử lý jQuery AJAX tại file info.js
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore', function() {
$.ajax({
async: false,
type : "post",
dataType : "json",
url: blog.ajaxurl,
data : {
'action': 'info_by_ajax',
'page': page,
'security': blog.security
},
success: function(response){
if($.trim(response) != '') {
var json = $.parseJSON(response);
for (var i=0;i<json.length;++i){
$('.myposts').append('<div class ="name" >' + '<h2>' + json[i].title + '</h2>' + '<div class="post_excerpt">' + json[i].excerpt + '</div>' +'</div>');
}
page++;
} else {
$('.loadmore').hide();
}
page++;
},
error: function(xhr){
alert("An error occured: " + xhr.status + " " + xhr.statusText);
}
});
});
});
Mục đích xử lý trong jQuery Ajax là sẽ tải thêm những bài viết mới tiếp sau 10 bài viết ban đầu tại Page Info. Nên jQuery Ajax sẽ yêu cầu WordPress tải thêm khi Loadmore được Click.
Nếu yêu cầu thực hiện thanh công thì sẽ hiển thị 10 bài viết tiếp theo nối vào nội dung của phần tử có Class ‘.myposts’
Nếu không tải thêm được nữa thì sẽ ẩn phần tử Loadmore
Bạn thấy rõ rằng :
+ Action : info_by_ajax
+ Page : Số Page được thực hiện phân trang, số Page này sẽ làm việc tại code trong phần Action của sẽ làm phần sau. Và Click vào Loadmore + mỗi lần tải thành công thì sẽ tăng biến đếm phân trang này lên.
+ blog.ajaxurl & blog.security là tham số được truyền tại bước 2
Bước 4 : Tạo map action tới WordPress Actions. Điều này cho phép chúng ta code phần Action tuỳ chỉnh.
add_action(‘wp_ajax_info_by_ajax’, ‘info_by_ajax_callback’);
add_action(‘wp_ajax_nopriv_info_by_ajax’, ‘info_by_ajax_callback’);
Bước 5 : Tạo xử lý cho Action tại file function.php
Nội dung của xử lý như sau :
function info_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '10',
'paged' => $_POST['page'],
);
$myposts = get_posts( $args );
$output = array();
?>
<?php if ( $myposts ) : ?>
<?php foreach( $myposts as $post ):
setup_postdata( $post );
$output[] = array( 'excerpt' => get_the_excerpt(), 'title' => get_the_title() );
?>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
echo json_encode( $output );
<?php
wp_die();
}
Khi Loadmore được click tại giao diện Page Info. Thì Action này sẽ được xử lý, mỗi lần Loadmore được click và trả về dữ liệu thành công thì sẽ tăng số trang của phân trang lên để thực hiện tải dữ liệu thành công và chính xác.
(Bạn có thểm xem lại tại bước 3 nếu cần thiết)
Như vậy, chúng ta đã tạo một giao diện cho phép Load more thêm nhiều Bài Đăng và có thể kết hợp cả jQuery Ajax. Điều này cho phép tạo một Website có thể tải nhiều thông tin mà tốc độ không hề bị ảnh hưởng. Có thể xử lý tương tự cho nhiều giao diện hiển thị khác nhau khi cần thiết.