Creare una Search Modal per siti WordPress con contenuti protetti

La maggior parte dei tutorial sulla ricerca in WordPress è troppo semplice. Ti dicono di inserire un widget nell'header. Questo funziona per i blog pubblici, ma fallisce per i siti membership.

Se hai corsi a pagamento o video privati, una ricerca predefinita può causare fughe di dati. Mostra i titoli dei contenuti privati agli utenti non loggati. Questo compromette il tuo paywall.

Ho creato una search modal personalizzata per un sito di fitness utilizzando WordPress, WooCommerce e LearnDash. Ecco come costruire una ricerca che rispetti le regole di accesso.

L'Architettura

Ho utilizzato un unico indice unificato invece di ricerche separate per ogni tipo di contenuto. Ciò mi ha permesso di applicare il controllo degli accessi a livello di query.

I risultati della ricerca seguono queste regole:

  • Gli articoli del blog sono pubblici.
  • I video on-demand sono protetti.
  • I corsi sono protetti tramite LearnDash.
  • I prodotti dello store sono pubblici.

Ho creato una rotta REST personalizzata nel tema child. Ho evitato i plugin di snippet per garantire che la ricerca rimanga stabile.

Dettagli Tecnici Chiave

• Server-Side Gating: Non nascondere mai i risultati usando JavaScript. Se nascondi un risultato nel browser, i dati sono comunque presenti nella risposta di rete. Un utente può vederli tramite DevTools. Devi filtrare i dati sul server prima che lascino il sito.

• Gestione della cache: Se metti in cache i risultati della ricerca, potresti mostrare i risultati privati di un membro a uno sconosciuto. Escludi la tua rotta REST di ricerca dalla cache della pagina per prevenire fughe di dati.

• Graceful Degradation: Usa dei guard quando chiami plugin di terze parti come Relevanssi. Se il plugin fallisce, la ricerca dovrebbe passare alla ricerca core di WordPress invece di far crashare il sito.

• Performance: Usa una funzione di debounce (250ms) e un AbortController. Questo impedisce al browser di inviare una nuova richiesta per ogni singolo tasto premuto. Inoltre, annulla le richieste precedenti in modo che i dati obsoleti non sovrascrivano i nuovi risultati.

• Sicurezza: Esegui sempre l'escape delle stringhe prima di usare innerHTML. Questo previene attacchi XSS da titoli di post malevoli.

La lezione sul mobile

Ho avuto problemi con un page builder che "inghiottiva" il mio pulsante di ricerca all'interno di un menu mobile. Ho provato molti fix CSS, ma senza successo.

La soluzione è stata semplice: smettere di combattere contro il tema. Invece di inserire il pulsante all'interno del menu, l'ho iniettato nell'header come elemento separato. Se un componente resiste alle tue modifiche, posiziona il tuo elemento accanto ad esso invece che al suo interno.

Riepilogo delle Best Practice:

  • Applica il controllo degli accessi sul server.
  • Escludi gli endpoint di ricerca dalla cache.
  • Usa debounce e AbortController per un'esperienza utente fluida.
  • Esegui l'escape di tutti i dati API per prevenire attacchi XSS.
  • Posiziona gli elementi all'esterno dei contenitori del tema più ostinati.

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