بناء نافذة بحث منبثقة (Modal) لمواقع WordPress المحمية بعضوية

تتوقف معظم دروس البحث في WordPress بمجرد إضافة أداة (widget) إلى الترويسة (header).

يفشل هذا الأسلوب عندما يكون لديك محتوى محمي مثل الدورات المدفوعة أو الفيديوهات الخاصة؛ فالبحث الافتراضي سيسرب عناوين موادك الخاصة للزوار غير المسجلين.

لقد قمت ببناء نافذة بحث منبثقة حية (live search modal) لموقع عضوية خاص باللياقة البدنية. يستخدم الموقع WordPress و WooCommerce و Divi و LearnDash و WishList Member.

إليك كيفية بناء نظام بحث يحترم جدار الدفع (paywall) الخاص بك.

البنية التحتية

استخدمت فهرسًا موحدًا مع تصفية تراعي صلاحيات الوصول. اخترت هذا لضمان عدم رؤية المستخدم غير المسجل لأي عنوان أو مقتطف من منشور مخصص للأعضاء فقط.

تستخدم واجهة المستخدم أيقونة تفتح طبقة تغطية (overlay) بملء الشاشة. هذا يوفر مساحة على الهواتف المحمولة ويبدو أكثر ترتيبًا من شريط الإدخال الضيق.

الجزء الخلفي (The Backend)

يعمل كل شيء من خلال مسار REST مخصص واحد في قالب ابن (child theme).

القواعد التقنية الأساسية:

  • حماية التبعيات: استخدم فحصًا برمجياً لإضافات البحث مثل Relevanssi. إذا كانت الإضافة مفقودة، يجب أن يعود البحث إلى نظام WordPress الأساسي بدلاً من تعطل الموقع.
  • التصفية من جانب الخادم: لا تقم أبدًا بتصفية النتائج باستخدام JavaScript. إذا قمت بإخفاء نتيجة في المتصفح، فستكون البيانات موجودة بالفعل في استجابة الشبكة، ويمكن لأي شخص يستخدم DevTools رؤيتها. قم بتصفية البيانات قبل أن يرسل الخادم الاستجابة.
  • استثناء التخزين المؤقت: يجب عليك استثناء مسار REST الخاص بالبحث من التخزين المؤقت للصفحات (page caching). إذا قمت بتخزين النتائج مؤقتًا، فقد يتم تقديم نتائج بحث أحد الأعضاء لزائر، مما يؤدي إلى تسريب محتوى خاص.

الجزء الأمامي (The Frontend)

يستخدم جانب العميل JavaScript الخام (vanilla JavaScript).

ثلاثة أشياء تجعل تجربة المستخدم (UX) تعمل بسلاسة:

  • Debounce: الانتظار لمدة 250 مللي ثانية بعد كل ضغطة مفتاح قبل إرسال الطلب. هذا يمنع التحميل غير الضروري على الخادم.
  • AbortController: إلغاء الطلبات السابقة عندما يستمر المستخدم في الكتابة. هذا يمنع النتائج القديمة من الكتابة فوق النتائج الجديدة.
  • حالات الخطأ: إظهار رسالة واضحة في حال فشل عملية الجلب (fetch). مؤشر التحميل الدوار الذي لا يتوقف أبدًا يعد تجربة مستخدم سيئة.

درس الهواتف المحمولة

حاولت حقن زر البحث في قائمة Divi للهواتف المحمولة، لكن القالب كان يعترض النقرات، مما جعل الزر غير قابل للنقر.

كان الحل بسيطًا: توقف عن محاربة القالب.

بدلاً من وضع الزر داخل القائمة، قمت بحقنه في الترويسة (header) كعنصر مستقل. أبقى هذا الزر خارج نطاق تحكم القالب وجعله سهل النقر.

ملخص

  • يجب أن تتم عملية التحكم في الوصول على الخادم.
  • استثنِ نقاط نهاية البحث (search endpoints) من التخزين المؤقت الخاص بك.
  • استخدم debounce و AbortController للتعامل مع الطلبات.
  • قم بعمل escape لجميع بيانات API قبل حقنها في الـ DOM لمنع هجمات XSS.
  • إذا قاوم باني الصفحات (page builder) الكود الخاص بك، فضع عنصرك بجانبه بدلاً من وضعه بداخله.

المصدر: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92