Sử dụng Ajax trong wordpress

Vì sao và khi nào thì sử dụng Ajax

Ajax rất hay, nó giúp chúng ta có thể load dữ liệu mà không cần tải lại trang web. Nhờ đó mà có thể tăng tốc website, tiện dụng cho người dùng hơn rất nhiều. Vì vậy sử dụng ajax vào đúng chỗ sẽ giúp load trang nhanh hơn.

Khi nào dùng ajax? Khi bạn muốn thực hiện 1 hành động gì đó mà không muốn tải lại trang web thì sử dụng Ajax

Cái nhìn khái quát

Vậy luồng của ajax trong wordpress như nào?

Từ Jquery (Ajax) truyền tham số vào xử lý thông qua wp_ajax_ và wp_ajax_nopriv_. Sau đó bên PHP xử lý xong sẽ trả kết quả về lại Js và từ đó mình sẽ thực hiện hành động dựa trên kết quả trả về

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:

1

2

3

4

5

6

7

8

9

10

11

 <?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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

 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:

1

2

 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

1

2

3

4

5

6

7

8

9

10

11

12

 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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

 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")

}

}

})

})

});

Bạn có thể quan tâm:

Hướng dẫn chi tiết cách chạy quảng cáo Google Ads cho người mới bắt đầu (2023)

Quảng cáo Google Ads (hay còn có tên cũ là quảng cáo Google Adwords) là công cụ quảng cáo đã được chứng minh được tính hiệu quả suốt nhiều năm qua. Từ Google Ads Search cho các khách đang tìm kiếm, quảng cáo GDN giúp tiếp cận khách hàng đang..

(Khoảng 1 năm trước)0

Flatsome: Chủ đề WordPress Tốt Nhất cho Cửa Hàng Trực Tuyến của Bạn

Flatsome: Chủ đề WordPress Tốt Nhất cho Cửa Hàng Trực Tuyến của Bạn Nếu bạn đang tìm kiếm một chủ đề WordPress chuyên nghiệp để xây dựng cửa hàng trực tuyến của mình, Flatsome có thể là lựa chọn tốt nhất. Với thiết kế đẹp mắt, tính năng đa dạn..

(Khoảng 1 năm trước)0

Rank Math Pro là gì?

Rank Math Pro là một công cụ SEO đang được sử dụng rộng rãi trong cộng đồng SEO. Nó cung cấp nhiều tính năng hữu ích để tối ưu hóa trang web của bạn để đạt được vị trí cao trên các trang kết quả tìm kiếm của Google. Bài viết này sẽ giới thiệu về ..

(Khoảng 1 năm trước)0

Những tính năng nổi bật của Flatsome

Flatsome là một chủ đề WordPress được thiết kế đặc biệt cho các trang web thương mại điện tử. Với hàng trăm tính năng đa dạng và giao diện đẹp mắt, Flatsome đã trở thành một lựa chọn phổ biến cho các doanh nghiệp bán hàng trực tuyến. Trong bài vi..

(Khoảng 1 năm trước)0

Theme Flatsome: Đánh giá và cách cài đặt nhanh chóng

Hiện nay trên thị trường có rất nhiều theme bán hàng khiến người dùng khó khăn trong việc lựa chọn một theme phù hợp với nhu cầu của mình. Flatsome là theme bán hàng WordPress đang đứng vị trí top 1 trên toàn thế giới với hơn 160.000 lượt tải từ ..

(Khoảng 2 năm trước)0