உறுப்பினர் அனுமதியால் கட்டுப்படுத்தப்பட்ட (Membership-Gated) WordPress தளங்களுக்கான தேடல் மாடலை உருவாக்குதல்

பெரும்பாலான WordPress தேடல் பயிற்சிகள், ஒரு ஹெடரில் (header) விட்ஜெட்டைச் (widget) சேர்த்ததோடு முடிந்துவிடுகின்றன.

கட்டணப் பாடங்கள் அல்லது தனிப்பட்ட வீடியோக்கள் போன்ற கட்டுப்படுத்தப்பட்ட உள்ளடக்கங்கள் (gated content) இருக்கும்போது இது தோல்வியடைகிறது. இயல்பான தேடல் முறை, லாக்-அவுட் செய்யப்பட்ட (logged-out) பார்வையாளர்களுக்கு உங்கள் தனிப்பட்ட உள்ளடக்கத்தின் தலைப்புகளைக் காட்டிவிடும்.

ஒரு ஃபிட்னஸ் மெம்பர்ஷிப் தளத்திற்காக நான் ஒரு நேரலை தேடல் மாடலை (live search modal) உருவாக்கினேன். அந்தத் தளம் WordPress, WooCommerce, Divi, LearnDash மற்றும் WishList Member ஆகியவற்றைப் பயன்படுத்துகிறது.

உங்கள் பேவால் (paywall) முறையை மதிக்கும் வகையில் தேடல் வசதியை எவ்வாறு உருவாக்குவது என்பது இதோ.

கட்டமைப்பு (The Architecture)

நான் அணுகல்-அறிவிப்பு வடிகட்டுதலுடன் (access-aware filtering) கூடிய ஒரு ஒருங்கிணைந்த குறியீட்டைப் (unified index) பயன்படுத்தினேன். லாக்-அவுட் செய்யப்பட்ட பயனர், உறுப்பினர்களுக்கு மட்டுமே உரிய பதிவின் தலைப்பையோ அல்லது சுருக்கத்தையோ (excerpt) பார்க்காமல் இருப்பதை உறுதி செய்யவே இதைத் தேர்ந்தெடுத்தேன்.

UI ஒரு ஐகானைப் பயன்படுத்துகிறது, இது முழுத் திரையில் ஒரு ஓவர்லேயைத் (overlay) திறக்கும். இது மொபைலில் இடத்தைச் சேமிக்கிறது மற்றும் நெருக்கமான இன்புட் பாரை (input bar) விடத் தூய்மையாகத் தெரிகிறது.

பேக்எண்ட் (The Backend)

அனைத்தும் ஒரு சில்ட் தீமில் (child theme) உள்ள ஒற்றை தனிப்பயன் REST ரூட் (custom REST route) மூலம் இயங்குகிறது.

முக்கிய தொழில்நுட்ப விதிகள்:

• சார்புகளைப் பாதுகாத்தல் (Guard dependencies): Relevanssi போன்ற தேடல் பிளகின்களுக்கு (plugins) ஒரு ஃபங்க்ஷன் செக் (function check) முறையைப் பயன்படுத்தவும். பிளகின் இல்லையென்றால், தளம் செயலிழப்பதற்குப் பதிலாக, தேடல் வசதி கோர் WordPress-க்கு மாற வேண்டும்.
• சர்வர்-சைடு வடிகட்டுதல் (Server-side filtering): முடிவுகளை ஒருபோதும் JavaScript மூலம் வடிகட்ட வேண்டாம். நீங்கள் உலாவியில் (browser) ஒரு முடிவை மறைத்தாலும், அந்தத் தரவு ஏற்கனவே நெட்வொர்க் பதிலில் (network response) இருக்கும். DevTools வைத்திருப்பவர்கள் எவரும் அதைத் தெரிந்து கொள்ளலாம். சர்வர் பதிலைத் அனுப்புவதற்கு முன்பே தரவை வடிகட்டவும்.
• கேச் தவிர்ப்பு (Cache exclusion): உங்கள் தேடல் REST ரூட்டைப் பக்க கேச்சிங்கில் (page caching) இருந்து நீங்கள் தவிர்க்க வேண்டும். நீங்கள் முடிவுகளை கேச் செய்தால், ஒரு உறுப்பினரின் தேடல் முடிவுகள் ஒரு விருந்தினருக்குக் காட்டப்படலாம், இது தனிப்பட்ட உள்ளடக்கத்தை வெளிப்படுத்தும்.

பிரண்ட்எண்ட் (The Frontend)

கிளையண்ட் பக்கம் (client side) vanilla JavaScript பயன்படுத்துகிறது.

UX சிறப்பாகச் செயல்பட மூன்று விஷயங்கள் உதவுகின்றன:

• Debounce: ஒரு கீஸ்ட்ரோக்கிற்குப் (keystroke) பிறகு கோரிக்கையை அனுப்புவதற்கு முன் 250ms காத்திருக்கவும். இது தேவையற்ற சர்வர் சுமையைத் தடுக்கிறது.
• AbortController: பயனர் தொடர்ந்து தட்டச்சு செய்யும்போது முந்தைய கோரிக்கைகளை ரத்து செய்யவும். இது பழைய முடிவுகள் புதிய முடிவுகளைத் தடுப்பதைத் தவிர்க்கிறது.
• பிழை நிலைகள் (Error states): ஒரு fetch தோல்வியடைந்தால் தெளிவான செய்தியைக் காட்டவும். நிற்காமல் சுழலும் லோடர் (spinning loader) மோசமான UX ஆகும்.

மொபைல் பாடம் (The Mobile Lesson)

நான் தேடல் பொத்தானை Divi மொபைல் மெனுவிற்குள் சேர்க்க முயன்றேன். தீம் அந்த கிளிக்குகளைத் தடுத்துவிட்டது, இதனால் பொத்தானை கிளிக் செய்ய முடியவில்லை.

தீர்வு எளிமையானது: தீமுடன் போராடுவதை நிறுத்துங்கள்.

பொத்தானை மெனுவிற்குள் வைப்பதற்குப் பதிலாக, அதை ஹெடரில் ஒரு தனி உறுப்பாக (standalone element) சேர்த்தேன். இது அதை தீமின் கட்டுப்பாட்டிற்கு வெளியே வைத்தது மற்றும் எளிதாகத் தொட (tap) உதவியது.

சுருக்கம் (Summary)

• அணுகல் கட்டுப்பாடு (Access control) சர்வரில் நடக்க வேண்டும்.
• தேடல் எண்ட்பாயிண்ட்களை (endpoints) உங்கள் கேச்சிலிருந்து விலக்குங்கள்.
• கோரிக்கைகளைக் கையாள debounce மற்றும் AbortController ஆகியவற்றைப் பயன்படுத்தவும்.
• XSS-ஐத் தடுக்க, API தரவை DOM-க்குள் சேர்ப்பதற்கு முன் அனைத்தையும் எஸ்கேப் (escape) செய்யவும்.
• ஒரு பேஜ் பில்டர் (page builder) உங்கள் குறியீட்டை ஏற்க மறுத்தால், உங்கள் உறுப்பை அதற்குள் வைக்காமல் அதற்குப் பக்கத்தில் வைக்கவும்.

ஆதாரம்: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92