Thực hành ajax trong wordpress nơi tình yêu bắt đầu

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

Load bài viết ngẫu nhiên sử dụng ajax trong wordpress

Ở 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 chức năng ở phía front end:

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

Code chức năng ở phía server:

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:

Get bài viết theo chuyên mục sử dụng ajax trong wordpress

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:

• Biết cách hiển thị danh mục bài viết
• Bắt được sự kiện khi click vào từng chuyên mục khác nhau sẽ lấy những thông tin khác nhau tương ứng.
• Liệt kê được những dữ liệu mà frontend gởi lên cho backend.
• Biết cách get bài viết theo chuyên mục trong wordpress.

Xử lý code bên phía front end:

Ở 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')(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é.

Xử lý code bên phía backend (server):

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:

Tổng kết:

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 :D 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 :)