Trong thế giới số hóa ngày nay, khả năng tìm kiếm thông tin hiệu quả là yếu tố then chốt quyết định sự thành công của một trang web. Đối với các trang WordPress có nhiều loại nội dung khác nhau như blog và sản phẩm, việc cung cấp một trải nghiệm tìm kiếm đồng nhất có thể gây ra sự bối rối và làm giảm hiệu quả. Bài viết này sẽ đi sâu vào kỹ thuật tùy chỉnh trang kết quả tìm kiếm, không chỉ giải quyết vấn đề hiện tại mà còn mở ra những tiềm năng mới cho việc tối ưu hóa website của bạn.

Tại sao cần tùy chỉnh trang kết quả tìm kiếm?

Một trang web đa dạng nội dung như có cả blog và sản phẩm thường gặp phải thách thức khi người dùng thực hiện tìm kiếm chung. Kết quả trả về có thể lẫn lộn giữa bài viết blog và sản phẩm, khiến người dùng khó tìm thấy thứ họ thực sự cần. Điều này không chỉ ảnh hưởng đến trải nghiệm người dùng (UX) mà còn giảm tỷ lệ chuyển đổi, đặc biệt đối với các trang thương mại điện tử.

Việc tạo ra các trang kết quả tìm kiếm riêng biệt với giao diện và chức năng tùy chỉnh cho từng loại nội dung (ví dụ: một trang cho blog, một trang cho sản phẩm) mang lại nhiều lợi ích:

• Tăng cường sự liên quan: Người dùng tìm sản phẩm sẽ chỉ thấy sản phẩm, người tìm bài viết sẽ chỉ thấy bài viết, giúp họ nhanh chóng tiếp cận thông tin mong muốn.
• Cải thiện trải nghiệm người dùng: Giao diện được thiết kế riêng sẽ hiển thị các thông tin quan trọng nhất của từng loại nội dung (ví dụ: giá, nút “Thêm vào giỏ hàng” cho sản phẩm; ngày đăng, tác giả cho bài viết blog).
• Tối ưu hóa chuyển đổi: Đối với trang sản phẩm, một trang kết quả tìm kiếm được tùy chỉnh có thể tích hợp các bộ lọc chuyên biệt, so sánh sản phẩm hoặc nút kêu gọi hành động rõ ràng, thúc đẩy quyết định mua hàng.

Bộ lọc template_include: Chìa khóa điều khiển luồng hiển thị

WordPress hoạt động dựa trên một hệ thống phân cấp template (template hierarchy) để quyết định file nào sẽ được sử dụng để hiển thị nội dung. Tuy nhiên, khi cần một logic phức tạp hơn để điều hướng template, đặc biệt là dựa trên các điều kiện tùy chỉnh, bộ lọc template_include trở thành công cụ vô cùng mạnh mẽ.

Điều gì khiến template_include trở nên khác biệt?

Không giống như việc chỉ dựa vào tên file template mặc định (search.php, archive.php), template_include cho phép bạn:

• Áp dụng logic có điều kiện: Bạn có thể viết các câu lệnh if để kiểm tra bất kỳ thông tin nào từ truy vấn URL, đối tượng $wp_query hoặc dữ liệu người dùng để quyết định template nào sẽ được tải.
• Ghi đè hoàn toàn phân cấp: Bộ lọc này cho phép bạn bỏ qua hoàn toàn quy trình tìm kiếm template mặc định của WordPress và chỉ định một file template cụ thể.
• Kiểm soát linh hoạt: Nó cung cấp quyền kiểm soát cao nhất trong việc xác định template cho mọi loại trang, từ trang chủ, trang bài viết, trang danh mục cho đến trang tìm kiếm.

Trong trường hợp này, hàm template_chooser được thêm vào functions.php sẽ kiểm tra hai điều kiện:

1. isset($_GET['s']): Xác định xem có phải là một truy vấn tìm kiếm (có tham số s trên URL) hay không.
2. $post_type == 'product': Kiểm tra xem loại bài viết được yêu cầu tìm kiếm có phải là ‘product’ hay không. Lưu ý rằng get_query_var('post_type') là cách an toàn và chuẩn mực của WordPress để lấy biến truy vấn, thay vì truy cập trực tiếp $_GET['post_type'].

Nếu cả hai điều kiện đều đúng, hàm sẽ trả về locate_template('search-product.php'), buộc WordPress sử dụng file search-product.php làm template hiển thị kết quả. Nếu không, nó sẽ trả về $template mặc định, tức là search.php cho các truy vấn blog hoặc các loại bài viết khác.

//Custom template search
function template_chooser($template) {
    global $wp_query;
    $post_type = get_query_var('post_type');
    if( isset($_GET['s']) && $post_type == 'product' ) {
        return locate_template('search-product.php');
    }
    return $template;
}
add_filter('template_include', 'template_chooser');

Tùy chỉnh form tìm kiếm: Định hướng truy vấn chính xác

Để hệ thống biết loại bài viết nào cần tìm kiếm, chúng ta cần thêm một trường ẩn (hidden input field) vào form tìm kiếm. Trường này mang tên post_type và giá trị của nó sẽ xác định loại bài viết mong muốn.

• Form tìm kiếm cho sản phẩm:

  <code class="language-html"><form method="get" class="searchform" action="<?php echo esc_url( home_url( '/' ) );?>">
      <input type="text" class="field s" name="s" value="" placeholder="Search entire store here...">
      <input type="hidden" name="post_type" value="product"> <!-- Quan trọng: Chỉ định loại bài viết là 'product' -->
      <span class="icon_search"></span>
  </form>

  Khi form này được gửi, URL sẽ có dạng ?s=keyword&post_type=product. Hàm template_chooser sẽ nhận diện post_type là ‘product’ và tải search-product.php.

• Form tìm kiếm cho Blog:

  <code class="language-html"><form method="get" class="searchform" action="<?php echo esc_url( home_url( '/' ) );?>">
      <input type="text" class="field s" name="s" value="">
      <input type="hidden" name="post_type" value="post"> <!-- Quan trọng: Chỉ định loại bài viết là 'post' (mặc định của blog) -->
      <input type="submit" value="Search">
  </form>

  Tương tự, khi form blog được gửi, URL sẽ có ?s=keyword&post_type=post. Lúc này, template_chooser sẽ không khớp với điều kiện $post_type == 'product', nên WordPress sẽ sử dụng template search.php mặc định (hoặc bất kỳ template nào khác mà bạn đã tùy chỉnh cho loại bài viết post).

Xây dựng giao diện riêng biệt: Nâng tầm trải nghiệm

Sau khi đã định tuyến thành công truy vấn tìm kiếm đến đúng template, bước tiếp theo là xây dựng nội dung cho các file template này.

• search-product.php: File này sẽ chứa toàn bộ cấu trúc HTML và vòng lặp WordPress để hiển thị kết quả tìm kiếm cho sản phẩm. Bạn có thể tùy chỉnh để:

  • Hiển thị hình ảnh sản phẩm lớn hơn.
  • Bao gồm thông tin giá, trạng thái còn hàng, nút “Thêm vào giỏ hàng” trực tiếp.
  • Tích hợp các bộ lọc theo thuộc tính sản phẩm (kích thước, màu sắc, thương hiệu).
  • Sử dụng các lớp CSS đặc trưng để tạo giao diện khác biệt rõ rệt.

• search.php: File này sẽ hiển thị kết quả tìm kiếm cho các bài viết blog (loại bài viết post). Bạn có thể tùy chỉnh để:

  • Tập trung vào tiêu đề, ảnh thumbnail, đoạn trích và ngày đăng.
  • Hiển thị các tag hoặc danh mục liên quan.
  • Tối ưu hóa cho khả năng đọc và điều hướng đến bài viết đầy đủ.

Việc tách biệt giao diện này không chỉ giúp người dùng dễ dàng phân biệt mà còn cho phép bạn tối ưu hóa mỗi trang cho mục đích cụ thể của nó, từ đó nâng cao hiệu quả tổng thể của website.

Mở rộng tiềm năng: Áp dụng cho mọi loại bài viết tùy chỉnh

Kỹ thuật này không chỉ giới hạn ở ‘blog’ và ‘product’. Bạn hoàn toàn có thể mở rộng nó cho bất kỳ loại bài viết tùy chỉnh (Custom Post Type) nào khác mà website của bạn có, ví dụ như ‘event’, ‘portfolio’, ‘service’. Bạn chỉ cần:

1. Tạo thêm file template: Ví dụ: search-event.php, search-portfolio.php.
2. Mở rộng hàm template_chooser: Thêm các điều kiện if hoặc sử dụng cấu trúc switch để kiểm tra $post_type và trả về template tương ứng.
3. Tùy chỉnh form tìm kiếm: Đảm bảo trường post_type trong form tìm kiếm trỏ đến đúng loại bài viết tùy chỉnh.

Kết luận

Việc tùy chỉnh trang kết quả tìm kiếm trong WordPress theo loại bài viết là một chiến lược hiệu quả để nâng cao trải nghiệm người dùng, cải thiện tính liên quan của thông tin và tối ưu hóa mục tiêu của website. Bằng cách tận dụng bộ lọc template_include mạnh mẽ và điều chỉnh form tìm kiếm, bạn có thể tạo ra các luồng tìm kiếm chuyên biệt, mang lại giá trị đáng kể cho cả người dùng và quản trị viên. Hãy áp dụng kỹ thuật này để biến công cụ tìm kiếm mặc định trở thành một phần không thể thiếu trong chiến lược nội dung và tiếp thị của bạn.