Xây dựng chức năng load more content trong wordpress sử dụng ajax

Chào các bạn! Trở lại với chủ đề ajax trong wordpress. Hôm này mình sẽ hướng dẫn cho các bạn làm một chức năng khá hay đó là: Load more content trong wordpress. Nghe tên load more content chắc chắn bạn cũng đoán được chức năng của nó rồi phải không? Chức năng này giúp bạn tải thêm dữ liệu mà ko cần cần phải load lại trang.

Bài toàn ví dụ:

Ở trang chủ chúng ta hiển thị 10 bài viết mới nhất và hiện 1 nút button xem thêm. Mỗi khi click vào nút button đó thì no sẽ tải thêm 5 bài viết, cho đến khi hết bài viết thì button xem thêm không hiển thị nữa!

Phân tích bài toán:

Bước 1: Để get 10 bài viết ra trang chủ chúng ta dùng New wp_query để get viết vào file index.php của theme.

Bước 2: Mỗi khi click vào button xem thêm chúng ta dùng ajax gởi cho phía server số lượng bài viết đã hiển thị

Bước 3: Phía server xử lý dữ liệu, thực hiện get 5 bài viết và bỏ qua những bài viết đã hiển thị. Chúng ta dùng new wp_query kết hợp với tham số offset để loại bỏ những bài viết đã thị và trả dữ liệu về cho client.

Bước 4: Phía client nhận dữ liệu trả về và hiển thị.

Code chức năng load more content trong wordpress:

Code hiển thị 10 bài viết mới ra ngoài trang chủ. Các bạn chèn đoạn code sau vào file index.php của thêm đang dùng nhé!

<ul class="list-new">
	<?php $getposts = new WP_query(); $getposts->query('post_status=publish&showposts=10'); ?>
	<?php global $wp_query; $wp_query->in_the_loop = true; ?>
	<?php while ($getposts->have_posts()) : $getposts->the_post(); ?>
		<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
	<?php endwhile; wp_reset_postdata(); ?>
</ul>
<button class="load-more">Xem thêm</button>

Code jquery gọi ajax và gởi dữ liệu cho phía server. Các bạn có thể chèn đoạn code này trong cặp thẻ script và đặt nó ở file footer.php.

Chú ý vì đoạn code là là jquery nên các bạn phải nhúng jquery trước đoạn code này nha!

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
	$(document).ready(function(){
		var offset = 10; // khái báo số lượng bài viết đã hiển thị
	    $('.load-more').click(function(event) {
	    	$.ajax({ // Hàm ajax
	            type : "post", //Phương thức truyền post hoặc get
	            dataType : "html", //Dạng dữ liệu trả về xml, json, script, or html
	            async: false,
	            url : '<?php echo admin_url('admin-ajax.php');?>', // Nơi xử lý dữ liệu
	            data : {
	                action: "loadmore", //Tên action, dữ liệu gởi lên cho server
	                offset: offset, // gởi số lượng bài viết đã hiển thị cho server
	            },
	            beforeSend: function(){
	                // Có thể thực hiện công việc load hình ảnh quay quay trước khi đổ dữ liệu ra
	            },
	            success: function(response) {
	                $('.list-new').append(response);
	                offset = offset + 5; // tăng bài viết đã hiển thị
	            },
	            error: function( jqXHR, textStatus, errorThrown ){
	                //Làm gì đó khi có lỗi xảy ra
	                console.log( 'The following error occured: ' + textStatus, errorThrown );
	            }
	       });
	    });
	});
</script>

Đoạn code xử lý dữ liệu phía server. Các bạn chèn đoạn code sau vào file functions.php của theme đang dùng nhé!

add_action('wp_ajax_loadmore', 'get_post_loadmore');
add_action('wp_ajax_nopriv_loadmore', 'get_post_loadmore');
function get_post_loadmore() {
    $offset = isset($_POST['offset']) ? (int)$_POST['offset'] : 0; // lấy dữ liệu phái client gởi
    $getposts = new WP_query(); $getposts->query('post_status=publish&showposts=5&offset='.$offset);
    global $wp_query; $wp_query->in_the_loop = true; 
    while ($getposts->have_posts()) : $getposts->the_post(); ?>
    	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endwhile; wp_reset_postdata();
	die(); 
}

Giải thích:

• $offset = isset($_POST['offset']) ? (int)$_POST['offset'] : 0; -> lấy số bài viết đã hiển thị từ phía client gởi lên, phía client gởi theo phương thức là post vì vậy chúng ta dùng $_POST để nhận dữ liệu
• 'post_status=publish&showposts=5&offset='.$offset -> Phần này chúng ta lấy 5 bài viết và dùng tham số offset để loại bỏ số bài viết đã được hiển thị.

Video HD code chức năng load more content trong wordpress:

Đang cập nhật...

Tóm lại:

Bài viết hôm nay mình đã hướng dẫn cho các bạn cách cơ bản để thực hiện được chức năng load more trong wordpress. Đây là cách basic nhất, các bạn có thể nghiên cứu thêm để làm cho nó sống động hơn ví dụ như.  Tạo hiện ứng load khi click vào button xêm thêm, hoặc show dữ liệu chức hình ảnh thumbnail... Nếu các bạn chưa có kiến thức về lập trình wordpress và ajax trong wordpress thì có thể xem một số bài mình đã viết về nó dưới đây:

• Chuyển html sang wordpress từ a dến z
• Tìm hiểu về ajax trong wordpress
• Thực hành ajax trong wordpress

Chào thân ái và quyết thắng!