Bài viết này sẽ hướng dẫn bạn cách triển khai một đoạn Ajax đơn giản trong WordPress: lấy bài viết mới nhất của một chuyên mục (category) cụ thể và trả về dưới dạng JSON.
1. Viết hàm xử lý Ajax trong WordPress
Thêm đoạn mã sau vào file functions.php của theme hoặc plugin bạn đang phát triển:
add_action('wp_ajax_latest', 'latest_post_cat');
add_action('wp_ajax_nopriv_latest', 'latest_post_cat');
function latest_post_cat() {
query_posts('posts_per_page=1&cat=' . $_POST['cat']);
if (have_posts()) {
while (have_posts()) { the_post();
$data[] = array(
'cat_name' => get_cat_name($_POST['cat']),
'cat_link' => get_category_link($_POST['cat']),
'title' => get_the_title(),
'link' => get_permalink(),
);
}
}
wp_send_json_success($data);
die();
}
Trong đó:
wp_ajax_latestdùng cho người dùng đã đăng nhập.wp_ajax_nopriv_latestdùng cho người dùng chưa đăng nhập.'latest'là tên action mà bạn sẽ gửi từ JavaScript để gọi đến hàm xử lý.
2. Gửi yêu cầu Ajax bằng JavaScript (jQuery)
Bạn có thể sử dụng jQuery để gửi yêu cầu đến admin-ajax.php — file mặc định WordPress dùng để tiếp nhận xử lý Ajax.
$.ajax({
type: 'post',
dataType: 'json',
url: '<?php echo admin_url('admin-ajax.php'); ?>',
data: {
'action': 'latest',
'cat': '1'
},
success: function(response) {
if (response.success) {
document.write(
'<a href="' + response.data[0].cat_link + '">' +
response.data[0].cat_name + '</a> ' +
'<a href="' + response.data[0].link + '">' +
response.data[0].title + '</a>'
);
}
}
});
Lưu ý quan trọng
- Đảm bảo
admin_url('admin-ajax.php')trả về đúng URL trong môi trường frontend. - Biến
cattrongdatanên là kiểu chuỗi để đảm bảo tính tương thích khi truyền dữ liệu. - Trong môi trường thực tế, bạn nên dùng
sanitize_text_field()hoặc các hàm lọc dữ liệu khác để xử lý$_POSTđầu vào, tránh lỗ hổng bảo mật. - Không nên dùng
query_posts()trong code thật — thay vào đó hãy dùngWP_Queryđể an toàn và linh hoạt hơn.
Kết luận
Việc sử dụng Ajax trong WordPress giúp cải thiện trải nghiệm người dùng và tăng tính tương tác cho website. Với vài dòng PHP và jQuery cơ bản, bạn đã có thể kết nối dữ liệu backend một cách trực tiếp mà không cần tải lại trang. Từ ví dụ này, bạn có thể mở rộng sang các chức năng nâng cao hơn như lọc bài viết theo tag, hiển thị số lượt thích, hoặc xử lý form đăng ký.
Chúc bạn triển khai thành công và áp dụng Ajax hiệu quả cho dự án của mình!
Bình luận