Cách tạo biểu mẫu tìm kiếm tùy chỉnh trong WordPress

Tác giả Network Engineer, T.M.Một 06, 2021, 07:38:23 SÁNG

« Chủ đề trước - Chủ đề tiếp »

0 Thành viên và 1 Khách đang xem chủ đề.

Cách tạo biểu mẫu tìm kiếm tùy chỉnh trong WordPress


Bạn có cần tạo một biểu mẫu tìm kiếm tùy chỉnh cho trang web WordPress của mình không?

Tìm kiếm là cách hầu hết người dùng sẽ tìm thấy nội dung trên trang web của bạn. Nếu họ không thể dễ dàng tìm thấy những gì họ đang tìm kiếm, thì họ có thể chuyển sang một trang web khác.

Trong bài viết này, mình sẽ chỉ cho bạn cách cải thiện tìm kiếm trang web của bạn bằng cách tạo biểu mẫu tìm kiếm WordPress tùy chỉnh theo từng bước.

1. Tại sao phải tạo một biểu mẫu tìm kiếm tùy chỉnh cho WordPress?

Tính năng tìm kiếm mặc định của WordPress khá hạn chế và không phải lúc nào cũng tìm thấy nội dung phù hợp nhất.
Khi bạn thêm nhiều nội dung hơn vào trang web của mình, bạn sẽ cần những cách tốt hơn để giúp khách truy cập trang web của bạn dễ dàng tìm thấy nội dung trên trang web của bạn.

Điều này càng trở nên quan trọng hơn nếu bạn đang điều hành một cửa hàng trực tuyến hoặc một trang web thành viên, nơi bạn muốn người dùng tìm thấy sản phẩm hoặc khóa học phù hợp.

Bạn cũng có thể muốn tùy chỉnh thuật toán tìm kiếm để hiển thị nội dung cụ thể cao hơn những nội dung khác hoặc tùy chỉnh giao diện của biểu mẫu tìm kiếm của bạn.

Chúng ta hãy xem cách tùy chỉnh biểu mẫu tìm kiếm và trang kết quả của WordPress. Mình sẽ đề cập đến hai phương pháp mà bạn có thể chọn bằng cách sử dụng các liên kết bên dưới.

2. Cách tùy chỉnh biểu mẫu và kết quả tìm kiếm trên WordPress

SearchWP là plugin tìm kiếm tùy chỉnh tốt nhất cho WordPress. Nó dễ sử dụng, cho phép bạn kiểm soát hoàn toàn các kết quả tìm kiếm của mình và chính xác hơn so với tìm kiếm mặc định của WordPress.

Bước đầu tiên là cài đặt plugin SearchWP. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn cần truy cập trang Settings >>  SearchWP và sau đó nhấp vào tùy chọn trình đơn 'License'.


Sau đó, nhập khóa cấp phép của bạn vào hộp 'License' và nhấp vào nút 'Activate'. Bạn có thể tìm thấy thông tin này trong tài khoản của mình trên trang web SearchWP.

2.1. Tùy chỉnh công cụ Tìm kiếm

Khi bạn đã hoàn thành việc đó, bạn cần nhấp vào tùy chọn menu 'Engines'. Khi đó, bạn nên nhấp vào nút 'Add New' để tạo một công cụ tìm kiếm mới.


Điều này sẽ tạo ra một công cụ tìm kiếm mới được gọi là 'bổ sung'. Để thay đổi tên, bạn cần nhấp vào nút 'Sources & Settings'.


Thao tác này sẽ đưa bạn đến một trang cũng cho phép bạn chọn có tìm kiếm bài đăng, trang, tập tin phương tiện, nhận xét và người dùng hay không. Mình sẽ giữ nguyên các cài đặt mặc định.

Mình sẽ thay đổi tên của công cụ tìm kiếm thành 'Custom'. Hãy tiếp tục và nhập nó vào trường 'Engine Label'.


Lưu ý rằng tuỳ chọn 'Keyword Stems' đã được chọn cho bạn. Điều này sẽ bỏ qua phần cuối từ khi người dùng của bạn thực hiện tìm kiếm để các kết quả tìm kiếm có liên quan nhất sẽ được hiển thị.

Đảm bảo rằng bạn nhấp vào nút 'Done' khi hoàn tất.

Trang cài đặt cho công cụ tìm kiếm chứa các phần dành cho Bài đăng, Trang, Phương tiện và Người dùng. Trong mỗi phần, bạn có thể ưu tiên các thuộc tính bài đăng khác nhau hoặc chỉ bao gồm các danh mục hoặc thẻ nhất định trong kết quả tìm kiếm của mình.

Bạn có thể thực hiện việc này bằng cách điều chỉnh các thanh trượt 'Mức độ liên quan của thuộc tính' (Attribute Relevance).

Những điều này thay đổi cách các công cụ tìm kiếm đánh giá và xếp hạng nội dung. Ví dụ, nếu bạn muốn đánh giá tiêu đề bài viết cao hơn nội dung, thì bạn có thể điều chỉnh thanh trượt cho phù hợp.

Bạn nên làm việc qua từng phần và thực hiện bất kỳ điều chỉnh nào đối với các thanh trượt mà bạn thích.


Bạn cũng có thể tạo quy tắc cho từng phần để xác định xem một số nội dung nhất định được đưa vào hay bị loại trừ khỏi kết quả tìm kiếm.

Ví dụ: bạn có thể cho phép khách truy cập dễ dàng tìm kiếm nội dung về cùng chủ đề mà họ vừa đọc. Hoặc trong một cửa hàng trực tuyến, bạn có thể giúp khách hàng của mình nhanh chóng tìm thấy các sản phẩm khác trong cùng một danh mục.
Hãy tiếp tục và nhấp vào nút 'Edit Rules' trong phần bài đăng.

Bạn sẽ nhận thấy rằng bạn có thể tạo các quy tắc về danh mục, thẻ và định dạng của bài đăng, ngày xuất bản và ID bài đăng.


Bạn có thể muốn cho phép khách truy cập của mình tìm kiếm các danh mục trang web cụ thể. Ví dụ: bạn có thể thêm tính năng tìm kiếm danh mục vào các trang lưu trữ của mình để giúp khách truy cập nhanh chóng tìm thấy những gì họ đang tìm kiếm.

Để tìm hiểu cách thực hiện điều đó, hãy tham khảo Phương pháp 1 trong hướng dẫn từng bước của mình về cách tìm kiếm theo danh mục trong WordPress.

Khi bạn đã hoàn tất việc tùy chỉnh cài đặt công cụ tìm kiếm mặc định của mình, hãy đảm bảo nhấp vào nút 'Save Engines' ở đầu trang để tạo công cụ tìm kiếm tùy chỉnh của bạn.


2.1. Thêm biểu mẫu tìm kiếm bằng Shortcode

Tiện ích SearchWP Shortcodes Extension đơn giản hóa công việc thêm biểu mẫu tìm kiếm bài đăng tùy chỉnh mới vào trang web WordPress của bạn.

Chỉ cần truy cập trang web SearchWP Shortcodes Extension và sau đó nhấp vào nút 'Download available with active license'.


Sau đó, bạn cần cài đặt và kích hoạt tiện ích mở rộng giống như cách bạn đã cài đặt plugin ở trên.

Giờ đây, bạn có thể thêm biểu mẫu tìm kiếm tùy chỉnh vào bài đăng, trang và tiện ích con của mình bằng cách sử dụng Shortcodes. Nếu bạn chưa sử dụng Shortcode trước đây, thì bạn có thể tìm hiểu thêm trong hướng dẫn dành cho người mới bắt đầu của mình về cách thêm shortcode trong WordPress.

Chỉ cần chỉnh sửa một bài đăng và đặt con trỏ vào nơi bạn muốn thêm biểu mẫu tìm kiếm. Sau đó, nhấp vào biểu tượng dấu cộng ' + ' Thêm khối để hiển thị menu khối.


Tiếp theo, gõ 'html' vào hộp tìm kiếm và sau đó nhấp vào khối 'Custom HTML' để thêm nó vào bài đăng.
Khi bạn đã thêm khối mới, bạn nên dán các mã ngắn và HTML sau vào đó.
 
