Sử dụng Ajax trong WordPress

Ajax (Asynchronous JavaScript and XML) là một công nghệ giúp bạn gửi và nhận dữ liệu từ máy chủ mà không cần tải lại trang. Trong WordPress, Ajax đặc biệt hữu ích khi bạn muốn xây dựng tính năng tương tác như lọc bài viết, tải thêm nội dung, tìm kiếm tức thời, hoặc cập nhật dữ liệu người dùng.

Sử dụng Ajax trong WordPress

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_latest dùng cho người dùng đã đăng nhập.
  • wp_ajax_nopriv_latest dù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 cat trong data nê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ùng WP_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


  • Không có bình luận.

Init Toolbox

Nhấn Ctrl + \ trên máy tính, hoặc vuốt sang trái ở bất kỳ đâu trên mobile.

Đăng nhập





Đang tải...