Thêm bộ lọc taxonomy Ajax WordPress

Giới thiệu về bộ lọc Taxonomy Ajax WordPress

Bộ lọc Taxonomy Ajax là một tính năng mạnh mẽ cho phép người dùng lọc nội dung trên trang web WordPress dựa trên các phân loại (taxonomies) như danh mục (categories) hoặc thẻ (tags) mà không cần tải lại toàn bộ trang. Điều này cải thiện đáng kể trải nghiệm người dùng bằng cách cung cấp phản hồi nhanh chóng và mượt mà.

Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu cách xây dựng một bộ lọc taxonomy Ajax đơn giản nhưng hiệu quả cho website WordPress của bạn. Chúng ta sẽ đi qua từng bước, từ việc chuẩn bị dữ liệu đến việc viết code Javascript để xử lý các yêu cầu Ajax.

Chuẩn bị

Trước khi bắt đầu, bạn cần đảm bảo rằng bạn có:

• Một website WordPress đang hoạt động.
• Quyền truy cập vào theme editor hoặc khả năng tạo một child theme.
• Kiến thức cơ bản về HTML, CSS, PHP và Javascript.

Chúng ta sẽ sử dụng một taxonomy tùy chỉnh cho ví dụ này. Giả sử bạn đã có một taxonomy có tên là “danh mục-san-pham” (product-category) và bạn muốn tạo bộ lọc cho taxonomy này.

Tạo giao diện bộ lọc Taxonomy

Bước đầu tiên là tạo giao diện cho bộ lọc. Bạn có thể thêm đoạn code HTML sau vào template trang của bạn (ví dụ: archive.php, page.php hoặc một template tùy chỉnh).

<div class="taxonomy-filter-container">
 <?php
 $terms = get_terms( array(
  'taxonomy' => 'danh-muc-san-pham',
  'hide_empty' => false,
 ) );

 if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
  foreach ( $terms as $term ) {
   echo '<div class="taxonomy-term" data-term-id="' . $term->term_id . '">' . $term->name . '</div>';
  }
 }
 ?>
</div>

<div id="results-container">
 <?php
 // Hiển thị các bài viết ban đầu ở đây. Ví dụ:
 if ( have_posts() ) {
  while ( have_posts() ) {
   the_post();
   ?>
   <div>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    <?php the_excerpt(); ?>
   </div>
   <?php
  }
 } else {
  echo '<p>Không tìm thấy bài viết nào.</p>';
 }
 ?>
</div>

Đoạn code trên sẽ lấy tất cả các term từ taxonomy “danh-muc-san-pham” và hiển thị chúng dưới dạng các phần tử div có class “taxonomy-term”. Mỗi term có một thuộc tính `data-term-id` chứa ID của term đó.

Viết code Javascript để xử lý Ajax

Tiếp theo, chúng ta cần viết code Javascript để xử lý các yêu cầu Ajax khi người dùng nhấp vào một term. Bạn có thể thêm đoạn code sau vào một file Javascript riêng (ví dụ: custom.js) và enqueue file này trong WordPress.

jQuery(document).ready(function($) {
 $('.taxonomy-term').click(function() {
  var term_id = $(this).data('term-id');
  $('.taxonomy-term').removeClass('active');
  $(this).addClass('active');

  $.ajax({
   url: ajaxurl, // Biến ajaxurl được WordPress định nghĩa.
   type: 'POST',
   data: {
    action: 'filter_posts_by_taxonomy', // Tên action để móc vào PHP.
    term_id: term_id
   },
   success: function(response) {
    $('#results-container').html(response);
   },
   error: function(error) {
    console.log(error);
   }
  });
 });
});

Đoạn code trên sẽ thực hiện các bước sau:

• Lắng nghe sự kiện click trên các phần tử có class “taxonomy-term”.
• Lấy ID của term từ thuộc tính `data-term-id`.
• Thêm class “active” vào term được chọn và loại bỏ class này khỏi các term khác.
• Gửi một yêu cầu Ajax đến server với dữ liệu `action` và `term_id`.
• Khi nhận được phản hồi từ server, nó sẽ cập nhật nội dung của phần tử có ID “results-container” với dữ liệu phản hồi.

Viết code PHP để xử lý yêu cầu Ajax

Bây giờ chúng ta cần viết code PHP để xử lý các yêu cầu Ajax trên server. Bạn có thể thêm đoạn code sau vào file `functions.php` của theme của bạn hoặc một plugin tùy chỉnh.

<?php

add_action( 'wp_ajax_filter_posts_by_taxonomy', 'filter_posts_by_taxonomy_callback' );
add_action( 'wp_ajax_nopriv_filter_posts_by_taxonomy', 'filter_posts_by_taxonomy_callback' );

function filter_posts_by_taxonomy_callback() {
 $term_id = $_POST['term_id'];

 $args = array(
  'post_type' => 'post', // Thay đổi nếu bạn muốn lọc post type khác.
  'tax_query' => array(
   array(
    'taxonomy' => 'danh-muc-san-pham',
    'field' => 'term_id',
    'terms' => $term_id,
   ),
  ),
 );

 $query = new WP_Query( $args );

 if ( $query->have_posts() ) {
  while ( $query->have_posts() ) {
   $query->the_post();
   ?>
   <div>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    <?php the_excerpt(); ?>
   </div>
   <?php
  }
  wp_reset_postdata();
 } else {
  echo '<p>Không tìm thấy bài viết nào.</p>';
 }

 wp_die(); // Bắt buộc để kết thúc Ajax properly.
}

?>

Đoạn code trên sẽ thực hiện các bước sau:

• Đăng ký một action Ajax có tên là `filter_posts_by_taxonomy`.
• Lấy ID của term từ dữ liệu POST.
• Tạo một WP_Query để truy vấn các bài viết thuộc về term được chọn.
• Hiển thị các bài viết được tìm thấy.
• Sử dụng `wp_reset_postdata()` để khôi phục dữ liệu bài viết toàn cục.
• Sử dụng `wp_die()` để kết thúc Ajax một cách chính xác.

Enqueue Javascript

Để Javascript hoạt động, bạn cần phải enqueue nó trong WordPress. Thêm đoạn code sau vào file `functions.php` của theme hoặc plugin của bạn:

<?php

function my_enqueue_scripts() {
 wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );

 // Truyền biến ajaxurl vào Javascript.
 wp_localize_script( 'custom-script', 'ajaxurl', admin_url( 'admin-ajax.php' ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

?>

Đoạn code trên sẽ thực hiện các bước sau:

• Enqueue file Javascript `custom.js`.
• Truyền biến `ajaxurl` vào Javascript. Biến này chứa URL của file `admin-ajax.php`, nơi chúng ta sẽ xử lý các yêu cầu Ajax.

Thêm CSS (tùy chọn)

Bạn có thể thêm CSS để cải thiện giao diện của bộ lọc. Ví dụ:

.taxonomy-filter-container {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-bottom: 20px;
}

.taxonomy-term {
 padding: 8px 12px;
 background-color: #f0f0f0;
 border: 1px solid #ddd;
 border-radius: 4px;
 cursor: pointer;
}

.taxonomy-term.active {
 background-color: #4CAF50;
 color: white;
 border-color: #4CAF50;
}

#results-container {
  margin-top: 20px;
}

Bạn có thể thêm CSS này vào file style.css của theme hoặc thông qua Customizer của WordPress.

Kiểm tra và gỡ lỗi

Sau khi hoàn thành tất cả các bước trên, hãy kiểm tra xem bộ lọc taxonomy Ajax của bạn có hoạt động hay không. Nếu có bất kỳ vấn đề gì, hãy kiểm tra các bước sau:

• Đảm bảo rằng tất cả các file (HTML, Javascript, PHP) đều được lưu đúng cách và được enqueue đúng cách.
• Kiểm tra console của trình duyệt để xem có bất kỳ lỗi Javascript nào không.
• Kiểm tra log file của PHP để xem có bất kỳ lỗi PHP nào không.
• Đảm bảo rằng biến `ajaxurl` được truyền đúng cách vào Javascript.

Kết luận

Trong bài viết này, chúng ta đã cùng nhau xây dựng một bộ lọc taxonomy Ajax đơn giản cho website WordPress. Bạn có thể tùy chỉnh code này để phù hợp với nhu cầu cụ thể của bạn. Ví dụ, bạn có thể thêm nhiều taxonomy, thêm chức năng tìm kiếm, hoặc thay đổi giao diện của bộ lọc.

Hy vọng bài viết này hữu ích cho bạn. Chúc bạn thành công!