Ajax trong wordpress

Chào mừng bạn đến với bài viết chuyên sâu về ajax trong wordpress. Nếu bạn là một nhà phát triển WordPress, chắc hẳn bạn đã từng nghe đến Ajax. Đây là một kỹ thuật mạnh mẽ cho phép bạn tạo ra các ứng dụng web động và tương tác mà không cần tải lại toàn bộ trang. Tuy nhiên, đối với nhiều người mới bắt đầu, ajax trong wordpress có vẻ khá phức tạp và khó tiếp cận. Bản thân tôi cũng đã từng rất e ngại khi mới làm quen với kỹ thuật này.

Nhưng đừng lo lắng! Trong bài viết này, tôi sẽ chia sẻ những kiến thức và kinh nghiệm của mình để giúp bạn hiểu rõ hơn về ajax trong wordpress và cách sử dụng nó một cách hiệu quả nhất. Chúng ta sẽ cùng nhau khám phá từ những khái niệm cơ bản nhất đến các ví dụ thực tế, giúp bạn tự tin xây dựng những chức năng ấn tượng cho website của mình. Hãy cùng bắt đầu hành trình chinh phục ajax trong wordpress ngay thôi!

Sử dụng ajax để cải thiện trải nghiệm người dùng trên website WordPress

Ajax là gì?

Trước khi đi sâu vào ajax trong wordpress, chúng ta cần hiểu rõ khái niệm Ajax là gì. Ajax (Asynchronous JavaScript and XML) là một kỹ thuật cho phép trang web trao đổi dữ liệu với máy chủ ở chế độ nền, mà không cần tải lại toàn bộ trang. Điều này giúp cải thiện đáng kể trải nghiệm người dùng, vì trang web phản hồi nhanh hơn và mượt mà hơn. Ví dụ điển hình là khi bạn submit một form liên hệ mà không thấy trang web tải lại, hoặc khi bạn tìm kiếm trên một trang web và thấy kết quả hiển thị ngay lập tức khi bạn gõ từ khóa.

Để dễ hình dung hơn, hãy tưởng tượng bạn đang nói chuyện với một người bạn. Thay vì phải hét lên mỗi khi muốn hỏi điều gì đó, bạn có thể nói chuyện một cách nhẹ nhàng và liên tục. Ajax cũng tương tự như vậy, nó cho phép trình duyệt và máy chủ “nói chuyện” với nhau một cách liên tục và không làm gián đoạn trải nghiệm người dùng. Để hiểu rõ hơn về cách thức hoạt động của Ajax, bạn có thể tham khảo thêm tài liệu chính thức của Mozilla.

Tại sao nên sử dụng Ajax trong WordPress?

Vậy tại sao chúng ta nên sử dụng ajax trong wordpress? Dưới đây là một vài lý do chính:

• Cải thiện trải nghiệm người dùng: Như đã đề cập ở trên, Ajax giúp trang web phản hồi nhanh hơn và mượt mà hơn, mang lại trải nghiệm tốt hơn cho người dùng.
• Giảm tải cho máy chủ: Thay vì phải tải lại toàn bộ trang, Ajax chỉ tải những phần dữ liệu cần thiết, giúp giảm tải cho máy chủ và tăng tốc độ website.
• Tạo ra các chức năng tương tác: Ajax cho phép bạn tạo ra các chức năng tương tác như bình luận trực tiếp, tìm kiếm nâng cao, tải thêm dữ liệu khi cuộn trang,…

Nhờ những ưu điểm này, ajax trong wordpress đã trở thành một kỹ thuật không thể thiếu đối với các nhà phát triển web chuyên nghiệp. Nếu bạn muốn tạo ra những website WordPress hiện đại và hấp dẫn, việc nắm vững ajax trong wordpress là điều vô cùng quan trọng.

Hướng dẫn sử dụng Ajax trong WordPress

Để sử dụng được ajax trong wordpress, bạn cần có kiến thức cơ bản về HTML, CSS, JavaScript và PHP. Ngoài ra, bạn cũng cần làm quen với thư viện jQuery, vì nó sẽ giúp bạn thao tác với Ajax một cách dễ dàng hơn. Trong phần này, tôi sẽ hướng dẫn bạn cách sử dụng ajax trong wordpress thông qua một ví dụ cụ thể.

Ví dụ: Chúng ta sẽ tạo một button trên giao diện website. Khi người dùng click vào button này, 5 bài viết ngẫu nhiên sẽ được hiển thị mà không cần tải lại trang. Mỗi lần click, 5 bài viết ngẫu nhiên khác sẽ được tải về. Để thực hiện ví dụ này, chúng ta sẽ chia thành 2 phần:

• Frontend: Gửi yêu cầu đến server và hiển thị dữ liệu trả về.
• Backend: Nhận yêu cầu, xử lý dữ liệu và trả về cho frontend.

Phía frontend:

Đầu tiên, chúng ta cần tạo một button để người dùng click vào. Đoạn code HTML dưới đây sẽ tạo ra một button và một div để hiển thị các bài viết ngẫu nhiên:

<div class="content-widget">
    <button class="call-ajax">Bài viết ngẫu nhiên</button>
    <div class="display-post"></div>
</div>

Trong đó, <div class="display-post"></div> sẽ chứa nội dung trả về từ server.

Tiếp theo, chúng ta cần viết code JavaScript để gửi yêu cầu đến server và nhận dữ liệu trả về. Đoạn code dưới đây sử dụng jQuery để thực hiện việc này:

$(document).ready(function(){
    $('.call-ajax').click(function(){ // Khi click vào button thì sẽ gọi hàm ajax
        $.ajax({ // Hàm ajax
           type : "post", //Phương thức truyền post hoặc get
           dataType : "html", //Dạng dữ liệu trả về xml, json, script, or html
           url : '<?php echo admin_url('admin-ajax.php');?>', // Nơi xử lý dữ liệu
           data : {
                action: "random", //Tên action, dữ liệu gởi lên cho server
           },
           beforeSend: function(){
                // Có thể thực hiện công việc load hình ảnh quay quay trước khi đổ dữ liệu ra
           },
           success: function(response) {
                //Làm gì đó khi dữ liệu đã được xử lý
                $('.display-post')(response); // Đổ dữ liệu trả về vào thẻ <div class="display-post"></div>
           },
           error: function( jqXHR, textStatus, errorThrown ){
                //Làm gì đó khi có lỗi xảy ra
                console.log( 'The following error occured: ' + textStatus, errorThrown );
           }
       });
    });
});

Thông thường, đoạn code này sẽ được đặt trong file footer.php của theme.

Trong đoạn code trên, chúng ta sử dụng hàm $.ajax() của jQuery để gửi yêu cầu đến server. Các tham số quan trọng bao gồm:

• type: Phương thức gửi yêu cầu (POST hoặc GET).
• dataType: Dạng dữ liệu trả về (HTML, JSON, XML,…).
• url: URL của file xử lý dữ liệu trên server (trong WordPress, chúng ta sử dụng admin-ajax.php).
• data: Dữ liệu gửi lên server (trong ví dụ này, chúng ta gửi một action có tên là “random”).
• success: Hàm được gọi khi yêu cầu thành công.
• error: Hàm được gọi khi có lỗi xảy ra.

Đoạn code trên sẽ gửi dữ liệu lên server dưới dạng key-value. Trong trường hợp này, chúng ta gửi lên một action có tên là ‘random‘.

Phía backend:

Bây giờ, chúng ta cần viết code PHP để xử lý yêu cầu trên server và trả về dữ liệu cho frontend. Đoạn code dưới đây sẽ được đặt trong file functions.php của theme:

<?php 
 add_action('wp_ajax_random', 'random_function');
 add_action('wp_ajax_nopriv_random', 'random_function');
 function random_function() {
    echo '<ul>';
       $getposts = new WP_query(); $getposts->query('post_status=publish&showposts=5&orderby=rand');
       global $wp_query; $wp_query->in_the_loop = true;
       while ($getposts->have_posts()) : $getposts->the_post();
          echo '<li>';
          echo '<a href="'.get_the_permalink().'">'.get_the_title().'</a>';
          echo '</li>';
       endwhile; wp_reset_postdata();
    echo '</ul>';
die(); }
?>

Trong đoạn code trên, chúng ta sử dụng hai action hook của WordPress:

• wp_ajax_{tên action}: Action này được gọi khi người dùng đã đăng nhập.
• wp_ajax_nopriv_{tên action}: Action này được gọi khi người dùng chưa đăng nhập.

Trong ví dụ này, chúng ta sử dụng action “random”, vì vậy chúng ta cần sử dụng hai hook wp_ajax_random và wp_ajax_nopriv_random. Bạn có thể tìm hiểu thêm về các action hook của Ajax trong WordPress tại đây.

Hàm random_function() sẽ được gọi khi một trong hai action trên được kích hoạt. Hàm này sẽ truy vấn 5 bài viết ngẫu nhiên từ cơ sở dữ liệu và trả về dưới dạng danh sách HTML. Cuối cùng, chúng ta sử dụng hàm die() để kết thúc quá trình xử lý và trả về dữ liệu cho frontend.

Sau khi đã hoàn thành code, bạn có thể kiểm tra kết quả trên giao diện website. Nếu mọi thứ hoạt động đúng, bạn sẽ thấy một button “Bài viết ngẫu nhiên”. Khi bạn click vào button này, 5 bài viết ngẫu nhiên sẽ được hiển thị mà không cần tải lại trang. Mỗi lần click, 5 bài viết ngẫu nhiên khác sẽ được tải về.

Kết quả trả về sẽ có dạng như sau:

<div class="display-post">
    <ul>
       <li><a href="link">text text</li>
       <li><a href="link">text text</li>
       <li><a href="link">text text</li>
       <li><a href="link">text text</li>
       <li><a href="link">text text</li>
    </ul>
</div>

Để tối ưu hiệu suất WordPress, bạn có thể tham khảo bài viết Tối ưu hình ảnh WordPress 2026: Bí kíp bứt phá tốc độ cực đỉnh.

Tóm lại:

Trong bài viết này, tôi đã hướng dẫn bạn cách sử dụng ajax trong wordpress một cách cơ bản nhất. Hy vọng rằng nó sẽ giúp bạn hiểu rõ hơn về kỹ thuật này và áp dụng nó vào các dự án của mình. Trong các bài viết tiếp theo, tôi sẽ chia sẻ thêm những ví dụ thực tế và nâng cao hơn về ajax trong wordpress. Hãy nhớ theo dõi blog của tôi để không bỏ lỡ những kiến thức hữu ích nhé.

Cảm ơn bạn đã dành thời gian đọc bài viết này. Chúc bạn thành công trên con đường trở thành một nhà phát triển WordPress chuyên nghiệp!

Từ khoá chính: ajax trong wordpress