PHP

3 bước để tạo bộ lọc bài đăng với AJAX Filter

AJAX Posts (or Custom Post Types) Filter cho trang web của bạn theo Date, theo Categories (Taxonomies) hoặc  Custom Field Values tùy chỉnh. Hướng tăng dần hoặc giảm dần.

Vì vậy, nhiều người hỏi tôi về Posts Filter. Trong bài này, tôi sẽ chỉ cho bạn cách tạo một bộ lọc, cho phép lọc bài viết theo các thuật ngữ phân loại, các giá trị meta và kết quả sắp xếp theo ngày.

Bước 1. Tạo Form HTML

Trong bài viết này hướng dẫn bạn 2 kiểu lọc thường dùng:

1. Lọc bài viết theo taxonomy terms

Lấy ra list chuyên mục dưới đạng Dropdown <select> của danh mục. Để tạo ra <select> bạn sử dụng hàm get_terms (). Hàm này có thể hoạt động không chỉ với các custom taxonomies mà còn với các Categorytags mặc định.

if( $terms = get_terms( 'category', 'orderby=name' ) ) : // to make it simple I use default categories
  echo '<select name="categoryfilter"><option>Select category...</option>';
  foreach ( $terms as $term ) :
    echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
  endforeach;
  echo '</select>';
endif;

2. Lọc theo Date: Ascending hoặc Descending

Với select đơn giản sẽ giúp chúng tôi sắp xếp các bài đăng theo thứ tự tăng dần hoặc giảm dần.

<select name="by_popularity">
<option value="">Filter by popularity</option>
<option value="DESC">Most popular first</option>
<option value="ASC">Less popular first</option>
</select>

Hoàn thành Form code

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
  <?php
    if( $terms = get_terms( 'category', 'orderby=name' ) ) : // to make it simple I use default categories
      echo '<select name="categoryfilter"><option>Select category...</option>';
      foreach ( $terms as $term ) :
        echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
      endforeach;
      echo '</select>';
    endif;
  ?>
  <select name="by_popularity">
          <option value="">Filter by popularity</option>
          <option value="DESC">Most popular first</option>
          <option value="ASC">Less popular first</option>
        </select>
  <button>Apply filter</button>
  <input type="hidden" name="action" value="myfilter">
</form>
<div id="response"></div>

 

Chú thích:

  • Line #1. Sử dụng  WordPress function mặc định site_url() để nhận URL trang web thực tế.
  • Line #1. admin-ajax.php là bộ xử lý mặc định của AJAX WordPress.
  • Line #17. Trường nhập ẩn với myfilter thuộc tính là bắt buộc — đây là cách WordPress nhận ra chức năng nào cần sử dụng.
  • Line #20. #response (div ) Là vùng sẽ dán dữ liệu kết quả

 

Bước 2. jQuery scrip gửi một yêu cầu và nhận dữ liệu kết quả

Đây là mã xử lý hoàn chỉnh dựa trên jQuery. Nó sẽ gửi yêu cầu khi biểu mẫu được gửi.

jQuery(function($){
  $('#filter').submit(function(){
    var filter = $('#filter');
    $.ajax({
      url:filter.attr('action'),
      data:filter.serialize(), // form data
      type:filter.attr('method'), // POST
      beforeSend:function(xhr){
        filter.find('button').text('Processing...'); // changing the button label
      },
      success:function(data){
        filter.find('button').text('Apply filter'); // changing the button label back
        $('#response').html(data); // insert data
      }
    });
    return false;
  });
});

Bước 3. Mã PHP để xử lý yêu cầu

Trong phần này, bạn quyết định cách lọc bài viết như thế nào. Mã này hoàn toàn dựa trên WP_Query.

function misha_filter_function(){
  $args = array(
                'post_type' => 'post',
                'post_status' => 'publish',
    'orderby' => 'date', // we will sort posts by date
    'order'	=> $_POST['date'] // ASC or DESC
  );
 
  // for taxonomies / categories
  if( isset( $_POST['categoryfilter'] ) )
    $args['tax_query'] = array(
      array(
        'taxonomy' => 'category',
        'field' => 'id',
        'terms' => $_POST['categoryfilter']
      )
    );
        // if the filter is selected let's sort by it.
        if( !empty( $_POST['by_popularity'] ) && $_POST['by_popularity'] ) {
 
      $args['meta_key'] = 'views';
      $args['orderby'] = 'meta_value_num';
      $args['order'] = $_POST['by_popularity'];
 
        } 
  
 
  $query = new WP_Query( $args );
 
  if( $query->have_posts() ) :
    while( $query->have_posts() ): $query->the_post();
      echo '<h2>' . $query->post->post_title . '</h2>';
    endwhile;
    wp_reset_postdata();
  else :
    echo 'No posts found';
  endif;
 
  die();
}
 
 
add_action('wp_ajax_myfilter', 'misha_filter_function'); 
add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');

 

Bây giờ bạn đã biết những điều cơ bản và bạn có thể dễ dàng tạo các bộ lọc như thế này trên WordPress:

3 Steps for Creating AJAX Post Filters