Cách tạo ô tìm kiếm nâng cao trong WordPress

Mặc định, WordPress đã có tính năng tìm kiếm và hầu như website nào cũng sử dụng ô tìm kiếm này. Chức năng này hoạt động khá ổn cho hầu hết các website. Tuy nhiên, trong trường hợp bạn cần những tính năng cao cấp hơn để tạo trải nghiệm tốt hơn cho người dùng thì ô tìm kiếm mặc định này là chưa đủ, ví dụ:

  • Tự động đề xuất kết quả tìm kiếm khi người dùng gõ một hoặc một vài chữ cái bất kỳ. Giống như khi bạn gõ ở ô tìm kiếm của Google thì bạn sẽ thấy danh sách các từ gợi ý hiển thị ở dưới ô đó. Đối với việc đề xuất này thì tốc độ hiển thị danh sách đề xuất phải nhanh để có trải nghiệm người dùng tốt.
  • Có khả năng tìm kiếm được nhiều trường nội dung của bài viết. Mặc định WordPress chỉ tìm kiếm ở tiêu đề và nội dung. Nhưng trong trường hợp bạn muốn tìm kiếm ở một custom fields nào đó thì WordPress không hỗ trợ.
  • Tìm kiếm theo nhiều loại post type.

Bài viết này sẽ hướng dẫn bạn tạo 1 ô tìm kiếm như vậy. Bạn có thể xem kết quả tại trang metabox.io, trong đó, ô search ở trên phần đầu trang sẽ gợi ý các sản phẩm và bài viết dựa theo từ khoá:

Ô tìm kiếm nâng cao trong website metabox.io

Còn nếu tìm kiếm trong forum support, bạn sẽ thấy phần gợi ý là các topic trong forum:

Ô tìm kiếm nâng cao gợi ý các topic trong forum

Tất nhiên, nếu bạn tìm kiếm trong phần Blog, bạn sẽ chỉ được gợi ý các bài post mà thôi:

Trong phần blog, ô tìm kiếm sẽ gợi ý các bài post liên quan

So sánh các plugin tìm kiếm cho WordPress

Trước khi xem giải pháp tìm kiếm cho WordPress, chúng ta cùng sơ lược qua một số plugin tìm kiếm khá nổi tiếng cho WordPress hiện nay, và xem chúng có ưu, nhược điểm gì và có phù hợp với yêu cầu của chúng ta hay không.

SearchWP

SearchWP là một plugin premium ($99/năm) chuyên phục vụ việc tìm kiếm. Ưu điểm lớn nhất của plugin này là cho phép chúng ta tìm kiếm được trong nhiều trường thông tin và đặt trọng số cho các trường đó (để biết trường nào quan trọng hơn). Nhờ đó kết quả tìm kiếm sẽ gần với mong muốn của người dùng nhất.

SearchWP là một plugin premium ($99/năm) chuyên phục vụ việc tìm kiếm.

SearchWP tích hợp sẵn với form tìm kiếm mặc định của WordPress, và mặc định không có tính năng đề xuất kết quả tìm kiếm. Để làm điều đó, bạn cần phải cài thêm plugin SearchWP Live Ajax Search. Tuy nhiên, tốc độ của việc đề xuất khá chậm vì plugin này sử dụng Ajax của WordPress. Do đó, nếu bạn dùng SearchWP, bạn nên chuẩn bị một hosting hay server tốt nếu bạn muốn tăng tốc phần gợi ý này.

Relevanssi

Relevanssi là một plugin nổi tiếng khác phục vụ cho việc search trong WordPress. Tương tự như SearchWP, Relevanssi hỗ trợ tìm kiếm trong các trường custom fields và đặt trọng số. Nó cũng có hỗ trợ fuzzy search, tức là nếu bạn gõ từ khóa không hoàn toàn đúng thì nó vẫn tìm ra kết quả cho bạn.

Relevanssi là một plugin nổi tiếng khác phục vụ cho việc search trong WordPress.

Tuy nhiên, Relevanssi có giao diện không được thân thiện bằng SearchWP và cũng không hỗ trợ đề xuất kết quả tìm kiếm. Để có thêm tính năng này, Relevanssi hỗ trợ plugin SearchWP Live Ajax Search như SearchWP ở trên.

Relevanssi cũng có thêm bản PRO ($99/năm) với một số tính năng khác như tìm kiếm trong nội dung tài liệu PDF, DOCX hay tìm kiếm trong nội dung của các term. Tuy nhiên, các tính năng này không thực sự ấn tượng lắm.

Ajax Search

Ajax Search là một plugin chuyên tập trung vào phần đề xuất kết quả tìm kiếm nhanh. Plugin này hỗ khá nhiều tùy chọn cho việc tìm kiếm nhanh như các template hiển thị kết quả . Ngoài ra Ajax Search cũng cho phép tìm kiếm cho nhiều post type khác nhau.

Ajax Search là một plugin chuyên tập trung vào phần đề xuất kết quả tìm kiếm nhanh.

Ajax Search có bản PRO ($36/trọn đời), trong đó cho phép tìm kiếm theo custom fields và các loại tài liệu, đồng thời cũng có nhiều tùy chọn hơn.

Trải nghiệm của Ajax Search khá mượt mà so với 2 plugin trên, có thể là do plugin này chuyên về tính năng đề xuất kết quả tìm kiếm. Tuy nhiên, giao diện của plugin này khá xấu và không thân thiện. Hơn nữa, phần đề xuất kết quả cũng sử dụng Ajax của WordPress nên tốc độ đề xuất hơi chậm. Bạn phải đợi khoảng 3-5s thì mới thấy gợi ý.

ElasticPress

ElasticPress là một plugin miễn phí sử dụng elasticsearch để tìm kiếm nhanh. Elasticsearch là một công nghệ tìm kiếm, trong đó cho phép tìm tất cả các loại nội dung với tốc độ gần như real-time!

ElasticPress là một plugin miễn phí sử dụng elasticsearch để tìm kiếm nhanh.

Việc sử dụng elasticsearch gần như đáp ứng được hoàn toàn nhu cầu của chúng ta. Tuy vậy, công nghệ này yêu cầu bạn phải có một server cho elasticsearch và phải cấu hình đúng. Sau đó, bạn cần phải cài ElasticPress để kết nối đến server đó. Nhược điểm của phương pháp này là chi phí và công sức để duy trì một server cho elasticsearch rất lớn.

Jetpack Search

Jetpack Search ($5/tháng) là một tính năng trong plugin Jetpack. Tính năng này sử dụng elasticsearch của Automattic (công ty tạo ra Jetpack), do đó bạn sẽ không phải tốn công sức tạo dựng, cấu hình và duy trì server cho elasticsearch. Vì sử dụng elasticsearch, nên nó có đầy đủ các tính năng chúng ta cần và trải nghiệm cũng rất tốt.

Jetpack Search ($5/tháng) là tính năng tìm kiếm trong plugin Jetpack.

Nhược điểm của cách này là bạn phải cài plugin Jetpack, vốn là một plugin có rất nhiều tính năng và nó tự động đồng bộ dữ liệu của bạn lên server của Automattic (điều mà bạn có thể không muốn). Và nhược điểm thứ hai là chi phí cho plugin này khá lớn. Chi phí sẽ tùy thuộc vào số lượng record mà bạn có (tối thiểu là $5/tháng).

Các bạn có thể xem thêm cách tăng tốc website với plugin Jetpack tại đây.

Tìm kiếm nhanh trong WordPress

Để khắc phục các nhược điểm trên, mình xin được giới thiệu một cách làm mới, trong đó đảm bảo được các yêu cầu:

  • Sử dụng elasticsearch
  • Gợi ý kết quả tìm kiếm cực nhanh, gần như real-time
  • Tìm kiếm theo nhiều trường thông tin
  • Đặt trọng số cho các trường thông tin

Giải pháp ở đây là dùng Algolia, một dịch vụ search chuyên dụng. Algolia có các ưu điểm sau:

  • Sử dụng elasticsearch;
  • Có gói miễn phí cho 10000 lượt tìm kiếm / tháng và 10000 record / tháng. Giới hạn này khá phù hợp cho các website cỡ nhỏ và vừa. Trong trường hợp của metabox.io, giới hạn này khá thoải mái. Nếu bạn sử dụng nhiều hơn, bạn sẽ phải trả một khoản phí theo lượng sử dụng;
  • Có plugin cho WordPress;
  • Có khả năng tùy biến khá tốt.

Để tích hợp Algolia vào WordPress, bạn hãy làm theo các bước sau:

Đăng ký tài khoản tại Algolia

Trước tiên, bạn cần đăng ký tài khoản (miễn phí) tại algolia.com. Sau khi đăng ký tài khoản, bạn cần truy cập vào mục API Keys và lấy các thông tin: Application ID, Search-Only API Key, Admin API Key như hình dưới:

Đăng ký tài khoản (miễn phí) tại algolia.com.

Cài đặt plugin WP Search with Algolia

Sau khi đã có được tài khoản và các API Keys từ Algolia, bạn hãy truy cập vào trang web của mình theo Admin Dashboard > Plugins > Add New và tìm cài plugin WP Search with Algolia.

 Tìm cài plugin WP Search with Algolia trong WordPress.

Nhớ cài đặt và kích hoạt plugin này nhé.

Plugin này là một bản fork từ plugin chính chủ của Algolia. Tuy nhiên, Algolia đã ngừng phát triển plugin đó, nên công ty WebDevStudios đã fork plugin đó và duy trì cho tới nay. Hiện nay, đây là plugin hỗ trợ Algolia tốt nhất.

Cấu hình plugin WP Search with Algolia

Sau khi kích hoạt plugin, hãy truy cập đến menu Algolia Search > Settings, và điền các API Keys mà bạn đã lấy từ trang profile của Algolia ở bước 1.

Điền các API Keys mà bạn đã lấy từ trang profile của Algolia

Để kích hoạt tính năng gợi ý kết quả, bạn cần truy cập vào menu Algolia Search > Autocomplete và bật tính năng này qua ô checkbox Enable autocomplete. Trong trang settings này, bạn cũng sẽ thấy danh sách các loại dữ liệu mà Algolia hỗ trợ để tìm kiếm, bao gồm các loại post type, taxonomy và user. Bạn chỉ cần chọn các loại dữ liệu mà bạn cần.

Chọn các loại dữ liệu mà bạn cần tìm kiếm

Lưu ý là Algolia có giới hạn cho số lượng dữ liệu được index cho bản miễn phí là 10000 bản ghi / tháng. Do đó, nếu bạn chọn quá nhiều loại dữ liệu, bạn có thể vượt quá giới hạn này và phải trả phí đấy.

Sau khi chọn loại dữ liệu, bạn có thể nhấn vào nút Re-index để index lại dữ liệu. Thao tác này thực chất là đồng bộ dữ liệu lên server của Algolia. Bạn chỉ cần làm động tác này 1 lần duy nhất, sau đó, mỗi khi bạn chỉnh sửa hay viết bài mới, plugin sẽ tự động đẩy dữ liệu giùm bạn.

Tham khảo thêm tài liệu hướng dẫn của Algolia.

Xem và tùy chỉnh trường dữ liệu tìm kiếm

Để xem được các dữ liệu đã được đồng bộ đúng chưa, bạn có thể vào profile trên Algolia, mục Indices. Tại đây, bạn sẽ thấy các loại dữ liệu như sau:

Kiểm tra xem các dữ liệu tìm kiếm đã được đồng bộ đúng chưa

Đối với mỗi loại dữ liệu, mặc dù plugin đẩy lên rất nhiều thông tin (như tiêu đề, ngày tháng, nội dung, các taxonomy, …), bạn có thể cấu hình để chỉ tìm kiếm theo 1 số trường nhất định, và thứ tự ưu tiên của chúng. Để làm điều đó, hãy nhấn vào tab Configuration, tại đó, bạn sẽ thấy danh sách các trường như sau:

Danh sách các trường dữ liệu tìm kiếm

Ở đây, bạn có thể thêm hoặc xóa trường và sắp xếp chúng.

Tại menu bên trái còn có nhiều tùy chọn như: thứ tự ưu tiên cho các tiêu chí tìm kiếm (Ranking and Sorting), cho phép tìm kiếm với các từ gõ sai (Typo-tolerance), … bạn có thể khám phá thêm để phù hợp với nhu cầu của mình. Trong trường hợp của metabox.io, các thiết lập mặc định cũng đã đủ tốt, nên mình không thay đổi gì.

Tuỳ chỉnh ô tìm kiếm của WordPress

Bây giờ, quay trở lại website WordPress của bạn. Mặc định khi bật tính năng Autocomplete, plugin WP Search with Algolia sẽ tự động tích hợp với ô tìm kiếm của theme. Đặc biệt, tính năng này hoạt động với hầu hết các theme WordPress.

Khi người dùng gõ vào ô tìm kiếm, họ sẽ nhận được kết quả như sau:

Ô tìm kiếm nâng cao gợi ý các kết quả liên quan đến từ khóa

Tuy nhiên, nếu bạn muốn tùy biến danh sách kết quả này, hoặc chỉ muốn giới hạn kết quả với 1 loại post type bất kỳ, bạn cần phải tùy chỉnh code một chút. Dưới đây là các bước cơ bản:

  • Trong thư mục theme của bạn, tạo 1 folder tên là algolia.
  • Copy file wp-content/plugins/wp-search-with-algolia/templates/autocomplete.php (trong thư mục của plugin) vào thư mục algolia của theme.
  • Chỉnh sửa file autocomplete.php đó

Lưu ý là file autocomplete.php này sử dụng JavaScript template của Underscores nên bạn cần phải biết một chút về nó. Plugin cho phép bạn tùy chỉnh hiển thị đối với từng phần của danh sách gợi ý, như danh sách bài viết, user, tiêu đề, … Để biết được cụ thể phần chỉnh những gì, hãy truy cập vào phần tài liệu hướng dẫn của Algolia để biết chi tiết.

Bạn có thể tham khảo file autocomplete.php mà chúng tôi đã làm cho trang metabox.io tại đây:

https://gist.github.com/rilwis/2f9f1690a29fc65d04937b7b9dfd9027

Ở đây, mình đã tùy biến khá nhiều để các ô search ở các vị trí khác nhau sẽ gợi ý các loại nội dung khác nhau:

  • Ô search ở header gợi ý sản phẩm và bài viết
  • Ô search ở blog chỉ gợi ý bài viết
  • Ô search ở forum chỉ gợi ý các topic

Kết luận

Tìm kiếm là 1 phần quan trọng trong website, đặc biệt đối với những website có nhiều thông tin. Để tìm kiếm được đúng nội dung mình cần một cách nhanh chóng không phải là một chuyện dễ dàng. Với những phân tích và phương pháp được nói đến trong bài viết này, hy vọng bạn sẽ tìm được cách làm phù hợp với những nhu cầu tìm kiếm cho website của mình.

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *