मेंबरशिप-गेटेड (Membership-Gated) वर्डप्रेस साइट्ससाठी सर्च मोडल तयार करणे

बहुतेक वर्डप्रेस सर्च ट्युटोरियल्स हेडरमध्ये विजेट जोडल्यानंतरच थांबतात.

जेव्हा तुमच्याकडे सशुल्क कोर्सेस किंवा खाजगी व्हिडिओंसारखे 'गेटेड कंटेंट' (gated content) असते, तेव्हा हे अपयशी ठरते. डिफॉल्ट सर्चमुळे लॉग-आउट केलेल्या व्हिजिटर्सना तुमच्या खाजगी साहित्याची शीर्षके (titles) दिसू शकतात.

मी एका फिटनेस मेंबरशिप साइटसाठी एक 'लाईव्ह सर्च मोडल' तयार केले आहे. ही साइट WordPress, WooCommerce, Divi, LearnDash आणि WishList Member वापरते.

तुमच्या पेवॉलचा (paywall) आदर करणारा सर्च कसा तयार करायचा, ते खाली दिले आहे.

आर्किटेक्चर (The Architecture)

मी 'ॲक्सेस-अवेअर फिल्टरिंग'सह (access-aware filtering) एक युनिफाइड इंडेक्स वापरला आहे. लॉग-आउट केलेल्या वापरकर्त्याला मेंबर-ओन्ली पोस्टचे शीर्षक किंवा सारांश (excerpt) कधीही दिसणार नाही, याची खात्री करण्यासाठी मी हा पर्याय निवडला.

UI मध्ये एका आयकॉनचा वापर केला आहे जो फुल-स्क्रीन ओव्हरले (overlay) उघडतो. यामुळे मोबाईलवर जागा वाचते आणि अरुंद इनपुट बारपेक्षा हे अधिक सुटसुटीत दिसते.

बॅकएंड (The Backend)

सर्व काही चाइल्ड थीममधील (child theme) एका सिंगल कस्टम REST रूटद्वारे चालते.

महत्त्वाचे तांत्रिक नियम:

  • डिपेंडन्सीज सुरक्षित करा (Guard dependencies): Relevanssi सारख्या सर्च प्लगइन्ससाठी फंक्शन चेक वापरा. जर प्लगइन नसेल, तर साइट क्रॅश होण्याऐवजी सर्चने कोअर वर्डप्रेसवर (core WordPress) स्विच केले पाहिजे.
  • सर्व्हर-साइड फिल्टरिंग (Server-side filtering): निकाल कधीही JavaScript वापरून फिल्टर करू नका. जर तुम्ही ब्राउझरमध्ये निकाल लपवला, तरीही तो डेटा नेटवर्क रिस्पॉन्समध्ये आधीच असतो. DevTools वापरून कोणीही तो पाहू शकतो. सर्व्हरने रिस्पॉन्स पाठवण्यापूर्वीच डेटा फिल्टर करा.
  • कॅशे वगळणे (Cache exclusion): तुम्हाला तुमच्या सर्च REST रूटला पेज कॅशिंगमधून (page caching) वगळावे लागेल. जर तुम्ही निकाल कॅश केले, तर एका मेंबरचा सर्च रिझल्ट गेस्टला दिसू शकतो, ज्यामुळे खाजगी कंटेंट लीक होऊ शकतो.

फ्रंटएंड (The Frontend)

क्लायंट साईडसाठी व्हॅनिला JavaScript वापरले आहे.

UX उत्तम चालण्यासाठी तीन गोष्टी महत्त्वाच्या आहेत:

  • डिबाउन्स (Debounce): रिक्वेस्ट पाठवण्यापूर्वी कीस्ट्रोकनंतर २५०ms थांबा. यामुळे सर्व्हरवरील अनावश्यक भार कमी होतो.
  • AbortController: वापरकर्ता टाईप करत असताना मागील रिक्वेस्ट रद्द करा. यामुळे जुने निकाल नवीन निकालांवर ओव्हरराईट (overwrite) होत नाहीत.
  • एरर स्टेट्स (Error states): जर 'fetch' अयशस्वी झाले तर स्पष्ट संदेश दाखवा. न थांबणारा स्पिनिंग लोडर (spinning loader) हा खराब UX आहे.

मोबाईलमधील धडा (The Mobile Lesson)

मी सर्च बटण Divi मोबाईल मेनूमध्ये समाविष्ट (inject) करण्याचा प्रयत्न केला. थीमने क्लिक्स इंटरसेप्ट केल्यामुळे बटण क्लिक करता येत नव्हते.

उपाय साधा होता: थीमशी संघर्ष करणे थांबवा.

बटण मेनूमध्ये टाकण्याऐवजी, मी ते हेडरमध्ये एक स्वतंत्र घटक (standalone element) म्हणून समाविष्ट केले. यामुळे ते थीमच्या नियंत्रणाबाहेर राहिले आणि टॅप करणे सोपे झाले.

सारांश (Summary)

  • ॲक्सेस कंट्रोल सर्व्हरवरच झाला पाहिजे.
  • सर्च एंडपॉइंट्स तुमच्या कॅशेमधून वगळा.
  • रिक्वेस्ट हाताळण्यासाठी debounce आणि AbortController वापरा.
  • XSS टाळण्यासाठी सर्व API डेटा DOM मध्ये समाविष्ट करण्यापूर्वी 'एस्केप' (escape) करा.
  • जर एखादा पेज बिल्डर तुमच्या कोडला अडथळा आणत असेल, तर तुमचा घटक त्याच्या आत टाकण्याऐवजी त्याच्या बाजूला ठेवा.

स्रोत: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92