Bài viết trước mình đã giới thiệu cho các bạn cơ bản về cách sử dụng ajax trong wordpress và cũng có ví dụ cụ thể… Nhưng mình vẫn thấy cái ví dụ đó chưa phê lắm. Vì thế hôm nay mình quyết định làm một bài về thực hành ajax trong wordpress, bài viết này sẽ giúp các bạn hiểu rỏ hơn về ajax trong wordpress và cũng có thể đây là nơi tình yêu bắt đầu với ajax :))
Trong quá trình thực hành sẽ sử dụng rất nhiều kỹ thuật xử lý javascript cụ thể là jquery vì thế bạn hãy trang bị kiến thức jquery cơ bản trước khi xem bài viết này nha. Đồng thời bạn cũng có kiến thức về lập trình theme wordpress cơ bản như (get category, new wp_query). Nếu đã có những kiến thức đó thì chúng ta bắt đầu nhé.
Ở bài này yêu cầu sẽ được nâng cao hơn: Load bài viết ngẫu nhiên với số lượng bài viết cho trước.
Code html hiển thị giao diện theo yêu cầu gồm có 1 button để lick load bài viết, một ô textbox (input) để nhập số lượng bài viết, cũng giống như ví dụ trước <div class=”display-post-cat”></div> dùng để chứa nội dung trả về.
<div class="content-widget"> <button class="call-ajax">Bài viết ngẫu nhiên</button> <input type="number" class="number_post" placeholder="Nhập số lượng bài viết"> <div class="display-post-cat"></div> </div>
Code jquery lấy bắt sự kiện click, lấy dữ liệu từ thẻ input và chạy hàm ajax: Gởi dữ liệu đi, nhận dữ liệu rả về và hiển thị tra giao diện.
$(document).ready(function(){ $('.call-ajax').click(function(){ // Khi click vào button thì sẽ gọi hàm ajax var number = $('.number_post').val(); // lấy số bài viết trong thẻ input $.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 number: number, // Gởi số lượng bài viết cần lấy lên 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 ); } }); }); });
add_action('wp_ajax_random', 'random_function'); add_action('wp_ajax_nopriv_random', 'random_function'); function random_function() { $number = isset($_POST['number']) ? (int)$_POST['number'] : 0; echo '<ul>'; $getposts = new WP_query(); $getposts->query('post_status=publish&showposts='.$number.'&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(); }
Tương tự như ví dụ ở bài trước đoạn code sử lý ajax được đặt ở file functions.php của theme. Nhưng ở trường hợp này là lấy danh sách bài viết ngẫu nhiên theo số lượng cho trước. Để lấy được số lượng gởi từ front end chúng ta dùng đoạn code: $number = isset($_POST[‘number’]) ? (int)$_POST[‘number’] : 0;
Chúng ta sẽ lấy theo phương thức là POST vì hàm ajax ở front end sử dụng phương thức là POST nhé. Sau khi lấy được số lượng chúng ta cho vào vòng lặp get post nhưng bình thường là oke.
Video hướng dẫn ví dụ số 1:
Ví dụ này yêu cầu chúng ta làm chức năng sau: List tất cả danh mục bài viết dưới dạng tabs. Khi click vào tên chuyên mục thì phía dưới sẽ load ra toàn bộ bài viết của chuyên mục đó.
Đánh giá yêu cầu của đề bài chúng ta cần các kiên thức sau để làm được yêu cầu này:
Ở phía front end chúng ta sẽ làm 2 công việc đó là: List tất cả danh của bài viết ra và xây dựng hàm ajax để gởi dữ liệu cho server, nhận dữ liệu từ server trả về và hiển thị chúng tra ngoài.
Code list tất cả danh mục bài viết:
<ul> <?php $args = array( 'hide_empty' => 0, 'taxonomy' => 'category', 'orderby' => id, ); $cates = get_categories( $args ); foreach ( $cates as $cate ) { ?> <li class="list-cat" data-id="<?php echo $cate->term_id; ?>"> <?php echo $cate->name ?> </li> <?php } ?> </ul> <div class="display-post"></div>
Đây là đoạn get danh mục bài viết. Phần data-id=”<?php echo $cate->term_id; ?>” đây là phần chúng ta sẽ dựa vào để lấy id của từng chuyên mục khi lick vào chuyên mục đó.
Code xử lý javascript ajax ở front end:
Để lấy bài viết theo chuyên mục thì chúng ta phải gởi cho server 2 thành phần đó là action và id của chuyên mục đó.
$(document).ready(function(){ $('.list-cat').click(function(){ // Khi click vào category bất kỳ var cat_id = $(this).data('id'); // lấy id của category đó thông qua data-id $.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: "getpost", //Tên action, dữ liệu gởi lên cho server cat_id: cat_id, //Gởi id chuyên mục 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) { $('.display-post-cat').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ẽ gởi đi action: getpost và cat_id : cat_id trong đó cat_id được lấy thông qua thuộc tính data(‘id’) đây là cách lấy giá trị từ trong 1 thẻ bất kỳ của html5 nhé.
add_action('wp_ajax_getpost', 'get_post_by_catid'); add_action('wp_ajax_nopriv_getpost', 'get_post_by_catid'); function get_post_by_catid() { $cat_id = isset($_POST['cat_id']) ? (int)$_POST['cat_id'] : 0; echo '<ul>'; $getposts = new WP_query(); $getposts->query('post_status=publish&showposts=-1&cat='.$cat_id); 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(); }
Video hướng dẫn ví dụ số 2:
Hôm nay mình vừa hướng dẫn cho các bạn cụ thể hơn cách dùng ajax trong wordpress. Những bài tiếp theo mình vẫn tiếp tục viết chủ đề ajax, làm một số chức năng cao siêu hơn 😀 Hẹn gặp lại các bạn trong những bài viết hướng dẫn wordpress tiếp theo 🙂
Fonttiengviet.com là một dự án website do JKS thực hiện cho khách hàng Huy Academy.…
Chắc chắn nhiều anh em khi đọc bài viết này sẽ nghĩ tôi đang quảng…
Widget trong WordPress là một công cụ mạnh mẽ cho phép bạn dễ dàng thêm…
Hôm nay mình sẽ hướng dẫn cho anh em cách tạo website blog cực kỳ…
Sống cực tốt anh em ạ :D Sau nhiều năm gắng bó với nghề thiết…
Nhân dịp quay lại viết blog mình share cho anh em code mẫu website blog…
View Comments
Anh làm video hướng dẫn làm mấy cái custom, như post type, taxonomy... E mới biết WP nên đọc bài viết chưa hiểu lắm ;))
Em tìm trên blog, anh đã hướng dẫn mấy cái kia rồi nha!
mình làm ajax cũng như vậy cho custom posttype nhưng gặp phải vấn đề là nó không gửi được cái cat_id lên để thực hiện truy vấn, vậy thì phải làm sao ạ! link lưu file mình đã viết....https://anotepad.com/notes/r44bfq
khi mình return biến được gửi từ client ra thì kết quả nhận đc luôn = 0 vậy là sao ạ?
Mình ko biết cậu thiết kế trong admin như thế nào. Mình chỉ cần thấy 'post_type' => 'track_record', 'category' => $cat_id, là thấy sai rồi. cái category mặc định nó chỉ đi với post type là post thôi. Bạn kiểm tra lại chổ custom post type và custom taxonomy nhes~!
My brother recommended I might like this website.
He was totally right. This submit truly made my
day. You cann't believe just how so much time I had spent
for this info! Thank you!
Xem video cũng dễ hiểu đó, hôm nào Huy làm clip cách rip teamplate blogspot nhé.
Chào anh, cho em hỏi một vấn đề ngoài lề, ko liên quan tới bài viết này ạ.
E mới lập web site ạ. Đến cái đoạn này "Đây là bài viết quan trọng", nhưng em ko biết trường hợp nào thì mình tích chọn vào đó. Có phải là bài viết phải trên 900 từ thì mới đc tích chọn vào ô đó đúng ko anh?
(anh xem hình đây ạ: https://www.facebook.com/photo.php?fbid=164843444379367&set=a.164843517712693.1073741829.100025611367101&type=3&theater). Cảm ơn anh rất nhiều!
anh ơi, vẫn vào đc link đó mà, a giúp e với
cảm ơn anh, may quá có task cụ thể mới làm được, chứ trc h em đọc định nghĩa hơi vi mô chút :D
Hehe thì nó hơn rắc rối nên a mới làm 2 bài. 1 lý thuyết 1 thực hành chứ :D
Hướng dẫn mình dùng ajax làm cái comment như này đi cậu
Lúc load ajax như vậy nhiều bài quá thì làm sao để đưa phân trang vào trong đó cậu ơi
ví dụ 1, load ramdom lỗi không hiển thị gì cả
bài viết hay