Gated WordPress ਸਾਈਟਾਂ ਲਈ ਇੱਕ ਸਰਚ ਮੋਡਲ ਬਣਾਉਣਾ

ਜ਼ਿਆਦਾਤਰ WordPress ਸਰਚ ਟਿਊਟੋਰਿਅਲ ਬਹੁਤ ਹੀ ਸਾਧਾਰਨ ਹੁੰਦੇ ਹਨ। ਉਹ ਤੁਹਾਨੂੰ ਹੈਡਰ ਵਿੱਚ ਇੱਕ ਵਿਜੇਟ (widget) ਪਾਉਣ ਲਈ ਕਹਿੰਦੇ ਹਨ। ਇਹ ਜਨਤਕ ਬਲੌਗਾਂ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ। ਪਰ ਮੈਂਬਰਸ਼ਿਪ ਸਾਈਟਾਂ ਲਈ ਇਹ ਫੇਲ ਹੋ ਜਾਂਦਾ ਹੈ।

ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਭੁਗਤਾਨ ਕੀਤੇ ਗਏ ਕੋਰਸ ਜਾਂ ਨਿੱਜੀ ਵੀਡੀਓ ਹਨ, ਤਾਂ ਡਿਫੌਲਟ ਸਰਚ ਡਾਟਾ ਲੀਕ ਕਰ ਸਕਦੀ ਹੈ। ਇਹ ਲੌਗ-ਆਊਟ ਕੀਤੇ ਹੋਏ ਯੂਜ਼ਰਾਂ ਨੂੰ ਨਿੱਜੀ ਕੰਟੈਂਟ ਦੇ ਟਾਈਟਲ ਦਿਖਾਉਂਦੀ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਪੇਵਾਲ (paywall) ਨੂੰ ਖਰਾਬ ਕਰ ਦਿੰਦਾ ਹੈ।

ਮੈਂ WordPress, WooCommerce, ਅਤੇ LearnDash ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਫਿਟਨੈੱਸ ਸਾਈਟ ਲਈ ਇੱਕ ਕਸਟਮ ਸਰਚ ਮੋਡਲ ਬਣਾਇਆ। ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਅਜਿਹੀ ਸਰਚ ਕਿਵੇਂ ਬਣਾਈ ਜਾਵੇ ਜੋ ਐਕਸੈਸ ਨਿਯਮਾਂ (access rules) ਦਾ ਸਤਿਕਾਰ ਕਰਦੀ ਹੋਵੇ।

ਆਰਕੀਟੈਕਚਰ

ਮੈਂ ਹਰੇਕ ਕੰਟੈਂਟ ਟਾਈਪ ਲਈ ਵੱਖ-ਵੱਖ ਸਰਚਾਂ ਦੀ ਬਜਾਏ ਇੱਕ ਸਿੰਗਲ ਯੂਨੀਫਾਈਡ ਇੰਡੈਕਸ (unified index) ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਇਸ ਨਾਲ ਮੈਨੂੰ ਕੁਐਰੀ ਲੈਵਲ (query level) 'ਤੇ ਗੇਟਿੰਗ ਲਾਗੂ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਮਿਲੀ।

ਸਰਚ ਨਤੀਜੇ ਇਹਨਾਂ ਨਿਯਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ:

• Blog posts ਜਨਤਕ ਹਨ।
• On-demand ਵੀਡੀਓਜ਼ ਗੇਟਡ (gated) ਹਨ।
• ਕੋਰਸ LearnDash ਰਾਹੀਂ ਗੇਟਡ ਹਨ।
• ਸਟੋਰ ਦੇ ਉਤਪਾਦ ਜਨਤਕ ਹਨ।

ਮੈਂ ਚਾਈਲਡ ਥੀਮ ਵਿੱਚ ਇੱਕ ਕਸਟਮ REST ਰੂਟ ਬਣਾਇਆ। ਮੈਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਸਰਚ ਸਥਿਰ ਰਹੇ, ਸਨਿਪੈਟ ਪਲੱਗਇਨਾਂ (snippet plugins) ਤੋਂ ਬਚਿਆ।

ਮੁੱਖ ਇੰਜੀਨੀਅਰਿੰਗ ਵੇਰਵੇ

• Server-Side Gating: ਨਤੀਜਿਆਂ ਨੂੰ ਕਦੇ ਵੀ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨਾ ਛੁਪਾਓ। ਜੇਕਰ ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਕੋਈ ਨਤੀਜਾ ਛੁਪਾਉਂਦੇ ਹੋ, ਤਾਂ ਡਾਟਾ ਅਜੇ ਵੀ ਨੈੱਟਵਰਕ ਰਿਸਪਾਂਸ ਵਿੱਚ ਹੁੰਦਾ ਹੈ। ਇੱਕ ਯੂਜ਼ਰ ਇਸਨੂੰ DevTools ਵਿੱਚ ਦੇਖ ਸਕਦਾ ਹੈ। ਤੁਹਾਨੂੰ ਸਾਈਟ ਤੋਂ ਬਾਹਰ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਸਰਵਰ 'ਤੇ ਡਾਟਾ ਫਿਲਟਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

