Tạo advanced search form cho custom post types WordPress

5 tháng ago, Hướng dẫn WordPress, Views

Giới thiệu về Tìm kiếm Nâng cao cho Custom Post Types trong WordPress

WordPress, với tính linh hoạt và khả năng mở rộng, là một nền tảng tuyệt vời để xây dựng nhiều loại trang web khác nhau. Custom Post Types (CPTs) cho phép bạn tạo các loại nội dung tùy chỉnh, khác biệt so với các bài viết (Posts) và trang (Pages) mặc định. Tuy nhiên, tìm kiếm mặc định của WordPress thường không đủ mạnh mẽ để lọc và tìm kiếm thông tin cụ thể trong các CPT này. Do đó, việc tạo một biểu mẫu tìm kiếm nâng cao (advanced search form) là rất quan trọng để 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ài viết này sẽ hướng dẫn bạn cách tạo một biểu mẫu tìm kiếm nâng cao cho Custom Post Types trong WordPress, sử dụng các phương pháp khác nhau, từ việc sử dụng các plugin cho đến viết mã tùy chỉnh.

Tại Sao Cần Tìm Kiếm Nâng Cao cho Custom Post Types?

Tìm kiếm mặc định của WordPress thường chỉ dựa vào tiêu đề và nội dung của bài viết hoặc trang. Điều này không hiệu quả khi bạn có các CPT với các trường tùy chỉnh (custom fields) chứa thông tin quan trọng. 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 tiêu chí cụ thể, chẳng hạn như:

Giá trị của các trường tùy chỉnh (ví dụ: giá, màu sắc, kích thước).
Phân loại (taxonomies) được gán cho CPT (ví dụ: danh mục sản phẩm, thể loại sự kiện).
Ngày đăng bài hoặc ngày chỉnh sửa.

Một biểu mẫu tìm kiếm nâng cao được thiết kế tốt sẽ giúp người dùng:

Tiết kiệm thời gian bằng cách nhanh chóng tìm thấy nội dung phù hợp.
Cải thiện trải nghiệm người dùng tổng thể trên trang web của bạn.
Tăng tương tác và tỷ lệ chuyển đổi nếu trang web của bạn là trang web thương mại điện tử.

Các Phương Pháp Tạo Tìm Kiếm Nâng Cao

Có nhiều cách để tạo một biểu mẫu tìm kiếm nâng cao cho Custom Post Types trong WordPress:

Sử dụng Plugin: Đây là phương pháp đơn giản và nhanh chóng nhất, đặc biệt nếu bạn không quen với việc viết mã.
Viết Mã Tùy Chỉnh: Phương pháp này cho phép bạn kiểm soát hoàn toàn giao diện và chức năng của biểu mẫu tìm kiếm, nhưng đòi hỏi kiến thức về PHP, HTML và CSS.
Kết Hợp Plugin và Mã Tùy Chỉnh: Bạn có thể sử dụng một plugin cơ bản để xử lý khung tìm kiếm và sau đó tùy chỉnh nó bằng mã để đáp ứng các yêu cầu cụ thể.

Sử Dụng Plugin để Tạo Tìm Kiếm Nâng Cao

Có rất nhiều plugin WordPress có thể giúp bạn tạo biểu mẫu tìm kiếm nâng cao một cách dễ dàng. Dưới đây là một vài plugin phổ biến:

SearchWP: Một plugin trả phí mạnh mẽ với nhiều tính năng, bao gồm tìm kiếm trường tùy chỉnh, tìm kiếm PDF và tài liệu, và khả năng tùy chỉnh cao.
Relevanssi: Một plugin miễn phí và trả phí, thay thế tìm kiếm mặc định của WordPress bằng một công cụ tìm kiếm mạnh mẽ hơn, bao gồm tìm kiếm theo ngữ cảnh và hỗ trợ các trường tùy chỉnh.
FacetWP: Một plugin trả phí được thiết kế đặc biệt để tạo các bộ lọc tìm kiếm (facets) cho các CPT và phân loại, cho phép người dùng tinh chỉnh kết quả tìm kiếm theo nhiều tiêu chí khác nhau.
Ivory Search: Một plugin miễn phí mạnh mẽ cho phép tạo nhiều biểu mẫu tìm kiếm nâng cao khác nhau cho các khu vực khác nhau trên trang web của bạn.

Ví dụ: Sử dụng Ivory Search

Ivory Search là một plugin miễn phí rất tốt. Để sử dụng Ivory Search cho tìm kiếm nâng cao, bạn có thể làm theo các bước sau:

Cài đặt và kích hoạt plugin Ivory Search từ kho plugin WordPress.
Vào “Ivory Search” trong bảng điều khiển WordPress.
Tạo một biểu mẫu tìm kiếm mới.
Chọn CPT bạn muốn tìm kiếm (trong phần “Search & Content”).
Thêm các trường bạn muốn sử dụng để lọc (ví dụ: trường tùy chỉnh, phân loại).
Tùy chỉnh giao diện của biểu mẫu tìm kiếm.
Nhúng biểu mẫu tìm kiếm vào trang hoặc bài viết của bạn bằng shortcode.

