WordPress ajax nhận bài đăng

Question

Tải thêm bài viết bằng ajax là một nút giao diện người dùng rất phổ biến trong các trang web ngày nay. Trên WordPress, nhiều người sử dụng plugin, trình tạo trang hoặc chủ đề mua/miễn phí đi kèm với chức năng này. Nhưng viết nó tùy chỉnh cũng không khó lắm. Vì vậy, hãy thử tạo một cái ngay hôm nay. Như một phần thưởng, chúng tôi cũng đề cập đến tải nhiều hơn với phân trang và sự khủng khiếp của chức năng 'bù đắp' của WordPress khi cố gắng phân trang

Nội dung chính Show

Truy vấn WordPress để tải bài đăng từ loại bài đăng (tùy chỉnh)
Tải thêm chức năng ajax
Tải thêm bài viết với WordPress
Kết hợp tải nhiều hơn với Ajax và WordPress
Ẩn nút tải thêm khi không có thêm bài viết
Sử dụng phân trang WordPress với Offset
Các lỗi thường gặp với truy vấn ajax trong WordPress
Phần kết luận
Nhận các bài đăng mới nhất và những thứ khác trong hộp thư đến của bạn
Đọc thêm các chủ đề liên quan?
Để lại một câu trả lời
25 Bình luận
Làm cách nào để đăng bài trong ajax trong WordPress?
Ajax có sử dụng Nhận hoặc Đăng không?
Làm cách nào để lấy dữ liệu trong WordPress bằng AJAX?
Phương thức GET và POST được sử dụng như thế nào trong Ajax?

Tôi đã đề cập đến chủ đề này vài năm trước khi tôi còn trẻ và thiếu kinh nghiệm. Khi tôi nhìn lại cách tôi tải nhiều bài đăng hơn với ajax trước đó, tôi có cảm giác mọi lập trình viên đều nhìn lại mã của mình từ vài năm trước. Nhưng… bài đăng đã nhận được một lượng truy cập kha khá nên tôi đã giữ nó trực tuyến để giúp mọi người tạo thêm chức năng tải ajax của riêng họ. Nhưng nếu bạn muốn cười, vui lòng truy cập cách cũ hơn của tôi để tải thêm bài đăng trên WordPress bằng ajax 🙂

Bây giờ, một vài năm sau, thời gian đã trôi qua và tôi sử dụng hàm admin-ajax từ WordPress nhiều hơn thay vì tạo lệnh gọi API của riêng mình để nhận bài đăng của mình. Vì vậy, đây là những gì tôi sẽ trình bày trong bài viết này

Truy vấn WordPress để tải bài đăng từ loại bài đăng (tùy chỉnh)

Hãy bắt đầu với truy vấn cơ bản cho các bài đăng của chúng ta. Truy vấn sẽ hiển thị 6 bài đăng đầu tiên từ 'ấn phẩm' loại bài đăng của chúng tôi. Như bạn có thể thấy, tôi cũng đã thêm tham số 'phân trang' nhưng mã hóa nó thành 1. Điều này là do chúng tôi sẽ tải nhiều bài đăng hơn bằng javascript và không nghe tham số truy vấn. Truy cập

$('#load-more').on('click', function() {
  // We will do our magic here soon!
}

7 sẽ KHÔNG hiển thị trang thứ hai trong ví dụ này vì chúng tôi không nghe truy vấn var.

Ví dụ mã sau sẽ đi vào tệp mẫu của bạn, nơi bạn muốn hiển thị danh sách bài đăng của mình. Tôi đang sử dụng get nhưng bạn cũng có thể mã hóa cứng mẫu thẻ của mình trong vòng lặp này. Có chúng dưới dạng một phần mẫu sẽ làm cho nó rõ ràng hơn sau này khi chúng tôi cũng đang tải các thẻ đó bằng javascript

 'publications',
  'posts_per_page' => 6,
  'orderby' => 'date',
  'order' => 'DESC',
  'paged' => 1,
]);
?>

have_posts()): ?>
  
    have_posts()): $publications->the_post();
        get_template_part('parts/card', 'publication');
      endwhile;
    ?>
  




  Load more

Đoạn mã trên có thể được chia thành 3 phần chính. Đầu tiên là truy vấn để thực sự nhận được 6 bài đăng đầu tiên từ 'ấn phẩm'. Phần thứ hai là vòng lặp của chúng tôi về kết quả của truy vấn $publications. Cuối cùng, đừng quên gọi hàm

