Hướng dẫn tạo search form tùy chỉnh trong WordPress

Hướng Dẫn Tạo Search Form Tùy Chỉnh Trong WordPress

WordPress cung cấp một chức năng tìm kiếm cơ bản, nhưng đôi khi bạn cần một search form tùy chỉnh để phù hợp với giao diện website và đáp ứng các yêu cầu tìm kiếm cụ thể. Bài viết này sẽ hướng dẫn bạn từng bước cách tạo search form tùy chỉnh trong WordPress, từ những điều cơ bản đến nâng cao.

Tại Sao Nên Tạo Search Form Tùy Chỉnh?

Search form mặc định của WordPress thường khá đơn giản và có thể không đáp ứng được các nhu cầu sau:

• Thiết kế không phù hợp với giao diện website của bạn.
• Thiếu các tùy chọn tìm kiếm nâng cao (ví dụ: tìm kiếm theo danh mục, thẻ, tác giả).
• Không có khả năng lọc kết quả tìm kiếm theo loại bài viết.
• Không tích hợp tốt với các plugin tìm kiếm mạnh mẽ hơn.

Tạo một search form tùy chỉnh cho phép bạn kiểm soát hoàn toàn giao diện và chức năng của nó, giúp cải thiện trải nghiệm người dùng và hiệu quả tìm kiếm trên website của bạn.

Các Phương Pháp Tạo Search Form Tùy Chỉnh

Có nhiều phương pháp để tạo search form tùy chỉnh trong WordPress, bao gồm:

1. Sử dụng Theme Customizer: Một số theme cho phép bạn tùy chỉnh search form trực tiếp thông qua Theme Customizer.
2. Sử dụng Plugin: Có nhiều plugin miễn phí và trả phí giúp bạn tạo search form tùy chỉnh một cách dễ dàng.
3. Tạo Search Form Thủ Công: Phương pháp này đòi hỏi kiến thức về HTML, CSS và PHP, nhưng cho phép bạn kiểm soát hoàn toàn mọi khía cạnh của search form.

Trong bài viết này, chúng ta sẽ tập trung vào phương pháp tạo search form thủ công, vì nó cung cấp sự linh hoạt và tùy biến cao nhất.

Tạo Search Form Thủ Công

Để tạo search form thủ công, bạn cần thực hiện các bước sau:

Bước 1: Tạo File Template Search Form

Tạo một file mới tên là `searchform.php` trong thư mục theme của bạn. Nếu bạn không có theme con (child theme), hãy tạo một theme con để tránh mất các thay đổi khi theme chính được cập nhật. Nội dung của file `searchform.php` sẽ chứa mã HTML cho search form của bạn.

Bước 2: Viết Mã HTML cho Search Form

Dưới đây là một ví dụ về mã HTML cơ bản cho search form:

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


<input type="search" class="search-field" placeholder="” value=”” name=”s” />

<input type="submit" class="search-submit" value="” />

“`

Giải thích các thành phần:

• `<form>`: Phần tử HTML bao bọc toàn bộ form. Thuộc tính `role=”search”` giúp trình đọc màn hình hiểu mục đích của form. `method=”get”` chỉ định phương thức gửi dữ liệu. `action=””` chỉ định URL mà dữ liệu sẽ được gửi đến (trang chủ của bạn).
• `<label>`: Nhãn cho trường nhập liệu. `<span class=”screen-reader-text”>` cung cấp văn bản cho người dùng sử dụng trình đọc màn hình.
• `<input type=”search”>`: Trường nhập liệu cho người dùng nhập từ khóa tìm kiếm. `placeholder` hiển thị văn bản gợi ý trong trường nhập liệu. `value=””` hiển thị từ khóa tìm kiếm trước đó (nếu có). `name=”s”` là tên của tham số được sử dụng để truyền từ khóa tìm kiếm.
• `<input type=”submit”>`: Nút gửi form.

Thay thế `’your-theme-textdomain’` bằng text domain của theme bạn.

Bước 3: Thêm Search Form vào Theme

Để hiển thị search form, bạn có thể sử dụng hàm `get_search_form()` trong các file template của theme bạn (ví dụ: `header.php`, `sidebar.php`, `footer.php`).

Ví dụ:

“`php

