Thêm tìm kiếm trực tiếp do AJAX hỗ trợ vào WordPress là một cách tuyệt vời để cải thiện trải nghiệm người dùng (UX) trên trang web của bạn và tăng khả năng khám phá nội dung.
Trong bài đăng này, bạn sẽ tìm hiểu từng bước cách thiết lập tìm kiếm AJAX trong WordPress bằng giải pháp hoàn toàn không có mã.
Trên thực tế, bạn có thể thiết lập và chạy chỉ trong vài phút, trong khi vẫn có quyền truy cập vào chức năng để tinh chỉnh cách chức năng tìm kiếm AJAX trên trang web của bạn.
👉 Tất cả những gì bạn cần làm là:
- Cài đặt plugin Otter Blocks .
- Thêm khối Tìm kiếm vào nơi bạn muốn hộp tìm kiếm AJAX WordPress của mình xuất hiện và bật chuyển đổi Tìm kiếm trực tiếp.
- Tùy chỉnh chức năng tìm kiếm trực tiếp AJAX nếu cần, chẳng hạn như định cấu hình chức năng này để chỉ tìm kiếm các bài đăng trên blog chứ không tìm kiếm các trang.
Nếu không, chúng ta sẽ bắt đầu với phần tóm tắt nhanh về cách hoạt động của tìm kiếm AJAX và một số cách khác nhau để thiết lập chức năng tìm kiếm AJAX cho WordPress.
=> 4 Cách Nhúng Video Vào WordPress Tốt Nhất
Tìm kiếm AJAX cho WordPress là gì?
Bạn có thể sẽ sử dụng chức năng tìm kiếm trực tiếp hàng ngày. Chẳng hạn, tất cả các công cụ tìm kiếm và trang video lớn như YouTube đều cung cấp loại tính năng này.
Bạn bắt đầu nhập vào hộp tìm kiếm và ngay lập tức bạn sẽ thấy danh sách các truy vấn được đề xuất (hoặc kết quả được đề xuất) – không cần tải trang.
Mặc dù WordPress có thanh tìm kiếm riêng nhưng nó không sử dụng AJAX theo mặc định. Thay vào đó, người dùng nhập cụm từ tìm kiếm vào hộp, nhấn enter và một trang mới có tải kết quả.
Để thêm tìm kiếm trực tiếp vào trang web của bạn, bạn sẽ cần sự trợ giúp của plugin, đó là nội dung của bài đăng này.
Lợi ích của tìm kiếm AJAX trực tiếp trong WordPress
Bất cứ điều gì bạn có thể giới thiệu để nâng cao trải nghiệm người dùng sẽ mang lại giá trị cho trang web của bạn. Tuy nhiên, tìm kiếm AJAX trực tiếp cho WordPress có thể mang đến cho người dùng của bạn một số điều đặc biệt:
- Bạn có thể cung cấp một cách để người dùng “tự phục vụ” nhu cầu của họ. Họ sẽ có một cách nhanh chóng để tìm kiếm toàn bộ trang web của bạn và tìm đúng trang.
- Các yếu tố tương tác có thể cung cấp kết nối lớn hơn giữa trang web của bạn và người dùng. Điều này là do bạn có thể cung cấp các kết quả tìm kiếm có liên quan nhanh hơn và không cần nhấp vào nút bổ sung.
- Bạn cũng có thể giảm thời gian tải trang xuống mức tối thiểu, vì tìm kiếm AJAX trực tiếp không cần thực hiện thêm các yêu cầu HTTP hoặc tải các trang khác.
Tại sao giải pháp mã hóa thủ công cho tìm kiếm trực tiếp có thể không phải là tốt nhất
Cho rằng AJAX sử dụng JavaScript, bạn có thể xem xét giải pháp “tự triển khai” bằng ngôn ngữ lập trình.
Đây là một ý tưởng hay về mặt lý thuyết, nhưng sẽ không phải là phương pháp tốt nhất để thêm tìm kiếm AJAX trực tiếp vào WordPress. Đây là lý do tại sao:
- Đầu tiên, bạn chỉ có thể tạo ra giải pháp phù hợp với kỹ năng của mình. Nếu bạn không có kiến thức chuyên sâu về JavaScript, điều này sẽ hiển thị trong kết quả.
- Ngoài ra, bạn cũng cần biết về cấu trúc tệp, cấu trúc mẫu của WordPress , v.v. Có rất nhiều bánh răng tạo nên bánh xe của WordPress.
- Ngay cả khi bạn có các kỹ năng cần thiết để mã hóa giải pháp tìm kiếm trực tiếp, bạn cũng sẽ cần thời gian và tiền bạc để phát triển và triển khai giải pháp đó. Điều này có thể khó xảy ra, đặc biệt nếu phát triển không phải là công việc chính của bạn.
- Nếu bạn cần khắc phục sự cố bằng giải pháp thủ công, điều này có thể ngốn thêm thời gian, tiền bạc và tài nguyên của bạn. Bạn có thể cắn nhiều hơn bạn có thể nhai.
Thay vào đó, có một cách tốt hơn để triển khai đúng chức năng trong WordPress: plugin. Chúng ta hãy xem làm thế nào điều này hoạt động tiếp theo.
=> 5 Plugin Tab WooCommerce Trả Phí Tốt Nhất 2023
Thay vào đó, hãy sử dụng plugin tìm kiếm AJAX cho WordPress
Đối với hầu hết mọi người, sử dụng plugin tìm kiếm AJAX cho WordPress là một lựa chọn tốt hơn nhiều.
Mặc dù có rất nhiều plugin tìm kiếm AJAX cho WordPress để lựa chọn, nhưng không phải tất cả đều được tạo ra như nhau. Ví dụ: một số plugin bị hạn chế về tùy chọn kiểu dáng hoặc kiểm soát nội dung cần tìm kiếm.
Vì lý do đó, chúng tôi sẽ sử dụng plugin Otter Blocks cho hướng dẫn này.
Như tên gợi ý, Otter Blocks là tập hợp các yếu tố cho Trình chỉnh sửa khối WordPress gốc.
Xét về chức năng tìm kiếm AJAX, tính năng phù hợp nhất là khối Tìm kiếm.
Nó cho phép bạn chọn loại bài đăng để tìm kiếm và tùy chỉnh hoàn toàn thiết kế hộp tìm kiếm của bạn. Bạn có thể thêm nó vào bất kỳ phần nào trên trang web của mình, bao gồm các bài đăng, trang, thanh bên, v.v.
Ngoài chức năng tìm kiếm AJAX của WordPress, Otter Blocks cung cấp cho bạn một số cách bổ sung để thêm gia vị cho bố cục và thiết kế của bạn:
- Bạn có thể thêm các tiêu đề với mức tùy chỉnh cao hơn mức bạn sẽ nhận được theo mặc định.
- Có tùy chọn để xây dựng phần đáp ứng bao gồm tùy chỉnh nâng cao và không gian cho sáu cột.
- Bạn sẽ có thể thêm các hình động tuyệt đẹp như hiệu ứng Lottie và lật bài.
- Nếu bạn bán sản phẩm thông qua trang web của mình, Otter Blocks bao gồm bảng giá , khả năng triển khai các nút “thêm vào giỏ hàng”, giờ làm việc, v.v.
Trên thực tế, Otter Blocks cung cấp chức năng bổ sung cho tất cả các Block được cung cấp – ngay cả những Block gốc. Ví dụ: bạn có thể đặt điều kiện hiển thị, CSS tùy chỉnh, v.v. từ giao diện Block Editor điển hình.
Cách sử dụng Otter Blocks để thêm tìm kiếm AJAX trực tiếp vào WordPress
Bạn sẽ chỉ cần một vài bước để thiết lập Khối Otter để thêm tìm kiếm AJAX trực tiếp vào WordPress. Hãy bắt đầu với quá trình cài đặt:
- Cài đặt và kích hoạt Otter Blocks
Trước hết, bạn cần cài đặt Otter Blocks và kích hoạt nó cho trang web của mình. Có rất nhiều cách để làm điều này, nhưng chúng tôi xin nhắc lại những gì đã có trong bài viết khác của chúng tôi trên blog ThemeIsle.
Phần này sẽ chỉ cho bạn cách cài đặt cả phiên bản miễn phí và cao cấp của Otter Blocks. Tuy nhiên, đối với bài đăng này, bạn sẽ cần phiên bản cao cấp vì phiên bản này cung cấp cho bạn chức năng tìm kiếm trực tiếp.
=> 7 bước cập nhật WordPress an toàn nhất 2023
- Bật tìm kiếm AJAX trực tiếp cho WordPress trong cài đặt của Otter Blocks
Khi bạn đã cài đặt plugin, hãy sử dụng trình chèn khối để thêm khối Tìm kiếm từ Otter Blocks.
Sau khi bạn làm điều này, nó sẽ thêm một trường biểu mẫu và một nút vào bố cục trang của bạn.
Điều này triển khai chức năng tìm kiếm cốt lõi, nhưng đây không phải là tìm kiếm AJAX trực tiếp trong WordPress.
Trong thiết lập mặc định, nó sẽ hoạt động như tìm kiếm WordPress thông thường.
Để bật tính năng AJAX search WordPress, hãy bật tùy chọn Enable Live Search ở thanh bên phải:
- Tinh chỉnh cài đặt để tinh chỉnh trải nghiệm tìm kiếm ở giao diện người dùng trên trang web của bạn
Khi bạn có chức năng tìm kiếm trực tiếp trên trang web của mình, bạn có thể tinh chỉnh nó theo một số cách.
Tất nhiên, có một số tùy chọn về mỹ phẩm và UX.
Chẳng hạn, bạn có thể thay đổi vị trí nút, cho dù bạn có sử dụng nhãn cho hộp tìm kiếm hay không và điều chỉnh màu sắc, hoạt ảnh và đường viền cho phần tìm kiếm:
Từ đó, bạn cũng có thể cung cấp cho tìm kiếm ranh giới của nơi tìm kiếm trên trang web của mình bằng cách chọn loại bài đăng để tìm kiếm.
Đối với điều này, bạn sẽ sử dụng hộp Tìm kiếm trong trên thanh bên phải:
Điều này cho phép bạn thêm “thực thể” vào nơi bạn muốn hoạt động tìm kiếm.
Ví dụ: bạn có thể chọn chỉ tìm kiếm trong nội dung bài đăng của mình hoặc trong số các sản phẩm của cửa hàng.
Nếu bạn để trống trường này, Otter Blocks sẽ tìm kiếm toàn bộ nội dung trang web của bạn.
Thiết lập chức năng tìm kiếm AJAX WordPress ngay hôm nay 🎯
Nếu bạn có thể cung cấp khả năng tương tác cao hơn trên trang web của mình, điều này có thể chuyển thành một UX tốt hơn xung quanh. Tìm kiếm AJAX trực tiếp trong WordPress là một cách tuyệt vời để cung cấp cho người dùng khả năng tìm thấy những gì họ cần trong thời gian thực.
Tuy nhiên, WordPress không cung cấp tính năng này theo mặc định. Thay vào đó, bạn có thể sử dụng Otter Blocks để thêm phần này vào trang web của mình. Không có mã liên quan và bạn nhận được nhiều chức năng hơn là chỉ tìm kiếm AJAX trực tiếp.