Làm cách nào để đăng bài trong ajax trong WordPress?
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
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 đăngBâ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!
}
9quả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 chúng tôi 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
// Nothing changed in our JS. This is just to show which part I'm talking about.
$.ajax[{
...
dataType: 'html',
...
success: function [res] {
$['.publication-list'].append[res];
}
}];
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ỳ js nào bên trong đối tượng ajax của chúng ta, nhưng vì _____________3 – rõ ràng – là một hàm, nên chúng ta 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];
}
}];
}];
_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
$.ajax[{
type: 'POST',
url: '/wp-admin/admin-ajax.php',
dataType: 'json', // 'publications',
'posts_per_page' => 6,
'orderby' => 'date',
'order' => 'DESC',
'paged' => $_POST['paged'],
]];
$response = '';
$max_pages = $ajaxposts->max_num_pages;
if[$ajaxposts->have_posts[]] {
ob_start[];
while[$ajaxposts->have_posts[]] : $ajaxposts->the_post[];
$response .= get_template_part['parts/card', 'publication'];
endwhile;
$output = ob_get_contents[];
ob_end_clean[];
} else {
$response = '';
}
$result = [
'max' => $max_pages,
'html' => $output,
];
echo json_encode[$result];
exit;
}
add_action['wp_ajax_weichie_load_more', 'weichie_load_more'];
add_action['wp_ajax_nopriv_weichie_load_more', 'weichie_load_more'];
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 của mình
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 trangSau đó, 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
// Nothing changed, just zooming in on our final result array
$result = [
'max' => $max_pages,
'html' => $output,
];
echo json_encode[$result];
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
$.ajax[{
...
success: function [res] {
if[paged >= res.max] {
$['#load-more'].hide[];
}
$['.publication-list'].append[res.html];
}
}];
'res' của chúng tôi 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 bây giờ sẽ giữ 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 chúng tôi chưa đạt đến số lượng trang tối đaSử 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ì
$recent_publications = new WP_Query[[
'post_type' => 'publications',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'DESC',
'fields' => 'ids',
]];
$ajaxposts = new WP_Query[[
'post_type' => 'publications',
'posts_per_page' => 6,
'orderby' => 'date',
'order' => 'DESC',
'paged' => $_POST['paged'],
'post__not_in' => $recent_publications->get_posts[]
]];
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 cách phân 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 trangPhầ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
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ì bài viết 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 các bình luận 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ình luận của bạn. 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
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”
Federico nói.
Hướng dẫn này chỉ là những gì 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ệ]
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
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'];
2
nó hoạt động, nhưng trong trường hợp này tôi cần chạy nó như thế này
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'];
3
Và nó cũng trả về 1 giây nếu tôi làm điều gì đó như
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'];
4Bất cứ ý tưởng những gì có thể là sai?
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
Thanks
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!
}
0Và 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, đặt như sau
dữ liệu. {
hoạt động. 'weichie_load_more',
phân trang. trang hiện tại,
},
Sau đó, trong hàm ajax của bạn, hãy đặt câu lệnh thành công nếu thành công này
if[currentPage >= res. tối đa] {
// ẩ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!
}
2Và 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!
}
3Alessandro Amato nói.
Chào Bob,
cảm ơn 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 xác định đ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!
}
4và sau đó điều này trong chức năng. php
$['#load-more'].on['click', function[] {
// We will do our magic here soon!
}
5cá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!
}
6Hy 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ó giúp
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 để lấy dữ liệu từ AJAX trong WordPress?
Cách sử dụng Ajax trong WordPress. Đúng cách [+ Ví dụ] .
Bước 1. Đăng ký tệp JavaScript
Bước 2. Truyền dữ liệu từ tệp PHP sang tệp JavaScript
Bước 3. Gửi yêu cầu Ajax đến máy chủ
Bước 4. Chức năng chương trình PHP
Bước 5. Xử lý dữ liệu PHP trong JavaScript
AJAX có thể sử dụng bài đăng không?
dữ liệu. Một đối tượng đơn giản hoặc chuỗi được gửi đến máy chủ với yêu cầu. sự thành công. Hàm gọi lại được thực thi nếu yêu cầu thành công. nó lấy dữ liệu trả về làm đối số. Nó cũng được chuyển trạng thái văn bản của phản hồi
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
AJAX có sử dụng Nhận hoặc Đăng không?
Theo mặc định, các yêu cầu Ajax được gửi bằng phương thức GET HTTP . 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.