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

Hàng siêu cao cấp, iPhone gập sẽ có giá cao ngất ngưởng

Hàng siêu cao cấp, iPhone gập sẽ có giá cao ngất ngưởng

iPhone Fold – chiếc iPhone gập được đồn đại từ lâu của Apple – có thể sẽ là một sản […]

Người dùng iPhone cần cập nhật ngay iOS 18.4.1 vì lý do bảo mật nghiêm trọng

Người dùng iPhone cần cập nhật ngay iOS 18.4.1 vì lý do bảo mật nghiêm trọng

Apple cho biết các lỗ hổng bảo mật này có khả năng đã được sử dụng trong một cuộc tấn […]

[Thủ thuật] Xóa menu “WordPress” khỏi thanh quản trị

[Thủ thuật] Xóa menu “WordPress” khỏi thanh quản trị

Bạn muốn xóa menu “WordPress” (thường có biểu tượng chữ W) khỏi thanh quản trị (wp-admin bar) và các mục […]

POCO M7 Pro mẫu smartphone 5G giá siêu rẻ của Xiaomi

POCO M7 Pro mẫu smartphone 5G giá siêu rẻ của Xiaomi

POCO M7 Pro là mẫu smartphone 5G giá siêu rẻ của Xiaomi, chỉ hơn 4 triệu đồng nhưng vẫn được […]

Hóa ra “đường link màu tím” trên Chrome không chỉ là tính năng, nó còn là lỗ hổng bảo mật 16 năm tuổi

Hóa ra “đường link màu tím” trên Chrome không chỉ là tính năng, nó còn là lỗ hổng bảo mật 16 năm tuổi

Chỉ mới đây thôi, Google phát hành bản vá cho một lỗ hổng nghiêm trọng trong trình duyệt Chrome đã […]

© 2021 Tạp Chí CNTT. Mr Hoang