Sử Dụng Ajax Trong Wordpress

Có thể bạn quan tâm

• Hướng dẫn viết Customizer của WordPress
• Thêm lựa chọn tỉnh/thành phố vào form checkout của woocommerce
• Tùy biến trang đăng nhập wordpress: login_headerurl and login_headertitle
• Bật nén Gzip cho wordpress thông qua .htaccess
• Tùy chỉnh giao diện trang admin trong wordpress

Trong bài này chúng ta sẽ đi tìm hiểu cách thức hoạt động của ajax trong wordpress để tải và đọc dữ liệu từ backend và frontend. Qua bài này các bạn sẽ hiểu Ajax trong WordPress hoạt động ra sao. Cách truyền và nhận dữ liệu như nào cho đúng.

Nội dung chính

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

• Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
• Tino hosting
• iNet
• Nước ngoài thì Vultr

1. Vì sao và khi nào thì sử dụng Ajax
2. Cái nhìn khái quát
3. Chuẩn bị kiến thức
4. Ví dụ thực tế
5. Ví dụ lấy danh sách 5 bài viết mới nhất

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?

Kho plugin của tôi DevVN Reviews for Woocommerce Plugin mua hàng nhanh cho woocommerce – Woocommerce Quick buy Plugin kết nối giao hàng tiết kiệm với Woocommerce – GHTK for Woocommerce Plugin Kết nối Zalo OA với WordPress

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ề

Chuẩn bị kiến thức

Để tìm hiểu và làm được thì các bạn cần:

• Đọc bài này trên codex cũng như ví dụ của nó.
• Tìm hiểu 2 action wp_ajax_ và wp_ajax_nopriv_
• Tối thiểu biết về Jquery

Ví dụ thực tế

Ví dụ đơn giản như sau: Click vào chữ “Thông báo” thì sẽ hiện thông báo (dạng alert) chứa kết quả trả về khi truyền 1 biến và xử lý

Đoạn html cơ bản trong file index.php như sau

<?php get_header();?> <a href="#" class="click_popup">Thông báo</a> <?php get_footer();?>

Đoạn js truyền dữ liệu vào php để xử lý như sau. Có thể viết js ra file riêng hoặc viết trực tiếp trên file php, html

<script type="text/javascript"> (function($){ $(document).ready(function(){ $('.click_popup').click(function(){ $.ajax({ type : "post", //Phương thức truyền post hoặc get dataType : "json", //Dạng dữ liệu trả về xml, json, script, or html url : '<?php echo admin_url('admin-ajax.php');?>', //Đường dẫn chứa hàm xử lý dữ liệu. Mặc định của WP như vậy data : { action: "thongbao", //Tên action website : 'levantoan.com',//Biến truyền vào xử lý. $_POST['website'] }, context: this, beforeSend: function(){ //Làm gì đó trước khi gửi dữ liệu vào xử lý }, success: function(response) { //Làm gì đó khi dữ liệu đã được xử lý if(response.success) { alert(response.data); } else { alert('Đã có lỗi xảy ra'); } }, error: function( jqXHR, textStatus, errorThrown ){ //Làm gì đó khi có lỗi xảy ra console.log( 'The following error occured: ' + textStatus, errorThrown ); } }) return false; }) }) })(jQuery) </script>

Tổng hợp lại file index.php đầy đủ ta có như sau

<?php get_header();?> <a href="#" class="click_popup">Thông báo</a> <script type="text/javascript"> (function($){ $(document).ready(function(){ $('.click_popup').click(function(){ $.ajax({ type : "post", //Phương thức truyền post hoặc get dataType : "json", //Dạng dữ liệu trả về xml, json, script, or html url : '<?php echo admin_url('admin-ajax.php');?>', //Đường dẫn chứa hàm xử lý dữ liệu. Mặc định của WP như vậy data : { action: "thongbao", //Tên action website : 'levantoan.com',//Biến truyền vào xử lý. $_POST['website'] }, context: this, beforeSend: function(){ //Làm gì đó trước khi gửi dữ liệu vào xử lý }, success: function(response) { //Làm gì đó khi dữ liệu đã được xử lý if(response.success) { alert(response.data); } else { alert('Đã có lỗi xảy ra'); } }, error: function( jqXHR, textStatus, errorThrown ){ //Làm gì đó khi có lỗi xảy ra console.log( 'The following error occured: ' + textStatus, errorThrown ); } }) return false; }) }) })(jQuery) </script> <?php get_footer();?>

Đoạn PHP xử lý dữ liệu và trả về giá trị. Code trong functions.php nha

add_action( 'wp_ajax_thongbao', 'thongbao_init' ); add_action( 'wp_ajax_nopriv_thongbao', 'thongbao_init' ); function thongbao_init() { //do bên js để dạng json nên giá trị trả về dùng phải encode $website = (isset($_POST['website']))?esc_attr($_POST['website']) : ''; wp_send_json_success('Chào mừng bạn đến với '.$website); die();//bắt buộc phải có khi kết thúc }

Giải thích 1 chút về hàm trên:

Mẫu website nổi bật của tôi Dự án website bán laptop surface Mẫu website bán thiết bị nhà bếp, nhà tắm, thiết bị vệ sinh tuyệt đẹp Mẫu website bán hàng giống shopee Mẫu website bán đồ gỗ, đồ thờ, đồ phòng thủy

• Tên action ở đây là thongbao Vậy nên sẽ viết wp_ajax_thongbao và wp_ajax_nopriv_thongbao Trong đó: wp_ajax_thongbao: chỉ user đã nhập với có thể thực hiện action thongbao wp_ajax_nopriv_thongbao: Cho tất cả mọi người chưa login đều có thể thực hiện action thongbao
• Do js để dạng dữ liệu là json vì thế phải sử dụng json_encode trước khi trả dữ liệu ra ngoài. Trong WP có wp_send_json_success() và wp_send_json_error() hỗ trợ điều đó.
• Tùy vào phương thức truyền biến mà ta nhận được giá trị từ bên ngoài. Như ví dụ ta có $_POST[‘website]

Vậy là xong rồi. Bây giờ bạn click vào chữ “Thông báo” sẽ alert lên “Chào mừng bạn đến với levantoan.com”

Ví dụ lấy 5 bài viết mới nhất bằng ajax

Đoạn code html và js viết trong index.php

<?php get_header();?> <div class="loadpost_result"></div> <a href="#" class="click_loadpost">Tải 5 bài mới nhất</a> <script type="text/javascript"> (function($){ $(document).ready(function(){ $('.click_loadpost').click(function(){ $.ajax({ type : "post", //Phương thức truyền post hoặc get dataType : "json", //Dạng dữ liệu trả về xml, json, script, or html url : '<?php echo admin_url('admin-ajax.php');?>', //Đường dẫn chứa hàm xử lý dữ liệu. Mặc định của WP như vậy data : { action: "loadpost", //Tên action }, context: this, beforeSend: function(){ //Làm gì đó trước khi gửi dữ liệu vào xử lý }, success: function(response) { //Làm gì đó khi dữ liệu đã được xử lý if(response.success) { $('.loadpost_result').html(response.data); } else { alert('Đã có lỗi xảy ra'); } }, error: function( jqXHR, textStatus, errorThrown ){ //Làm gì đó khi có lỗi xảy ra console.log( 'The following error occured: ' + textStatus, errorThrown ); } }) return false; }) }) })(jQuery) </script> <?php get_footer();?>

Đoạn code trong functions.php để xử lý dữ liệu

add_action( 'wp_ajax_loadpost', 'loadpost_init' ); add_action( 'wp_ajax_nopriv_loadpost', 'loadpost_init' ); function loadpost_init() { ob_start(); //bắt đầu bộ nhớ đệm $post_new = new WP_Query(array( 'post_type' => 'post', 'posts_per_page' => '5' )); if($post_new->have_posts()): echo '<ul>'; while($post_new->have_posts()):$post_new->the_post(); echo '<li>'.get_the_title().'</li>'; endwhile; echo '</ul>'; endif; wp_reset_query(); $result = ob_get_clean(); //cho hết bộ nhớ đệm vào biến $result wp_send_json_success($result); // trả về giá trị dạng json die();//bắt buộc phải có khi kết thúc }

Bây giờ khi đã làm xong bạn click vào chữ “Tải 5 bài mới nhất” sẽ load 5 bài mới nhất vào div có class loadpost_result bằng ajax

Chúc các bạn thành công ^^

4.6/5 - (32 votes) Từ khóa: ajax, hàm wordpress, woocommerce, wordpress Bài viết có ích cho bạn? Hãy chia sẻ ngay: Bài viết cùng chuyên mục

• Code thêm nhanh hàng loạt ảnh cho biến thể sản phẩm trong WooCommerce
• Chia sẻ code thêm nhanh thuộc tính trong Woo
• Tối ưu sản phẩm tương tự trong Woo: chỉ lấy theo danh mục con sâu nhất
• Cách ẩn cảnh báo nâng cấp PHP trong WordPress
• Mẹo nhỏ để Lazy load iframe cho WordPress

Bài viết liên quan

• Chia sẻ cách để mỗi số điện thoại, email chỉ được đăng ký một lần duy nhất khi dùng Contact Form 7 (CF7)
• Chia sẻ code theo dõi đơn hàng bằng số điện thoại và Order ID trong Woo
• Hướng dẫn xoá nhanh bình luận spam bằng WP CLI với Terminal trong WordPress
• Chia sẻ mẹo nhỏ để chặn comment spam trong WordPress
• Chia sẻ nút đếm ngược để hiển thị mật khẩu trong WordPress

• Bình luận