Sử dụng ajax trong wordpress

Ajax là công nghệ cho phép bạn cập nhật nội dung động của trang mà không cần load lại trang trên trình duyệt. Ví dụ google docs có tính năng ajax để tự động lưu tài liệu sau một vài phút.

Trong khi có rất nhiều cách sử dụng ajax trong wordpress, nhưng có một cách duy nhất được hỗ trợ bởi wordpress đã sử dụng quen thuộc tại giao diện wordpress admin. Vì nó là một phần tính năng của wordpress, với nhiều tùy chọn và những cập nhật mới sẽ phù hợp với công nghệ mới hiện nay.

Ajax là gì?

Nếu bạn chưa làm việc với ajax trong trang của mình, trước khi đọc bài viết này bạn có thể xem qua cách hoạt động những khái niệm trên Wikipedia giải thích về ajax. Một số hướng dẫn khác bạn cũng nên tham khảo ví dụ: http://www.tizag.com/ajaxTutorial/

Tuy nhiên kiến thức thuần gốc về ajax hiếm khi bạn sử dụng, viết nhiều code trong khi ajax jquery thâu tóm chỉ một dòng cũng thực hiện một công việc tương tự.

Bản chất ajax là kết hợp của mã HTML, CSS và javascript cho phép bạn gửi dữ liệu đến script và tại nơi đó sẽ nhận và sử lý dữ liệu trả nội dung quay trở về cho người gửi, từ đó bạn không cần load lại trang mà có thể thay đổi dữ liệu động.

Nếu bạn tạo một trang trên website mà user có thể sửa thông tin profile của họ, bạn có thể sử dụng Ajax để cập nhật thông tin người dùng, không cần sử dụng form submit thông thường như trước đây. Bằng công nghệ này có thể sửa một phần dữ liệu nhanh chóng ngay lập tức.

Bạn tưởng tượng như thế này, trên form người dùng đã hoàn tất nhập dữ liệu, khi người dùng click vào nút, dữ liệu này sẽ gửi đi thông qua ajax đến script sử lý, nơi lưu dữ liệu sau đó trả về chuỗi thông báo hoàn tất “data saved.”. Và bạn có thể đưa tin nhắn thông báo cho người dùng bằng cách chèn nó lên trang.

Để khám phá đầy đủ những tiềm năng của ajax bạn sẽ cần thành thạo Javascript (jQuery là đủ), cũng như HTML, CSS và PHP lập trình web động.

Ajax hỗ trợ trong wordpress

Bởi vì tính năng ajax đã được sử trong wordpress back end, hỗ trợ rất dễ dàng tất cả những gì bạn cần làm là sử dụng ajax api của wordpress, chạy trên file admin-ajax.php trong thư mục wp-admin. Tên file có thể gây mâu thuẫn, tò mò nhưng những gì wordpress để lại sẽ giúp bạn ít nhiều, chúng ta sẽ sử dụng admin-ajax.php cho phía back-end và người dùng tương tác với nó bằng ajax.

Mỗi yêu cầu gửi đi, sẽ cung cấp dữ liệu dạng phương thức GET hoặc POST gọi là action. Dựa vào action code trong admin-ajax.php tạo 2 hook wp_ajax_my_action và wp_ajax_nopriv_my_action trong đó ‘my_action’ là biến trong mảng dữ liệu GET, POST.

Thêm hàm liên kết vào hook đầu tiên nghĩa là hàm sẽ kích hoạt khi người dùng đó đăng nhập vào hệ thống wordpress, trường hợp này sử dụng khi bạn tương tác với dữ liệu liệu nhạy cảm, yêu cầu thông tin của người dùng. Ngược lại với hook thứ 2 dành cho thiết kế riêng cho mọi người dung.

Thực thi Ajax trong wordpress

Ví dụ chúng ta tạo link cho phép người dùng vote bài viết, nếu user bật sử dụng javascript, liên kết sẽ sử lý dữ liệu động ajax, còn không hiển thị liên kết trang thông thường. Bạn có thể đặt link votes gần tiêu đề bài viết trong file single.php, thêm dòng code sau trong vòng lặp:

<?php
   $votes = get_post_meta($post->ID, "votes", true)
   $votes = ($votes == "") ? 0 : $votes;
?>
This post has <div id='vote_counter'><?php echo $votes ?></div> votes<br>

<?php
   $nonce = wp_create_nonce("my_user_vote_nonce");
    $link = admin_url('admin-ajax.php?action=my_user_vote&post_id='.$post->ID.'&nonce='.$nonce);
    echo '<a class="user_vote" data-nonce="' . $nonce . '" data-post_id="' . $post->ID . '" href="' . $link . '">vote for this article</a>';
?>

Lưu dữ liệu ‘votes’ gắn vào meta key của post. Meta field ‘votes’ sẽ lưu tổng số votes người dùng bình chọn cho bài viết. Nếu giá trị này chưa có bạn hiển thị chuỗi ban đầu bằng 0.

Chúng ta tạo link thông thường với thẻ A, chứa liên kết vào file admin-ajax.php trong đó xác định thông tin ‘action’ thực thi và các tham số sử dụng cho action như chỉ số post_id. Ở đây thiết lập chút bảo mật với tham số ‘nonce’ là chuỗi mã hóa nhận dạng giữa nơi gọi và nơi nhận cho sự kiện này, tránh hacker lợi dụng.

