Il modo più semplice per aggiungere Live Search

Stai cercando il miglior plugin WordPress per la ricerca AJAX?

L'aggiunta della ricerca dal vivo basata su AJAX a WordPress è un ottimo modo per migliorare l'esperienza utente (UX) del tuo sito e aumentare la rilevabilità dei contenuti.

In questo post imparerai passo dopo passo come configurare la ricerca AJAX in WordPress utilizzando una soluzione completamente priva di codice.

In effetti, puoi essere attivo e funzionante in pochi minuti, pur avendo accesso alle funzionalità per perfezionare il funzionamento della ricerca AJAX del tuo sito.

Tutto quello che devi fare è:

1. Installa il plugin Otter Blocks.
2. Aggiungi il blocco di ricerca in cui vuoi che appaia la tua casella di ricerca AJAX WordPress e attiva l'interruttore di ricerca dal vivo.
3. Personalizza la funzionalità di ricerca live AJAX secondo necessità, ad esempio configurandola per cercare solo post di blog ma non pagine.

Se vuoi passare direttamente al tutorial, puoi fare clic su questo collegamento di salto.

Cos'è la ricerca AJAX per WordPress?

Probabilmente utilizzerai la funzionalità di ricerca in tempo reale su base giornaliera. Ad esempio, tutti i principali motori di ricerca e siti di video come YouTube forniscono questo tipo di funzionalità.

Inizi a digitare nella casella di ricerca e visualizzi immediatamente un elenco di query suggerite (o risultati suggeriti): non è necessario caricare la pagina.

Sebbene WordPress abbia una propria barra di ricerca, non utilizza AJAX per impostazione predefinita. Invece, gli utenti inseriscono un termine di ricerca nella casella, premono invio e viene caricata una nuova pagina con i risultati.

Per aggiungere la ricerca dal vivo al tuo sito, avrai bisogno dell'aiuto di un plug-in, che è l'argomento di questo post.

I vantaggi della ricerca AJAX dal vivo in WordPress

Tutto ciò che puoi introdurre per migliorare la UX offrirà valore al tuo sito. Tuttavia, la ricerca live AJAX per WordPress può offrire ai tuoi utenti qualcosa di speciale:

• Puoi fornire agli utenti un modo per "servire autonomamente" le loro esigenze. Avranno un modo veloce per cercare in tutto il tuo sito e trovare la pagina giusta.
• Gli elementi interattivi possono fornire una maggiore connessione tra il tuo sito e gli utenti. Questo perché puoi fornire risultati di ricerca pertinenti più velocemente e senza la necessità di ulteriori clic sui pulsanti.
• Puoi anche ridurre al minimo i tempi di caricamento delle pagine, poiché la ricerca AJAX in tempo reale non ha bisogno di effettuare ulteriori richieste HTTP o caricare altre pagine.

Perché una soluzione di codifica manuale per la ricerca in tempo reale potrebbe non essere la migliore

Dato che AJAX utilizza JavaScript, potresti prendere in considerazione la soluzione "rolling your own" utilizzando il linguaggio di programmazione.

Questa è una buona idea in teoria, ma non sarà il metodo migliore per aggiungere la ricerca AJAX dal vivo a WordPress. Ecco perché:

• Innanzitutto, puoi solo creare una soluzione all'altezza delle tue capacità. Se non hai una conoscenza JavaScript a livello di esperto, questo verrà mostrato nei risultati.
• Inoltre, dovrai anche conoscere la struttura dei file di WordPress, la struttura dei modelli e molto altro. Ci sono molti ingranaggi che compongono la ruota di WordPress.
• Anche se possiedi le competenze necessarie per codificare una soluzione di ricerca in tempo reale, avrai anche bisogno di tempo e denaro per svilupparla e implementarla. Questo può essere difficile da ottenere, soprattutto se lo sviluppo non è la tua occupazione principale.
• Se hai bisogno di risolvere i problemi della tua soluzione manuale, questo può consumare ulteriormente tempo, denaro e risorse. Potresti mordere più di quanto puoi masticare.

Invece, c'è un modo migliore per implementare la giusta funzionalità all'interno di WordPress: i plugin. Diamo un'occhiata a come funziona dopo.

Utilizza invece un plug-in WordPress di ricerca AJAX

Per la maggior parte delle persone, l'utilizzo di un plug-in WordPress di ricerca AJAX è un'opzione molto migliore.

Sebbene ci siano molti plugin WordPress di ricerca AJAX tra cui scegliere, non tutti sono uguali. Ad esempio, alcuni plug-in sono limitati quando si tratta di opzioni di stile o di controllo del contenuto da cercare.

Per questo motivo, utilizzeremo il plug-in Otter Blocks per questo tutorial.

Come suggerisce il nome, Otter Blocks è una raccolta di elementi per il Block Editor nativo di WordPress.

In termini di funzionalità di ricerca AJAX, la caratteristica più rilevante è il blocco di ricerca.

Ti consente di scegliere in quali tipi di post cercare e personalizzare completamente il design della tua casella di ricerca. Puoi aggiungerlo a qualsiasi parte del tuo sito, inclusi post, pagine, barre laterali e altro.

Oltre alla funzionalità WordPress di ricerca AJAX, Otter Blocks ti offre alcuni modi in più per ravvivare layout e design:

• Puoi aggiungere intestazioni con un livello di personalizzazione maggiore di quello che otterrai per impostazione predefinita.
• C'è la possibilità di creare una sezione reattiva che include personalizzazione avanzata e spazio per sei colonne.
• Sarai in grado di aggiungere animazioni straordinarie come effetti Lottie e flip card.
• Se vendi prodotti attraverso il tuo sito, Otter Blocks include tabelle dei prezzi, la possibilità di implementare pulsanti "aggiungi al carrello", orari di lavoro e molto altro.

Infatti, Otter Blocks fornisce funzionalità aggiuntive per tutti i blocchi offerti, anche quelli nativi. Ad esempio, puoi impostare condizioni di visibilità, CSS personalizzati e altro dalla tipica interfaccia dell'Editor blocchi.

Come utilizzare Otter Blocks per aggiungere la ricerca AJAX dal vivo a WordPress

Avrai solo bisogno di pochi passaggi per configurare Otter Blocks per aggiungere la ricerca AJAX dal vivo a WordPress. Iniziamo con il processo di installazione:

1. Installa e attiva i blocchi Otter
2. Abilita la ricerca AJAX live per WordPress nelle impostazioni di Otter Blocks
3. Modifica le impostazioni per perfezionare l'esperienza di ricerca sul front-end del tuo sito

1. Installa e attiva Otter Blocks

Prima di tutto, dovrai installare Otter Blocks e attivarlo per il tuo sito web. Ci sono molti modi per farlo, ma ripetiamo ciò che è già presente nel nostro altro articolo sul blog di ThemeIsle.

Questo ti mostrerà come installare sia la versione gratuita che quella premium di Otter Blocks. Tuttavia, per questo post, avrai bisogno della versione premium in quanto ti offre funzionalità di ricerca in tempo reale.

2. Abilita la ricerca live AJAX per WordPress nelle impostazioni di Otter Blocks

Dopo aver installato il plug-in, utilizza l'inseritore di blocchi per aggiungere il blocco di ricerca da Otter Blocks.

Dopo averlo fatto, aggiungerà un campo modulo e un pulsante al layout della pagina.

Questo implementa la funzionalità di ricerca di base, ma questa non è una ricerca AJAX live in WordPress.

Nella sua configurazione predefinita, funzionerà come la tipica ricerca di WordPress.

Per abilitare la funzione di ricerca AJAX di WordPress, attiva l'interruttore Abilita ricerca dal vivo nella barra laterale di destra:

3. Modifica le impostazioni per perfezionare l'esperienza di ricerca sul front-end del tuo sito

Una volta che hai la funzionalità di ricerca dal vivo sul tuo sito, puoi perfezionarla in diversi modi.

Naturalmente, ci sono una serie di opzioni estetiche e UX.

Ad esempio, puoi modificare la posizione del pulsante, se utilizzi un'etichetta per la casella di ricerca e modificare i colori, le animazioni e i bordi per la sezione di ricerca:

Da lì, puoi anche dare alla ricerca i suoi limiti su dove cercare sul tuo sito scegliendo in quali tipi di post cercare.

Per questo, utilizzerai la casella Cerca nella barra laterale di destra:

Ciò consente di aggiungere "entità" per dove si desidera che la ricerca operi.

Ad esempio, puoi scegliere di cercare solo all'interno del contenuto del tuo post o tra i prodotti del tuo negozio.

Se lasci questo campo vuoto, Otter Blocks cercherà l'intero contenuto del tuo sito.

Configura oggi la funzionalità WordPress di ricerca AJAX

Tuttavia, WordPress non lo offre per impostazione predefinita. Invece, puoi utilizzare Otter Blocks per aggiungerlo al tuo sito. Non è coinvolto alcun codice e ottieni molte più funzionalità rispetto alla semplice ricerca AJAX dal vivo.

Sebbene Otter Blocks sia un plug-in gratuito, la versione premium offre la possibilità di impostare la ricerca AJAX live in WordPress, tra le altre opzioni.

Hai ancora domande su come configurare la ricerca live AJAX su WordPress? Chiedicelo nei commenti qui sotto!