Tạo advanced search form cho custom post types WordPress

3 giờ ago, Hướng dẫn WordPress, Views
Tạo advanced search form cho custom post types WordPress

Tạo Form Tìm Kiếm Nâng Cao cho Custom Post Types trong WordPress

WordPress, với khả năng tùy biến cao, cho phép chúng ta tạo các Custom Post Types (CPTs) để quản lý nội dung khác nhau một cách hiệu quả. Tuy nhiên, việc tìm kiếm trong các CPT này đôi khi trở nên khó khăn khi chỉ dựa vào chức năng tìm kiếm mặc định của WordPress. Vì vậy, việc tạo một form tìm kiếm nâng cao (advanced search form) là vô cùng cần thiết để giúp người dùng dễ dàng tìm thấy nội dung mà họ mong muốn.

Tại Sao Cần Form Tìm Kiếm Nâng Cao?

Chức năng tìm kiếm mặc định của WordPress thường chỉ tìm kiếm dựa trên tiêu đề và nội dung của bài viết. Điều này không đủ khi CPTs có nhiều trường dữ liệu tùy chỉnh (custom fields) khác nhau. Một form tìm kiếm nâng cao cho phép người dùng lọc kết quả dựa trên:

  • Các trường tùy chỉnh (Custom Fields)
  • Thể loại (Categories)
  • Thẻ (Tags)
  • Ngày tháng (Date Range)
  • Các taxonomy tùy chỉnh (Custom Taxonomies)

Việc cung cấp một form tìm kiếm nâng cao giúp cải thiện trải nghiệm người dùng, tăng khả năng tìm thấy thông tin mong muốn và giữ chân người dùng ở lại trang web lâu hơn.

Các Bước Cơ Bản để Tạo Form Tìm Kiếm Nâng Cao

Việc tạo form tìm kiếm nâng cao cho CPTs có thể được thực hiện qua nhiều cách, bao gồm sử dụng plugin, viết code trực tiếp hoặc kết hợp cả hai. Trong bài viết này, chúng ta sẽ tập trung vào phương pháp viết code trực tiếp để có thể tùy biến cao nhất.

Bước 1: Tạo Form HTML

Đầu tiên, chúng ta cần tạo form HTML với các trường tìm kiếm mong muốn. Ví dụ, nếu CPT của bạn có tên là “san_pham” và có các trường tùy chỉnh như “gia”, “mau_sac”, “kich_thuoc”, bạn có thể tạo form như sau:

“`html
<form role="search" method="get" id="searchform" action="”>


<input type="text" value="” name=”s” id=”s” placeholder=”Nhập từ khóa…” />

Tất cả
Đỏ
Xanh
Vàng

“`

Giải thích:

  • <form>: Thẻ form HTML để chứa các trường tìm kiếm.
  • post_type: Trường ẩn để chỉ định CPT “san_pham” sẽ được tìm kiếm.
  • s: Trường tìm kiếm mặc định của WordPress (từ khóa).
  • gia, mau_sac, kich_thuoc: Các trường tìm kiếm tùy chỉnh.

Bước 2: Xử Lý Form và Truy Vấn WordPress

Tiếp theo, chúng ta cần xử lý form này và xây dựng truy vấn WordPress để tìm kiếm dựa trên các tham số được gửi từ form. Thường thì bạn sẽ đặt code này trong file `functions.php` của theme hoặc trong một plugin tùy chỉnh.

“`php
function custom_search_query( $query ) {
if ( is_admin() || ! $query->is_main_query() ) {
return;
}

if ( isset( $_GET[‘post_type’] ) && $_GET[‘post_type’] == ‘san_pham’ ) {
$meta_query = array();

// Tìm kiếm theo giá
if ( isset( $_GET[‘gia’] ) && ! empty( $_GET[‘gia’] ) ) {
$meta_query[] = array(
‘key’ => ‘gia’,
‘value’ => sanitize_text_field( $_GET[‘gia’] ),
‘compare’ => ‘=’,
‘type’ => ‘NUMERIC’,
);
}

// Tìm kiếm theo màu sắc
if ( isset( $_GET[‘mau_sac’] ) && ! empty( $_GET[‘mau_sac’] ) ) {
$meta_query[] = array(
‘key’ => ‘mau_sac’,
‘value’ => sanitize_text_field( $_GET[‘mau_sac’] ),
‘compare’ => ‘=’,
);
}

// Tìm kiếm theo kích thước
if ( isset( $_GET[‘kich_thuoc’] ) && ! empty( $_GET[‘kich_thuoc’] ) ) {
$meta_query[] = array(
‘key’ => ‘kich_thuoc’,
‘value’ => sanitize_text_field( $_GET[‘kich_thuoc’] ),
‘compare’ => ‘LIKE’,
);
}

if ( ! empty( $meta_query ) ) {
$query->set( ‘meta_query’, $meta_query );
}

// Tìm kiếm theo từ khóa (nếu có)
if ( isset( $_GET[‘s’] ) && ! empty( $_GET[‘s’] ) ) {
$query->set( ‘s’, sanitize_text_field( $_GET[‘s’] ) );
}

$query->set( ‘post_type’, ‘san_pham’ ); // Đảm bảo chỉ tìm kiếm trong CPT “san_pham”
}
}
add_action( ‘pre_get_posts’, ‘custom_search_query’ );
“`

