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>

<?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(); ?>

<?php endwhile; wp_reset_postdata(); ?>

</ul>

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>

$(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(); 
}

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(); ?>

<?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:

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

Phước ĐtMình chưa hiểu đoạn này "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!"

Thích Trả lời 5 năm trước
- Huy KiraÀ như vậy chắc là bạn chưa hiểu về ajax rồi! Bạn nên xem trước bài viết này để hiểu ajax trong wordpress là gì. Bài này mình có video hướng dẫn chắc bạn sẽ dễ hiểu hơn ! Ajax trong wordpress
  
  Thích Trả lời 5 năm trước
loanvới sản phẩm thì thế nào a

Thích Trả lời 5 năm trước
- Huy KiraVới sản phẩm dùng woo, thì chổ vòng lặp get post phải thêm thuộc tìn post_type = product
  
  Thích Trả lời 5 năm trước
  - nhutcho mình xin đoạn để chèn vào được không ?. trong woo
    
    Thích Trả lời 4 năm trước
Thái Nguyên WebChức năng khá hay với những nội dung dài thì thật sự hữu ích.

Thích Trả lời 5 năm trước
- Huy KiraCảm ơn bạn nhé :)
  
  Thích Trả lời 5 năm trước
Trong Nhancho mình hỏi làm sao ẩn nút load more khi không còn dữ liệu để load, mình đang áp dụng cho custom post type thì làm như thế nào? cảm ơn bạn!

Thích Trả lời 4 năm trước
Tung??? Bài viết hay quá ạ cảm ơn anh

Thích Trả lời 4 năm trước
ChivaSNhưng có vẻ nó không hoạt động đối vs quểy có orderby comment_count, date,name, ... admin nhỉ

Thích Trả lời 4 năm trước
- Huy KiraÀ cái đó phụ thuộc cậu lệ query thôi bạn!
  
  Thích Trả lời 4 năm trước
  - ChivaSCũng cách trên mà admin, chỉ thay query theo mới nhất thì thay bằng số lượng comment nhiều nhất, hoặc theo ngày, hoặc theo name mà admin, e nghĩ nó cũng query đúng chứ nhỉ
    
    Thích Trả lời 4 năm trước
Tuấn Phúc Nguyễnchả hiểu gì :( ai giải thích với

Thích Trả lời 4 năm trước
BảoNếu chèn loadmore kiểu này thì các phần hiển thị ở footer coi như bỏ phải không nhỉ...vì đâu có thấy đâu :(

Thích Trả lời 4 năm trước
- Huy KiraỦa vì sao vậy bạn :D
  
  Thích Trả lời 4 năm trước
  - BảoÀ mình nhầm, tưởng tạo loadmore tự động không cần bấm vào button :D
    
    Thích Trả lời 4 năm trước
BoyongMình muốn hiển thị một đoạn htlm khi nhấn tabs thì làm action gì bạn?

Thích Trả lời 4 năm trước
Bình Phươnglàm cách nào để kiểm tra xem đã là cuối danh sách chưa để ẩn nút load more đi vậy anh

Thích Trả lời 4 năm trước
Phan TuấnMình muốn gắn vào nhìu custom post type thì ntn Huy, hiện tại thì nó mặc định là post. Nếu mình thêm post_type='anything' thì lại mất cái load type post.

Thích Trả lời 3 năm trước
Nguyễn Quang Cườngkhá hay nhưng nếu gửi dữ liệu cho phía server thì liệu có bị full server ko nhỉ?

Thích Trả lời 3 năm trước
Tài Đoàncho em hỏi làm load more cho custom type như kiểu product thì sửa sao anh nhỉ?

Thích Trả lời 3 năm trước
TuanStoreBạn có code nút xem thêm ở danh mục sản phẩm không. Tức là mình viết mô tả seo trong phần danh mục nhưng nó lại dài quá làm ảnh hưởng tới trải nghiệm người dùng. Mình cần thu gọn nó lại để khi người dùng muốn đọc thì ấn vào xem thêm, còn không thì nó ở trạng thái thu gọn để không ảnh hưởng tới việc xem sản phẩm. Thank you!

Thích Trả lời 3 năm trước
Ho Ngoc TuChào anh ạ. E đang gặp vướng mắc, nhờ anh giúp đỡ ạ. E có một Loop (em gắn 1 nút like và nút like này chạy bằng jquery), 10 bài viết đầu được load ra thì e vẫn dùng nút like này bình thường. Nhưng các bài tiếp theo khi e dùng Jquery loadmore thì nút like này lại k dùng được nữa. Mong nhận được giúp đỡ từ anh ạ. Cảm ơn anh.

Thích Trả lời 3 năm trước