การสร้าง Search Modal สำหรับเว็บไซต์ WordPress ที่มีการจำกัดการเข้าถึง (Gated Sites)
บทเรียนการค้นหาใน WordPress ส่วนใหญ่นั้นง่ายเกินไป พวกเขามักจะบอกให้คุณวาง widget ลงใน header ซึ่งมันใช้ได้กับบล็อกสาธารณะ แต่ใช้ไม่ได้กับเว็บไซต์ระบบสมาชิก (membership sites)
หากคุณมีคอร์สเรียนแบบชำระเงินหรือวิดีโอส่วนตัว ระบบค้นหาแบบเริ่มต้นอาจทำให้ข้อมูลรั่วไหลได้ เพราะมันจะแสดงชื่อเนื้อหาที่เป็นส่วนตัวให้กับผู้ใช้ที่ยังไม่ได้ล็อกอิน ซึ่งจะทำลายระบบ Paywall ของคุณ
ผมได้สร้าง custom search modal สำหรับเว็บไซต์ฟิตเนสโดยใช้ WordPress, WooCommerce และ LearnDash ต่อไปนี้คือวิธีการสร้างระบบค้นหาที่เคารพกฎการเข้าถึงข้อมูล
สถาปัตยกรรม (The Architecture)
ผมใช้ดัชนี (index) ชุดเดียวที่รวมทุกอย่างเข้าด้วยกัน แทนที่จะแยกการค้นหาตามประเภทเนื้อหา วิธีนี้ช่วยให้ผมสามารถบังคับใช้การจำกัดการเข้าถึง (gating) ได้ในระดับ Query
ผลการค้นหาจะเป็นไปตามกฎเหล่านี้:
- โพสต์บล็อกเป็นสาธารณะ
- วิดีโอแบบ On-demand ถูกจำกัดการเข้าถึง
- คอร์สเรียนถูกจำกัดการเข้าถึงผ่าน LearnDash
- สินค้าในร้านค้าเป็นสาธารณะ
ผมสร้าง custom REST route ใน child theme และหลีกเลี่ยงการใช้ snippet plugins เพื่อให้มั่นใจว่าระบบค้นหาจะมีความเสถียร
รายละเอียดทางวิศวกรรมที่สำคัญ (Key Engineering Details)
• Server-Side Gating: อย่าซ่อนผลลัพธ์ด้วย JavaScript เพราะหากคุณซ่อนผลลัพธ์ในเบราว์เซอร์ ข้อมูลจะยังคงอยู่ใน network response ซึ่งผู้ใช้สามารถดูได้ผ่าน DevTools คุณต้องกรองข้อมูลที่ฝั่งเซิร์ฟเวอร์ก่อนที่ข้อมูลจะถูกส่งออกจากเว็บไซต์
• Cache Management: หากคุณทำ cache ผลการค้นหา คุณอาจเผลอส่งผลลัพธ์ส่วนตัวของสมาชิกให้แก่คนแปลกหน้า ควรยกเว้น (exclude) REST route ของการค้นหาออกจาก page cache เพื่อป้องกันข้อมูลรั่วไหล
• Graceful Degradation: ใช้ guards เมื่อเรียกใช้งาน third-party plugins อย่าง Relevanssi หากปล