Custom tìm kiếm gợi ý wordpress (instant search wordpress)

Custom tìm kiếm gợi ý wordpress (instant search wordpress): tính năng này không có sẳn trong wordpress, trong theme flatsome thì có mà đôi lúc chúng ta lại muốn một thêm một tùy biến tìm kiếm trên google giống hình dưới đây chẳn hạn thì làm thế nào?. Ngay sau đây mình sẽ chia sẽ cách làm

1. Kịch bản script

Nhu cầu của chúng ta là custom search mặc định wordpress để nó làm các việc như sau: tìm kiếm gợi ý giống google và nó sẽ search trong post title và cung cấp một tùy biên nữa là nếu site đã index nhiều trên google thì có thể tìm các kết quả trên google từ chỉ site hiện tại

2. Custom phần mã html

Ở đây mình sẽ làm trường hợp search cho post nha còn woocommerce thì sử dụng hook khác để làm và hook ở đây sẽ là get_search_form

Mở file functions.php bỏ vào

 3. Mã css và js

Và tất nhiên linh hồn sẽ là mã js và css để form tìm kiếm của chúng ta đẹp hơn và nó sẽ xử lý như thế nào. Sự kiện được sử dụng trong trường hợp này là keyup. Mở file functions.php bỏ code này vào

4. Mã php

Đây là nơi chung ta tương tác với cơ sở dữ liệu để tìm ra kết quả phù hợp để trả về gợi ý. Và hook ajax của chung ta ở đây là search_for_woocommerce_instant (hook này do chúng ta đặt tên ở phần mã js). Mở file functions.php bỏ vào

Chúc các bạn thành công!. Nếu có gì góp ý hoặc thắc mắt thì để lại bình luận bên dưới nha

 

 

5/5 (8 Đánh giá)


Gửi Phản Hồi
Chọn đánh giá của bạn
0 Bình Luận
Thông tin người gửi
Anh Chị

Đăng ký nhận bài viết mới

Khi mình đăng bài mới bạn sẽ nhận nó qua Email


Hướng dẫn thiết kế theme

Các functions thường dùng

  • Hotline: 0912 889 416

Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net

Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress