ಪ್ರವೇಶ ನಿಯಂತ್ರಿತ (Gated) WordPress ಸೈಟ್‌ಗಳಿಗಾಗಿ ಸರ್ಚ್ ಮಾಡಲ್ ನಿರ್ಮಿಸುವುದು

ಹೆಚ್ಚಿನ WordPress ಸರ್ಚ್ ಟ್ಯುಟೋರಿಯಲ್‌ಗಳು ತುಂಬಾ ಸರಳವಾಗಿವೆ. ಅವು ಹೆಡರ್‌ನಲ್ಲಿ ಒಂದು ವಿಜೆಟ್ ಅನ್ನು ಹಾಕಲು ನಿಮಗೆ ಹೇಳುತ್ತವೆ. ಇದು ಸಾರ್ವಜನಿಕ ಬ್ಲಾಗ್‌ಗಳಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಆದರೆ ಮೆಂಬರ್‌ಶಿಪ್ ಸೈಟ್‌ಗಳಿಗೆ ಇದು ವಿಫಲವಾಗುತ್ತದೆ.

ನೀವು ಪಾವತಿಸಿದ ಕೋರ್ಸ್‌ಗಳು ಅಥವಾ ಖಾಸಗಿ ವಿಡಿಯೋಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ಡಿಫಾಲ್ಟ್ ಸರ್ಚ್ ಡೇಟಾವನ್ನು ಸೋರಿಕೆ ಮಾಡಬಹುದು. ಇದು ಲಾಗ್-ಔಟ್ ಆಗಿರುವ ಬಳಕೆದಾರರಿಗೆ ಖಾಸಗಿ ಕಂಟೆಂಟ್‌ನ ಶೀರ್ಷಿಕೆಗಳನ್ನು ತೋರಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಪೇವಾಲ್ (paywall) ಅನ್ನು ಹಾಳುಮಾಡುತ್ತದೆ.

ನಾನು WordPress, WooCommerce ಮತ್ತು LearnDash ಬಳಸಿ ಫಿಟ್‌ನೆಸ್ ಸೈಟ್‌ಗಾಗಿ ಕಸ್ಟಮ್ ಸರ್ಚ್ ಮಾಡಲ್ ಅನ್ನು ನಿರ್ಮಿಸಿದ್ದೇನೆ. ಪ್ರವೇಶ ನಿಯಮಗಳನ್ನು ಗೌರವಿಸುವ ಸರ್ಚ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ.

ಆರ್ಕಿಟೆಕ್ಚರ್ (The Architecture)

ನಾನು ಪ್ರತಿಯೊಂದು ಕಂಟೆಂಟ್ ಪ್ರಕಾರಕ್ಕೆ ಪ್ರತ್ಯೇಕ ಸರ್ಚ್‌ಗಳ ಬದಲಿಗೆ ಏಕೀಕೃತ ಇಂಡೆಕ್ಸ್ ಅನ್ನು ಬಳಸಿದೆ. ಇದು ಕ್ವೆರಿ ಮಟ್ಟದಲ್ಲಿ ಗೇಟಿಂಗ್ ಅನ್ನು ಜಾರಿಗೆ ತರಲು ನನಗೆ ಅನುಮತಿಸಿತು.

ಸರ್ಚ್ ಫಲಿತಾಂಶಗಳು ಈ ನಿಯಮಗಳನ್ನು ಅನುಸರಿಸುತ್ತವೆ:

  • ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ಗಳು ಸಾರ್ವಜನಿಕವಾಗಿವೆ.
  • ಆನ್-ಡಿಮ್ಯಾಂಡ್ ವಿಡಿಯೋಗಳು ಗೇಟೆಡ್ (gated) ಆಗಿವೆ.
  • ಕೋರ್ಸ್‌ಗಳು LearnDash ಮೂಲಕ ಗೇಟೆಡ್ ಆಗಿವೆ.
  • ಸ್ಟೋರ್ ಉತ್ಪನ್ನಗಳು ಸಾರ್ವಜನಿಕವಾಗಿವೆ.

ನಾನು ಚೈಲ್ಡ್ ಥೀಮ್‌ನಲ್ಲಿ ಕಸ್ಟಮ್ REST ರೂಟ್ ಅನ್ನು ನಿರ್ಮಿಸಿದೆ. ಸರ್ಚ್ ಸ್ಥಿರವಾಗಿರಲು ನಾನು ಸ್ನಿಪ್ಪೆಟ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ತಪ್ಪಿಸಿದೆ.

ಪ್ರಮುಖ ಎಂಜಿನಿಯರಿಂಗ್ ವಿವರಗಳು (Key Engineering Details)

• ಸರ್ವರ್-ಸೈಡ್ ಗೇಟಿಂಗ್ (Server-Side Gating): ಎಂದಿಗೂ JavaScript ಬಳಸಿ ಫಲಿತಾಂಶಗಳನ್ನು ಮರೆಮಾಚಬೇಡಿ. ನೀವು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಫಲಿತಾಂಶವನ್ನು ಮರೆಮಾಚಿದರೆ, ಡೇಟಾ ಇನ್ನೂ ನೆಟ್‌ವರ್ಕ್ ರೆಸ್ಪಾನ್ಸ್‌ನಲ್ಲಿರುತ್ತದೆ. ಬಳಕೆದಾರರು ಅದನ್ನು DevTools ನಲ್ಲಿ ನೋಡಬಹುದು. ಸೈಟ್‌ನಿಂದ ಹೊರಹೋಗುವ ಮೊದಲು ನೀವು ಸರ್ವರ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಲೇಬೇಕು.

• ಕ್ಯಾಶ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ (Cache Management): ನೀವು ನಿಮ್ಮ ಸರ್ಚ್ ಫಲಿತಾಂಶಗಳನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿದರೆ, ಸದಸ್ಯರ ಖಾಸಗಿ ಫಲಿತಾಂಶಗಳನ್ನು ಅಪರಿಚಿತರಿಗೆ ನೀಡುವ ಸಾಧ್ಯತೆ ಇರುತ್ತದೆ. ಸೋರಿಕೆಯನ್ನು ತಡೆಯಲು ನಿಮ್ಮ ಸರ್ಚ್ REST ರೂಟ್ ಅನ್ನು ಪೇಜ್ ಕ್ಯಾಶ್‌ನಿಂದ ಹೊರಗಿಡಿ.

• ಗ್ರೇಸ್‌ಫುಲ್ ಡಿಗ್ರಡೇಶನ್ (Graceful Degradation): Relevanssi ನಂತಹ ಥರ್ಡ್-ಪಾರ್ಟಿ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಬಳಸುವಾಗ ಗಾರ್ಡ್‌ಗಳನ್ನು ಬಳಸಿ. ಪ್ಲಗಿನ್ ವಿಫಲವಾದರೆ, ಸೈಟ್ ಕ್ರ್ಯಾಶ್ ಆಗುವ ಬದಲು ಸರ್ಚ್ ಕೋರ್ WordPress ಸರ್ಚ್‌ಗೆ ಮರಳಬೇಕು.

• ಪರ್ಫಾರ್ಮೆನ್ಸ್ (Performance): debounce ಫಂಕ್ಷನ್ (250ms) ಮತ್ತು AbortController ಬಳಸಿ. ಇದು ಪ್ರತಿಯೊಂದು ಕೀಸ್‌ಟ್ರೋಕ್‌ಗೆ ಬ್ರೌಸರ್ ಹೊಸ ರಿಕ್ವೆಸ್ಟ್ ಕಳುಹಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಇದು ಹಳೆಯ ರಿಕ್ವೆಸ್ಟ್‌ಗಳನ್ನು ರದ್ದುಗೊಳಿಸುತ್ತದೆ ಇದರಿಂದ ಹಳೆಯ ಡೇಟಾ ಹೊಸ ಫಲಿತಾಂಶಗಳನ್ನು ಓವರ್‌ರೈಟ್ ಮಾಡುವುದಿಲ್ಲ.

• ಸೆಕ್ಯೂರಿಟಿ (Security): innerHTML ಬಳಸುವ ಮೊದಲು ಯಾವಾಗಲೂ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಎಸ್ಕೇಪ್ (escape) ಮಾಡಿ. ಇದು ದುರುದ್ದೇಶಪೂರಿತ ಪೋಸ್ಟ್ ಶೀರ್ಷಿಕೆಗಳಿಂದ ಬರುವ XSS ದಾಳಿಗಳನ್ನು ತಡೆಯುತ್ತದೆ.

ಮೊಬೈಲ್ ಪಾಠ (The Mobile Lesson)

ಪೇಜ್ ಬಿಲ್ಡರ್ ನನ್ನ ಸರ್ಚ್ ಬಟನ್ ಅನ್ನು ಮೊಬೈಲ್ ಮೆನುವಿನೊಳಗೆ ಅಡಗಿಸಿಹಾಕಿದ್ದರಿಂದ ನಾನು ಕಷ್ಟಪಟ್ಟೆ. ನಾನು ಅನೇಕ CSS ಫಿಕ್ಸ್‌ಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿದೆ, ಆದರೆ ಅವು ವಿಫಲವಾದವು.

ಪರಿಹಾರ ಸರಳವಾಗಿತ್ತು: ಥೀಮ್‌ನೊಂದಿಗೆ ಹೋರಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಬಟನ್ ಅನ್ನು ಮೆನುವಿನೊಳಗೆ ಇಡುವ ಬದಲು, ನಾನು ಅದನ್ನು ಹೆಡರ್‌ನಲ್ಲಿ ಪ್ರತ್ಯೇಕ ಎಲಿಮೆಂಟ್ ಆಗಿ ಸೇರಿಸಿದೆ. ಒಂದು ಕಾಂಪೊನೆಂಟ್ ನಿಮ್ಮ ಬದಲಾವಣೆಗಳಿಗೆ ಒಪ್ಪದಿದ್ದರೆ, ಅದನ್ನು ಅದರೊಳಗೆ ಇಡುವ ಬದಲು ಅದರ ಪಕ್ಕದಲ್ಲಿ ಇರಿಸಿ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳ ಸಾರಾಂಶ (Summary of Best Practices):

  • ಸರ್ವರ್‌ನಲ್ಲಿ ಪ್ರವೇಶ ನಿಯಂತ್ರಣವನ್ನು ಜಾರಿಗೆ ತರಲು.
  • ಸರ್ಚ್ ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಕ್ಯಾಶ್‌ನಿಂದ ಹೊರಗಿಡಿ.
  • ಸುಗಮ UX ಗಾಗಿ debounce ಮತ್ತು AbortController ಬಳಸಿ.
  • XSS ತಡೆಯಲು ಎಲ್ಲಾ API ಡೇಟಾವನ್ನು ಎಸ್ಕೇಪ್ ಮಾಡಿ.
  • ಕಠಿಣ ಥೀಮ್ ಕಂಟೇನರ್‌ಗಳ ಹೊರಗೆ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಇರಿಸಿ.

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