Gated WordPress સાઇટ્સ માટે સર્ચ મોડલ બનાવવું

મોટાભાગના WordPress સર્ચ ટ્યુટોરિયલ્સ ખૂબ જ સરળ હોય છે. તેઓ તમને હેડરમાં વિજેટ મૂકવાનું કહે છે. આ પબ્લિક બ્લોગ્સ માટે કામ કરે છે, પરંતુ મેમ્બરશિપ સાઇટ્સ માટે નિષ્ફળ જાય છે.

જો તમારી પાસે પેઇડ કોર્સ અથવા પ્રાઇવેટ વિડિયો હોય, તો ડિફોલ્ટ સર્ચ ડેટા લીક કરી શકે છે. તે લોગ-આઉટ થયેલા યુઝર્સને પ્રાઇવેટ કન્ટેન્ટના ટાઇટલ બતાવે છે. આ તમારા પેવૉલ (paywall) ને બગાડે છે.

મેં WordPress, WooCommerce અને LearnDash નો ઉપયોગ કરીને એક ફિટનેસ સાઇટ માટે કસ્ટમ સર્ચ મોડલ બનાવ્યું છે. એક્સેસ નિયમોનું પાલન કરે તેવું સર્ચ કેવી રીતે બનાવવું તે અહીં છે.

The Architecture

મેં દરેક કન્ટેન્ટ પ્રકાર માટે અલગ સર્ચ કરવાને બદલે એક સિંગલ યુનિફાઇડ ઇન્ડેક્સનો ઉપયોગ કર્યો. આનાથી મને ક્વેરી લેવલ પર ગેટિંગ (gating) લાગુ કરવાની મંજૂરી મળી.

સર્ચ રિઝલ્ટ આ નિયમોનું પાલન કરે છે:

  • બ્લોગ પોસ્ટ્સ પબ્લિક છે.
  • ઓન-ડિમાન્ડ વિડિયો ગેટ કરેલા છે.
  • કોર્સ LearnDash દ્વારા ગેટ કરેલા છે.
  • સ્ટોર પ્રોડક્ટ્સ પબ્લિક છે.

મેં ચાઇલ્ડ થીમમાં એક કસ્ટમ REST રૂટ બનાવ્યો. સર્ચ સ્ટેબલ રહે તે સુનિશ્ચિત કરવા માટે મેં સ્નિપેટ પ્લગિન્સ ટાળ્યા.

Key Engineering Details

• Server-Side Gating: ક્યારેય JavaScript નો ઉપયોગ કરીને રિઝલ્ટ છુપાવશો નહીં. જો તમે બ્રાઉઝરમાં રિઝલ્ટ છુપાવો છો, તો ડેટા હજુ પણ નેટવર્ક રિસ્પોન્સમાં હોય છે. યુઝર તેને DevTools માં જોઈ શકે છે. સાઇટ પરથી ડેટા બહાર નીકળે તે પહેલાં તમારે સર્વર પર ડેટા ફિલ્ટર કરવો જોઈએ.

• Cache Management: જો તમે તમારા સર્ચ રિઝલ્ટને કેશ (cache) કરો છો, તો તમે કોઈ મેમ્બરના પ્રાઇવેટ રિઝલ્ટ અજાણ્યા વ્યક્તિને બતાવી શકો છો. લીક અટકાવવા માટે તમારા સર્ચ REST રૂટને તમારા પેજ કેશમાંથી બાકાત રાખો.

• Graceful Degradation: Relevanssi જેવા થર્ડ-પાર્ટી પ્લગિન્સનો ઉપયોગ કરતી વખતે ગાર્ડ્સ (guards) નો ઉપયોગ કરો. જો પ્લગિન નિષ્ફળ જાય, તો સાઇટ ક્રેશ થવાને બદલે સર્ચ કોર WordPress સર્ચ પર પાછું જવું જોઈએ.

• Performance: debounce function (250ms) અને AbortController નો ઉપયોગ કરો. આ બ્રાઉઝરને દરેક કીસ્ટ્રોક માટે નવો રિક્વેસ્ટ મોકલતા અટકાવે છે. તે જૂના રિક્વેસ્ટ્સને પણ કેન્સલ કરે છે જેથી જૂનો ડેટા નવા રિઝલ્ટને ઓવરરાઇટ ન કરે.

• Security: innerHTML નો ઉપયોગ કરતા પહેલા હંમેશા સ્ટ્રિંગ્સને એસ્કેપ (escape) કરો. આ હાનિકારક પોસ્ટ ટાઇટલ્સ દ્વારા થતા XSS એટેકને અટકાવે છે.

The Mobile Lesson

મને એક પેજ બિલ્ડર સાથે મુશ્કેલી પડી જેણે મારા સર્ચ બટનને મોબાઈલ મેનૂની અંદર ગળી લીધું હતું. મેં ઘણા CSS ફિક્સ અજમાવ્યા, પણ તે નિષ્ફળ ગયા.

ઉકેલ સરળ હતો: થીમ સાથે લડવાનું બંધ કરો. બટનને મેનૂની અંદર રાખવાને બદલે, મેં તેને હેડરમાં એક અલગ એલિમેન્ટ તરીકે ઇન્જેક્ટ કર્યું. જો કોઈ કમ્પોનન્ટ તમારા ફેરફારોનો વિરોધ કરે, તો તેને અંદર રાખવાને બદલે તેની બાજુમાં તમારું એલિમેન્ટ મૂકો.

Summary of Best Practices:

  • સર્વર પર એક્સેસ કંટ્રોલ લાગુ કરો.
  • સર્ચ એન્ડપોઇન્ટ્સને કેશમાંથી બાકાત રાખો.
  • સ્મૂધ UX માટે debounce અને AbortController નો ઉપયોગ કરો.
  • XSS અટકાવવા માટે તમામ API ડેટાને એસ્કેપ કરો.
  • જીદ્દી થીમ કન્ટેનર્સની બહાર એલિમેન્ટ્સ મૂકો.

Source: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92