Mã nguồn [Chọn]
[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
   
<div class="search-results-wrapper">
 [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
   
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
   
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>

Mã này sẽ thêm biểu mẫu tìm kiếm tùy chỉnh của bạn vào bài đăng, tạo một phần để hiển thị kết quả tìm kiếm, hiển thị thông báo không có kết quả nếu cần và thêm phân trang nếu kết quả đi vào nhiều trang.

Nếu bạn đã đặt tên khác cho công cụ tìm kiếm của mình, thì bạn sẽ cần phải đổi engine="custom" sang tên công cụ của chính mình ở bốn vị trí.

Bạn cũng có thể chọn thay đổi văn bản trên nút tìm kiếm thành nội dung mô tả hơn bằng cách chỉnh sửa button_text="Custom Search". Phần còn lại của mã có thể giữ nguyên.

Đảm bảo rằng bạn nhấp vào Publish hoặc Update để lưu bài đăng của mình và hiển thị nó.


Để xem biểu mẫu tìm kiếm đang hoạt động, chỉ cần xem bài đăng trên trang web WordPress của bạn. Đây là cách nó trông trên trang demo của mình đang chạy giao diện Twenty Twenty-One.


2.3. Thêm tìm kiếm Ajax trực tiếp

Tìm kiếm Ajax trực tiếp cải thiện biểu mẫu tìm kiếm của bạn bằng cách tự động cung cấp kết quả tìm kiếm thả xuống khi người dùng nhập truy vấn của họ.


Cách dễ nhất để thêm tìm kiếm trực tiếp Ajax vào WordPress là plugin SearchWP Live Ajax Lite Search miễn phí , vì nó cho phép tìm kiếm trực tiếp tự động.

Để biết hướng dẫn từng bước về cách cài đặt nó, hãy xem hướng dẫn của mình về cách thêm tìm kiếm Ajax trực tiếp vào trang web WordPress của bạn.

2.4. Sử dụng cài đặt nâng cao cho SearchWP

Bây giờ bạn nên điều hướng đến Settings >> SearchWP và nhấp vào tab Advanced. Trên trang này, bạn có thể bật một số cài đặt sẽ giúp người dùng của bạn tìm thấy những gì họ đang tìm kiếm dễ dàng hơn.


Chọn bất kỳ tùy chọn nào sau đây mà bạn muốn:

  • Các kết quả phù hợp từng phần cũng sẽ hiển thị kết quả không hoàn toàn khớp với cụm từ đang được tìm kiếm.
  • Tự động "Ý của bạn là?" (Did you mean?) các chỉnh sửa sẽ đề xuất một cụm từ tìm kiếm hơi khác phù hợp với nhiều bài đăng hơn trên trang web của bạn.
  • Hỗ trợ "tìm kiếm được trích dẫn / cụm từ" (quoted/phrase searches) sẽ cho phép người dùng của bạn sử dụng dấu ngoặc kép khi tìm kiếm các cụm từ chính xác.
  • Đánh dấu các cụm từ trong kết quả sẽ giúp khách truy cập của bạn dễ dàng tìm thấy những gì họ đang tìm kiếm trong kết quả tìm kiếm.

2.5. Tạo kiểu cho biểu mẫu tìm kiếm và trang kết quả

Giao diện WordPress của bạn kiểm soát sự xuất hiện của trang web của bạn, bao gồm cả biểu mẫu tìm kiếm và trang kết quả tìm kiếm. Chúng lưu trữ các quy tắc định dạng cho tất cả các phần tử của trang web WordPress của bạn trong một biểu định kiểu CSS.

Bạn có thể thêm CSS tùy chỉnh của riêng mình để ghi đè các quy tắc kiểu của chủ đề.

Nếu bạn chưa làm điều này trước đây, hãy xem bài viết của mình về cách thêm CSS tùy chỉnh trong WordPress cho người mới bắt đầu.

Ví dụ: đây là một số CSS tùy chỉnh sẽ hoạt động với hầu hết các giao diện. Phần đầu tiên thay đổi kiểu của biểu mẫu tìm kiếm và phần thứ hai tùy chỉnh kết quả tìm kiếm.

Mã nguồn [Chọn]
.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}
 
.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

Bạn có thể thay đổi định dạng trong mã để phù hợp với trang web của mình. Bạn cũng có thể xóa bất kỳ dòng nào mà bạn không muốn sửa đổi. Ví dụ: nếu bạn không muốn thay đổi chiều cao và chiều rộng của biểu mẫu tìm kiếm, thì bạn chỉ cần xóa các dòng đó.

Đây là ảnh chụp màn hình của trang web demo của mình trước và sau khi thêm CSS tùy chỉnh.


3. Đo lường kết quả tìm kiếm và cải thiện chuyển đổi

Khi bạn đã thiết lập, biểu mẫu tìm kiếm WordPress tùy chỉnh của mình, bước tiếp theo là đo lường kết quả.
SearchWP đi kèm với tiện ích mở rộng chỉ số tìm kiếm cho bạn biết chính xác cách tìm kiếm trên trang web của bạn đang hoạt động.


Bạn cũng có thể sử dụng các chỉ số tìm kiếm để tự động cải thiện kết quả tìm kiếm bằng cách quảng cáo kết quả nhận được nhiều nhấp chuột lên đầu trang.

Các trang web thương mại điện tử cũng triển khai các cửa sổ bật lên có mục đích thoát và các chiến dịch xoay vòng trò chơi để thu hút người dùng trên các trang tìm kiếm, để họ có thể chuyển đổi thành người đăng ký email và sau đó là khách hàng ngay sau đó.


Mình hy vọng hướng dẫn này đã giúp bạn học cách tạo biểu mẫu tìm kiếm WordPress tùy chỉnh. Bạn cũng có thể muốn xem chuyên gia lựa chọn các dịch vụ điện thoại doanh nghiệp tốt nhất cho doanh nghiệp nhỏ và so sánh của mình về các công ty đăng ký tên miền tốt nhất.