Giới thiệu

Chức năng load thêm bài viết là chức năng cực kỳ phổ biến và cần thiết cho một website. Giả như bạn đang muốn hiển thị danh sách các dự án của mình nhưng dự án của bạn có đến hàng trăm thì việc hiển thị hết các dự án đó trên cùng 1 page sẽ làm cho page của bạn load chậm và nhàm chán,…

Để khắc phục vấn đề đó chúng ta sẽ sử dụng chức năng load thêm bài viết, chỉ khi cần thiết chúng ta mới load ra thêm bài viết hoặc dự án tiếp theo của mình trên page.

Hướng dẫn

Xử lý phần code

Hiển thị danh sách bài viết theo Post Type

Hiển thị bài viết đơn giản, nếu bạn chưa biết cách xử lý thì hãy xem lại bài viết này của mình.

Code mẫu:

<div id="post">
            <?php 
            $args = array(
                'post_per_pages' => 1

            );
            $the_query = new WP_Query($args);
        
            if($the_query->have_posts()): while($the_query->have_posts()): $the_query->the_post();
        ?>
        
            <div class="post-item">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </div>
    
        <?php 
            endwhile; //Kết thúc vòng lặp
            else: //Xử lý khi không có bài viết
        ?>	
            {CODE_XU_LY_KHI_KHONG_CO_BAI_VIET}
        <?php	
            endif; 
            wp_reset_query();
        ?>	
        </div>
    <a class="btn btn-primary load-more">Xem thêm</a>
</div>

post_per_pages mình sẽ chỉ để là 1 (Vì lười tạo nhiều bài viết :))))

Xử lý phần nút Xem thêm

Chúng ta sẽ xử dụng ajax để xử lý phần khi click vào xem thêm sẽ gọi đến server và load dữ liệu bài viết tiếp theo ra.

Nhớ kiểm tra đã add thư viện jquery vào code chưa nhé. Nếu không sẽ trở thành vô dụng nếu chỉ có code xử lý nút không thôi.


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
        var offset = 1; // khái báo số lượng bài viết đã hiển thị
	    $('.load-more').click(function(event) {
           event.preventDefault();
	    	$.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) {
	                $('#post').append(response);
                    offset = offset + 1; // tăng bài viết đã hiển thị
                    
                    if(response.length == 0) {
                        alert('Hết dữ liệu')
                    }
	            },
	            error: function( jqXHR, textStatus, errorThrown ){
	                //Làm gì đó khi có lỗi xảy ra
	                console.log( 'The following error occured: ' + textStatus, errorThrown );
	            }
	       });
	    });
	});
</script>

Bạn nào chưa biết về ajax thì có thể tìm trên google về ajax để biết thêm nhé.

Xử lý phần code trong function.php

Trong file function.php các bạn thêm đoạn này vào cuối file. Đoạn code này dùng để xử lý khi các bạn nhấn nút Xem thêm, sau đó dữ liệu được đưa vào hàm get_post_loadmore và hàm này lọc ra những bài viết đã hiển thị rồi và load ra những bài viết tiếp theo sau đó.


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=1&offset='.$offset);
    global $wp_query; $wp_query->in_the_loop = true; 
    while ($getposts->have_posts()) : $getposts->the_post(); ?>
    	<div class="post-item"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
    <?php endwhile; wp_reset_postdata();
	die(); 
}
add_action('wp_ajax_loadmore', 'get_post_loadmore');
add_action('wp_ajax_nopriv_loadmore', 'get_post_loadmore');

Xử lý load thêm đối với bài viết theo Post Type

Phía trên là hướng dẫn xử lý post thông thường, cũng giống với xử lý trên chúng ta chỉ thêm bớt một chút là ra ngay code xử lý cho bài viết được lấy theo Post Type bằng plugin CPT UI. Bạn nào chưa biết thì xem tại đây

Code ở file hiển thị

Tức là code ở index.php (code bao gồm xử lý PHP + AJAX)

<div id="post">
            <?php 
            $args = array(
                'post_type' => 'test_post'
                'posts_per_page' => 1,
            );
            $the_query = new WP_Query($args);
        
            if($the_query->have_posts()): while($the_query->have_posts()): $the_query->the_post();
        ?>
        
            <div class="post-item">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </div>
    
        <?php 
            endwhile; //Kết thúc vòng lặp
            else: //Xử lý khi không có bài viết
        ?>	
            {CODE_XU_LY_KHI_KHONG_CO_BAI_VIET}
        <?php	
            endif; 
            wp_reset_query();
        ?>	
        </div>
    <a class="btn btn-primary load-more">Xem thêm</a>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
	$(document).ready(function(){
        var offset = 1; // khái báo số lượng bài viết đã hiển thị
        var posttype = 'projects';
	    $('.load-more').click(function(event) {
           event.preventDefault();
	    	$.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 : {
                    posttype: posttype,
	                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) {
	                $('#post').append(response);
                    offset = offset + 1; // tăng bài viết đã hiển thị
                    
                    if(response.length == 0) {
                        alert('Hết dữ liệu')
                    }
	            },
	            error: function( jqXHR, textStatus, errorThrown ){
	                //Làm gì đó khi có lỗi xảy ra
	                console.log( 'The following error occured: ' + textStatus, errorThrown );
	            }
	       });
	    });
	});
</script>

Về CSS thì các bạn tự code nhé phần này khá dễ dàng nên mình sẽ không hướng dẫn chi tiết.

Code xử lý ở file function.php

Ở code dưới mình sẽ thêm một đoạn: $posttype = isset($_POST['posttype']) ? (string)$_POST['posttype'] : ""; để lấy dữ liệu của post_type được gửi từ client.

và ở $getposts->query('post_status=publish&showposts=1&offset='.$offset); mình sẽ sửa thành $getposts = new WP_query(); $getposts->query('post_type='. $posttype .'&post_status=publish&showposts=1&offset='.$offset);

Còn lại chúng ta vẫn giữ nguyên, ta sẽ được đoạn code như sau:


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

Kết luận

Sau khi hoàn tất các bạn sẽ được một chức năng tuyệt vời để áp dụng vào các theme khác nhau. Đa số các theme bây giờ đều cần đến chức năng này, cho nên nếu các bạn thấy hay thì hay share bài viết đến nhiều người hơn nhé.

Sẽ có nhiều chia sẽ hơn nữa về wordpress các bạn nhớ theo dõi tại Xin Chào, Coder nha.

code tại: huykira.net