ممبرشپ سے محفوظ (Gated) WordPress سائٹس کے لیے سرچ موڈل بنانا

زیادہ تر WordPress سرچ ٹیوٹوریلز صرف ہیڈر میں ایک ویجیٹ (widget) شامل کرنے پر ختم ہو جاتے ہیں۔

یہ طریقہ اس وقت ناکام ہو جاتا ہے جب آپ کے پاس پیڈ کورسز یا پرائیویٹ ویڈیوز جیسا محفوظ مواد (gated content) ہو۔ ڈیفالٹ سرچ آپ کے نجی مواد کے عنوانات لاگ آؤٹ شدہ وزٹرز کو ظاہر کر دے گی۔

میں نے ایک فٹنس ممبرشپ سائٹ کے لیے لائیو سرچ موڈل بنایا۔ یہ سائٹ WordPress، WooCommerce، Divi، LearnDash، اور WishList Member استعمال کرتی ہے۔

یہاں بتایا گیا ہے کہ ایسی سرچ کیسے بنائی جائے جو آپ کے پے وال (paywall) کا احترام کرے۔

آرکیٹیکچر (The Architecture)

میں نے ایکسیس کے لحاظ سے فلٹرنگ (access-aware filtering) کے ساتھ ایک متحدہ انڈیکس (unified index) استعمال کیا۔ میں نے یہ اس لیے منتخب کیا تاکہ اس بات کو یقینی بنایا جا سکے کہ لاگ آؤٹ شدہ صارف کبھی بھی صرف ممبرز کے لیے مخصوص پوسٹ کا عنوان یا اقتباس نہ دیکھ سکے۔

UI میں ایک آئیکن استعمال کیا گیا ہے جو فل اسکرین اوورلے (full-screen overlay) کھولتا ہے۔ یہ موبائل پر جگہ بچاتا ہے اور ایک تنگ ان پٹ بار کے مقابلے میں زیادہ صاف ستھرا نظر آتا ہے۔

بیک اینڈ (The Backend)

سب کچھ چائلڈ تھیم (child theme) میں ایک سنگل کسٹم REST روٹ کے ذریعے چلتا ہے۔

اہم تکنیکی اصول:

  • ڈیوپینڈینسیز (Dependencies) کی حفاظت کریں: Relevanssi جیسے سرچ پلگ انز کے لیے فنکشن چیک استعمال کریں۔ اگر پلگ ان موجود نہ ہو، تو سرچ سائٹ کو خراب کرنے کے بجائے کور WordPress پر منتقل ہو جانی چاہیے۔
  • سرور سائیڈ فلٹرنگ: نتائج کو کبھی بھی JavaScript کے ذریعے فلٹر نہ کریں۔ اگر آپ براؤزر میں کوئی نتیجہ چھپاتے ہیں، تو ڈیٹا پہلے ہی نیٹ ورک رسپانس میں موجود ہوتا ہے۔ DevTools استعمال کرنے والا کوئی بھی اسے دیکھ سکتا ہے۔ ڈیٹا کو سرور سے رسپانس بھیجنے سے پہلے فلٹر کریں۔
  • کیش اخراج (Cache exclusion): آپ کو اپنے سرچ REST روٹ کو پیج کیشنگ (page caching) سے نکالنا ہوگا۔ اگر آپ نتائج کو کیش کرتے ہیں، تو ایک ممبر کی سرچ کسی مہمان کو دکھائی جا سکتی ہے، جس سے نجی مواد لیک ہو سکتا ہے۔

فرنٹ اینڈ (The Frontend)

کلائنٹ سائیڈ پر vanilla JavaScript استعمال کی گئی ہے۔

تین چیزیں UX کو بہتر بناتی ہیں:

  • Debounce: درخواست بھیجنے سے پہلے کی اسٹروک (keystroke) کے بعد 250ms انتظار کریں۔ یہ غیر ضروری سرور لوڈ کو روکتا ہے۔
  • AbortController: جب صارف ٹائپ کرنا جاری رکھے تو پچھلی درخواستوں کو منسوخ کر دیں۔ یہ پرانے نتائج کو نئے نتائج پر حاوی ہونے سے روکتا ہے۔
  • ایرر اسٹیٹس (Error states): اگر fetch ناکام ہو جائے تو ایک واضح پیغام دکھائیں۔ ایک ایسا اسپننگ لوڈر جو کبھی نہ رکے، برا UX ہے۔

موبائل کا سبق (The Mobile Lesson)

میں نے سرچ بٹن کو Divi موبائل مینو میں شامل کرنے کی کوشش کی۔ تھیم نے کلکس کو روک لیا (intercepted)، جس کی وجہ سے بٹن کلک کرنے کے قابل نہیں رہا۔

حل سادہ تھا: تھیم سے لڑنا بند کریں۔

بٹن کو مینو کے اندر رکھنے کے بجائے، میں نے اسے ہیڈر میں ایک آزاد ایلیمنٹ کے طور پر شامل کیا۔ اس سے یہ تھیم کے کنٹرول سے باہر رہا اور اسے ٹیپ کرنا آسان ہو گیا۔

خلاصہ

  • ایکسیس کنٹرول سرور پر ہونا چاہیے۔
  • سرچ اینڈ پوائنٹس کو اپنے کیش سے نکالیں۔
  • درخواستوں کو سنبھالنے کے لیے debounce اور AbortController استعمال کریں۔
  • XSS سے بچنے کے لیے تمام API ڈیٹا کو DOM میں شامل کرنے سے پہلے ایسکیپ (escape) کریں۔
  • اگر کوئی پیج بلڈر آپ کے کوڈ کی مزاحمت کرے، تو اپنے ایلیمنٹ کو اس کے اندر رکھنے کے بجائے اس کے ساتھ رکھیں۔

ماخذ: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92