$('#load-more').on('click', function() {
  // We will do our magic here soon!
}

8 để đảm bảo phần còn lại của trang tiếp tục hoạt động bình thường. Cuối cùng, chúng tôi cũng thêm nút “tải thêm” trong danh sách của mình để có thể tải thêm bài đăng

Bây giờ chúng ta đã sẵn sàng thiết lập cơ sở, đã đến lúc liên kết một số javascript và Ajax với nút tải thêm đó

Tải thêm chức năng ajax

Bây giờ là lúc thêm sự kiện nhấp chuột vào nút tải thêm của chúng tôi. Tôi sẽ sử dụng jQuery trong hướng dẫn này, vì nó được vận chuyển theo mặc định với WordPress. Và bởi vì bài đăng này dành riêng cho việc tải nhiều bài đăng hơn với Ajax trong WordPress, nên tôi sẽ làm việc đó

Đối với phần JS, hãy chuyển đến thư mục javascript của bạn và thêm sự kiện nhấp chuột vào nút. Bạn có thể sử dụng các chức năng mũi tên nếu bạn cảm thấy thích thú, nhưng vì tôi không đề cập đến thiết lập trình biên dịch babel nên tôi sẽ sử dụng cách cũ ổn định hơn

$('#load-more').on('click', function() {
  // We will do our magic here soon!
}

Trước khi tiếp tục, có một vài điều chúng ta cần ghi nhớ. Chúng tôi muốn tải 'nhiều bài đăng hơn', không chỉ bất kỳ bài đăng nào, mà cụ thể hơn là chỉ trang tiếp theo của bài đăng. Vì vậy, chúng tôi cần theo dõi trang hiện tại chúng tôi đang truy cập và trang chúng tôi muốn tải tiếp theo

Lợi ích của việc sử dụng Ajax để tải thêm bài đăng là trang của chúng tôi sẽ không làm mới. Điều này có nghĩa là chúng ta có thể ghi nhớ mọi thứ bằng javascript đơn giản mà không cần lưu trữ dữ liệu trong localStorage hoặc sử dụng một số loại $store như chúng ta có trong React hoặc Vue. Một biến đơn giản trong javascript sẽ hoạt động tốt

Chúng tôi sẽ chỉnh sửa đoạn mã javascript của mình bằng một biến để theo dõi trang hiện tại và chúng tôi thêm lệnh gọi $ajax vào hàm ajax mà chúng tôi sẽ viết trong chương tiếp theo

let currentPage = 1;
$('#load-more').on('click', function() {
  currentPage++; // Do currentPage + 1, because we want to load the next page

  $.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'weichie_load_more',
      paged: currentPage,
    },
    success: function (res) {
      $('.publication-list').append(res);
    }
  });
});

Nếu bạn muốn kiểm tra đoạn mã này để đảm bảo rằng nó hoạt động thì tôi phải làm bạn thất vọng. Điều này sẽ không làm việc chỉ được nêu ra. Chúng tôi hiện đang thực hiện cuộc gọi đến một chức năng WordPress mà chúng tôi chưa viết. Vì vậy, hãy làm điều đó trước khi thử nghiệm hoặc phàn nàn rằng nó không hoạt động

Nhưng chúng tôi vẫn có thể kiểm tra nó để đảm bảo rằng chúng tôi đang đi đúng hướng cho đến nay. Khi bạn nhấp vào nút tải thêm, sẽ không có gì xảy ra trực quan trên trang. Nhưng nếu bạn mở công cụ phát triển chrome của mình và điều hướng đến tab Mạng, bạn sẽ có thể thấy rằng chúng tôi đã đưa ra yêu cầu ajax tới

$('#load-more').on('click', function() {
  // We will do our magic here soon!
}

9

quản trị viên ajax này. yêu cầu php sẽ chỉ hiển thị khi bạn nhấp vào nút của chúng tôi. Nhấp vào nó một lần nữa sẽ thực hiện cuộc gọi thứ hai (và sau đó tải trọng của chúng tôi sẽ hiển thị 'phân trang. 3’). Chúng ta có thể thấy hai điều trong tải trọng của mình. 'Hành động' và 'phân trang'. Đây là hai điều chúng tôi đã chuyển trong lệnh gọi javascript $ajax của mình dưới

let currentPage = 1;
$('#load-more').on('click', function() {
  currentPage++; // Do currentPage + 1, because we want to load the next page

  $.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'weichie_load_more',
      paged: currentPage,
    },
    success: function (res) {
      $('.publication-list').append(res);
    }
  });
});

0. Nó sẽ trả về lỗi cho bạn vì nó không thể tìm thấy chức năng của chúng tôi ‘weichie_load_more’

Tải trọng là những gì chúng tôi đang gửi từ giao diện người dùng đến chương trình phụ trợ của chúng tôi. Do tải trọng này, chúng tôi có quyền truy cập vào trang mà chúng tôi muốn tải trong hàm PHP nơi chúng tôi sẽ thực hiện truy vấn. Vì vậy, tiếp theo. Tạo chức năng weichie_load_more của chúng tôi sẽ thực sự tải nhiều bài đăng hơn cho chúng tôi

Tải thêm bài viết với WordPress

Tôi không biết mức độ quen thuộc của bạn với Truy vấn WordPress và plugin tùy chỉnh?

Bạn có thể thêm đoạn mã sau vào chức năng của mình. php

________số 8

Như bạn có thể thấy, phần truy vấn của chúng tôi thực sự giống hệt như chúng tôi có trong mẫu trang của mình. Chúng tôi đang thực hiện chính xác cùng một truy vấn, nhưng điểm khác biệt duy nhất ở đây là chúng tôi đang kéo phân trang. 2 (hoặc 3 hoặc 4) thay vì trang đầu tiên

