Membangun Modal Pencarian untuk Situs WordPress Terproteksi

Sebagian besar tutorial pencarian WordPress terlalu sederhana. Mereka menyuruh Anda memasukkan widget ke dalam header. Ini berhasil untuk blog publik, tetapi gagal untuk situs keanggotaan (membership sites).

Jika Anda memiliki kursus berbayar atau video privat, pencarian bawaan dapat membocorkan data. Pencarian tersebut menampilkan judul konten privat kepada pengguna yang belum login. Ini merusak paywall Anda.

Saya membangun modal pencarian kustom untuk situs kebugaran menggunakan WordPress, WooCommerce, dan LearnDash. Berikut adalah cara membangun pencarian yang menghormati aturan akses.

Arsitektur

Saya menggunakan satu indeks terpadu alih-alih pencarian terpisah untuk setiap jenis konten. Hal ini memungkinkan saya untuk menerapkan pembatasan akses (gating) pada tingkat kueri.

Hasil pencarian mengikuti aturan berikut:

  • Postingan blog bersifat publik.
  • Video on-demand bersifat terproteksi.
  • Kursus terproteksi melalui LearnDash.
  • Produk toko bersifat publik.

Saya membangun rute REST kustom di child theme. Saya menghindari plugin snippet untuk memastikan pencarian tetap stabil.

Detail Teknis Utama

• Server-Side Gating: Jangan pernah menyembunyikan hasil menggunakan JavaScript. Jika Anda menyembunyikan hasil di browser, data tersebut tetap ada dalam respons jaringan. Pengguna dapat melihatnya di DevTools. Anda harus memfilter data di server sebelum data tersebut keluar dari situs.

• Manajemen Cache: Jika Anda menyimpan cache hasil pencarian, Anda mungkin menyajikan hasil privat anggota kepada orang asing. Kecualikan rute REST pencarian Anda dari cache halaman untuk mencegah kebocoran.

• Graceful Degradation: Gunakan guard saat memanggil plugin pihak ketiga seperti Relevanssi. Jika plugin gagal, pencarian harus beralih kembali (fall back) ke pencarian inti WordPress daripada membuat situs crash.

• Performa: Gunakan fungsi debounce (250ms) dan AbortController. Ini menghentikan browser dari mengirim permintaan baru untuk setiap ketukan tombol. Ini juga membatalkan permintaan lama sehingga data usang tidak menimpa hasil baru.

• Keamanan: Selalu lakukan escape pada string sebelum menggunakan innerHTML. Ini mencegah serangan XSS dari judul postingan yang berbahaya.

Pelajaran Mobile

Saya kesulitan dengan page builder yang "menelan" tombol pencarian saya ke dalam menu mobile. Saya mencoba banyak perbaikan CSS, tetapi gagal.

Solusinya sederhana: Berhenti melawan tema. Alih-alih menempatkan tombol di dalam menu, saya menyuntikkannya ke dalam header sebagai elemen terpisah. Jika sebuah komponen menolak perubahan Anda, tempatkan elemen Anda di sampingnya, bukan di dalamnya.

Ringkasan Praktik Terbaik:

  • Terapkan kontrol akses di server.
  • Kecualikan endpoint pencarian dari cache.
  • Gunakan debounce dan AbortController untuk UX yang lancar.
  • Lakukan escape pada semua data API untuk mencegah XSS.
  • Tempatkan elemen di luar kontainer tema yang sulit diatur.

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