Phân trang sử dụng Ajax trong WordPress

Phân trang sử dụng Ajax trong WordPress

Ajax là một trong những công nghệ tải dữ liệu bất đồng bộ đang được sử dụng nhiều nhất hiện nay, với ưu điểm là tải lại những vùng quan trọng mà không cần phải tải lại toàn bộ trang giúp cho việc tải dữ liệu nhanh hơn, tiết kiệm được nhiều băng thông và xử lý ở máy chủ. Trong bài viết này mình sẽ chia sẻ với bạn cách tải dữ liệu phân trang bằng Ajax một cách đơn giản và hiệu quả nhất.

Bạn có thể xem demo tại đây: http://evahousevn.com/cat/suc-khoe.

Thiết đặt phân trang trong trang

Đầu tiên thì bạn phải tạo ra một trang và thiết đặt phân trang cho trang đó. Bạn nên làm theo trong bài Hướng dẫn tạo custom pagination phân trang trong WordPress và sử dụng hàm <?php pagination_tdc(); ?> để lấy ra các nút phân trang. cách làm trên phù hợp với boststrap nên các bạn có thể yên tâm tùy biến.

Thông thường mình sẽ tạo ra một câu truy vấn và sử dụng hàm lặp để lấy ra nội dung, và bên dưới mình sẻ sử dụng hàm phân trang. Trong thẻ bao phần nội dung lặp và các nút phân trang bạn thêm một thuộc tính ID này vào id="contentInner".

Bạn tạo ra một thẻ <div id="wp-pagenavi"> hàm phân trang </div> để bao hàm phân trang lại, nhớ giữ nguyên ID nhé.

Bạn cũng có thể tạo thêm một div như thế này: <div id ="img_load" style="display:none"> Dang tai........... </div> để hiển thị hình ảnh đang load cho đẹp.

Một điều quan trọng nữa là bạn phải đặt đoạn <?php wp_head();?> này vào thẻ head để tải lên nội dung mà mình sẽ chèn ra sau này nhé.

Và cuối cùng trong trang của bạn phải có nội dung với các ID như thế này:

<div class="posts" id="contentInner">
  <div class="list-post">
    // nội dung query....
  </div>
  <div id ="img_load" style="display:none"> Dang tai........... </div>
  <div id="wp-pagenavi"> hàm phân trang </div>
</div>

Tạo Jquery phân trang

Bây giờ bạn hãy tạo một file có tên ajax-pagination.js ở trong thư mục JS của theme nhé. Sau đó copy đoạn sau và bỏ vào.

 // Kích hoạt chế độ No Conflict của jQuery
 jQuery.noConflict();
 
 //Kiểm tra các liên kết nằm trong wp-pagenavi được click
 jQuery('#wp-pagenavi a').live('click', function(e){ 
   e.preventDefault();
   //Lấy thuộc tính href của các link đó.
   var link = jQuery(this).attr('href'); 
   //Tạo hiệu ứng làm mờ.
     jQuery('#contentInner').fadeOut(500, function(){ 
     // hiển thị hình ảnh đang tải...
     jQuery("#img_load").show(); 
     //Tải và chèn dữ liệu từ liên kết vào phần trang.
     }).load(link + ' #contentInner', function(){ jQuery('#contentInner').fadeIn(500, function(){ 
       //Sau khi tải xong thì ẩn hình ảnh đang tải....
       jQuery("#img_load").hide(); 
       }); 
     });
 });

Các dòng đã được mình comment chú thích rồi, mình sẽ không giải thích nữa. Tuy nhiên trong một số trường hợp các đoạn JS trên có thể bị xung đột với các JS khác trong theme của bạn nên bạn cần chú ý để điều chỉnh nhé. Ví dụ như trên site mình nếu xử dụng JS này thì sẽ bị đụng với Lazy load nên mình tạm thời chưa dùng đến.

Chèn tệp Jquery và Ajax wordpress vào theme

Mặc định trong WordPress đã có Ajax cho mình sử dụng, nên trong phần này mình sẽ gọi luôn.

Bạn hãy mở file functions.php lên và add vào một action sau:

 add_action( 'wp_enqueue_scripts', 'aps_insert' );

Action này sẽ giúp chèn Scripts vào theme thông qua hook wp_enqueue_scripts. Mình tạm đặt tên hàm mình sẽ móc là aps_insert, bạn đặt tên gì cũng được.

Tiếp theo là mình sẽ tạo hàm aps_insert và chèn vào nội dung như sau.

function aps_insert() {

    wp_enqueue_script( 'ajp-script',esc_url( get_template_directory_uri()).'/js/ajax-pagination.js',
    array( 'jquery' ) 
    );
 
    global $wp_query;
    wp_localize_script( 'ajp-script', 'ajax_object', array(
 
      // Các phương thức sẽ sử dụng
      'ajax_url' => admin_url( 'admin-ajax.php' ),
      'query_vars' => json_encode( $wp_query->query )
    ));
 }

 

Các bài liên quan

Tuấn ĐC

Tuấn ĐC

Tôi thích tự do, làm những gì mình thích, thích đi nhiều nơi và học được nhiều thứ.

Liên hết bài viết: ""