Chúng tôi có $ajaxposts, đây là truy vấn WordPress của chúng tôi, chúng tôi sẽ lặp lại (chính xác như chúng tôi làm trong mẫu trang của mình). Chúng tôi cũng khai báo một biến $response sẽ lưu trữ kết quả của chúng tôi. Sau đó, chúng tôi lặp lại các ajaxposts của mình và trong mỗi lần lặp lại, chúng tôi nối thêm template_part vào phản hồi của mình bằng cách sử dụng ký hiệu

let currentPage = 1;
$('#load-more').on('click', function() {
  currentPage++; // Do currentPage + 1, because we want to load the next page

  $.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'weichie_load_more',
      paged: currentPage,
    },
    success: function (res) {
      $('.publication-list').append(res);
    }
  });
});

2. Và cuối cùng, chúng tôi lặp lại phản hồi $ của mình và đây là những gì chúng tôi sẽ gửi lại cho javascript của mình

Điều này là do phân trang. Chúng tôi không muốn lấy cùng một bài đăng khi nhấp vào 'tải thêm', nhưng cung cấp cho chúng tôi số lượng bài đăng tương tự, từ trang tiếp theo. Bây giờ chúng ta đã có cái này, chúng ta có thể kiểm tra xem việc nhấp vào nút có còn trả về lỗi hay không. Nhưng thông thường, nó sẽ trả về cho chúng ta các khối HTML của 6 bài đăng từ trang 2. Bạn có thể kiểm tra lại điều này trong tab mạng của chúng tôi, nhưng thay vì chuyển đến Tải trọng (những gì chúng tôi đang gửi tới phần phụ trợ), chúng tôi có thể kiểm tra trong phần Phản hồi (những gì phần phụ trợ đang gửi lại cho phần giao diện người dùng)

Kết hợp tải nhiều hơn với Ajax và WordPress

Thật tuyệt, bây giờ chúng tôi có phản hồi đang gửi lại các mục danh sách mới của chúng tôi cho trang 2, đã đến lúc chúng xuất hiện trên trang web. 'Phản hồi' mà chúng tôi thấy trong tab mạng của mình sẽ tự động được trả lại cho yêu cầu $ajax của chúng tôi

Nếu bạn may mắn, mã hiện tại của chúng tôi có thể đã hoạt động cho bạn. Khi bạn xem phần JS hiện tại của chúng tôi, chúng tôi đã thành công. chức năng trong cuộc gọi ajax của chúng tôi

 'publications',
  'posts_per_page' => 6,
  'orderby' => 'date',
  'order' => 'DESC',
  'paged' => 1,
]);
?>

have_posts()): ?>
  
    have_posts()): $publications->the_post();
        get_template_part('parts/card', 'publication');
      endwhile;
    ?>
  




  Load more

0

Hàm thành công nhận tham số 'res' chứa phản hồi ajax của chúng tôi. Bởi vì chúng tôi đã chuyển một loại dữ liệu trong cuộc gọi của mình, nó biết rằng chúng tôi đang mong đợi phản hồi từ HTML. Chúng tôi chỉ đơn giản là nhắm mục tiêu $('. danh sách xuất bản') và. nối thêm kết quả (là HTML). Hàm chắp thêm là jQuery mặc định

gỡ lỗi. Nếu mã không hoạt động với bạn, chúng tôi cần gỡ lỗi thêm một chút. Hãy thử đăng nhập độ phân giải của bạn vào bảng điều khiển và kiểm tra loại dữ liệu nào đang trả về cho bạn. Bạn không thể viết bất kỳ j nào bên trong đối tượng ajax của chúng tôi, nhưng vì

let currentPage = 1;
$('#load-more').on('click', function() {
  currentPage++; // Do currentPage + 1, because we want to load the next page

  $.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'weichie_load_more',
      paged: currentPage,
    },
    success: function (res) {
      $('.publication-list').append(res);
    }
  });
});

3 – rõ ràng – là một hàm, nên chúng tôi có thể viết

let currentPage = 1;
$('#load-more').on('click', function() {
  currentPage++; // Do currentPage + 1, because we want to load the next page

  $.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'weichie_load_more',
      paged: currentPage,
    },
    success: function (res) {
      $('.publication-list').append(res);
    }
  });
});

4 bên trong hàm thành công để gỡ lỗi

Ẩn nút tải thêm khi không có thêm bài viết

Bây giờ mã của chúng tôi đang hoạt động và thực sự tải nhiều bài đăng hơn, có thể bạn sẽ sớm phát hiện ra một vấn đề khác, nếu lập trình viên trong bạn chưa có. Nếu không có thêm bài viết thì sao? . Chúng tôi có 4 trang và chúng tôi đến trang 4, sau đó nhấp vào nút tải thêm của chúng tôi sẽ tải trang 5 -> trống. Chúng tôi cần ẩn nút tải thêm khi chúng tôi đến trang cuối cùng hoặc thêm một lớp không hoạt động hoặc bất cứ điều gì bạn muốn làm ở cuối

Họ cũng kiểm tra xem chúng tôi có đang ở trang cuối cùng hay không, chúng tôi sẽ thay đổi lệnh gọi ajax của mình để không trả về HTML thuần túy mà thực sự nhận được phản hồi JSON. Trong phản hồi này, chúng tôi sẽ đặt cả phản hồi HTML của mình (như chúng tôi đã có ngay bây giờ) và max_pages. Điều này là cần thiết để kiểm tra xem chỉ mục trang hiện tại của chúng tôi có lớn hơn hoặc bằng max_pages không. Nếu vậy, chúng tôi có thể ẩn nút của mình vì chúng tôi đã đạt đến số lượng trang tối đa

