Bài 8 : Tạo form Tìm kiếm trong lập trình Theme WordPress

Bài 8 : Tạo form Tìm kiếm trong lập trình Theme WordPress

Lợi Trương - Admin Follow Author

Form tìm kiếm là chức năng không thể thiếu cho website vì vậy hôm nay sharecodewebsite sẽ hướng dẫn các bạn cách tạo form tìm kiếm trong lập trình Theme WordPress.

Có 3 loại Form Tìm kiếm phổ biến nhất là :

  • Tìm kiếm theo từ khóa , tiêu đề của bài viết : cách này sẽ trả về tất cả các bài viết , trang , sản phẩm có từ khóa hoặc tiêu đề phù hợp.
  • Tìm kiếm theo từ khóa + post_type nhất định : Cách này sẽ trả về kết quả có từ khóa và post type mà bạn chọn , ví dụ như : post , page , product . Giúp kết quả trả về chính xác hơn không lang mang , giúp các bạn custorm giao diện hợp lý .
  • Tìm kiếm theo từ khoá + Dropdown Chuyên mục bài viết: cách này sẽ trả về những bài viết có từ khoá liên quan đến chuyên mục mà user chọn.

Để tránh lang mang nên ở bài viết này mình sẽ hướng dẫn các bạn cách tạo form tìm kiếm với từ khóa và post_type là post. Nếu các bạn muốn tìm hiểu những form tìm kiếm khác có thể xem thêm bài viết Top 10 Những đoạn code phổ biến – hay dùng trong lập trình Theme WordPress nhé !

1- Add Code Xử lý cho Form Tìm Kiếm :

Vị trí form search chúng ta sẽ thay thế.

Bạn tìm tới file header hoặc nơi chứa giao diện form tìm kiếm và thay thế nó như sau :

Lưu ý :

  • Thẻ input type=”hidden” là ẩn đi , nó chứa value là post thì kết quả trả về chỉ liên quan đến Post. bạn có thể thêm value cho phù hợp như : page hoặc product.
  • Thẻ input có type=”text” với name=”s” : bạn nhớ phải đặt name là “s” nhé. Đặt name khác nó không ra kết quả đâu.

2- Code trang kết quả trả về – Search.php :

Vẫn là tuyệt chiêu cũ , các bạn chỉ cần dùng hàm Get Posts Default của WordPress rồi gắn vào file search.php thì tự động các kết quả liên quan sẽ được xuất hiện.

Giao diện trang search và trang category giống nhau nên mình copy file archive.php vào file search.php là xong 🙂

Code file search.php :

So Easy 😍

Ok !! Thế là xong chức năng tìm kiếm cho website . Thật đơn giản đúng không nào?

Nếu có thắc mắc gì hãy để lại Comment của các bạn ở phía dưới . Hãy thực hành và làm theo để hiểu rõ nhé.

Lưu ý, mọi bài viết mình đều share full code từng file. Nếu các bạn làm theo từng bước không hiểu có thể theo dõi Full code theo từng bài viết hoặc tải full source code tại đây nhé : tại đây.

Bài sau mình sẽ hướng dẫn các bạn cách tách sidebar hoặc những khối giao diện xuất hiện thường xuyên cho website. Giúp cho các bạn dễ quản lý , chỉnh sửa hơn. Theo dõi sharecodewebsite nhé 😍😍

Comment

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Dark Mode

Fanpage Facebook