Xoá bài viết trong trang quản trị WordPress với AJAX

Ngày đăng: 05 - 04 - 2022 Lượt xem: 124 lượt

Bạn có muốn xoá bài viết trong trang quản trị WordPress mà không cần tải lại trang không? Nếu có, thì bài viết này là dành cho bạn. Mình sẽ hướng dẫn bạn cách sử dụng AJAX để xoá bài viết trong trang quản trị WordPress.

Đây là kết quả mà bạn sẽ đạt được:

Xoá bài viết trong trang quản trị WordPress với AJAX

Bắt sự kiện khi người dùng click xoá bài viết với jQuery

Đoạn code dưới đây sẽ bắt được sự kiện khi người dùng thực hiện hành động xoá bài viết. Hãy bỏ nó vào file functions.php của theme hoặc child theme.

add_action( 'admin_footer', 'hk_extend_admin_js' );
function hk_extend_admin_js() {
    ob_start(); ?>

    <script>
    jQuery(function ($) {
        $("body.post-type-post .row-actions .trash a").click(function (e) {
            e.preventDefault();

            var url = new URL($(this).attr("href")),
                nonce = url.searchParams.get("_wpnonce"), // MUST for security checks
                row = $(this).closest("tr"),
                postID = url.searchParams.get("post"),
                postTitle = row.find(".row-title").text();

            row.css("background-color", "#ffafaf").fadeOut(300, function () {
                row.removeAttr("style")
                    .html(
                        '<td colspan="5">Post <strong>' +
                            postTitle +
                            "</strong> moved to the Trash.</td>"
                    )
                    .show();
            });

            $.ajax({
                method: "POST",
                url: "",
                data: {
                    action: "moveposttotrash",
                    post_id: postID,
                    _wpnonce: nonce,
                },
            });
        });
    });
    </script>

    <?php
    $output = ob_get_contents();
    ob_clean();
    ob_end_flush();
    echo $output;
}

Ở đây mình sử dụng action hook admin_footer để thêm đoạn code jQuery trên vào footer trang quản trị.

Tại dòng thứ 7, bạn có thể thay thế .post-type-post thành tên custom post type phù hợp. Cụ thể là: .post-type-{POST TYPE NAME}.

Xử lý AJAX

Đoạn code dưới đây cũng được bỏ vào file functions.php:

add_action('wp_ajax_moveposttotrash', function() {
    check_ajax_referer( 'trash-post_' . $_POST['post_id'] );
    wp_trash_post( $_POST['post_id'] );

    die();
});

Ở đây, mình chỉ sử dụng hook wp_ajax_{ACTION}. Không sử dụng hook wp_ajax_nopriv_{ACTION} Bởi vì chức năng ở đây chỉ được sử dụng bởi quản trị viên.

Bạn cũng có thể nhận thấy rằng mình đã không chuyển $_POST['post_id'] vào hàm intval() vì không cần thiết. Thay vào đó, hàm get_post() bên trong wp_trash_post() sẽ thực hiện điều đó.

Kết Luận

Vậy là xong. Bạn đã có thể xoá bài viết ngay lập tức mà không cần phải đợi load lại trang. Bài viết này sẽ phần nào giúp bạn hiểu hơn về các hook trong WordPress và cách áp dụng AJAX trong các trường hợp cụ thể.

Nếu bài viết này hữu ích và giúp tiết kiệm được thời gian của bạn, hãy giúp mình chia sẻ nó. Ngoài ra nếu bạn quan tâm đến các chủ đề tương tự như vậy, hãy đọc các bài viết Thủ thuật WordPress khác và follow Fanpage để không bỏ lỡ bài viết mới từ mình nhé.

0 0 votes
Đánh giá bài viết

guest
0 Góp ý
Inline Feedbacks
View all comments

Bài viết liên quan

Genesis Framework là gì? Top 6 Genesis Framework tốt nhất hiện nay

Genesis Framework là gì? Top 6 Genesis Framework tốt nhất hiện nay

29 - 09 - 2022

Genesis Framework là gì? Đây là một khung Theme Framework được StuidoPress phát triển. Genesis Framework đem lại cho...

Hướng dẫn 2 cách trỏ domain về host cPanel đơn giản nhất

Hướng dẫn 2 cách trỏ domain về host cPanel đơn giản nhất

13 - 09 - 2022

Trỏ domain về host cPanel là điều mà các bạn lập trình viên cần phải thực hiện. Bởi vì...

Cách chèn Google Form vào WordPress chi tiết nhất

Cách chèn Google Form vào WordPress chi tiết nhất

12 - 09 - 2022

Google Forms là một công cụ vô cùng tuyệt vời để thu thập thông tin của người dùng thông...

Top 10 Các Widget hay cho WordPress

Top 10 Các Widget hay cho WordPress

10 - 09 - 2022

Các Widget hay cho WordPress là điều mà rất nhiều bạn lập trình viên quan tâm. Việc lựa chọn...

3 cách thay đổi Favicon trong WordPress dễ thực hiện nhất

3 cách thay đổi Favicon trong WordPress dễ thực hiện nhất

17 - 08 - 2022

Thay đổi favicon trong WordPress là điều vô cùng cần thiết khi bạn setup một website mới. Favicon đem...

Hướng dẫn chuyển từ HTTP sang HTTPs chi tiết nhất

Hướng dẫn chuyển từ HTTP sang HTTPs chi tiết nhất

16 - 08 - 2022

Chuyển từ HTTP sang HTTPs là một điều gần như bắt buộc cho các website WordPress hiện nay. Chuyển...

0
Would love your thoughts, please comment.x