Trước tiên, hãy cập nhật lệnh gọi ajax của chúng tôi để hoạt động với JSON thay vì HTML. Xin lưu ý rằng việc thực hiện thay đổi này sẽ phá vỡ chức năng hiện tại của chúng tôi, nhưng chúng tôi sẽ sớm khắc phục sự cố

Trong tệp JS của bạn, hãy thay đổi lệnh gọi ajax thành như sau

 'publications',
  'posts_per_page' => 6,
  'orderby' => 'date',
  'order' => 'DESC',
  'paged' => 1,
]);
?>

have_posts()): ?>
  
    have_posts()): $publications->the_post();
        get_template_part('parts/card', 'publication');
      endwhile;
    ?>
  




  Load more

3

Hiện tại chúng tôi chỉ thay đổi DataType. Chúng tôi cũng cần thay đổi phản hồi của mình sau một phút, nhưng trước tiên, chúng tôi sẽ cập nhật Truy vấn PHP của mình trong các hàm. php tập tin như sau

 'publications',
  'posts_per_page' => 6,
  'orderby' => 'date',
  'order' => 'DESC',
  'paged' => 1,
]);
?>

have_posts()): ?>
  
    have_posts()): $publications->the_post();
        get_template_part('parts/card', 'publication');
      endwhile;
    ?>
  




  Load more

4

Chúng tôi đã thay đổi một số thứ trong truy vấn PHP của chúng tôi so với trong JS của chúng tôi. Nhưng hãy xem xét chúng chi tiết hơn. Bản thân truy vấn vẫn chưa được xử lý. Chúng tôi cũng vẫn có chuỗi rỗng

let currentPage = 1;
$('#load-more').on('click', function() {
  currentPage++; // Do currentPage + 1, because we want to load the next page

  $.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'weichie_load_more',
      paged: currentPage,
    },
    success: function (res) {
      $('.publication-list').append(res);
    }
  });
});

5. Sau đó, chúng tôi sử dụng chức năng mặc định của WordPress để bắt max_num_pages từ một truy vấn. Điều này sẽ trả về số lượng trang tối đa mà chúng tôi có cho truy vấn này. Vì vậy, nút tải thêm của chúng tôi có thể tải tối đa “max_num_pages”-số lượng trang

Sau đó, trong khi chúng tôi đang lặp lại truy vấn của mình và nối từng bài đăng đã tìm thấy vào chuỗi $results của mình, lần này chúng tôi thực sự bọc nó bên trong bộ đệm PHP, được gọi là bộ đệm đầu ra. Trong khi bộ đệm đầu ra đang hoạt động, không có đầu ra nào được gửi từ tập lệnh và thay vào đó, đầu ra được lưu trữ trong bộ đệm bên trong. trước khi kết thúc bộ đệm đầu ra, chúng tôi lưu kết quả vào một biến khác có tên $output

Cuối cùng, ngay trước khi chúng tôi sẽ trả lại kết quả của mình cho tệp javascript của mình, hãy tạo mảng trả về của chúng tôi

 'publications',
  'posts_per_page' => 6,
  'orderby' => 'date',
  'order' => 'DESC',
  'paged' => 1,
]);
?>

have_posts()): ?>
  
    have_posts()): $publications->the_post();
        get_template_part('parts/card', 'publication');
      endwhile;
    ?>
  




  Load more

6

Chúng tôi tạo một mảng lấy $max_pages, để trả về số lượng trang tối đa cho truy vấn này và HTML của chúng tôi. Đầu ra $ mà chúng tôi đã tạo từ trong vòng lặp sau của chúng tôi. Để trả lại một mảng cho tệp json của chúng tôi, chúng tôi cần mã hóa mảng cho JSON và trả về nó như thế

Cuối cùng, để làm việc với đầu ra mới của chúng tôi, chúng tôi cũng cần chỉnh sửa javascript của mình. Bởi vì chúng tôi không nhận được HTML dưới dạng phản hồi mà là JSON, chúng tôi cần đi sâu hơn một cấp khi in phản hồi cho trang. Thay đổi chức năng thành công javascript của bạn như sau

 'publications',
  'posts_per_page' => 6,
  'orderby' => 'date',
  'order' => 'DESC',
  'paged' => 1,
]);
?>

have_posts()): ?>
  
    have_posts()): $publications->the_post();
        get_template_part('parts/card', 'publication');
      endwhile;
    ?>
  




  Load more

7

'res' từ

let currentPage = 1;
$('#load-more').on('click', function() {
  currentPage++; // Do currentPage + 1, because we want to load the next page

  $.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'weichie_load_more',
      paged: currentPage,
    },
    success: function (res) {
      $('.publication-list').append(res);
    }
  });
});

6 của chúng tôi giờ đây sẽ chứa một đối tượng json với 2 cặp khóa-giá trị. Khóa 'max' chứa max_num_pages của chúng tôi và khóa 'html' chứa HTML của phản hồi của chúng tôi

