WordPress thay đổi custom field bằng wp_ajax

Mặc dù cách thêm và quản lý custom field trong WordPress đã khá đơn giản, nhưng nó cũng có một số hạn chế. Một trong những hạn chế đó là bạn không thể thay đổi giá trị của custom field một cách động trong WordPress. Điều này có nghĩa là nếu bạn muốn thay đổi giá trị của custom field, bạn sẽ phải thực hiện việc này thủ công.

Tuy nhiên, với wp_ajax, bạn có thể thay đổi giá trị của custom field một cách động trong WordPress. Wp_ajax là một tính năng trong WordPress cho phép bạn thực hiện các tác vụ AJAX trong WordPress một cách dễ dàng và hiệu quả hơn.

Tình huống

Dựa trên giả định rằng trang từ thiện smileeyecharity.org có các trường thông tin tùy chỉnh như “đếm like” khi bấm vào nút “like” sẽ gọi lên server và thay đổi giá trị trong Database.

Tạo file: js/ajax_my_like_post.js

// Sử dụng jQuery khi tài liệu HTML đã sẵn sàng.
jQuery(document).ready(function($) {
    // Gắn sự kiện click cho nút like có class là 'like-button1'.
    $('.like-button1').click(function() {
        // Lấy giá trị id của bài đăng từ thuộc tính data-id của nút like.
        var post_id = $(this).data('id');
        // Lưu trữ đối tượng jQuery của nút like này để dùng sau.
        var $this = $(this);

        // Thực hiện AJAX POST request.
        $.ajax({
            type: 'post', // Phương thức HTTP là POST.
            url: myAjax.ajaxurl, // URL xử lý AJAX request, giá trị này được lấy từ đối tượng myAjax.
            data: {
                action: 'my_like_post', // Hành động cần thực hiện.
                post_id: post_id // ID của bài đăng mà người dùng muốn like.
            },
            success: function(response) {
                // Khi AJAX call thành công, cập nhật nội dung của nút like.
                // Hiển thị số lượt like mới (giả sử rằng 'response' là số lượt like mới).
                $this.text('Like (' + response + ')');
            }
        });
        // Tránh việc trình duyệt thực hiện hành động mặc định khi click vào nút.
        return false;
    });
});

Tạo file ajax_my_like_post.php

function my_like_post() {
    if (isset($_POST['post_id'])) {
        $post_id = $_POST['post_id'];
        $likes = get_post_meta($post_id, 'like_count', true) ?: 0;
        $likes++;
        update_post_meta($post_id, 'like_count', $likes);
        echo $likes;
    }
    wp_die();
}
add_action('wp_ajax_my_like_post', 'my_like_post');
add_action('wp_ajax_nopriv_my_like_post', 'my_like_post');

// Tạo một hàm có tên là add_custom_js
function add_custom_js() {
    // Sử dụng hàm wp_enqueue_script để thêm một tập tin JavaScript vào trang web
    // 'ajax_my_like_post' là tên định danh cho tập tin script
    // get_stylesheet_directory_uri() . '/js/ajax_my_like_post.js' là đường dẫn tới tập tin JavaScript cần thêm
    // array('jquery') nghĩa là tập tin JavaScript này phụ thuộc vào thư viện jQuery
    // '1.0' là phiên bản của tập tin script, có thể dùng để quản lý bộ nhớ cache
    // true là cờ để quyết định tập tin JavaScript này được thêm vào cuối trang (trước thẻ đóng </body>) hay không
    wp_enqueue_script('ajax_my_like_post', get_stylesheet_directory_uri() . '/js/ajax_my_like_post.js', array('jquery'), '1.0', true);

    // Sử dụng hàm wp_localize_script để tạo một biến JavaScript có thể truy cập được từ tập tin 'ajax_my_like_post'
    // 'myAjax' là tên của biến JavaScript
    // array('ajaxurl' => admin_url('admin-ajax.php')) là mảng chứa dữ liệu mà biến 'myAjax' sẽ chứa
    // Ở đây, 'ajaxurl' chứa URL tới tập tin xử lý AJAX trong quản trị WordPress
    wp_localize_script('ajax_my_like_post', 'myAjax', array('ajaxurl' => admin_url('admin-ajax.php')));
}

// Gắn hàm add_custom_js vào hook 'wp_enqueue_scripts'
// Điều này có nghĩa là hàm add_custom_js sẽ được gọi khi WordPress thực hiện thêm tập tin script vào trang
add_action('wp_enqueue_scripts', 'add_custom_js');

Gọi trong functions.php

include_once 'ajax_my_like_post.php';

Tạm Kết:

Qua bài viết này, chúng ta đã cùng nhau khám phá và thực hành quy trình thay đổi giá trị của custom field trong WordPress sử dụng công nghệ AJAX thông qua hàm wp_ajax. Những bước cơ bản từ việc tạo custom field, viết hàm xử lý AJAX trong WordPress, cho đến cách gửi dữ liệu từ phía client và cập nhật thông tin mà không cần tải lại trang, tất cả đã được hướng dẫn chi tiết và cụ thể. Hy vọng, qua hướng dẫn này, bạn có thể dễ dàng áp dụng và mở rộng để cải thiện trải nghiệm người dùng trên website của mình, mang đến những tương tác mượt mà và hiện đại hơn. WordPress với hệ thống hook và API phong phú luôn mở ra không gian sáng tạo không giới hạn cho những người phát triển. Hãy tiếp tục theo dõi và đón nhận những bài viết tiếp theo để cùng nhau học hỏi và phát triển.