Để khởi tạo javascript cho liên kết votes, chúng ta thêm class ‘user_vote’ sẽ dùng để tạo sự kiện và thuộc tính data-post_id chứa ID của post. Những thuộc tính này sẽ tiện lấy bởi code javascript.

Sử lý action không có Javascript

Nếu bạn click vào link ngay bây giờ, bạn sẽ được chuyển đến trang admin-ajax.php và nội dung script trả về chuỗi 0. Tùy thuộc vào phiên bản wordpress, có thể trả về -1. Điều này nghĩa là không có hàm action được tìm thấy hoặc sử dụng hàm wordpress trong action bất hợp lệ, vd: gọi update_post_meta với anonymous. Trong plugin/theme của bạn tạo hàm thực thi action và gắn vào hook với tên action ‘my_user_vote’ trên địa chỉ URL bởi tham số action.

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
      exit("No naughty business please");
   }   

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == '') ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

   if($vote === false) {
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }
   else {
      $result['type'] = "success";
      $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();

}

function my_must_login() {
   echo "You must log in to vote";
   die();
}

Như đã giải thích ở trên, hook ‘wp_ajax_nopriv’ sẽ thực thi trước hook ‘wp_ajax’ và kích hoạt khi user chưa đăng nhập để hiển thị thông báo và có thể dừng sử lý hook wp_ajax tiếp sau đó bởi lệnh die().

Mặc định mọi ajax thông qua admin-ajax.php đều yêu cầu phiên làm việc người dùng, cái tên ‘admin’ cũng nói lên điều đó, nếu bạn không khai báo thêm hook ‘wp_ajax_nopriv_xxx’ thì sử dụng mặc định và bạn có thể thêm hook này liên kết vào hàm hiển thị dòng tin nhắn yêu cầu đăng nhập như ở đoạn code trên.

Để tiếp tục sử lý vào hook ajax ‘wp_ajax_’, bạn cần bỏ lệnh ngắt die() hoặc exit() trong action ‘wp_ajax_nopriv_’ và để tiết kiệm function cách tốt nhất là bạn trỏ 2 hook này vào chung hàm sử lý nội dung. Để hàm my_user_vote hoạt động cho mọi người dùng bạn sửa lại 2 hook trên như sau:

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_user_vote");

Chúng ta xác nhận chuỗi nonce để đảm bảo nơi gửi là đúng, vì chuỗi này đều tạo ở nơi gửi và nơi nhận. Nếu không đúng có thể lời gọi từ hacker và chúng ta cho dừng script. Sử dụng hàm get_post_meta lấy lượng votes hiện tại và cập nhật +1 votes bởi hàm update_post_meta vào meta key ‘votes’.

Cuối cùng, chúng ta kiểm tra lời gọi URL xuất phát trực tiếp trên trình duyệt hay gọi ẩn bằng đường ajax sử dụng biến $_SERVER['HTTP_X_REQUESTED_WITH']. Nếu đúng vậy, bạn xuất chuỗi đối tượng JSON ra màn hình tạo với hàm json_encode. Hàm này sẽ được chuyển đổi sang mảng trong javascript, nơi nhận giá trị trả về.

Kết thúc script, bạn luôn nhớ để lệnh dừng die(). Nếu bạn không thêm lệnh này, bạn luôn nhận giá trị trả về 0/-1 kèm theo kết quả.

Thêm code Javascript sử lý Ajax

Chúng ta chèn thêm thư viện jQuery, vào trang và đảm bảo dependency này thêm trước đoạn code thực thi lệnh javascript mà bạn sẽ tạo hàm ajax vào link votes cho các posts.
Thêm các dòng sau đây vào functions.php

add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );
   
   wp_enqueue_script( 'my_voter_script_obj', WP_PLUGIN_URL.'/my_plugin/empty_test.js' );
   wp_localize_script( 'my_voter_script_obj', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );

}

Bạn có thể khai báo lệnh thêm jquery vào thẻ head sau cũng đc tùy ý, vì hàm đăng ký script wp_register_script có khai báo các dependencies cần nạp trước rồi.
Hàm wp_localize_script có thể không cần thiết, nhưng là cách tốt để giúp bạn chuyển mảng php sang mảng biến javascript, rất hữu ích khi bạn viết javascript sang một file mới có lấy biến là giá trị từ PHP. Như vậy Code trên có tạo biến myAjax.ajaxurl chứa URL tới file admin-ajax.php.
Lưu ý: Để wp_localize_script có thể hoạt động, bạn cần chèn file script .js rỗng với tên khai báo vào wp_enqueue_script trùng với tên bạn sẽ gắn đối tượng javascript bởi wp_localize_script, giống như trên là ‘my_voter_script_obj’. Nếu file empty_test.js có nội dung có thể hàm ‘wp_localize_script’ sẽ không tạo đối tượng thành công.

Tạo file my_voter_script.js với nội dung sau:

jQuery(document).ready( function() {

   jQuery(".user_vote").click( function() {
      post_id = jQuery(this).attr("data-post_id")
      nonce = jQuery(this).attr("data-nonce")

      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {action: "my_user_vote", post_id : post_id, nonce: nonce},
         success: function(response) {
            if(response.type == "success") {
               jQuery("#vote_counter").html(response.vote_count)
            }
            else {
               alert("Your vote could not be added")
            }
         }
      })   

   })

});

Tham khảo thêm: http://codex.wordpress.org/AJAX_in_Plugins
Tham khảo dịch vụ thiết kế website wordpress sử dụng Ajax tại Hoangweb.com
Chúc bạn thành công!

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook