Thêm bộ lọc taxonomy Ajax WordPress

4 tháng ago, WordPress Plugin, Views
Thêm bộ lọc taxonomy Ajax WordPress

Thêm bộ lọc Taxonomy Ajax cho WordPress: Hướng dẫn chi tiết

Bộ lọc Taxonomy Ajax là một công cụ mạnh mẽ giúp cải thiện trải nghiệm người dùng trên website WordPress của bạn, đặc biệt là khi bạn có nhiều nội dung được phân loại theo các taxonomy (như Categories, Tags, hoặc các custom taxonomy). Thay vì phải tải lại toàn bộ trang khi người dùng chọn một bộ lọc, Ajax cho phép cập nhật nội dung một cách nhanh chóng và mượt mà, chỉ tải lại phần nội dung cần thiết.

Tại sao cần sử dụng bộ lọc Taxonomy Ajax?

Sử dụng bộ lọc Taxonomy Ajax mang lại nhiều lợi ích cho website của bạn:

  • Cải thiện trải nghiệm người dùng: Loại bỏ việc tải lại trang gây khó chịu và tốn thời gian.
  • Tăng tốc độ tải trang: Chỉ tải lại nội dung cần thiết, giảm tải cho máy chủ và tăng tốc độ tải trang.
  • Tăng khả năng tương tác: Giao diện lọc trực quan và phản hồi nhanh chóng khuyến khích người dùng khám phá nội dung của bạn.
  • SEO thân thiện hơn: Mặc dù sử dụng Ajax, bạn vẫn có thể cấu hình để đảm bảo các URL được cập nhật đúng cách, giúp công cụ tìm kiếm thu thập dữ liệu dễ dàng.

Các bước thực hiện

Để thêm bộ lọc Taxonomy Ajax vào WordPress, bạn có thể thực hiện theo các bước sau:

  1. Chọn plugin hoặc tự viết code: Có nhiều plugin hỗ trợ tạo bộ lọc Taxonomy Ajax, hoặc bạn có thể tự viết code nếu có kiến thức lập trình.
  2. Cài đặt và kích hoạt plugin (nếu sử dụng): Làm theo hướng dẫn cài đặt và kích hoạt của plugin bạn chọn.
  3. Thiết lập taxonomy muốn lọc: Chọn các taxonomy bạn muốn sử dụng để lọc nội dung (ví dụ: Categories, Tags, hoặc các custom taxonomy).
  4. Tạo form bộ lọc: Thiết kế form bộ lọc để người dùng có thể chọn các điều kiện lọc (ví dụ: dropdown list, checkboxes, radio buttons).
  5. Viết code Ajax để xử lý yêu cầu lọc: Sử dụng JavaScript và Ajax để gửi yêu cầu lọc đến server và nhận kết quả.
  6. Hiển thị kết quả lọc: Cập nhật nội dung hiển thị trên trang với kết quả lọc mới nhất.
  7. Tối ưu hóa và kiểm tra: Kiểm tra kỹ lưỡng để đảm bảo bộ lọc hoạt động chính xác và tối ưu hóa hiệu suất.

Sử dụng Plugin để thêm bộ lọc Taxonomy Ajax

Nếu bạn không quen với việc lập trình, sử dụng plugin là một lựa chọn dễ dàng và nhanh chóng hơn. Dưới đây là một số plugin phổ biến:

  • FacetWP: Một plugin mạnh mẽ và linh hoạt, cho phép bạn tạo các bộ lọc phức tạp cho nhiều loại nội dung.
  • Search & Filter Pro: Plugin này cung cấp nhiều tùy chọn tùy chỉnh và tích hợp tốt với WooCommerce.
  • Ajax Filter WooCommerce: Dành riêng cho các trang web WooCommerce, plugin này giúp người dùng dễ dàng lọc sản phẩm theo các thuộc tính khác nhau.

Các bước sử dụng plugin (ví dụ với FacetWP):

  1. Cài đặt và kích hoạt FacetWP.
  2. Tạo facets (bộ lọc): Trong giao diện FacetWP, tạo các facets tương ứng với các taxonomy bạn muốn sử dụng để lọc. Bạn có thể chọn loại facet (ví dụ: dropdown, checkbox) và các tùy chọn khác.
  3. Chèn code vào template: Chèn code do FacetWP cung cấp vào template trang bạn muốn hiển thị bộ lọc. Thông thường, bạn cần chèn code để hiển thị form bộ lọc và code để hiển thị kết quả lọc.
  4. Tùy chỉnh giao diện: FacetWP cho phép bạn tùy chỉnh giao diện của bộ lọc để phù hợp với thiết kế của website.

Tự viết code bộ lọc Taxonomy Ajax

Nếu bạn muốn kiểm soát hoàn toàn cách bộ lọc hoạt động và có kiến thức lập trình, bạn có thể tự viết code. Quá trình này phức tạp hơn nhưng cho phép bạn tùy chỉnh mọi khía cạnh của bộ lọc.

1. HTML (Form bộ lọc):

Tạo form bộ lọc HTML với các dropdown list, checkboxes, hoặc radio buttons tương ứng với các taxonomy bạn muốn lọc. Đảm bảo mỗi element có một ID hoặc class để bạn có thể truy cập chúng bằng JavaScript.


<form id="taxonomy-filter">
  <label for="category">Category:</label>
  <select id="category" name="category">
    <option value="">All Categories</option>
    <?php
      $categories = get_categories();
      foreach ($categories as $category) {
        echo '<option value="' . $category->slug . '">' . $category->name . '</option>';
      }
    ?>
  </select>
  <button type="submit">Filter</button>
</form>
<div id="filtered-content">
  <!-- Nội dung sẽ được hiển thị ở đây -->
</div>

2. JavaScript (Ajax):

Viết code JavaScript để xử lý sự kiện submit của form, gửi yêu cầu Ajax đến server và cập nhật nội dung hiển thị.


<script>
jQuery(document).ready(function($) {
  $('#taxonomy-filter').submit(function(e) {
    e.preventDefault();
    var category = $('#category').val();

    $.ajax({
      url: '/wp-admin/admin-ajax.php', // Đường dẫn đến admin-ajax.php
      type: 'POST',
      data: {
        action: 'filter_taxonomy', // Tên action để WordPress xử lý
        category: category
      },
      success: function(response) {
        $('#filtered-content').html(response); // Hiển thị kết quả
      },
      error: function(error) {
        console.log(error);
      }
    });
  });
});
</script>

3. PHP (Xử lý Ajax):

Viết code PHP để xử lý yêu cầu Ajax, truy vấn database và trả về kết quả.


<?php
add_action('wp_ajax_filter_taxonomy', 'filter_taxonomy_callback');
add_action('wp_ajax_nopriv_filter_taxonomy', 'filter_taxonomy_callback'); // Cho người dùng chưa đăng nhập

function filter_taxonomy_callback() {
  $category = $_POST['category'];

  $args = array(
    'post_type' => 'post',
    'posts_per_page' => -1,
  );

  if (!empty($category)) {
    $args['category_name'] = $category;
  }

  $query = new WP_Query($args);

  if ($query->have_posts()) {
    $output = '<ul>';
    while ($query->have_posts()) {
      $query->the_post();
      $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    $output .= '</ul>';
  } else {
    $output = '<p>No posts found.</p>';
  }

  wp_reset_postdata();
  echo $output;
  wp_die(); // Bắt buộc khi sử dụng Ajax trong WordPress
}
?>

Lưu ý:

  • Thêm đoạn code PHP trên vào file `functions.php` của theme con (child theme) hoặc một plugin tùy chỉnh.
  • Thay đổi `post_type` thành loại bài viết bạn muốn lọc.
  • Thay đổi `category_name` thành tên slug của taxonomy bạn muốn lọc (nếu không phải category).
  • Kiểm tra và điều chỉnh code cho phù hợp với cấu trúc HTML và CSS của theme bạn đang sử dụng.

Tối ưu hóa hiệu suất

Để đảm bảo bộ lọc Taxonomy Ajax hoạt động mượt mà và không gây ảnh hưởng đến hiệu suất website, hãy lưu ý các điểm sau:

  • Sử dụng caching: Caching kết quả lọc giúp giảm tải cho database và tăng tốc độ phản hồi.
  • Tối ưu hóa query: Đảm bảo query bạn sử dụng để truy vấn database được tối ưu hóa để trả về kết quả nhanh nhất.
  • Minify CSS và JavaScript: Giảm dung lượng file CSS và JavaScript giúp tăng tốc độ tải trang.
  • Sử dụng CDN: Sử dụng Content Delivery Network (CDN) để phân phối các file tĩnh (CSS, JavaScript, images) từ các server gần người dùng, giúp tăng tốc độ tải trang.

Kết luận

Thêm bộ lọc Taxonomy Ajax là một cách tuyệt vời để cải thiện trải nghiệm người dùng và tăng tính tương tác cho website WordPress của bạn. Bạn có thể sử dụng plugin hoặc tự viết code tùy thuộc vào trình độ kỹ năng và yêu cầu cụ thể của dự án. Đừng quên tối ưu hóa hiệu suất để đảm bảo bộ lọc hoạt động mượt mà và không gây ảnh hưởng đến tốc độ tải trang.

Related Topics by Tag
, , , ,

..