Viết Mã Tùy Chỉnh để Tạo Tìm Kiếm Nâng Cao

Nếu bạn muốn kiểm soát hoàn toàn giao diện và chức năng của biểu mẫu tìm kiếm, bạn có thể viết mã tùy chỉnh. Điều này đòi hỏi kiến thức về PHP, HTML và CSS. Dưới đây là một ví dụ cơ bản về cách tạo một biểu mẫu tìm kiếm nâng cao cho một CPT có tên “san_pham” với một trường tùy chỉnh “gia”:

Bước 1: Tạo Biểu Mẫu HTML

“`html
<form role="search" method="get" class="search-form" action="”>

Tìm kiếm:
<input type="search" class="search-field" placeholder="Tìm kiếm …" value="” name=”s” title=”Tìm kiếm:” />

Giá từ:

Giá đến:

“`

Bước 2: Xử Lý Tìm Kiếm trong `functions.php` hoặc Plugin Tùy Chỉnh

“`php
is_main_query() && $query->is_search() ) {
if (isset($_GET[‘post_type’]) && $_GET[‘post_type’] == ‘san_pham’) {
$query->set(‘post_type’, ‘san_pham’);
}

if (isset($_GET[‘gia_min’]) && !empty($_GET[‘gia_min’])) {
$gia_min = sanitize_text_field($_GET[‘gia_min’]);
$query->set(‘meta_query’, array(
array(
‘key’ => ‘gia’,
‘value’ => $gia_min,
‘compare’ => ‘>=’,
‘type’ => ‘NUMERIC’
)
));
}

if (isset($_GET[‘gia_max’]) && !empty($_GET[‘gia_max’])) {
$gia_max = sanitize_text_field($_GET[‘gia_max’]);

$meta_query = $query->get(‘meta_query’);

if (!is_array($meta_query)) {
$meta_query = array();
}

$meta_query[] = array(
‘key’ => ‘gia’,
‘value’ => $gia_max,
‘compare’ => ‘ ‘NUMERIC’
);

$query->set(‘meta_query’, $meta_query);
}
}
}
add_action(‘pre_get_posts’, ‘custom_search_filter’);
?>
“`

Giải thích mã:

`custom_search_filter` function: Hàm này được gọi trước khi WordPress thực hiện truy vấn tìm kiếm.
`!is_admin() && $query->is_main_query() && $query->is_search()`: Kiểm tra xem chúng ta có đang ở trong giao diện người dùng, có đang thực hiện truy vấn chính và đây có phải là tìm kiếm hay không.
`$_GET[‘post_type’]`: Lấy giá trị của tham số `post_type` từ URL.
`$query->set(‘post_type’, ‘san_pham’)`: Thiết lập loại bài viết mà chúng ta muốn tìm kiếm.
`$_GET[‘gia_min’]` và `$_GET[‘gia_max’]`: Lấy giá trị của các tham số `gia_min` và `gia_max` từ URL.
`$query->set(‘meta_query’, …)`: Thiết lập truy vấn meta để lọc kết quả dựa trên giá trị của trường tùy chỉnh “gia”.
`add_action(‘pre_get_posts’, ‘custom_search_filter’)`: Thêm hàm `custom_search_filter` vào hook `pre_get_posts`, đảm bảo rằng nó được gọi trước khi WordPress thực hiện truy vấn.

Lưu ý:

Đảm bảo rằng trường tùy chỉnh “gia” đã được tạo cho CPT “san_pham”.
Bạn cần tùy chỉnh mã này để phù hợp với cấu trúc dữ liệu và yêu cầu cụ thể của trang web của bạn.
Sanitize đầu vào của người dùng (ví dụ: sử dụng `sanitize_text_field()`) để ngăn chặn các cuộc tấn công XSS.

Kết Hợp Plugin và Mã Tùy Chỉnh

Bạn có thể sử dụng một plugin để tạo khung cơ bản cho biểu mẫu tìm kiếm và sau đó sử dụng mã tùy chỉnh để tùy chỉnh thêm chức năng. Ví dụ, bạn có thể sử dụng một plugin để tạo giao diện của biểu mẫu tìm kiếm và sau đó sử dụng mã PHP để xử lý truy vấn tìm kiếm và hiển thị kết quả.

Lời Khuyên và Thủ Thuật

Tối ưu hóa truy vấn tìm kiếm: Sử dụng các chỉ mục phù hợp cho các trường tùy chỉnh và phân loại để cải thiện hiệu suất tìm kiếm.
Sử dụng bộ nhớ đệm (caching): Sử dụng bộ nhớ đệm để lưu trữ kết quả tìm kiếm và giảm tải cho máy chủ của bạn.
Thiết kế biểu mẫu tìm kiếm thân thiện với người dùng: Đảm bảo rằng biểu mẫu tìm kiếm dễ sử dụng và trực quan, với các nhãn rõ ràng và các tùy chọn lọc dễ hiểu.

Kết luận

Tạo một biểu mẫu 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ạn có thể sử dụng plugin hoặc viết mã tùy chỉnh để tạo biểu mẫu tìm kiếm. Hãy chọn phương pháp phù hợp nhất với kỹ năng và yêu cầu của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa