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

Recent posts

Microsoft phát cảnh báo đến người dùng Word: nếu không cẩn thận sẽ mất file

Microsoft phát cảnh báo đến người dùng Word: nếu không cẩn thận sẽ mất file

Dù Microsoft vẫn đang điều tra về lỗi này, có nhiều một số cách khá đơn giản để bạn có […]

OnePlus 13 có thể ‘vượt mặt’ Google và Samsung nhờ viên pin khổng lồ

OnePlus 13 có thể ‘vượt mặt’ Google và Samsung nhờ viên pin khổng lồ

OnePlus 13 sắp ra mắt vào cuối tháng 10 được trang bị viên pin dung lượng lớn, sạc nhanh 100W. […]

Những hình ảnh không nên lưu trên điện thoại

Những hình ảnh không nên lưu trên điện thoại

Có một số chuyên gia cảnh báo rằng, dù cho điện thoại di động của bạn có dung lượng lớn, […]

iPhone 16 Pro gặp vấn đề về màn hình khiến người dùng khó chịu

iPhone 16 Pro gặp vấn đề về màn hình khiến người dùng khó chịu

iPhone 16 Pro đã bắt đầu đến tay những người mua đầu tiên vào thứ Sáu tuần trước và những […]

Hơn 11 triệu thiết bị Android nhiễm phần mềm độc hại từ Wuata Camera trong Google Play

Hơn 11 triệu thiết bị Android nhiễm phần mềm độc hại từ Wuata Camera trong Google Play

Những ứng dụng này đã thu hút hơn 11 triệu lượt tải xuống. Người dùng cần nhanh chóng gỡ bỏ […]

© 2021 Tạp Chí CNTT. Mr Hoang