Bài viết hướng dẫn thêm button "Load More" trong WordPress và tự động tải bài viết khi scroll xuống - Cuộn vô hạn (Infinite Scroll) bằng những đoạn code nhỏ.

Thêm bottom "Load More" - "Xem Thêm"

Bỏ qua bước này nếu bạn muốn tự động trai bài viết khi scroll (cuộn trang)

Chèn đoạn code hiển thị button ngay dưới phân trang của theme TwentySeventeen - index.php (dòng 55), có thể xóa nếu bạn ko cần.

Dùng $wp_query->max_num_pages để kiểm tra đủ bài đăng để hiển thị button hay không.

Note: bài viết sử dụng theme TwentySeventeen.

max_num_pages > 1 ) echo '

Thêm style cho button để trông đẹp hơn

`.misha_loadmore{ background-color:

ddd;

border-radius: 2px; display: block; text-align: center; font-size: 14px; font-size: 0.875rem; font-weight: 800; letter-spacing:1px; cursor:pointer; text-transform: uppercase; padding: 10px 0; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; } .misha_loadmore:hover{ background-color:

767676;

color:

fff;

} `

Khai báo file Javascript và tham số AJAX

Thêm đoạn code dưới vào file functions.php trong theme

function misha_my_load_more_scripts() { global $wp_query; //Trong hầu hết các trường hợp, nó đã được đưa vào trang và dòng này có thể bị xóa wp_enqueue_script('jquery'); // đăng ký file javascript wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );

  // chúng ta sẽ khai báo AJAX từ file Javascript đến PHP

'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
'posts' => json_encode( $wp_query->query_vars ),
'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
'max_page' => $wp_query->max_num_pages

global $wp_query;  
// don't display the button if there are not enough posts  
if ($wp_query->max_num_pages > 1) {  
    echo 'More posts';  
}

Style một chút cho nút nhé

.hkt-loadmore{  
    background-color: 
# ddd;  
    border-radius: 2px;  
    display: block;  
    text-align: center;  
    font-size: 14px;  
    font-size: 0.875rem;  
    font-weight: 800;  
    letter-spacing:1px;  
    cursor:pointer;  
    text-transform: uppercase;  
    padding: 10px 0;  
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;    
}  
.hkt-loadmore:hover{  
    background-color: 
# 767676;  
    color: 
# fff;  
}

Bước 2: Thêm file jQuery thực hiện

Tạo file js: myloadmore.js (ở code ví dụ này, mình đặt file này tại thư mục gốc của theme) rồi truyền tham số truy vấn cho nó bằng cách thêm đoạn mã sau vào file functions.php của theme đang sử dụng.

function hkt_load_more_scripts()  
{  
    global $wp_query;   
    // In most cases it is already included on the page and this line can be removed  
    wp_enqueue_script('jquery');  
    // register our main script but do not enqueue it yet  
    wp_register_script( 'myloadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );  
    // now the most interesting part  
    // we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP  
    // you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()  
    wp_localize_script( 'myloadmore', 'hkt_loadmore_params', array(  
        'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX  
        'posts' => json_encode($wp_query->query_vars), // everything about your loop is here  
        'current_page' => get_query_var('paged') ? get_query_var('paged') : 1,  
        'max_page' => $wp_query->max_num_pages  
    ) );  
   wp_enqueue_script('myloadmore');  
}  
add_action('wp_enqueue_scripts', 'hkt_load_more_scripts');

Lưu ý: Nút tải thêm mình đang làm được dùng cho vòng lặp chính. Nếu bạn cần nó cho vòng lặp tùy chỉnh, hãy để lại câu hỏi trong bình luận, tôi sẽ giúp bạn.

Bước 3: Viết code js cho file myloadmore.js

Mình sẽ viết code nó cho 2 lựa chọn: Dùng nút tải thêm và tải thêm khi cuộn trang

Option 1: Dùng nút tải

jQuery(function($) { // use jQuery code inside this to avoid "$ is not defined" error  
    $('.hkt-loadmore').click(function(){  
        var button = $(this),  
            data = {  
            'action': 'loadmore',  
            'query': hkt_loadmore_params.posts, // that's how we get params from wp_localize_script() function  
            'page' : hkt_loadmore_params.current_page  
        };  
        $.ajax({ // you can also use $.post here  
            url : hkt_loadmore_params.ajaxurl, // AJAX handler  
            data : data,  
            type : 'POST',  
            beforeSend : function (xhr) {  
                button.text('Loading...'); // change the button text, you can also add a preloader image  
            },  
            success : function( data ){  
                if(data) {   
                    button.text('More posts').prev().before(data); // insert new posts  
                    hkt_loadmore_params.current_page++;  
                    if ( hkt_loadmore_params.current_page == hkt_loadmore_params.max_page )   
                        button.remove(); // if last page, remove the button  
                    // you can also fire the "post-load" event here if you use a plugin that requires it  
                    // $(document.body).trigger('post-load');  
                } else {  
                    button.remove(); // if no data, remove the button as well  
                }  
            }  
        });  
    });  
});

Lưu ý: Dòng 19 (insert new posts) có thể khác nhau do cấu trúc HTML bạn sử dụng. Ban có thể tìm hiểu một số phương thức về DOM jQuery trước: prev(), next(), parent(), …