Giải thích:

  • custom_search_query(): Hàm tùy chỉnh để sửa đổi truy vấn tìm kiếm.
  • pre_get_posts: Action hook được sử dụng để can thiệp vào truy vấn trước khi nó được thực thi.
  • Kiểm tra post_type: Đảm bảo code chỉ chạy khi tìm kiếm trong CPT “san_pham”.
  • meta_query: Mảng chứa các điều kiện tìm kiếm dựa trên custom fields.
  • sanitize_text_field(): Hàm để làm sạch dữ liệu đầu vào, tránh các vấn đề bảo mật.
  • $query->set(): Hàm để thiết lập các tham số của truy vấn (ví dụ: meta_query, s, post_type).

Bước 3: Hiển Thị Form Tìm Kiếm

Cuối cùng, bạn cần hiển thị form tìm kiếm ở vị trí mong muốn trên trang web. Bạn có thể đặt code form HTML ở trong một template file (ví dụ: `searchform.php`, `archive-san_pham.php`) hoặc trong một widget.

Tùy Biến Nâng Cao

Các bước trên chỉ là cơ bản. Bạn có thể tùy biến form tìm kiếm nâng cao hơn nữa để phù hợp với nhu cầu cụ thể của bạn.

Thêm Bộ Lọc Taxonomy

Nếu CPT của bạn có sử dụng các taxonomy (ví dụ: categories, tags, hoặc custom taxonomy), bạn có thể thêm bộ lọc để người dùng có thể tìm kiếm dựa trên các taxonomy này.

“`php
// Thêm bộ lọc taxonomy vào form

Tất cả
‘danh_muc_san_pham’, // Thay bằng tên taxonomy của bạn
‘hide_empty’ => true,
) );
foreach ( $terms as $term ) {
echo ‘slug . ‘”>’ . $term->name . ”;
}
?>

// Xử lý taxonomy trong truy vấn
if ( isset( $_GET[‘danh_muc’] ) && ! empty( $_GET[‘danh_muc’] ) ) {
$query->set( ‘tax_query’, array(
array(
‘taxonomy’ => ‘danh_muc_san_pham’, // Thay bằng tên taxonomy của bạn
‘field’ => ‘slug’,
‘terms’ => sanitize_text_field( $_GET[‘danh_muc’] ),
),
) );
}
“`

Sử Dụng Range Slider cho Trường Số

Thay vì sử dụng input text cho các trường số (ví dụ: giá), bạn có thể sử dụng range slider để người dùng dễ dàng chọn khoảng giá.

Bạn có thể sử dụng các thư viện JavaScript như jQuery UI Slider hoặc noUiSlider để tạo range slider.

Sử Dụng Datepicker cho Trường Ngày Tháng

Nếu bạn muốn cho phép người dùng tìm kiếm theo khoảng thời gian, bạn có thể sử dụng datepicker để họ chọn ngày bắt đầu và ngày kết thúc.

Bạn có thể sử dụng các thư viện JavaScript như jQuery UI Datepicker hoặc Pikaday để tạo datepicker.

Lưu Ý Quan Trọng

  • **Bảo mật:** Luôn luôn làm sạch dữ liệu đầu vào từ form bằng các hàm như sanitize_text_field(), absint(), v.v. để tránh các lỗ hổng bảo mật.
  • **Hiệu suất:** Nếu bạn có nhiều trường tìm kiếm, truy vấn có thể trở nên phức tạp và ảnh hưởng đến hiệu suất. Cân nhắc sử dụng caching hoặc tối ưu hóa truy vấn.
  • **Trải nghiệm người dùng:** Thiết kế form tìm kiếm sao cho dễ sử dụng và trực quan. Cung cấp các gợi ý (placeholder) hoặc hướng dẫn để giúp người dùng hiểu rõ các trường tìm kiếm.

Kết Luận

Việc tạo một form tìm kiếm nâng cao cho Custom Post Types trong WordPress là một cách tuyệt vời để cải thiện trải nghiệm người dùng và giúp họ dễ dàng tìm thấy nội dung mong muốn. Bằng cách tùy biến form HTML và sử dụng các hook của WordPress, bạn có thể tạo ra một hệ thống tìm kiếm mạnh mẽ và linh hoạt, phù hợp với nhu cầu cụ thể của trang web của bạn.

Related Topics by Tag
, , , ,

..