Gated WordPress साइटों के लिए सर्च मोडल बनाना

अधिकांश WordPress सर्च ट्यूटोरियल बहुत सरल होते हैं। वे आपको हेडर में एक विजेट डालने के लिए कहते हैं। यह सार्वजनिक ब्लॉगों के लिए काम करता है, लेकिन मेंबरशिप साइटों के लिए विफल हो जाता है।

यदि आपके पास सशुल्क (paid) कोर्स या निजी वीडियो हैं, तो डिफ़ॉल्ट सर्च डेटा लीक कर सकता है। यह लॉग-आउट किए गए उपयोगकर्ताओं को निजी कंटेंट के शीर्षक दिखाता है। यह आपके पेवॉल (paywall) को खराब कर देता है।

मैंने WordPress, WooCommerce और LearnDash का उपयोग करके एक फिटनेस साइट के लिए एक कस्टम सर्च मोडल बनाया। यहाँ बताया गया है कि ऐसा सर्च कैसे बनाया जाए जो एक्सेस नियमों का सम्मान करता हो।

आर्किटेक्चर

मैंने प्रत्येक कंटेंट प्रकार के लिए अलग-अलग सर्च के बजाय एक एकल एकीकृत इंडेक्स (unified index) का उपयोग किया। इसने मुझे क्वेरी स्तर पर गेटिंग (gating) लागू करने की अनुमति दी।

सर्च परिणाम इन नियमों का पालन करते हैं:

  • ब्लॉग पोस्ट सार्वजनिक हैं।
  • ऑन-डिमांड वीडियो गेटेड (gated) हैं।
  • कोर्स LearnDash के माध्यम से गेटेड हैं।
  • स्टोर उत्पाद सार्वजनिक हैं।

मैंने चाइल्ड थीम में एक कस्टम REST रूट बनाया। मैंने यह सुनिश्चित करने के लिए स्निपेट प्लगइन्स से परहेज किया कि सर्च स्थिर रहे।

मुख्य इंजीनियरिंग विवरण

• सर्वर-साइड गेटिंग (Server-Side Gating): परिणामों को कभी भी JavaScript का उपयोग करके न छिपाएं। यदि आप ब्राउज़र में परिणाम छिपाते हैं, तो डेटा अभी भी नेटवर्क रिस्पॉन्स में मौजूद रहता है। एक उपयोगकर्ता इसे DevTools में देख सकता है। साइट से बाहर निकलने से पहले आपको सर्वर पर डेटा को फ़िल्टर करना चाहिए।

• कैश मैनेजमेंट (Cache Management): यदि आप अपने सर्च परिणामों को कैश करते हैं, तो आप किसी अजनबी को सदस्य के निजी परिणाम दिखा सकते हैं। लीक को रोकने के लिए अपने सर्च REST रूट को अपने पेज कैश से बाहर रखें।

• ग्रेसफुल डिग्रेडेशन (Graceful Degradation): Relevanssi जैसे थर्ड-पार्टी प्लगइन्स को कॉल करते समय गार्ड्स (guards) का उपयोग करें। यदि प्लगइन विफल हो जाता है, तो साइट को क्रैश करने के बजाय सर्च को कोर WordPress सर्च पर वापस (fall back) जाना चाहिए।

• परफॉरमेंस (Performance): एक debounce फंक्शन (250ms) और AbortController का उपयोग करें। यह ब्राउज़र को हर एक कीस्ट्रोक (keystroke) के लिए नया अनुरोध भेजने से रोकता है। यह पुराने अनुरोधों को भी रद्द कर देता है ताकि पुराना डेटा नए परिणामों को ओवरराइट न कर दे।

• सुरक्षा (Security): innerHTML का उपयोग करने से पहले हमेशा स्ट्रिंग्स को एस्केप (escape) करें। यह दुर्भावनापूर्ण पोस्ट शीर्षकों से XSS हमलों को रोकता है।

मोबाइल सबक

मुझे एक पेज बिल्डर के साथ संघर्ष करना पड़ा जिसने मेरे सर्च बटन को मोबाइल मेनू के अंदर निगल लिया था। मैंने कई CSS फिक्स आज़माए, लेकिन वे विफल रहे।

समाधान सरल था: थीम से लड़ना बंद करें। बटन को मेनू के अंदर रखने के बजाय, मैंने इसे हेडर में एक अलग तत्व (element) के रूप में इंजेक्ट कर दिया। यदि कोई कंपोनेंट आपके परिवर्तनों का विरोध करता है, तो उसे उसके अंदर रखने के बजाय उसके बगल में अपना तत्व रखें।

सर्वोत्तम प्रथाओं का सारांश:

  • सर्वर पर एक्सेस कंट्रोल लागू करें।
  • सर्च एंडपॉइंट्स को कैश से बाहर रखें।
  • सुचारू UX के लिए debounce और AbortController का उपयोग करें।
  • XSS को रोकने के लिए सभी API डेटा को एस्केप करें।
  • तत्वों को जिद्दी थीम कंटेनरों के बाहर रखें।

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