Gated WordPress साइट्ससाठी सर्च मोडल तयार करणे

बहुतेक WordPress सर्च ट्युटोरियल्स खूप साधे असतात. ते तुम्हाला हेडरमध्ये विजेट टाकण्यास सांगतात. हे सार्वजनिक ब्लॉगसाठी काम करते, पण मेंबरशिप साइट्ससाठी अपयशी ठरते.

जर तुमच्याकडे सशुल्क कोर्सेस किंवा खाजगी व्हिडिओ असतील, तर डिफॉल्ट सर्चमुळे डेटा लीक होऊ शकतो. हे लॉग-आउट केलेल्या वापरकर्त्यांना खाजगी कंटेंटचे टायटल्स दाखवते. यामुळे तुमचा पेवॉल (paywall) धोक्यात येतो.

मी WordPress, WooCommerce आणि LearnDash वापरून एका फिटनेस साइटसाठी कस्टम सर्च मोडल तयार केले आहे. ॲक्सेस नियमांचे पालन करणारा सर्च कसा तयार करायचा, ते खाली दिले आहे.

आर्किटेक्चर

मी प्रत्येक कंटेंट प्रकारासाठी वेगळे सर्च करण्याऐवजी एकच युनिफाइड इंडेक्स वापरला. यामुळे मला क्वेरी लेव्हलवर गेटिंग (gating) लागू करणे शक्य झाले.

सर्च रिझल्ट्स खालील नियमांचे पालन करतात:

  • ब्लॉग पोस्ट्स सार्वजनिक आहेत.
  • ऑन-डिमांड व्हिडिओ गेटेड (gated) आहेत.
  • कोर्सेस LearnDash द्वारे गेटेड आहेत.
  • स्टोअर उत्पादने सार्वजनिक आहेत.

मी चाइल्ड थीममध्ये एक कस्टम REST रूट तयार केले. सर्च स्थिर राहावे यासाठी मी स्निपेट प्लगइन्स टाळले.

मुख्य इंजिनिअरिंग तपशील

• सर्व्हर-साइड गेटिंग: निकाल कधीही JavaScript वापरून लपवू नका. जर तुम्ही ब्राउझरमध्ये निकाल लपवला, तरीही तो डेटा नेटवर्क रिस्पॉन्समध्ये उपलब्ध असतो. वापरकर्ता तो DevTools मध्ये पाहू शकतो. साइटवरून डेटा बाहेर पडण्यापूर्वी तुम्हाला तो सर्व्हरवर फिल्टर करणे आवश्यक आहे.

• कॅशे मॅनेजमेंट: जर तुम्ही तुमचे सर्च रिझल्ट्स कॅशे केले, तर तुम्ही एखाद्या सदस्याचे खाजगी निकाल अनोळखी व्यक्तीला दाखवू शकता. डेटा लीक होण्यापासून वाचवण्यासाठी तुमच्या सर्च REST रूटला पेज कॅशेमधून वगळा.

• ग्रेसफुल डिग्रेडेशन: Relevanssi सारख्या थर्ड-पार्टी प्लगइन्सना कॉल करताना गार्ड्स (guards) वापरा. जर प्लगइन फेल झाले, तर साइट क्रॅश होण्याऐवजी सर्चने कोअर WordPress सर्चचा वापर करावा.

• परफॉर्मन्स: debounce फंक्शन (250ms) आणि AbortController वापरा. यामुळे प्रत्येक कीस्ट्रोकसाठी ब्राउझर नवीन रिक्वेस्ट पाठवणे थांबते. हे जुन्या रिक्वेस्ट्स देखील रद्द करते जेणेकरून जुना (stale) डेटा नवीन रिझल्ट्सवर ओव्हरराईट होणार नाही.

• सुरक्षा: innerHTML वापरण्यापूर्वी नेहमी स्ट्रिंग्स एस्केप (escape) करा. यामुळे घातक पोस्ट टायटल्सपासून होणारे XSS अटॅक्स रोखले जातात.

मोबाईलमधील धडा

एका पेज बिल्डरमुळे मला समस्या आली, कारण त्याने माझा सर्च बटन मोबाईल मेनूमध्ये लपवले होते. मी अनेक CSS फिक्स वापरून पाहिले, पण ते अपयशी ठरले.

उपाय साधा होता: थीमशी संघर्ष करणे थांबवा. बटन मेनूमध्ये टाकण्याऐवजी, मी ते हेडरमध्ये एक स्वतंत्र एलिमेंट म्हणून समाविष्ट केले. जर एखादा घटक (component) तुमच्या बदलांना विरोध करत असेल, तर त्याला आत टाकण्याऐवजी त्याच्या बाजूला तुमचा एलिमेंट ठेवा.

सर्वोत्तम पद्धतींचा सारांश:

  • सर्व्हरवर ॲक्सेस कंट्रोल लागू करा.
  • सर्च एंडपॉइंट्स कॅशेमधून वगळा.
  • स्मूथ UX साठी debounce आणि AbortController वापरा.
  • XSS रोखण्यासाठी सर्व API डेटा एस्केप करा.
  • कठीण थीम कंटेनर्सच्या बाहेर एलिमेंट्स ठेवा.

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