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

Ajax wordpress là gì ?

Ajax là một kỹ thuật trong javaScript, Ajax giúp việc truyền dữ liệu từ backend ra frontend hoặc ngược lại mà không cần load trang. Ví dụ như phần search ajax trang chủ của mình và phần bộ lọc website.

Trên trang chủ của mình các bạn sẽ thấy phần tab mẫu website click chuột mà không load lại trang, hoặc phần tìm kiếm của website mình nó cũng tự động load những kết quả khi các bạn đánh từ khoá… Tất cả những chức năng đó được mình đang sử dụng ajax để tối ưu website wordpress và tăng trải nghiệm người dùng cho website.

Tại sao phải dùng ajax wordpress cho website của bạn ?

AJAX giúp load dữ liệu mà không cần tải lại toàn bộ trang web. Vì vây, có thể giúp website một cách nhanh chóng và hữu ích rất nhiều đối với người dùng. Ngoài ra ajax còn xử lí được độ sâu của DOM trong website, giúp tăng điểm đánh giá của google page speed insight nhằm tăng điểm đánh giá của google.

Hướng dẫn sử dụng ajax trong website wordpress

Để hiểu và làm được ajax trong wordpress bạn cần có kiến thức cơ bản về javascript, jquery và một tý kiến thức về lập trình theme wordpress nha!.

Để các bạn dễ hình dung và thực hành, mình sẽ đưa ra một ví dụ cụ thể như sau: Trên giao diện website sẽ hiện 1 button, khi click vào button đó nó sẽ hiện ra 5 bài viết ngẫu nhiên, mỗi lần click lại button đó nó sẽ hiện ra 5 bài khác và tất nhiên nó sẽ ko load lại trang.

Chúng ta sẽ chia ra làm 2 luồng xử lí dữ liệu

• Phía Front End xử lí bằng code javascript (bạn chèn code trong thẻ scripts)
• Phía Backend xử lí code PHP  (bạn chèn code vào trong file functions.php của child theme).

Đầu tiên chúng ta hình dung là khi bạn click vào bất cứ đâu hoặc click vào một nút nào đó thì nó sẽ xử lí ở javascript để truyền dữ liệu qua admin ajax (code php) và ở mục backend này chúng ta sẽ lấy dữ liệu và trả ngược lại cho front end (javascript) rồi hiển thị ra kết quả cho chúng ta.

Như các nút mẫu website ở trang chủ của mình khi click vào nó sẽ bắt sự kiện chạy javascript (code js).

Code javascript để xử lí 

$(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').html(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 );
         }
     });
  });
});

Chúng ta sẽ chú ý các mục sau:

• $(‘.call-ajax’).click(function(){} -> sự kiện click
• url : admin_url(‘admin-ajax.php’) -> cái này có sẵn trong wp-admin rồi chèn url giống vậy là được nhé
• success -> Trả kết quả lấy từ backend và hiển thị ra HTML

ở mục $(‘.call-ajax’).click(function(){} là khi chúng ta click cái nút đó nó sẽ thực thi hành động đó là gửi dữ liệu qua URL admin_url(‘admin-ajax.php’) và ở phần success nó sẽ lấy kết quả từ backend (code PHP) và hiển thị lại qua front-end bằng cách $(‘.display-post’).html(response).

 

Code xử lí backend (PHP)

 

<?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(); }
?>

Giải thích:

• wp_ajax_{tên action} và wp_ajax_nopriv_{tên action}: 2 cái này là 2 action dùng để thực thực thì ajax trong wordpress. Ở phía front end mình gởi lên action là “random” vì thế ở trường hợp này mình phải dùng: wp_ajax_random, wp_ajax_nopriv_random. Bạn có thể đọc tài liệu về các action của ajax trong wordpress
• random_function là hàm dùng để xử lý dữ liệu. Hàm này sẽ được móc vào 2 action trên => add_action(‘wp_ajax_random’, ‘random_function’); và add_action(‘wp_ajax_nopriv_random’, ‘random_function’);

Sau khi code thành công nó sẽ trả về kết quả cho chúng ta 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>

Cảm ơn các bạn đã xem bài viết của mình nếu có chổ nào khó hiểu thì nhắn tin cho mình hỗ trợ cho nhé.