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!

Recent posts

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

Tạo custom Action Hook trong WordPress là một kỹ năng rất hữu ích để tùy chỉnh và mở rộng chức […]

Cuộc chiến không hồi kết: “Trình duyệt CC” chặn quảng cáo

Cuộc chiến không hồi kết: “Trình duyệt CC” chặn quảng cáo

Người dùng internet không còn lạ lẫm gì trước những “chiêu” được “hãng Y” sử dụng, nhằm hạn chế việc […]

Windows có lỗ hổng nghiêm trọng, Microsoft biết nhưng từ chối sửa

Windows có lỗ hổng nghiêm trọng, Microsoft biết nhưng từ chối sửa

Một lỗ hổng bảo mật trên Windows có “cửa hậu” cho phép đăng nhập bằng mật khẩu cũ. Một phát […]

Apple phát hành iOS 18.5 RC: Sắp ra mắt chính thức?

Apple phát hành iOS 18.5 RC: Sắp ra mắt chính thức?

Apple phát hành phiên bản Release Candidate (RC) của iOS 18.5 và iPadOS 18.5 đến các nhà phát triển cũng như người dùng tham gia […]

Apple cập nhật ứng dụng Move to iOS, nâng cấp tốc độ truyền tải

Apple cập nhật ứng dụng Move to iOS, nâng cấp tốc độ truyền tải

Move to iOS là ứng dụng của Apple để giúp người dùng Android khi chuyển sang hệ sinh thái của Apple, cụ thể là iOS […]

© 2021 Tạp Chí CNTT. Mr Hoang