Để hiển thị lại danh sách HTML của chúng tôi trên trang của chúng tôi, chúng tôi sẽ cần sử dụng

let currentPage = 1;
$('#load-more').on('click', function() {
  currentPage++; // Do currentPage + 1, because we want to load the next page

  $.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'weichie_load_more',
      paged: currentPage,
    },
    success: function (res) {
      $('.publication-list').append(res);
    }
  });
});

7. Chúng tôi cũng kiểm tra xem

let currentPage = 1;
$('#load-more').on('click', function() {
  currentPage++; // Do currentPage + 1, because we want to load the next page

  $.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'weichie_load_more',
      paged: currentPage,
    },
    success: function (res) {
      $('.publication-list').append(res);
    }
  });
});

8 để xem liệu chúng tôi có cần ẩn nút của mình hay không hoặc nếu chúng tôi chưa đạt đến số lượng trang tối đa

Sử dụng phân trang WordPress với Offset

Sử dụng ajax trong WordPress để tải thêm bài đăng hoặc lọc bài đăng trong WordPress, tất cả đều thú vị và thú vị miễn là nó thực sự hoạt động. Nếu bạn không thể làm cho nó hoạt động, sẽ chẳng có gì thú vị khi biến những thứ đó thành tùy chỉnh. Và tôi đã có điều này khi cố gắng sử dụng tập lệnh tải thêm mà chúng tôi vừa viết, cùng với phần bù

Phân trang WordPress đơn giản là không hoạt động khi bạn sử dụng phần bù. Truy vấn phân trang bị hỏng hoàn toàn và tôi không biết tại sao. Nhưng toàn bộ kịch bản trên đã sẵn sàng cho thùng rác. Tôi đã tìm kiếm trên Google và thực sự không có giải pháp nào để phân trang hoạt động cùng với phần bù

Cuối cùng thì cách tôi sửa lỗi này cũng là tự tạo phần bù… Vì vậy, trong ví dụ này, tôi đang bỏ qua 3 bài đăng gần đây nhất và muốn phân trang sau đó. Để phân trang truy vấn mà không có 3 bài viết mới nhất. Thông thường, tôi chỉ có thể sử dụng

let currentPage = 1;
$('#load-more').on('click', function() {
  currentPage++; // Do currentPage + 1, because we want to load the next page

  $.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'weichie_load_more',
      paged: currentPage,
    },
    success: function (res) {
      $('.publication-list').append(res);
    }
  });
});

9 nhưng với phân trang, không đời nào josé

Đây là những gì tôi đã kết thúc làm thay vì

$('#load-more').on('click', function() {
  // We will do our magic here soon!
}

2

Trước tiên tôi tạo một truy vấn lấy 3 bài đăng gần đây nhất. Sau đó, tôi tạo Truy vấn WP thực tế của mình và thay vì sử dụng phần bù, tôi loại trừ các bài đăng khỏi truy vấn đầu tiên của chúng tôi. Nói cách khác. Bỏ qua 3 bài đăng gần đây nhất, trong truy vấn mà chúng tôi muốn sử dụng phân trang. Nó giống như offset, nhưng với các bước bổ sung

Nếu bạn tìm thấy một giải pháp dễ dàng hơn để làm cho phân trang hoạt động với phần bù, vui lòng để lại giải pháp của bạn trong các nhận xét

Các lỗi thường gặp với truy vấn ajax trong WordPress

Số trang hoặc số trang không chính xác

Nếu số trang hoặc số lượng bài đăng trả về từ truy vấn không chính xác, hãy thử thêm

function weichie_load_more() {
  $ajaxposts = new WP_Query([
    'post_type' => 'publications',
    'posts_per_page' => 6,
    'orderby' => 'date',
    'order' => 'DESC',
    'paged' => $_POST['paged'],
  ]);

  $response = '';

  if($ajaxposts->have_posts()) {
    while($ajaxposts->have_posts()) : $ajaxposts->the_post();
      $response .= get_template_part('parts/card', 'publication');
    endwhile;
  } else {
    $response = '';
  }

  echo $response;
  exit;
}
add_action('wp_ajax_weichie_load_more', 'weichie_load_more');
add_action('wp_ajax_nopriv_weichie_load_more', 'weichie_load_more');

0 vào truy vấn của bạn. Có thể là do WordPress làm rối số lượng vì nó cũng tính các bài đăng riêng tư hoặc nháp. Chúng được bao gồm trong số lượng truy vấn nhưng không được in trên trang

Phần kết luận

Tôi hy vọng bài viết của tôi rõ ràng và hữu ích cho bạn để tạo nút tải thêm ajax của riêng bạn. Bạn có thể chơi với điều này để cập nhật mã của chúng tôi thay vì nhấp vào nút tải thêm, bạn sẽ kích hoạt chức năng tải thêm của chúng tôi khi chúng tôi đến cuối trang. Đây là cách để tạo một cuộn vô hạn đơn giản mà không cần bất kỳ plugin nào

Đảm bảo cũng kiểm tra bài đăng khác của tôi về cách lọc bài đăng bằng ajax trong WordPress. Nó sử dụng thông tin đăng nhập giống như trong bài đăng này. Nó cũng có thể hữu ích nếu bạn đang cố gắng tạo các bộ lọc ajax cùng với ajax tải thêm

Chia sẻ trực tuyến

Nhận các bài đăng mới nhất và những thứ khác trong hộp thư đến của bạn

Nhận các bài báo hay nhất của chúng tôi ngay trong hộp thư đến của bạn. Chỉ một lần mỗi quý, bởi vì không ai thích thư rác

Đặt mua

Cảm ơn

Cảm ơn bạn đã đăng ký. Tin nhắn cảm ơn của chúng tôi đã sẵn sàng cho bạn

Đọc thêm các chủ đề liên quan?

Tạo trang web Đọc bài viết
Bộ lọc WordPress Các bài đăng có Ajax, không cần tải lại trang hoặc plugin Đọc bài viết

Để lại một câu trả lời

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Nhận xét *

Tên *

Email *

Trang mạng

Δ

25 Bình luận

Nikita nói.
Chào Bob.
Cảm ơn vì blog của bạn. Nó rất hữu ích.
Tôi cũng đang cố gắng hợp nhất tải thêm và lọc.
Nhưng không có gì trong nhận xét giúp tôi.
Tôi tải thêm mã.
*** đã xóa mã ***
Khi tôi nhấn bộ lọc danh mục, nó sẽ hiển thị đúng bài đăng. Nhưng khi tôi nhấn tải thêm, nó hiển thị bài đăng thứ hai từ tất cả các danh mục, không phải từ danh mục tôi đã chọn. Tôi không thể hiểu làm thế nào để sửa chữa nó
- Bob Weichler nói.
  Xin chào Nikita,
  Cảm ơn bạn đã nhận xét. Vui lòng bọc mã của bạn hoặc sử dụng Gist hoặc pastebin để chia sẻ mã của bạn. Tôi đã xóa mã của bạn khỏi phản hồi của bạn vì nó không thể đọc được và làm đầy phần bình luận, xin lỗi. Vui lòng dán lại (sử dụng ý chính/pastebin) và tôi sẽ xem nhanh với bạn.
  - Nikita nói.
    Xin chào Bob,
    Xin lỗi vì mã không đọc được.
    Bây giờ tôi tải nó lên pastebin.
    Đây là mã có ajax (lọc và tải thêm) – https. //pastebin. com/pVFTYtfS
    Và cái này cho hàm. php – https. //pastebin. com/UAVSwLBy
    - Bob Weichler nói.
      Cảm ơn bạn đã gửi nó ở định dạng này. Bạn cũng có một con sên dữ liệu trên các nút tải thêm trong html của mình phải không? . Nhưng đó là hai nút khác nhau. Có phải nút tải thêm cũng có danh mục hiện tại dưới dạng thuộc tính dữ liệu không?
      - Nikita nói.
        Ồ, tôi quên thêm dữ liệu danh mục. Nhưng tôi đã thêm nó ngay bây giờ.
        Và bây giờ tôi gặp vấn đề khác.
        1. Nút tải thêm hiện hiển thị tối đa 4 bài đăng khi tôi đang tải bài đăng từ tất cả các danh mục (nên có 9 bài đăng). Ẩn nút tải thêm sau khi 4 bài đăng được hiển thị.
        2. Khi tôi áp dụng bộ lọc (bất kỳ bộ lọc nào), các bài đăng chính xác giống nhau được hiển thị là mỗi bộ lọc.
        Liên kết đến tệp html – https. //pastebin. com/wCtNdKAp
      - Bob Weichler nói.
        Xin chào Nikita,
        Tôi chỉ có thể khuyên bạn nên tiếp tục kiểm tra tab mạng của mình trong trình duyệt để xem liệu bạn có đang thực sự gửi đúng dữ liệu từ Ajax tới tập lệnh PHP của mình và tới . Bạn cũng có thể thử các chức năng của mình. truy vấn php trước mà không có dữ liệu động (chỉ danh mục khó trong mã) và xem điều đó có cung cấp cho bạn mọi thứ chính xác không. Và tiếp tục từ đó.
      - Nikita nói.
        
        Xin chào Bob,
        Cảm ơn bạn.
        Tôi thử kiểm tra tất cả dữ liệu đang gửi. Khi tất cả sẽ hoạt động, tôi chia sẻ mã của mình ở đây.
Ohad nói.
mọi thứ được viết trước tiêu đề “Ẩn nút tải thêm khi không có thêm bài đăng nào” đều hoạt động tốt.
nhưng những gì bạn viết sau tiêu đề này gây ra lỗi "phân trang không được xác định", từ lệnh gọi ajax trên đối tượng dữ liệu.
vì vậy sau khi tôi nhấp vào nút, tôi gặp lỗi này trên bảng điều khiển.
“Lỗi tham chiếu chưa bắt được. phân trang không được xác định”
- ohad nói.
  thực sự tôi vừa thấy câu trả lời của bạn trên một trong những bình luận của bạn và nó hoạt động. cảm ơn rất nhiều bạn đã làm một bài viết tuyệt vời
Federico nói.
Hướng dẫn này chính là thứ tôi đang tìm kiếm.
Tuy nhiên, khi tôi nhấp vào nút “Tải thêm”, tôi gặp lỗi từ http. // trang web của tôi. cục bộ/wp-admin/admin-ajax. php 400 (Yêu cầu không hợp lệ)
- Federico nói.
  Không sao, tôi đã mắc lỗi đánh máy trong phần add_action gây ra lỗi 400.
  Cảm ơn vì đoạn mã tuyệt vời này.
Orjan nói.
Xin chào, Cảm ơn vì một plugin tuyệt vời.
Tôi đang gặp sự cố mặc dù khi tải 6 mục mới, nó cũng thêm “111111” ở cuối thẻ mới. Có vẻ như có liên quan đến phản hồi trong hàm.
Nếu tôi chạy phản hồi như thế này.
______82
nó hoạt động, nhưng trong trường hợp này tôi cần chạy nó như thế này.
______83
Và nó cũng trả về 1 giây nếu tôi làm điều gì đó như.
____84
Bất cứ ý tưởng những gì có thể là sai?
- Bob Weichler nói.
  Xin chào Orjan,
  Cảm ơn bạn đã gửi tin nhắn. Bạn có thể kiểm tra phản hồi của mình mẫu lưỡi kiếm của bạn đang trả về không?
Milito nói.
Chỉ muốn để lại nhận xét của tôi ở đây rằng điều này đã giúp tôi rất nhiều
Cảm ơn
Hans Dampf nói.
Tôi nhận được thông báo "phân trang không được xác định" khi sử dụng mã của bạn để ẩn nút tải thêm. Bất kỳ ý tưởng?
- Bob Weichler nói.
  Xin chào Hans, cảm ơn bạn đã trả lời. Tôi không chắc bạn đã triển khai ví dụ mã của mình như thế nào, nhưng quả thực 'trang' sẽ không được định nghĩa vì đoạn mã của tôi chỉ đưa ra một ví dụ (để cho bạn thấy logic cách tôi thực hiện và bạn có thể chỉnh sửa nó theo cách bạn cần . Tôi đã đặt nó làm chức năng riêng của nó, lấy phân trang làm tham số, như thế này
```
$('#load-more').on('click', function() {
  // We will do our magic here soon!
}
```
  0
  Và sau đó tôi chuyển trang đến chức năng của mình ở một nơi khác và thêm trang + 1
```
$('#load-more').on('click', function() {
  // We will do our magic here soon!
}
```
  1
- Brandon nói.
  Đây là những gì tôi đã làm để khắc phục điều này
  Đặt chức năng ajax của bạn như sau.
  dữ liệu. {
  hành động. ‘weichie_load_more’,
  được phân trang. trang hiện tại,
  },
  Sau đó, trong hàm ajax của bạn, hãy đặt câu lệnh if thành công cho hàm này.
  if(currentPage >= res. max) {
  // ẩn nội dung.
  }
Alessandro Amato nói.
Xin chào, cảm ơn vì bài viết, nó hoạt động hoàn hảo. Tuy nhiên, tôi muốn tiến thêm một bước nữa và kết hợp điều này với bộ lọc Ajax. Vì vậy, tôi đã có một bộ lọc bài đăng thu thập các bài đăng tùy thuộc vào danh mục, nhưng nếu tôi cũng thêm một nút tải thêm ở cuối, nó sẽ tải trang tiếp theo của các bài đăng bất kể danh mục trong cuộc gọi Ajax trước đó của tôi – bạn có tìm thấy một
Cảm ơn bạn
- Bob Weichler nói.
  Xin chào Alessandro, cảm ơn vì tin nhắn của bạn. Để kết hợp tải thêm với các bộ lọc, bạn cũng cần chuyển các bộ lọc hiện tại của mình vào chức năng tải thêm. Tôi sẽ cố gắng thêm một phần vào bài đăng này vào cuối tuần này. Nhưng đối với JS của bạn, nó sẽ trông như thế này
```
$('#load-more').on('click', function() {
  // We will do our magic here soon!
}
```
  2
  Và sau đó trong chức năng của bạn. php, bạn có thể bao gồm danh mục trong truy vấn của mình
```
$('#load-more').on('click', function() {
  // We will do our magic here soon!
}
```
  3
  - Alessandro Amato nói.
    Xin chào Bob,
    cảm ơn vì câu trả lời của bạn. Tôi đang thử điều này nhưng tôi thực sự không biết cách chuyển cat_id cho lệnh gọi ajax – bạn định nghĩa điều đó như thế nào?
    Tôi đang cố gắng vượt qua nó theo cách bạn đã làm trong bài lọc (cũng tuyệt vời btw. ), nhưng nó không được đặt lại/cập nhật khi tôi sử dụng chức năng lọc và nội dung thay đổi trong dom. Đây là cách tôi cấu trúc nó
```
$('#load-more').on('click', function() {
  // We will do our magic here soon!
}
```
    4
    và sau đó điều này trong chức năng. php
```
$('#load-more').on('click', function() {
  // We will do our magic here soon!
}
```
    5
    cái này hoạt động lúc đầu, nhưng ngay sau khi bạn xem hết kết quả, nút tải thêm sẽ bị ẩn (như lẽ ra phải vậy) và không bao giờ được đặt lại; . Không thể tìm ra những gì tôi đang làm sai
    - Bob Weichler nói.
      Xin chào Alessandro, Bạn thêm lớp 'ẩn' khi không còn bài đăng nào nữa. Nhưng bạn không bao giờ xóa lớp đó sau đó. Bạn nên thêm một câu lệnh khác để loại bỏ lớp ẩn nếu có bài đăng lại. (vì với ajax, trang không bao giờ tải lại để thiết lập lại trạng thái ban đầu)
```
$('#load-more').on('click', function() {
  // We will do our magic here soon!
}
```
      6
      Hy vọng nó giúp
      - Alessandro Amato nói.
        Này Bob - cảm ơn vì sự giúp đỡ. Rất tiếc là không, tôi vẫn chưa cố gắng làm cho hàm load_more hoạt động cùng với bộ lọc. Bạn có thể tự mình thử cập nhật bài đăng này không? . g. từ 'phim' đến 'nhiếp ảnh')
      - Bob Weichler nói.
        Xin chào Alessandro, tôi rất tiếc vì nó không hoạt động với bạn. Ví dụ trước của tôi với load_more_posts() trong phản hồi của chúng tôi là một ví dụ hoạt động về cách kết hợp bộ lọc phân trang & danh mục. Một cách khác để thực hiện việc này là thêm một trường ẩn vào trang của bạn để lưu danh mục đã lọc hiện tại. Khi bạn nhấp vào tải thêm, bạn có thể đọc giá trị từ trường nhập ẩn đó để bạn luôn tải thêm bài đăng từ danh mục đó.
        Hy vọng nó hữu ích.
      - Alessandro Amato nói.
        Cập nhật. tôi đã làm cho nó hoạt động.
        Đó là một điều nhỏ và cũng có thể là một bổ sung tốt cho bài đăng của bạn. Bạn cần đặt lại currentPage thành 1 trong chức năng lọc, nếu không nó sẽ tiếp tục cố tải các bài đăng từ trang 2/3/… 🙂
        Cám ơn vì tất cả
    - Kasia nói.
      Xin chào Alessandro. Tôi cũng đang cố gắng thêm nút tải thêm này vào trang danh mục. Tôi đã cập nhật mã của mình để khớp với những cập nhật bạn đã thực hiện nhưng tôi vẫn gặp sự cố. Bạn có thể cập nhật nơi bạn đã thêm thiết lập lại trang hiện tại không?
      
      Làm cách nào để đăng bài trong ajax trong WordPress?
      
      Tổng quan .
      
      Ghi vào hàng đợi một tệp Javascript nếu bạn chưa có
      
      Sử dụng wp_localize_script() để chuyển URL của quản trị viên-ajax của bạn. tập tin php
      
      Tạo cuộc gọi AJAX trong Javascript
      
      Móc một hàm bằng cách sử dụng tên hook thích hợp
      
      Viết mã chức năng có thể trả lại dữ liệu cho Javascript
      
      Ajax có sử dụng Nhận hoặc Đăng không?
      
      Đang gửi dữ liệu đến máy chủ . Nếu phương thức POST là bắt buộc, phương thức này có thể được chỉ định bằng cách đặt giá trị cho tùy chọn loại. By default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the type option.
      
      Làm cách nào để lấy dữ liệu trong WordPress bằng AJAX?
      
      Sử dụng AJAX trong WordPress .
      
      add_action( 'wp_enqueue_scripts', 'my_enqueue' );
      
      hàm my_enqueue() {
      
      wp_enqueue_script('like_post', get_template_directory_uri(). '/js/bài đăng thích. js', '1. 0', 1 );
      
      wp_localize_script('like_post', 'ajax_var', mảng(
      
      'url' => admin_url('admin-ajax. php'),
      
      'nonce' => wp_create_nonce('ajaxnonce')
      
      Phương thức GET và POST được sử dụng như thế nào trong Ajax?
      
      GET về cơ bản được sử dụng để nhận (lấy) một số dữ liệu từ máy chủ. Ghi chú. Phương thức GET có thể trả về dữ liệu được lưu trong bộ nhớ cache. POST cũng có thể được sử dụng để lấy một số dữ liệu từ máy chủ. Tuy nhiên, phương thức POST KHÔNG BAO GIỜ lưu trữ dữ liệu và thường được sử dụng để gửi dữ liệu cùng với yêu cầu

programming wordpress

WordPress ajax nhận bài đăng

Truy vấn WordPress để tải bài đăng từ loại bài đăng (tùy chỉnh)

Tải thêm chức năng ajax

Tải thêm bài viết với WordPress

Kết hợp tải nhiều hơn với Ajax và WordPress

Ẩn nút tải thêm khi không có thêm bài viết

Sử dụng phân trang WordPress với Offset

Các lỗi thường gặp với truy vấn ajax trong WordPress

Phần kết luận

Nhận các bài đăng mới nhất và những thứ khác trong hộp thư đến của bạn

Cảm ơn

Đọc thêm các chủ đề liên quan?

Để lại một câu trả lời

25 Bình luận

Làm cách nào để đăng bài trong ajax trong WordPress?

Ajax có sử dụng Nhận hoặc Đăng không?

Làm cách nào để lấy dữ liệu trong WordPress bằng AJAX?

Phương thức GET và POST được sử dụng như thế nào trong Ajax?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội