મેમ્બરશિપ-ગેટ કરેલી WordPress સાઇટ્સ માટે સર્ચ મોડલ બનાવવું

મોટાભાગના WordPress સર્ચ ટ્યુટોરિયલ્સ હેડરમાં વિજેટ ઉમેર્યા પછી અટકી જાય છે.

જ્યારે તમારી પાસે પેઇડ કોર્સ અથવા પ્રાઇવેટ વિડિયો જેવું ગેટ કરેલું (gated) કન્ટેન્ટ હોય ત્યારે આ પદ્ધતિ નિષ્ફળ જાય છે. ડિફોલ્ટ સર્ચ તમારા લોગ-આઉટ મુલાકાતીઓને તમારી ખાનગી સામગ્રીના શીર્ષકો (titles) જાહેર કરી શકે છે.

મેં ફિટનેસ મેમ્બરશિપ સાઇટ માટે લાઈવ સર્ચ મોડલ બનાવ્યું છે. આ સાઇટ 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)

ક્લાયન્ટ સાઇડ vanilla JavaScript નો ઉપયોગ કરે છે.

ત્રણ વસ્તુઓ UX ને સફળ બનાવે છે:

  • Debounce: રિક્વેસ્ટ મોકલતા પહેલા કીસ્ટ્રોક પછી 250ms રાહ જુઓ. આ બિનજરૂરી સર્વર લોડ અટકાવે છે.
  • AbortController: જ્યારે યુઝર ટાઈપ કરવાનું ચાલુ રાખે ત્યારે અગાઉની રિક્વેસ્ટ રદ કરો. આ જૂના પરિણામોને નવા પરિણામો પર ઓવરરાઈટ થતા અટકાવે છે.
  • એરર સ્ટેટ્સ (Error states): જો fetch નિષ્ફળ જાય તો સ્પષ્ટ સંદેશ બતાવો. જે ક્યારેય અટકતું નથી તેવું સ્પિનિંગ લોડર ખરાબ UX છે.

મોબાઈલ પાઠ (The Mobile Lesson)

મેં Divi મોબાઈલ મેનુમાં સર્ચ બટન ઇન્જેક્ટ કરવાનો પ્રયાસ કર્યો હતો. થીમે ક્લિક્સને ઇન્ટરસેપ્ટ કરી લીધી હતી, જેના કારણે બટન ક્લિક કરી શકાય તેમ નહોતું.

તેનો ઉકેલ સરળ હતો: થીમ સાથે લડવાનું બંધ કરો.

બટનને મેનુની અંદર રાખવાને બદલે, મેં તેને હેડરમાં એક સ્વતંત્ર એલિમેન્ટ તરીકે ઇન્જેક્ટ કર્યું. આનાથી તે થીમના નિયંત્રણની બહાર રહ્યું અને ટેપ કરવામાં સરળ બન્યું.

સારાંશ (Summary)

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

સ્ત્રોત: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92