[API] Cách tạo Custom API Entry Point WordPress

https://wolfactive.dev/cach-tao-custom-api-entry-point-wordpress/

Cách tạo Custom API Entry Point WordPress

Trong bài Cách tạo Custom Search API trên WordPress mình có hướng dẫn các bạn cách tạo một custom api search thì với bài lần này. Wolfactive tụi mình sẽ hướng dẫn các bạn cách tạo Custom API Entry Point WordPress. Hoặc các bạn có thể hiểu nôm na là tạo custom parameter trên link api như parameter term mình có tạo ở bài trước.

Cách tạo Custom API Entry Point WordPress

Khai báo API với WordPress

Cũng như custom search API thì chúng ta sẽ khai báo đường dẫn api với WordPress với đoạn code như sau:

add_action('rest_api_init','blogRegisterApiSearch');
function blogRegisterApiSearch(){
     register_rest_route('blog-api/v1','/blog/offset=(?P\d+)&category-name=(?P[a-z]+[[:punct:]]+[a-z]+|[a-z]+)',array(
    'methods' => WP_REST_SERVER::READABLE,
    'callback' => 'blogApiQuery',
    'args' => [
    'offset',
    'category-name'
    ],
  ));
}

Ở đây mình khai báo api với api có slug là blog-api/v1/blog/offset={id}&category-name={category-name}. Thì link api của chúng ta có dạng như sau: http://example.com/wp-json/blog-api/v1/blog/offset={id}&category={category-name} với các giá trị truyền vào là offset bài viết và category bạn muốn query ra giao diện. Nếu để ý kỹ các bạn sẽ thấy phần ngay chỗ này rất khó hiểu: offset=(?P\d+)&category-name=(?P[a-z]+[[:punct:]]+[a-z]+|[a-z]+). Thì chỗ này có thể hiểu là giá trị offset truyền vào chỉ nhận giá trị với kiểu dữ liệu là số. Và category sẽ nhận giá trị có các ký tự đặc biệt. Và cũng như cũ mình để một callback function để thực thi khi có giao tiếp API.

Tạo callback function thực thi

Tiếp tục chúng tạo hàm callback để query dự liệu trả về khi gọi api. Các bạn làm như sau:

function blogApiQuery( $request ) {
   $blog = prefix_blogApiQuery( $request['offset'],$request['category-name'] );
   return rest_ensure_response( $blog );
}

Ở đây mình truyền các giá trị parameter vào hàm sau đó sẽ trả về giá trị của biến blog mình đã lưu.

function prefix_blogApiQuery( $offset,$category-name) {
  if($category === "all-blog"){
   $blogList = new WP_Query(array(
    'post_status' => 'publish',
    'post_type' => 'theme_products',
    'posts_per_page'=> '100000000000',
    'showposts' => 9,
    'offset' => $offset,
    'order' => 'DESC',
    'order_by' => 'date',
   ));
  }else{
  $blogList = new WP_Query(array(
  'post_status' => 'publish',
  'post_type' => 'theme_products',
  'posts_per_page'=> '100000000000',
  'showposts' => 9,
  'offset' => $offset,
  'order' => 'DESC',
  'order_by' => 'date',
  'tax_query' => array(
   array(
    'taxonomy' => 'cat-theme',
    'field' => 'slug',
    'terms' => $category
     )
   )
  ));
 }
   $blogResult = array();
   if($blogList->have_posts()):
   while($blogList->have_posts()){
    $blogList->the_post();
    array_push($blogResult,
       array(
       'title' => get_the_title(),
       'date' => get_the_date(),
       'thumbnail' => get_the_post_thumbnail(),
       'url' => get_permalink(),
        )
     );
  };
 else:
  if($offset === 0):
   return new WP_Error( 'rest_not_found', esc_html__( 'Hiện đang cập nhật bài viết cho mục này', 'wolfactive' ), array( 'status' => 200 ) );
  elseif($offset > 0):
   return new WP_Error( 'rest_empty_found', esc_html__( '', 'wolfactive' ), array( 'status' => 200 ) );
  endif;
  endif;
return $blogResult;
}

Ở đây mình chia ra 2 trường hợp 1 là khi parameter category không có giá trị thì api sẽ query ra tất cả các bài blog. Và khi có giá trị truyền vào thì sẽ query ra các bài blog cùng chuyên mục và có thứ tự offset nằm sau offset truyền vào. Còn lại khi query không có thì api sẽ trả và string báo hiệu không có.

Gọi API ngoài giao diện

Như bài lần trước mình có để cập tới Giao tiếp API giữa JQuery và Vanilla JavaScript có gì khác nhau? thì với bài này mình sẽ thực hiện giao tiếp với api bằng fetch trong javascript.Trước tiên các bạn khởi tạo lệnh như sau.

var protocol = window.location.protocol;
var hostname = window.location.hostname; 
fetch(`${protocol}//${hostname}/wp-json/blog-api/v1/blog/offset=${id}&category-name=${category-name}`)
      .then(result => result.json();
      })
      .then(data=> console.log(data));

Vậy là xong rồi á còn lại là các bạn muốn hiện như thế nào ở ngoài giao diện thôi.

Tổng kết

Tụi mình đã chia sẻ các bạn về cách tạo một custom search API rồi. Có thắc mắc hay đóng góp gì các bạn hãy inbox vào fanpage tụi mình nhé!!! Tụi mình sẽ phản hồi kịp thời. Cảm ơn các bạn đã theo dõi

https://www.facebook.com/Wolfactiveweb.design.SEO/