Xây dựng Modal Tìm kiếm cho các Trang WordPress có Nội dung Giới hạn Thành viên

Hầu hết các hướng dẫn tìm kiếm WordPress đều dừng lại sau khi bạn thêm một widget vào header.

Điều này sẽ thất bại khi bạn có nội dung giới hạn như các khóa học trả phí hoặc video riêng tư. Một thanh tìm kiếm mặc định sẽ làm rò rỉ tiêu đề của các tài liệu riêng tư cho những khách truy cập chưa đăng nhập.

Tôi đã xây dựng một modal tìm kiếm trực tiếp cho một trang web thành viên về thể hình. Trang web này sử dụng WordPress, WooCommerce, Divi, LearnDash và WishList Member.

Dưới đây là cách xây dựng tính năng tìm kiếm tôn trọng tường phí (paywall) của bạn.

Kiến trúc

Tôi đã sử dụng một chỉ mục thống nhất với bộ lọc nhận biết quyền truy cập. Tôi chọn cách này để đảm bảo người dùng chưa đăng nhập không bao giờ nhìn thấy tiêu đề hoặc đoạn trích từ các bài viết chỉ dành cho thành viên.

Giao diện người dùng (UI) sử dụng một biểu tượng để mở một lớp phủ toàn màn hình. Điều này giúp tiết kiệm không gian trên thiết bị di động và trông gọn gàng hơn so với một thanh nhập liệu chật chội.

Backend

Mọi thứ đều chạy thông qua một route REST tùy chỉnh duy nhất trong một child theme.

Các quy tắc kỹ thuật chính:

  • Bảo vệ các phụ thuộc (dependencies): Sử dụng kiểm tra hàm cho các plugin tìm kiếm như Relevanssi. Nếu plugin bị thiếu, tính năng tìm kiếm nên quay về sử dụng lõi WordPress thay vì làm hỏng trang web.
  • Lọc phía máy chủ (Server-side filtering): Đừng bao giờ lọc kết quả bằng JavaScript. Nếu bạn ẩn một kết quả trong trình duyệt, dữ liệu đó đã nằm trong phản hồi mạng (network response). Bất kỳ ai có DevTools đều có thể nhìn thấy nó. Hãy lọc dữ liệu trước khi máy chủ gửi phản hồi.
  • Loại trừ bộ nhớ đệm (Cache exclusion): Bạn phải loại trừ route REST tìm kiếm của mình khỏi việc lưu bộ nhớ đệm trang (page caching). Nếu bạn lưu bộ nhớ đệm các kết quả, kết quả tìm kiếm của một thành viên có thể được hiển thị cho khách, làm rò rỉ nội dung riêng tư.

Frontend

Phía client sử dụng vanilla JavaScript.

Ba yếu tố giúp trải nghiệm người dùng (UX) hoạt động tốt:

  • Debounce: Đợi 250ms sau mỗi lần nhấn phím trước khi gửi yêu cầu. Điều này giúp ngăn chặn tải trọng không cần thiết lên máy chủ.
  • AbortController: Hủy các yêu cầu trước đó khi người dùng tiếp tục nhập. Điều này ngăn các kết quả cũ ghi đè lên các kết quả mới.
  • Trạng thái lỗi: Hiển thị thông báo rõ ràng nếu việc fetch thất bại. Một biểu tượng tải (loader) xoay mãi không dừng là một trải nghiệm UX tồi.

Bài học trên di động

Tôi đã cố gắng chèn nút tìm kiếm vào menu di động của Divi. Chủ đề (theme) đã chặn các lượt nhấp chuột, khiến nút không thể nhấn được.

Cách khắc phục rất đơn giản: Đừng cố đối đầu với theme.

Thay vì đặt nút bên trong menu, tôi đã chèn nó vào header như một phần tử độc lập. Điều này giúp nó nằm ngoài sự kiểm soát của theme và giúp việc chạm (tap) trở nên dễ dàng hơn.

Tóm tắt

  • Kiểm soát truy cập phải được thực hiện trên máy chủ.
  • Loại trừ các endpoint tìm kiếm khỏi bộ nhớ đệm của bạn.
  • Sử dụng debounce và AbortController để xử lý các yêu cầu.
  • Escape tất cả dữ liệu API trước khi chèn vào DOM để ngăn chặn XSS.
  • Nếu một trình xây dựng trang (page builder) cản trở mã của bạn, hãy đặt phần tử của bạn bên cạnh nó thay vì bên trong nó.

Source: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92