Trong bài hướng dẫn này chúng tôi sẽ hướng dẫn các bạn tạo nút Load more sử dụng Ajax trong WordPress.

1. Trước tiên các bạn thêm nút load more vào trang của bạn:

<button id="load-more">Load more posts</button>

2. Tạo file JavaScript để xử lý yêu cầu AJAX.

jQuery(document).ready(function($) {
  var page = 1;
  // Bind the load more button click event.
  $("#load-more").on("click", function() {
    // Send an AJAX request to the `wp-admin/admin-ajax.php` file.
    $.ajax({
      url: ajaxurl,
      type: "POST",
      data: {
        action: "load_more_posts",
        page: page++,
      },
      success: function(response) {
        // Append the new posts to the DOM.
        $("#posts").append(response);
      }
    });
  });
});

3. Tạo file PHP để xử lý yêu cầu AJAX.

Thêm function load_more_posts vào file functions.php:

function load_more_posts() {
  // Get the current page number.
  $paged = ($_POST['page'] ?? 1);
  $post_type = isset($_POST["post_type"]) ? sanitize_key($_POST["post_type"]) : 'post';

  // Get the posts for the current page.
  $args = [
     'post_status' => 'publish',
     'post_type' => $post_type,
     'paged' => $paged,
  ];
  $query = new WP_Query($args);
  // Loop through the posts and echo them.
  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      // Add the post HTML to the $posts_html variable.
      $posts_html .= '<h2>' . the_title() . '</h2>';
      $posts_html .= the_content();
    }
  }
  // Set the post offset.
  wp_reset_postdata();
  // Return the posts HTML.
  return $posts_html;
}

4. Đăng ký hàm xử lý AJAX.

Thêm mã sau vào file functions.php của bạn để đăng ký hàm xử lý AJAX:

add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

Bạn hãy kiểm tra cài đặt của bạn bằng cách tải trang của bạn và nhấp vào nút load more.

Nếu mọi thứ diễn ra suôn sẻ, bạn sẽ thấy các bài đăng mới được thêm vào trang của mình.

Chúc các bạn thành công!

  • Wordpress
  • August 1, 2023
  • 0 comment
  • 75 views

Recent posts

Mẹo giúp ngưng cuộc gọi đến iPhone một cách lịch sự

Mẹo giúp ngưng cuộc gọi đến iPhone một cách lịch sự

Nếu đã từng gặp phải tình huống muốn bỏ qua cuộc gọi trên iPhone mà không tỏ ra thô lỗ, […]

4 mẫu iPhone 16 series sắp ra mắt có giá bán bao nhiêu?

4 mẫu iPhone 16 series sắp ra mắt có giá bán bao nhiêu?

Với những nâng cấp mới mẻ, liệu giá bán của iPhone 16 series có tăng so với năm ngoái? Mới […]

Giá bán iPhone 16 dự đoán đắt hơn 100 USD so với bản tiền nhiệm

Giá bán iPhone 16 dự đoán đắt hơn 100 USD so với bản tiền nhiệm

Apple không thay đổi kích thước màn hình iPhone hoặc iPhone Pro kể từ dòng iPhone 12. Vì vậy, iPhone […]

Thủ đoạn hack Zalo cần cảnh giác: Nhiều người dùng đã sập bẫy!

Thủ đoạn hack Zalo cần cảnh giác: Nhiều người dùng đã sập bẫy!

Thời gian qua, lực lượng Công an và các cơ quan chức năng đã có nhiều cảnh báo về việc […]

Ứng dụng vừa bị Google gỡ bỏ, người dùng cần xoá ngay kẻo mất sạch tiền trong tài khoản ngân hàng

Ứng dụng vừa bị Google gỡ bỏ, người dùng cần xoá ngay kẻo mất sạch tiền trong tài khoản ngân hàng

Nếu trót tải về ứng dụng, người dùng có thể bị chiếm đoạt tiền trong tài khoản ngân hàng mà […]

© 2021 Tạp Chí CNTT. Mr Hoang