मेंबरशिप-गेटेड WordPress साइटों के लिए सर्च मोडल बनाना
अधिकांश WordPress सर्च ट्यूटोरियल केवल हेडर में एक विजेट जोड़ने तक ही सीमित रहते हैं।
यह तब विफल हो जाता है जब आपके पास पेड कोर्स या प्राइवेट वीडियो जैसा गेटेड कंटेंट (gated content) हो। डिफॉल्ट सर्च आपके प्राइवेट कंटेंट के टाइटल को लॉग-आउट किए हुए विज़िटर्स को दिखा सकता है।
मैंने एक फिटनेस मेंबरशिप साइट के लिए लाइव सर्च मोडल बनाया। यह साइट WordPress, WooCommerce, Divi, LearnDash, और WishList Member का उपयोग करती है।
यहाँ बताया गया है कि ऐसा सर्च कैसे बनाया जाए जो आपके पेवॉल (paywall) का सम्मान करे।
आर्किटेक्चर (The Architecture)
मैंने एक्सेस-अवेयर फ़िल्टरिंग (access-aware filtering) के साथ एक यूनिफाइड इंडेक्स का उपयोग किया। मैंने इसे यह सुनिश्चित करने के लिए चुना कि लॉग-आउट किया हुआ यूजर कभी भी केवल मेंबर्स के लिए उपलब्ध पोस्ट का टाइटल या एक्सर्प्ट (excerpt) न देख सके।
UI में एक आइकन का उपयोग किया गया है जो फुल-स्क्रीन ओवरले खोलता है। यह मोबाइल पर जगह बचाता है और एक संकीर्ण (cramped) इनपुट बार की तुलना में अधिक साफ-सुथरा दिखता है।
बैकएंड (The Backend)
सब कुछ चाइल्ड थीम में एक सिंगल कस्टम REST रूट के माध्यम से चलता है।
मुख्य तकनीकी नियम:
- डिपेंडेंसीज़ को सुरक्षित करें (Guard dependencies): Relevanssi जैसे सर्च प्लगइन्स के लिए फंक्शन चेक का उपयोग करें। यदि प्लगइन मौजूद नहीं है, तो साइट को खराब करने के बजाय सर्च को कोर WordPress पर वापस (fall back) जाना चाहिए।
- सर्वर-साइड फ़िल्टरिंग (Server-side filtering): परिणामों को कभी भी JavaScript का उपयोग करके फ़िल्टर न करें। यदि आप ब्राउज़र में किसी परिणाम को छिपाते हैं, तो डेटा पहले से ही नेटवर्क रिस्पॉन्स में मौजूद होता है। DevTools का उपयोग करने वाला कोई भी व्यक्ति इसे देख सकता है। सर्वर द्वारा रिस्पॉन्स भेजने से पहले डेटा को फ़िल्टर करें।
- कैश एक्सक्लूजन (Cache exclusion): आपको अपने सर्च REST रूट को पेज कैशिंग से बाहर रखना चाहिए। यदि आप परिणामों को कैश करते हैं, तो एक मेंबर की सर्च किसी गेस्ट को दिखाई दे सकती है, जिससे प्राइवेट कंटेंट लीक हो सकता है।
फ्रंटएंड (The Frontend)
क्लाइंट साइड पर vanilla JavaScript का उपयोग किया गया है।
तीन चीजें UX को बेहतर बनाती हैं:
- Debounce: रिक्वेस्ट भेजने से पहले कीस्ट्रोक के बाद 250ms तक प्रतीक्षा करें। यह अनावश्यक सर्वर लोड को रोकता है।
- AbortController: जब यूजर टाइप करना जारी रखे, तो पिछली रिक्वेस्ट को रद्द कर दें। यह पुराने परिणामों को नए परिणामों के ऊपर ओवरराइट होने से रोकता है।
- एरर स्टेट्स (Error states): यदि फेच (fetch) विफल हो जाता है, तो एक स्पष्ट संदेश दिखाएं। एक स्पिनिंग लोडर जो कभी नहीं रुकता, वह खराब UX है।
मोबाइल सबक (The Mobile Lesson)
मैंने Divi मोबाइल मेनू में सर्च बटन को इंजेक्ट करने की कोशिश की। थीम ने क्लिक्स को इंटरसेप्ट कर लिया, जिससे बटन अनक्लिकेबल (unclickable) हो गया।
समाधान सरल था: थीम से लड़ना बंद करें।
बटन को मेनू के अंदर रखने के बजाय, मैंने इसे हेडर में एक स्टैंडअलोन एलिमेंट के रूप में इंजेक्ट किया। इससे यह थीम के नियंत्रण से बाहर रहा और इसे टैप करना आसान हो गया।
सारांश (Summary)
- एक्सेस कंट्रोल सर्वर पर होना चाहिए।
- अपने कैश से सर्च एंडपॉइंट्स को बाहर रखें।
- रिक्वेस्ट को संभालने के लिए debounce और AbortController का उपयोग करें।
- XSS को रोकने के लिए DOM में इंजेक्ट करने से पहले सभी API डेटा को एस्केप (escape) करें।
- यदि कोई पेज बिल्डर आपके कोड का विरोध करता है, तो अपने एलिमेंट को उसके अंदर रखने के बजाय उसके बगल में रखें।
स्रोत: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92