Membina Modal Carian untuk Laman WordPress Berpagar

Kebanyakan tutorial carian WordPress terlalu ringkas. Ia hanya menyuruh anda meletakkan widget dalam pengepala (header). Ini berfungsi untuk blog awam, tetapi gagal untuk laman keahlian.

Jika anda mempunyai kursus berbayar atau video peribadi, carian lalai boleh membocorkan data. Ia memaparkan tajuk kandungan peribadi kepada pengguna yang tidak log masuk. Ini merosakkan paywall anda.

Saya membina modal carian tersuai untuk sebuah laman kecergasan menggunakan WordPress, WooCommerce, dan LearnDash. Berikut adalah cara membina carian yang menghormati peraturan akses.

Seni Bina

Saya menggunakan satu indeks tunggal yang disatukan dan bukannya carian berasingan untuk setiap jenis kandungan. Ini membolehkan saya menguatkuasakan kawalan akses (gating) pada peringkat pertanyaan (query).

Keputusan carian mengikut peraturan ini:

  • Hantaran blog adalah awam.
  • Video atas permintaan adalah berpagar.
  • Kursus adalah berpagar melalui LearnDash.
  • Produk kedai adalah awam.

Saya membina laluan REST tersuai dalam child theme. Saya mengelakkan penggunaan plugin snippet untuk memastikan carian kekal stabil.

Perincian Kejuruteraan Utama

• Kawalan Akses Sisi-Pelayan: Jangan sesekali menyembunyikan keputusan menggunakan JavaScript. Jika anda menyembunyikan keputusan dalam pelayar, data tersebut masih ada dalam respons rangkaian. Pengguna boleh melihatnya dalam DevTools. Anda mesti menapis data pada pelayan sebelum ia keluar dari laman tersebut.

• Pengurusan Cache: Jika anda menyimpan cache keputusan carian, anda mungkin memberikan keputusan peribadi ahli kepada orang asing. Kecualikan laluan REST carian anda daripada cache halaman untuk mengelakkan kebocoran.

• Degradasi Berhemah (Graceful Degradation): Gunakan 'guards' apabila memanggil plugin pihak ketiga seperti Relevanssi. Jika plugin tersebut gagal, carian harus kembali menggunakan carian teras WordPress dan bukannya menyebabkan laman web tergendala.

• Prestasi: Gunakan fungsi debounce (250ms) dan AbortController. Ini menghalang pelayar daripada menghantar permintaan baharu bagi setiap tekanan kekunci. Ia juga membatalkan permintaan lama supaya data lapuk tidak menindih keputusan baharu.

• Keselamatan: Sentiasa lakukan escape pada string sebelum menggunakan innerHTML. Ini menghalang serangan XSS daripada tajuk hantaran yang berniat jahat.

Pengajaran Mudah Alih

Saya menghadapi masalah dengan pembina halaman (page builder) yang "menelan" butang carian saya ke dalam menu mudah alih. Saya telah mencuba banyak pembaikan CSS, tetapi semuanya gagal.

Penyelesaiannya mudah: Berhenti melawan tema tersebut. Daripada meletakkan butang di dalam menu, saya menyuntikkannya ke dalam pengepala sebagai elemen berasingan. Jika sesuatu komponen menentang perubahan anda, letakkan elemen anda di sebelahnya dan bukannya di dalamnya.

Ringkasan Amalan Terbaik:

  • Kuatkuasakan kawalan akses pada pelayan.
  • Kecualikan endpoint carian daripada cache.
  • Gunakan debounce dan AbortController untuk UX yang lancar.
  • Lakukan escape pada semua data API untuk mengelakkan XSS.
  • Letakkan elemen di luar bekas (container) tema yang sukar diubah.

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