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
  • 151 views

Recent posts

Cẩn thận dính mã độc nguy hiểm khi search Google

Cẩn thận dính mã độc nguy hiểm khi search Google

Lợi dụng thói quen tìm kiếm trên Google của nhiều người, tin tặc đã tạo ra nhiều bẫy lừa đảo […]

[WordPress] Hướng dẫn thay đổi thư mục media mặc định trong WordPress

[WordPress] Hướng dẫn thay đổi thư mục media mặc định trong WordPress

Có nhiều lý do khiến bạn muốn thay đổi thư mục mặc định để lưu trữ media (hình ảnh, video,…) […]

Hướng dẫn xác thực số điện thoại cho tài khoản Facebook

Hướng dẫn xác thực số điện thoại cho tài khoản Facebook

Từ ngày 25/12/2024, tất cả các tài khoản mạng xã hội chưa được định danh sẽ bị ngừng hoạt động. […]

Một số người dùng Android có thể sẽ không sử dụng được ứng dụng ngân hàng

Một số người dùng Android có thể sẽ không sử dụng được ứng dụng ngân hàng

Thay đổi này có thể ảnh hưởng đến một bộ phận không nhỏ người dùng ứng dụng ngân hàng trên […]

Tính năng tìm kiếm AI của Google có mặt tại Việt Nam

Tính năng tìm kiếm AI của Google có mặt tại Việt Nam

Tuần này, Google AI Overviews bắt đầu triển khai đến hơn 100 quốc gia, bao gồm Việt Nam và hỗ […]

© 2021 Tạp Chí CNTT. Mr Hoang