మెంబర్‌షిప్-గేటెడ్ WordPress సైట్‌ల కోసం సెర్చ్ మోడల్‌ను నిర్మించడం

చాలా WordPress సెర్చ్ ట్యుటోరియల్స్ హెడర్‌కు విడ్జెట్‌ను జోడించడంతోనే ముగిసిపోతాయి.

పెయిడ్ కోర్సులు లేదా ప్రైవేట్ వీడియోల వంటి గేటెడ్ కంటెంట్ ఉన్నప్పుడు ఇది విఫలమవుతుంది. డిఫాల్ట్ సెర్చ్, లాగ్-అవుట్ అయిన సందర్శకులకు మీ ప్రైవేట్ మెటీరియల్ యొక్క టైటిళ్లను బయటపెడుతుంది.

నేను ఒక ఫిట్‌నెస్ మెంబర్‌షిప్ సైట్ కోసం లైవ్ సెర్చ్ మోడల్‌ను రూపొందించాను. ఆ సైట్ WordPress, WooCommerce, Divi, LearnDash మరియు WishList Memberలను ఉపయోగిస్తుంది.

మీ పేవాల్ (paywall)ను గౌరవించేలా సెర్చ్‌ను ఎలా నిర్మించాలో ఇక్కడ ఉంది.

ఆర్కిటెక్చర్ (The Architecture)

నేను యాక్సెస్-అవేర్ ఫిల్టరింగ్‌తో కూడిన ఒక యూనిఫైడ్ ఇండెక్స్‌ను ఉపయోగించాను. లాగ్-అవుట్ అయిన యూజర్ మెంబర్-ఓన్లీ పోస్ట్ యొక్క టైటిల్ లేదా సారాంశాన్ని (excerpt) ఎప్పటికీ చూడకుండా ఉండటానికి నేను దీనిని ఎంచుకున్నాను.

UI ఒక ఐకాన్‌ను ఉపయోగిస్తుంది, ఇది ఫుల్-స్క్రీన్ ఓవర్‌లేను తెరుస్తుంది. ఇది మొబైల్‌లో స్థలాన్ని ఆదా చేస్తుంది మరియు ఇరుకైన ఇన్‌పుట్ బార్ కంటే చూడటానికి క్లీన్‌గా ఉంటుంది.

బ్యాకెండ్ (The Backend)

అంతా ఒక చైల్డ్ థీమ్‌లోని సింగిల్ కస్టమ్ REST రూట్ ద్వారా నడుస్తుంది.

ముఖ్యమైన సాంకేతిక నియమాలు:

  • డిపెండెన్సీలను కాపాడండి (Guard dependencies): Relevanssi వంటి సెర్చ్ ప్లగిన్‌ల కోసం ఫంక్షన్ చెక్‌ను ఉపయోగించండి. ఒకవేళ ప్లగిన్ లేకపోతే, సైట్ పాడవకుండా సెర్చ్ కోర్ WordPressకి మారాలి.
  • సర్వర్-సైడ్ ఫిల్టరింగ్: ఫలితాలను ఎప్పుడూ JavaScript ఉపయోగించి ఫిల్టర్ చేయవద్దు. మీరు బ్రౌజర్‌లో ఫలితాన్ని దాచినప్పటికీ, ఆ డేటా ఇప్పటికే నెట్‌వర్క్ రెస్పాన్స్‌లో ఉంటుంది. DevTools ఉన్న ఎవరైనా దానిని చూడగలరు. సర్వర్ రెస్పాన్స్‌ను పంపే ముందే డేటాను ఫిల్టర్ చేయండి.
  • క్యాచీ ఎక్స్‌క్లూజన్ (Cache exclusion): మీ సెర్చ్ REST రూట్‌ను పేజీ క్యాషింగ్ నుండి మినహాయించాలి. మీరు ఫలితాలను క్యాష్ చేస్తే, ఒక మెంబర్ చేసిన సెర్చ్ గెస్ట్‌కు కనిపించవచ్చు, దీనివల్ల ప్రైవేట్ కంటెంట్ లీక్ అవుతుంది.

ఫ్రంటెండ్ (The Frontend)

క్లయింట్ సైడ్ వనిల్లా JavaScriptను ఉపయోగిస్తుంది.

UX సరిగ్గా పనిచేయడానికి మూడు అంశాలు:

  • డీబౌన్స్ (Debounce): ఒక కీస్ట్రోక్ తర్వాత రిక్వెస్ట్ పంపే ముందు 250ms వేచి ఉండండి. ఇది అనవసరమైన సర్వర్ లోడ్‌ను నివారిస్తుంది.
  • AbortController: యూజర్ టైప్ చేస్తూనే ఉన్నప్పుడు మునుపటి రిక్వెస్ట్‌లను రద్దు చేయండి. ఇది పాత ఫలితాలు కొత్త వాటిని ఓవర్‌రైట్ చేయకుండా నిరోధిస్తుంది.
  • ఎర్రర్ స్టేట్స్ (Error states): ఫెచ్ (fetch) విఫలమైతే స్పష్టమైన సందేశాన్ని చూపండి. ఆగకుండా తిరిగే లోడర్ (spinning loader) అనేది చెడు UX.

మొబైల్ పాఠం (The Mobile Lesson)

నేను సెర్చ్ బటన్‌ను Divi మొబైల్ మెనూలోకి ఇంజెక్ట్ చేయడానికి ప్రయత్నించాను. థీమ్ క్లిక్‌లను ఇంటర్‌సెప్ట్ చేయడం వల్ల, బటన్ క్లిక్ చేయడం సాధ్యపడలేదు.

పరిష్కారం సరళమైనది: థీమ్‌తో పోరాడటం ఆపండి.

బటన్‌ను మెనూ లోపల ఉంచడానికి బదులుగా, దానిని హెడర్‌లో ఒక స్టాండ్‌అలోన్ ఎలిమెంట్‌గా ఇంజెక్ట్ చేశాను. ఇది దానిని థీమ్ నియంత్రణకు వెలుపల ఉంచింది మరియు ట్యాప్ చేయడం సులభతరం చేసింది.

సారాంశం (Summary)

  • యాక్సెస్ కంట్రోల్ సర్వర్‌లో జరగాలి.
  • మీ క్యాష్ నుండి సెర్చ్ ఎండ్‌పాయింట్‌లను మినహాయించండి.
  • రిక్వెస్ట్‌లను హ్యాండిల్ చేయడానికి debounce మరియు AbortController ఉపయోగించండి.
  • XSS నివారించడానికి, API డేటాను DOMలోకి ఇంజెక్ట్ చేసే ముందు దానిని ఎస్కేప్ (escape) చేయండి.
  • ఒక పేజీ బిల్డర్ మీ కోడ్‌కు అడ్డుగా ఉంటే, దాని లోపల కాకుండా దాని పక్కన మీ ఎలిమెంట్‌ను ఉంచండి.

మూలం: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92