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

Recent posts

iPhone 16 Pro Max lộ giá bán

iPhone 16 Pro Max lộ giá bán

Dự kiến giá của iPhone 16 Pro Max sẽ tăng thêm 100 USD (khoảng 2,5 triệu đồng) với bất kỳ […]

Người dùng sắp được chuyển ảnh dễ dàng từ Google Photos sang Apple iCloud

Người dùng sắp được chuyển ảnh dễ dàng từ Google Photos sang Apple iCloud

Trong một phần của sáng kiến Chuyển tải Dữ liệu (Data Transfer Initiative – DTI), người dùng sẽ có thể […]

iOS 18 giúp ‘Trung tâm điều khiển’ trên iPhone đổi mới hoàn toàn

iOS 18 giúp ‘Trung tâm điều khiển’ trên iPhone đổi mới hoàn toàn

Apple sẽ thiết kế lại hoàn toàn khu vực Trung tâm điều khiển trên iPhone trong bản cập nhật iOS […]

iPhone 16 Pro sẽ sử dụng màn hình ‘xịn nhất’ của Samsung

iPhone 16 Pro sẽ sử dụng màn hình ‘xịn nhất’ của Samsung

iPhone 16 Pro và 16 Pro Max được dự đoán là những mẫu điện thoại đầu tiên trang bị tấm […]

Cách đọc tin nhắn trên Zalo mà người gửi không biết

Cách đọc tin nhắn trên Zalo mà người gửi không biết

Nếu là người thường xuyên sử dụng Zalo để nhắn tin hay gọi điện, nhưng lại muốn “ẩn danh” và […]

© 2021 Tạp Chí CNTT. Mr Hoang