• Cache Management: ਜੇਕਰ ਤੁਸੀਂ ਆਪਣੇ ਸਰਚ ਨਤੀਜਿਆਂ ਨੂੰ ਕੈਸ਼ (cache) ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਕਿਸੇ ਮੈਂਬਰ ਦੇ ਨਿੱਜੀ ਨਤੀਜੇ ਕਿਸੇ ਅਣਜਾਣ ਵਿਅਕਤੀ ਨੂੰ ਦਿਖਾ ਸਕਦੇ ਹੋ। ਡਾਟਾ ਲੀਕ ਹੋਣ ਤੋਂ ਰੋਕਣ ਲਈ ਆਪਣੇ ਪੇਜ ਕੈਸ਼ ਤੋਂ ਆਪਣੇ ਸਰਚ REST ਰੂਟ ਨੂੰ ਬਾਹਰ ਰੱਖੋ (exclude)।

• Graceful Degradation: Relevanssi ਵਰਗੇ Third-party ਪਲੱਗਇਨਾਂ ਨੂੰ ਕਾਲ ਕਰਦੇ ਸਮੇਂ ਗਾਰਡਸ (guards) ਦੀ ਵਰਤੋਂ ਕਰੋ। ਜੇਕਰ ਪਲੱਗਇਨ ਫੇਲ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਸਾਈਟ ਨੂੰ ਕ੍ਰੈਸ਼ ਕਰਨ ਦੀ ਬਜਾਏ ਸਰਚ ਨੂੰ ਕੋਰ WordPress ਸਰਚ 'ਤੇ ਵਾਪਸ ਆਉਣਾ ਚਾਹੀਦਾ ਹੈ।

• Performance: ਇੱਕ debounce ਫੰਕਸ਼ਨ (250ms) ਅਤੇ ਇੱਕ AbortController ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਹਰ ਇੱਕ ਕੀਸਟ੍ਰੋਕ (keystroke) ਲਈ ਨਵਾਂ ਰਿਕਵੈਸਟ ਭੇਜਣ ਤੋਂ ਰੋਕਦਾ ਹੈ। ਇਹ ਪੁਰਾਣੀਆਂ ਰਿਕਵੈਸਟਾਂ ਨੂੰ ਵੀ ਰੱਦ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਪੁਰਾਣਾ ਡਾਟਾ ਨਵੇਂ ਨਤੀਜਿਆਂ ਨੂੰ ਓਵਰਰਾਈਟ ਨਾ ਕਰ ਸਕੇ।

• Security: innerHTML ਦੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਹਮੇਸ਼ਾ ਸਟ੍ਰਿੰਗਸ (strings) ਨੂੰ ਐਸਕੇਪ (escape) ਕਰੋ। ਇਹ ਮਾਲੀਸ਼ੀਅਸ (malicious) ਪੋਸਟ ਟਾਈਟਲ ਤੋਂ XSS ਅਟੈਕਸ ਨੂੰ ਰੋਕਦਾ ਹੈ।

ਮੋਬਾਈਲ ਸਬਕ

ਮੈਨੂੰ ਇੱਕ ਪੇਜ ਬਿਲਡਰ ਨਾਲ ਮੁਸ਼ਕਲ ਆਈ ਜੋ ਮੇਰੇ ਸਰਚ ਬਟਨ ਨੂੰ ਮੋਬਾਈਲ ਮੀਨੂ ਦੇ ਅੰਦਰ ਛੁਪਾ ਰਿਹਾ ਸੀ। ਮੈਂ ਕਈ CSS ਫਿਕਸ ਅਜ਼ਮਾਏ, ਪਰ ਉਹ ਫੇਲ ਹੋ ਗਏ।

ਹੱਲ ਸਧਾਰਨ ਸੀ: ਥੀਮ ਨਾਲ ਲੜਨਾ ਬੰਦ ਕਰੋ। ਬਟਨ ਨੂੰ ਮੀਨੂ ਦੇ ਅੰਦਰ ਰੱਖਣ ਦੀ ਬਜਾਏ, ਮੈਂ ਇਸਨੂੰ ਹੈਡਰ ਵਿੱਚ ਇੱਕ ਵੱਖਰੇ ਐਲੀਮੈਂਟ ਵਜੋਂ ਇੰਜੈਕਟ ਕੀਤਾ। ਜੇਕਰ ਕੋਈ ਕੰਪੋਨੈਂਟ ਤੁਹਾਡੇ ਬਦਲਾਅ ਦਾ ਵਿਰੋਧ ਕਰਦਾ ਹੈ, ਤਾਂ ਉਸਦੇ ਅੰਦਰ ਰੱਖਣ ਦੀ ਬਜਾਏ ਉਸਦੇ ਨਾਲ ਆਪਣਾ ਐਲੀਮੈਂਟ ਰੱਖੋ।

ਵਧੀਆ ਅਭਿਆਸਾਂ ਦਾ ਸਾਰ:

• ਸਰਵਰ 'ਤੇ ਐਕਸੈਸ ਕੰਟਰੋਲ ਲਾਗੂ ਕਰੋ।
• ਸਰਚ ਐਂਡਪੁਆਇੰਟਸ ਨੂੰ ਕੈਸ਼ ਤੋਂ ਬਾਹਰ ਰੱਖੋ।
• ਸੁਚਾਰੂ UX ਲਈ debounce ਅਤੇ AbortController ਦੀ ਵਰਤੋਂ ਕਰੋ।
• XSS ਨੂੰ ਰੋਕਣ ਲਈ ਸਾਰੇ API ਡਾਟਾ ਨੂੰ ਐਸਕੇਪ ਕਰੋ।
• ਐਲੀਮੈਂਟਸ ਨੂੰ ਜ਼ਿੱਦੀ ਥੀਮ ਕੰਟੇਨਰਾਂ ਤੋਂ ਬਾਹਰ ਰੱਖੋ।

ਸਰੋਤ: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92