Gated WordPress సైట్‌ల కోసం సెర్చ్ మోడల్‌ను నిర్మించడం

చాలా WordPress సెర్చ్ ట్యుటోరియల్స్ చాలా సాధారణంగా ఉంటాయి. అవి హెడర్‌లో ఒక విజెట్‌ను ఉంచమని చెబుతాయి. ఇది పబ్లిక్ బ్లాగులకు పని చేస్తుంది, కానీ మెంబర్‌షిప్ సైట్‌లకు సరిపోదు.

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

నేను WordPress, WooCommerce మరియు LearnDash ఉపయోగించి ఒక ఫిట్‌నెస్ సైట్ కోసం కస్టమ్ సెర్చ్ మోడల్‌ను రూపొందించాను. యాక్సెస్ రూల్స్‌ను గౌరవించే సెర్చ్‌ను ఎలా నిర్మించాలో ఇక్కడ ఉంది.

ఆర్కిటెక్చర్

ప్రతి కంటెంట్ రకానికి విడివిడి సెర్చ్‌లకు బదులుగా, నేను ఒకే యూనిఫైడ్ ఇండెక్స్‌ను ఉపయోగించాను. ఇది క్వెరీ స్థాయిలో గేటింగ్ (gating)ను అమలు చేయడానికి నాకు అనుమతించింది.

సెర్చ్ ఫలితాలు ఈ నియమాలను అనుసరిస్తాయి:

  • బ్లాగ్ పోస్ట్‌లు పబ్లిక్.
  • ఆన్-డిమాండ్ వీడియోలు గేటెడ్ (gated).
  • కోర్సులు LearnDash ద్వారా గేటెడ్.
  • స్టోర్ ఉత్పత్తులు పబ్లిక్.

నేను చైల్డ్ థీమ్‌లో ఒక కస్టమ్ REST రూట్‌ను రూపొందించాను. సెర్చ్ స్థిరంగా ఉండటానికి నేను స్నిప్పెట్ ప్లగిన్‌లను నివారించాను.

ముఖ్యమైన ఇంజనీరింగ్ వివరాలు

• సర్వర్-సైడ్ గేటింగ్: ఫలితాలను ఎప్పుడూ JavaScript ఉపయోగించి దాచకండి. మీరు బ్రౌజర్‌లో ఫలితాన్ని దాచినా, డేటా నెట్‌వర్క్ రెస్పాన్స్‌లో ఉంటుంది. వినియోగదారు దానిని DevToolsలో చూడగలరు. సైట్ నుండి డేటా బయటకు వెళ్లే ముందే మీరు సర్వర్‌లో దానిని ఫిల్టర్ చేయాలి.

• క్యాచీ మేనేజ్‌మెంట్: మీరు మీ సెర్చ్ ఫలితాలను క్యాష్ చేస్తే, ఒక సభ్యుని ప్రైవేట్ ఫలితాలను తెలియని వ్యక్తికి చూపించే అవకాశం ఉంది. డేటా లీక్ కాకుండా ఉండటానికి మీ సెర్చ్ REST రూట్‌ను పేజీ క్యాష్ నుండి మినహాయించండి.

• గ్రేస్‌ఫుల్ డిగ్రేడేషన్: Relevanssi వంటి థర్డ్-పార్టీ ప్లగిన్‌లను పిలిచేటప్పుడు గార్డ్స్ (guards) ఉపయోగించండి. ప్లగిన్ విఫలమైతే, సైట్ క్రాష్ అవ్వకుండా సెర్చ్ కోర్ WordPress సెర్చ్‌కి మారాలి.

• పెర్ఫార్మెన్స్: ఒక debounce ఫంక్షన్ (250ms) మరియు AbortController ఉపయోగించండి. ఇది ప్రతి కీస్ట్రోక్ కోసం బ్రౌజర్ కొత్త రిక్వెస్ట్‌ను పంపకుండా నిరోధిస్తుంది. ఇది పాత రిక్వెస్ట్‌లను కూడా రద్దు చేస్తుంది, తద్వారా పాత డేటా కొత్త ఫలితాలను ఓవర్‌రైట్ చేయదు.

• సెక్యూరిటీ: innerHTML ఉపయోగించే ముందు ఎల్లప్పుడూ స్ట్రింగ్స్‌ను ఎస్కేప్ (escape) చేయండి. ఇది హానికరమైన పోస్ట్ టైటిల్స్ నుండి XSS దాడులను నివారిస్తుంది.

మొబైల్ పాఠం

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

పరిష్కారం సరళంగా ఉంది: థీమ్‌తో పోరాడటం ఆపండి. బటన్‌ను మెనూ లోపల ఉంచడానికి బదులుగా, దానిని హెడర్‌లో ఒక ప్రత్యేక ఎలిమెంట్‌గా చేర్చాను. ఒక కాంపోనెంట్ మీ మార్పులకు సహకరించకపోతే, దాని లోపల కాకుండా దాని పక్కన మీ ఎలిమెంట్‌ను ఉంచండి.

ఉత్తమ పద్ధతుల సారాంశం:

  • సర్వర్‌పై యాక్సెస్ కంట్రోల్‌ను అమలు చేయండి.
  • సెర్చ్ ఎండ్‌పాయింట్‌లను క్యాష్ నుండి మినహాయించండి.
  • స్మూత్ UX కోసం debounce మరియు AbortController ఉపయోగించండి.
  • XSS నివారించడానికి అన్ని API డేటాను ఎస్కేప్ చేయండి.
  • మొండిగా ఉండే థీమ్ కంటైనర్ల వెలుపల ఎలిమెంట్లను ఉంచండి.

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