ساخت یک مودال جستجو برای سایت‌های وردپرسی دارای محدودیت دسترسی

بسیاری از آموزش‌های جستجوی وردپرس بیش از حد ساده هستند. آن‌ها به شما می‌گویند که فقط یک ویجت را در هدر قرار دهید. این روش برای وبلاگ‌های عمومی جواب می‌دهد، اما برای سایت‌های عضویت‌محور شکست می‌خورد.

اگر دوره‌های پولی یا ویدیوهای خصوصی دارید، جستجوی پیش‌فرض می‌تواند باعث نشت داده‌ها شود. این جستجو عناوین محتوای خصوصی را به کاربران وارد نشده نشان می‌دهد که باعث از بین رفتن سیستم پرداخت (paywall) شما می‌شود.

من یک مودال جستجوی سفارشی برای یک سایت تناسب اندام با استفاده از WordPress، WooCommerce و LearnDash ساختم. در اینجا نحوه ساخت جستجویی که به قوانین دسترسی احترام می‌گذارد، آورده شده است.

The Architecture

من به جای استفاده از جستجوهای جداگانه برای هر نوع محتوا، از یک ایندکس واحد و یکپارچه استفاده کردم. این کار به من اجازه داد تا محدودیت دسترسی را در سطح کوئری (query) اعمال کنم.

نتایج جستجو از این قوانین پیروی می‌کنند:

  • پست‌های وبلاگ عمومی هستند.
  • ویدیوهای درخواستی (on-demand) دارای محدودیت دسترسی هستند.
  • دوره‌ها از طریق LearnDash محدود شده‌اند.
  • محصولات فروشگاه عمومی هستند.

من یک مسیر REST سفارشی در چایلد تم (child theme) ساختم. برای اطمینان از پایداری جستجو، از استفاده از پلاگین‌های اسنیپت (snippet plugins) خودداری کردم.

Key Engineering Details

• Server-Side Gating: هرگز نتایج را با استفاده از JavaScript مخفی نکنید. اگر نتیجه‌ای را در مرورگر مخفی کنید، داده‌ها همچنان در پاسخ شبکه (network response) وجود دارند. کاربر می‌تواند آن‌ها را در DevTools ببیند. شما باید داده‌ها را قبل از خروج از سایت، در سمت سرور فیلتر کنید.

• Cache Management: اگر نتایج جستجوی خود را کش کنید، ممکن است نتایج خصوصی یک عضو را به یک غریبه نمایش دهید. برای جلوگیری از نشت داده، مسیر REST جستجوی خود را از کش صفحه (page cache) مستثنی کنید.

• Graceful Degradation: هنگام فراخوانی پلاگین‌های شخص ثالث مانند Relevanssi، از Guardها استفاده کنید. اگر پلاگین با خطا مواجه شد، جستجو باید به جای از کار انداختن سایت، به جستجوی اصلی وردپرس بازگردد (fallback).

• Performance: از یک تابع debounce (با ۲۵۰ میلی‌ثانیه) و یک AbortController استفاده کنید. این کار از ارسال درخواست جدید توسط مرورگر برای هر کلید زده شده جلوگیری می‌کند. همچنین درخواست‌های قدیمی را لغو می‌کند تا داده‌های قدیمی جایگزین نتایج جدید نشوند.

• Security: همیشه رشته‌ها (strings) را قبل از استفاده در innerHTML، پاکسازی (escape) کنید. این کار از حملات XSS ناشی از عناوین مخرب پست‌ها جلوگیری می‌کند.

The Mobile Lesson

من با یک صفحه‌ساز (page builder) مشکل داشتم که دکمه جستجوی من را درون منوی موبایل می‌بلعید. چندین راه حل CSS را امتحان کردم، اما همگی شکست خوردند.

راه حل ساده بود: با تم نجنگید. به جای قرار دادن دکمه داخل منو، آن را به عنوان یک المان جداگانه به هدر تزریق کردم. اگر یک کامپوننت در برابر تغییرات شما مقاومت می‌کند، المان خود را به جای داخل آن، در کنار آن قرار دهید.

Summary of Best Practices:

  • کنترل دسترسی را در سمت سرور اعمال کنید.
  • نقاط انتهایی (endpoints) جستجو را از کش مستثنی کنید.
  • برای تجربه کاربری روان از debounce و AbortController استفاده کنید.
  • تمام داده‌های API را برای جلوگیری از XSS پاکسازی کنید.
  • المان‌ها را خارج از کانتینرهای سرسختِ تم قرار دهید.

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