Tải thêm bài viết với AJAX Loadmore đơn giản, không cần dùng plugin

Đã có rất nhiều bạn hỏi tôi làm một bài hướng dẫn cụ thể làm việc này, tôi đã tự hỏi liệu có bất kỳ hướng dẫn tương tự nào khác trên internet không. Và những gì tôi tìm thấy trong Google, làm tôi ngạc nhiên.

Đọc tất cả các hướng dẫn đó, tôi cảm nhận – AJAX không hề đơn giản chút nào. Nhưng nó không phải là sự thật!

Bài viết này tôi đã tổng hợp lại từ dự án tôi đã sử lý cho khách hàng, đơn giản dễ hiểu nhất có thể …. bắt đầu thôi.

Bước 1: Tạo nút Load More

Tạo nút xem thêm. Kiểm tra xem sau còn bài đăng  hay không  với  đoạn mã $wp_query->max_num_pages  nếu không đủ bài viết nó sẽ ẩn nút đi. Hơi khó hiểu đúng không?

Vd: Bạn đang set 15 bài viết 1 trang trường hợp bạn có 20 bài viết nó sẽ hiển thị nút Loadmore ngược lại ít hơn nut sẽ ẩn đi

<? php
 global  $ wp_query ; // bạn có thể xóa dòng này nếu mọi thứ phù hợp với bạn 
 
// không hiển thị nút nếu không có đủ bài đăng 
if (   $ wp_query -> max_num_pages > 1  ) 
    echo  '<div class = "iz_loadmore"> Bài đăng khác </ div> ' ; // bạn cũng có thể sử dụng <a> 
?>

Hình ảnh bên dưới, bạn có thể thấy rằng tôi quyết định làm việc với chủ đề Twenty Seventeen vì nó được thiết kế tốt và đủ đơn giản.

ajax loadmore button

 

Tôi đã chèn nút ngay dưới phân trang chuẩn (cho TwentySeventeen –  index.php dòng 55), nhưng bạn cũng có thể xóa nó. Để tạo kiểu cho nút sử dụng CSS bên dưới.

.iz_loadmore { 
    background-color :  #ddd ; 
    bán kính đường viền : 2px ; 
    hiển thị : khối ; 
    text-align :  center ; 
    font-size : 14px ; 
    kích thước phông chữ : 0,875rem ; 
    font-weight :  800 ; 
    khoảng cách giữa các chữ cái : 1px ; 
    con trỏ : con trỏ ; 
    text-biến đổi :  chữ hoa ; 
    đệm : 10px 0 ; 
    chuyển tiếp:  Background-color 0.2s dễ dàng-in-out ,  border-color 0.2s dễ dàng-in-out ,  màu 0.3s dễ dàng-in-out ;   
} 
.iz_loadmore : hover { 
    background-color :  # 767676 ; 
    màu :  #fff ; 
}

Bước 2. Enqueue jQuery và myloadmore.js. Chuyển các tham số truy vấn vào tập lệnh.

Chà, đó là nơi điều kỳ diệu xảy ra. Đoạn mã nhỏ này cho phép bạn chuyển các tham số theo tập lệnh, đó là lý do tại sao nút có thể hoạt động trên bất kỳ trang nào – thẻ, danh mục, lưu trữ loại bài đăng tùy chỉnh, tìm kiếm, v.v. Bạn cũng có thể sử dụng nó cho WooCommerce để tải nhiều sản phẩm hơn.

function iz_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ý tập lệnh chính của chúng ta nhưng chưa xếp hàng wp_register_script ( 'my_loadmore' , get_stylesheet_directory_uri ( ) . '/myloadmore.js' , array ( 'jquery' ) ) ; // bây giờ là phần thú vị nhất
 
    
    // chúng ta phải chuyển các tham số cho tập lệnh myloadmore.js nhưng chúng ta chỉ có thể lấy các giá trị tham số trong PHP 
    // bạn có thể xác định các biến trực tiếp trong HTML của mình nhưng tôi quyết định rằng cách thích hợp nhất là wp_localize_script () 
    wp_localize_script (  'my_loadmore' , 'iz_loadmore_params' , array ( 
        'ajaxurl' => site_url ( ) . '/wp-admin/admin-ajax.php' , // WordPress AJAX 
        'posts' => json_encode (  $ wp_query -> query_vars  ) , // mọi thứ về vòng lặp của bạn ở đây 
        'current_page'=> get_query_var (  'trang'  ) ? get_query_var ( 'trang' ) : 1 ,
         'max_page' => $ wp_query -> max_num_pages 
    )  ) ; wp_enqueue_script ( 'my_loadmore' ) ;
} add_action ( 'wp_enqueue_scripts' , 'iz_my_load_more_scripts' ) ;

Nếu bạn vẫn chưa biết, đoạn mã trên là dành cho bạn  functions.php. Và xin lưu ý, nút tải thêm của tôi chỉ được điều chỉnh cho vòng lặp chính. Nếu bạn cần nó cho một vòng lặp tùy chỉnh, hãy hỏi tôi trong phần bình luận.

Bạn cũng có thể vượt qua  ajaxurl như thế này  admin_url( 'admin-ajax.php' ). Nhiều người quên thông số này và gặp lỗi “ajaxurl không được xác định”.

Bước 3. myloadmore.js – bên trong là gì?

Nó là một tệp JS nhỏ, thực sự bạn có thể đặt nó ở bất cứ đâu bạn muốn, vì đơn giản, tôi quyết định đặt nó chỉ trong một thư mục chủ đề (dòng 9 của mã trước).

Tôi cũng nghĩ rằng tôi nên cho bạn một sự lựa chọn –  một nút tải nhiều hơn hoặc chỉ tải bài viết bằng cách cuộn.

Tùy chọn 1: Ajax load more – Click để tải thêm

Nếu bạn chọn tùy chọn 1, hãy bỏ qua tùy chọn 2 và ngược lại.

jQuery(function($){ // sử dụng mã jQuery bên trong này để tránh lỗi "$ không được xác định" 
    $('.iz_loadmore').click(function(){
 
        var button = $(this),
            data = {
            'action': 'loadmore',
            'query': iz_loadmore_params.posts, // đó là cách chúng tôi lấy params từ wp_localize_script () function 
            'page' : iz_loadmore_params.current_page
        };
 
        $.ajax({ // bạn cũng có thể sử dụng $ .post tại đây 
            url : iz_loadmore_params.ajaxurl, // AJAX handler
            data : data,
            type : 'POST',
            beforeSend : function ( xhr ) {
                button.text('Loading...'); // thay đổi chữ của nút, bạn cũng có thể thêm một hình ảnh preloader
            },
            success : function( data ){
                if( data ) { 
                    button.text( 'More posts' ).prev().before(data); // chèn bài viết mới 
                    iz_loadmore_params.current_page++;
 
                    if ( iz_loadmore_params.current_page == iz_loadmore_params.max_page ) 
                        button.remove(); // if last page, remove the button
 
                    // bạn cũng có thể kích hoạt sự kiện "post-load" tại đây nếu bạn sử dụng plugin yêu cầu nó 
                    // $ (document.body) .trigger ('post-load'); 
                } else {
                    button.remove(); // Nếu không có dữ liệu thì ẩn luôn
                }
            }
        });
    });
});

Xin lưu ý rằng dòng  23 có thể khác nhau đối với chủ đề của bạn, nó phụ thuộc vào cấu trúc tài liệu HTML của bạn. Tôi nghĩ bạn nên biết một số jQuery DOM phương pháp traversal cơ bản –  prev(),  next(),  parent() , vv

Tùy chọn 2: Không có nút, chỉ tải bài đăng khi lăn chuột xuống (tải chậm)

jQuery(function($){
    var canBeLoaded = true, // tham số này chỉ cho phép bắt đầu lệnh gọi AJAX khi cần thiết 
        bottomOffset = 2000; // khoảng cách (tính bằng px) từ cuối trang khi bạn muốn tải thêm bài viết
 
    $(window).scroll(function(){
        var data = {
            'action': 'loadmore',
            'query': iz_loadmore_params.posts,
            'page' : iz_loadmore_params.current_page
        };
        if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) &amp;&amp; canBeLoaded == true ){
            $.ajax({
                url : iz_loadmore_params.ajaxurl,
                data:data,
                type:'POST',
                beforeSend: function( xhr ){
                    // bạn cũng có thể thêm trình tải trước của riêng mình tại đây 
                    // bạn thấy đấy, lệnh gọi AJAX đang trong quá trình xử lý, chúng tôi không nên chạy lại nó cho đến khi hoàn thành 
                    canBeLoaded = false; 
                },
                success:function(data){
                    if( data ) {
                        $('#main').find('article:last-of-type').after( data ); // nơi chèn bài viết 
                        canBeLoaded = true; // ajax đã hoàn thành, bây giờ chúng ta có thể chạy lại
                        iz_loadmore_params.current_page++;
                    }
                }
            });
        }
    });
});

 

Bước 4. wp_ajax_

Đây là hàm xử lý AJAX. Chèn nó vào functions.php tệp của bạn  

function iz_loadmore_ajax_handler(){
 
    // prepare our arguments for the query
    $args = json_decode( stripslashes( $_POST['query'] ), true );
    $args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
    $args['post_status'] = 'publish';
 
    // it is always better to use WP_Query but not here
    query_posts( $args );
 
    if( have_posts() ) :
 
        // run the loop
        while( have_posts() ): the_post();
 
            // look into your theme code how the posts are inserted, but you can use your own HTML of course
            // do you remember? - my example is adapted for Twenty Seventeen theme
            get_template_part( 'template-parts/post/content', get_post_format() );
            // for the test purposes comment the line above and uncomment the below one
            // the_title();
 
 
        endwhile;
 
    endif;
    die; // here we exit the script and even no wp_reset_query() required!
}
 
 
 
add_action('wp_ajax_loadmore', 'iz_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'iz_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}

Nếu bạn có bất kỳ câu hỏi nào, vui lòng để lại  bình luận  bên dưới hoặc inbox trực tiếp qua chatbox facebook

Hẹn gặp lại a/e trong bài viết tiếp theo… !

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

BÀI VIẾT BẠN QUAN TÂM

IZ4WEB.COM - Trang chia sẻ theme / Plugin WordPress từ themeforest chia sẻ hoàn toàn miễn phí link download được gắn đến Google Drive, nếu ko tìm thấy Plugin – Theme mong muốn vui lòng liên hệ qua Form hỗ trợ hoặc qua mail iz4webteams@gmail.com or 0964.555.805 để chúng tôi sẽ gửi cho bạn ngay phiên bản mới nhất qua thông tin nhận được.

Team có vài lưu ý:

  • Vì chia sẻ miễn phí các bạn đừng hỏi license, team vẫn hỗ trợ update
  • Cơ bản các theme đều import được demo, đọc kĩ tài liệu hướng dẫn của Theme
  • Team sẽ không cam kết chất lượng code Theme vì mình không phải người làm ra theme đấy
  • Nếu các bạn thấy theme có vấn đề vui lòng phản hồi lại Admin để update

Để anh/em có động lực làm việc mọi người có thể donate 1 phần nhỏ tiền trà thuốc để có động lực chiến đấu... Thay mặt Team chân thành cảm ơn!

Chủ TK: Lý Mạnh Hưng

Ngoài ra chúng tôi còn cung cấp các dịch vụ Thiết Kế Website, Cài đặt cấu hình website theo yêu cầu, Dịch vụ SEO, Design & Media, Dịch vụ quảng cáo...

0
Would love your thoughts, please comment.x
()
x