“`

Hàm này sẽ tự động tìm và hiển thị file `searchform.php` mà bạn đã tạo.

Bước 4: Tùy Chỉnh CSS cho Search Form

Để search form phù hợp với giao diện website của bạn, bạn cần thêm CSS vào file `style.css` của theme. Dưới đây là một ví dụ về CSS cơ bản:

“`css
.search-form {
display: flex;
align-items: center;
}

.search-field {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}

.search-submit {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
“`

Bạn có thể tùy chỉnh các thuộc tính CSS này để phù hợp với thiết kế website của bạn.

Thêm Các Tùy Chọn Tìm Kiếm Nâng Cao

Để thêm các tùy chọn tìm kiếm nâng cao, bạn cần sửa đổi file `searchform.php` và thêm các trường nhập liệu bổ sung.

Tìm Kiếm Theo Danh Mục

Để thêm tùy chọn tìm kiếm theo danh mục, bạn có thể sử dụng thẻ “:

“`html

<?php
$categories = get_categories();
foreach ( $categories as $category ) {
echo 'slug . ‘”>’ . $category->name . ”;
}
?>

“`

Khi form được gửi, tham số `category_name` sẽ được truyền cùng với từ khóa tìm kiếm. Bạn cần sửa đổi file `search.php` để lọc kết quả tìm kiếm theo danh mục này.

Tìm Kiếm Theo Loại Bài Viết

Để thêm tùy chọn tìm kiếm theo loại bài viết, bạn có thể sử dụng một thẻ “ khác:

“`html

true,
‘_builtin’ => false
);

$post_types = get_post_types( $args, ‘objects’ );

foreach ( $post_types as $post_type ) {
echo ‘name . ‘”>’ . $post_type->label . ”;
}
?>

“`

Tham số `post_type` sẽ được sử dụng trong file `search.php` để lọc kết quả tìm kiếm theo loại bài viết.

Sửa Đổi File `search.php` để Xử Lý Các Tùy Chọn Nâng Cao

File `search.php` chịu trách nhiệm hiển thị kết quả tìm kiếm. Bạn cần sửa đổi file này để xử lý các tham số được gửi từ search form tùy chỉnh của bạn.

Lọc Kết Quả Tìm Kiếm Theo Danh Mục và Loại Bài Viết

Trước vòng lặp WordPress Loop trong `search.php`, bạn có thể thêm một truy vấn `WP_Query` để lọc kết quả:

“`php
get_search_query()
);

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

if ( isset( $_GET[‘post_type’] ) && ! empty( $_GET[‘post_type’] ) && $_GET[‘post_type’] != ‘any’) {
$args[‘post_type’] = sanitize_text_field( $_GET[‘post_type’] );
}

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
// Hiển thị bài viết
endwhile;
wp_reset_postdata();
else :
// Không có kết quả tìm kiếm
endif;
?>
“`

Lưu ý:

• Sử dụng `sanitize_text_field()` để làm sạch dữ liệu đầu vào từ form để tránh các lỗ hổng bảo mật.
• `wp_reset_postdata()` khôi phục dữ liệu bài viết toàn cục sau vòng lặp.

Kết Luận

Tạo search form tùy chỉnh trong WordPress cho phép bạn kiểm soát hoàn toàn trải nghiệm tìm kiếm trên website của bạn. Bằng cách tạo file `searchform.php`, thêm các tùy chọn tìm kiếm nâng cao và sửa đổi file `search.php`, bạn có thể tạo một search form mạnh mẽ và thân thiện với người dùng.

Việc tạo search form tùy chỉnh có thể giúp bạn:

• Cải thiện khả năng tìm kiếm trên website của bạn.
• Nâng cao trải nghiệm người dùng.
• Tăng lưu lượng truy cập và tương tác trên website.

Hãy thử nghiệm và khám phá các tùy chọn khác nhau để tạo search form hoàn hảo cho nhu cầu của bạn.