Ricerca Live
Live Search non richiede SearchWP ma lo utilizzerà se disponibile
Live Search è una potente funzionalità fornita da SearchWP che visualizza risultati di ricerca in tempo reale, basati su AJAX, in un contenitore a discesa mentre gli utenti digitano parole chiave in un modulo di ricerca. Migliora l'esperienza utente fornendo un feedback istantaneo, aiutando i visitatori a trovare rapidamente i contenuti che cercano.
Live Search non richiede SearchWP, quindi è disponibile su wordpress.org. Se hai SearchWP installato e attivato, Live Search lo utilizzerà automaticamente. In caso contrario, verranno forniti i risultati di ricerca nativi di WordPress.
Puoi configurare e personalizzare l'aspetto dei risultati della ricerca live navigando su: SearchWP → Moduli di ricerca → Live Search nel backend di WordPress
Esiste una serie di opzioni per controllare il design, il layout e il comportamento dei risultati della ricerca live. Di seguito è riportata una spiegazione dettagliata delle opzioni di personalizzazione disponibili:
1. Generale
Abilita Live Search: Una volta che l'estensione Live Search è installata e attiva, la ricerca live di SearchWP si integra automaticamente con il modulo di ricerca predefinito di WordPress e con i moduli SearchWP. Puoi utilizzare questo interruttore per abilitare o disabilitare questa funzionalità.
2. Scegli un tema di layout
Questa sezione ti consente di selezionare come verranno visualizzati i tuoi risultati di ricerca live nel pannello a discesa sotto il modulo di ricerca. Ogni tema di layout offre un diverso livello di dettaglio e presentazione visiva.
Temi di layout disponibili:
- Minimale Un elenco pulito e semplice che visualizza solo i titoli dei post. Ideale per siti Web che preferiscono un'esperienza di ricerca veloce basata sul testo.
- Medio Visualizza sia il titolo che una breve descrizione per ogni risultato di ricerca. Questa opzione offre più contesto agli utenti senza sopraffarli.
- Ricco Un layout visivamente accattivante che include una miniatura per visualizzare l'immagine in primo piano del post, insieme al titolo e alla descrizione di ogni risultato. Perfetto per siti Web ricchi di contenuti come blog o negozi di eCommerce.
- Personalizzato Questo layout consente la massima flessibilità. Puoi progettare un formato di risultato personalizzato combinando diversi elementi utilizzando la sezione Stile personalizzato descritta di seguito.
3. Stile personalizzato
La sezione Stile personalizzato ti consente di mettere a punto i singoli componenti di ogni risultato di ricerca live.
Descrizione: Un'opzione di attivazione/disattivazione che ti consente di mostrare o nascondere la descrizione sotto il titolo del risultato. Abilita questa opzione se desideri fornire agli utenti maggiori informazioni su ciascun risultato.
Suggerimento: puoi abilitare l'opzione Evidenzia termini nelle impostazioni di SearchWP per generare una descrizione personalizzata contenente il termine di ricerca per ciascun risultato.
Immagine: Controlla la dimensione dell'immagine mostrata nei risultati. Le opzioni disponibili includono: piccola, media o grande.
Titolo: Personalizza il colore del testo del titolo e la dimensione del carattere per adattarli al design del tuo sito e migliorare la leggibilità.
Prezzo: Questa opzione diventa visibile solo quando un plugin eCommerce come WooCommerce o Easy Digital Downloads è attivo. Puoi regolare il colore e la dimensione del carattere del prezzo del prodotto mostrato nei risultati.
Aggiungi al carrello: Disponibile anche solo con un plugin eCommerce attivo, questa impostazione aggiunge un pulsante “Aggiungi al carrello” a ogni risultato del prodotto. Puoi personalizzare lo stile, come il colore di sfondo, il colore del carattere e la dimensione del carattere del pulsante. Questa opzione è perfetta per i negozi che desiderano semplificare il processo di acquisto direttamente dal menu a discesa della ricerca live.
4. Risultati
Includi Stile: L’opzione Includi Stile controlla se gli asset CSS e di layout predefiniti di SearchWP per il menu a discesa della Ricerca Live vengono caricati nelle tue pagine. Questi file di asset sono responsabili dell’applicazione degli stili predefiniti ai risultati della ricerca e del corretto posizionamento del contenitore del menu a discesa sopra o sotto il modulo di ricerca. La modifica di questa opzione è consigliata solo per utenti esperti che hanno familiarità con l’applicazione di stili e codice personalizzati.
Posizionamento: Scegli se i risultati devono apparire sopra o sotto il modulo di ricerca. Il comportamento predefinito è mostrare il menu a discesa sotto il campo di inserimento.
Larghezza Automatica: Abilita questo interruttore se desideri che il menu a discesa dei risultati corrisponda alla larghezza del modulo di ricerca. Disabilitandolo, il contenitore seguirà il proprio stile o la larghezza predefinita.
Max Risultati: Questa opzione imposta il numero massimo di risultati mostrati nel menu a discesa live. Il valore predefinito è 7. Puoi usare un numero specifico (ad es. 5 o 10) per limitare il numero di risultati visibili o impostarlo su -1 per visualizzare tutti i risultati corrispondenti.
Messaggio Nessun Risultato: Personalizza il messaggio mostrato quando non vengono trovate corrispondenze. Il testo predefinito è “Nessun risultato trovato.”. Tuttavia, puoi anche usare un prompt amichevole come “Abbiamo cercato ovunque ma non l’abbiamo trovato. Prova a cercare qualcos’altro”. per migliorare l’esperienza utente.
5. Impostazioni Varie
Lunghezza Minima Caratteri: Definisci il numero minimo di caratteri che un utente deve digitare prima che vengano visualizzati i risultati della ricerca live.
Nota: Per impostazione predefinita, SearchWP indicizza le parole chiave con una lunghezza minima di 3 caratteri. Se desideri consentire ricerche con 1 o 2 caratteri, devi abilitare l’opzione “Rimuovi Lunghezza Minima” nelle impostazioni principali di SearchWP. Dopo averla abilitata, assicurati di ricostruire l’indice nelle impostazioni del motore in modo che i nuovi token (parole più brevi) possano essere inclusi nei risultati della ricerca.
Suggerimenti Aggiuntivi
- Per un maggiore controllo visivo con stili avanzati, puoi aggiungere CSS personalizzato nel Foglio di Stile del Tema o in Aspetto → Personalizza → CSS aggiuntivo.
- La Ricerca Live è compatibile con i Moduli di Ricerca. Puoi utilizzare un modulo a discesa per categorie o opzioni nel Modulo di Ricerca Avanzata per filtrare i risultati della ricerca live.
- Se desideri personalizzare il layout dei risultati della ricerca live o visualizzare informazioni aggiuntive, puoi creare un modello di ricerca live personalizzato nel tuo tema. Per istruzioni dettagliate, consulta questo documento.
Utilizzo
Dopo aver caricato e attivato Live Search, qualsiasi modulo generato utilizzando get_search_form() verrà automaticamente migliorato con la ricerca live utilizzando la configurazione predefinita. Verrà utilizzato il motore di ricerca predefinito di SearchWP (o la ricerca nativa di WordPress se SearchWP non è disponibile) e verrà applicato il tema predefinito. Tuttavia, puoi personalizzare tutto in larga misura.
Se non stai utilizzando get_search_form(), puoi semplicemente aggiungere un attributo data per abilitare la ricerca live, in questo modo:
Se desideri impedire a SearchWP di abilitare automaticamente la ricerca live sui moduli generati con get_search_form(), utilizza il filtro searchwp_live_search_hijack_get_search_form.
Per visualizzare i risultati live solo su moduli selezionati, puoi disabilitare la ricerca live nelle impostazioni e quindi utilizzare il seguente script JS per attivare la ricerca live su moduli specifici:
| <script> | |
| jQuery(document).ready( function(){ | |
| jQuery("form input[type='search']").searchwp_live_search(); | |
| }); | |
| </script> |
Nel codice sopra, puoi sostituire il selettore form input[type='search'] con l'elemento selettore di input specifico per il tuo modulo.
Personalizzazione del motore di ricerca e della configurazione utilizzata per ogni modulo di ricerca
Puoi personalizzare il motore di ricerca utilizzato impostando l'attributo data-swpengine sul tuo campo di input per corrispondere al nome del motore di ricerca che desideri utilizzare. Questo si applica solo quando SearchWP è installato e attivato, e ha la precedenza sull'engine definito nella configurazione applicabile.
Puoi personalizzare la configurazione utilizzata per ogni modulo di ricerca impostando l'attributo data-swpconfig sul tuo input per corrispondere a una chiave dell'array nelle configurazioni. Per personalizzarle, utilizza il filtro searchwp_live_search_configs.
Personalizzazione dei risultati
I risultati di Live Search sono alimentati da un sistema di modelli. Noterai che c'è un file che viene fornito con il plugin: ~/wp-content/plugins/searchwp-live-ajax-search/templates/live-search-results.php. Questo file viene utilizzato per visualizzare i risultati della ricerca. Si raccomanda che se desideri personalizzare i risultati della ricerca, segui questi passaggi:
- Crea una cartella all'interno della directory del tuo tema chiamata
searchwp-live-ajax-search - Copia
live-search-results.phpdalla directory~/wp-content/plugins/searchwp-live-ajax-search/templates/in quella cartella - Personalizza la copia di
live-search-results.phpdel tuo tema come faresti con qualsiasi modello di tema - Facoltativamente, crea file aggiuntivi per ogni motore di ricerca, ad esempio
live-search-results-supplemental.phpper un motore di ricerca chiamatosupplemental
Posizionamento
Live Search genera alcuni stili di base per posizionare correttamente il contenitore dei risultati. Genera anche un tema predefinito e minimale. Puoi rimuovere lo stile visivo predefinito mantenendo il posizionamento rimuovendo il CSS del tema predefinito:
Nota importante
NOTA: Il tema predefinito implementa anche l'animazione dello spinner. Se stai rimuovendo il tema predefinito, dovrai aggiungere l'animazione keyframe sottostante al CSS del tuo tema.
Se desideri rimuovere anche il CSS di posizionamento, puoi farlo utilizzando il filtro searchwp_live_search_base_styles.
Puoi riposizionare il contenitore dei risultati in due modi:
- Aggiungi un attributo data al tuo input del modulo contenente il selettore dell'elemento padre
data-swpparentel=".masthead .my-search-results-parent" - Aggiungi una proprietà
parent_elalla configurazione (vedisearchwp_live_search_configs)
Filtri
I seguenti filtri sono disponibili per l'uso in Live Search:
searchwp_live_search_hijack_get_search_form Imposta se Live Search migliorerà automaticamente i moduli di ricerca generati da get_search_form(). Il valore predefinito è true, per disabilitare:
| <?php | |
| add_filter( 'searchwp_live_search_hijack_get_search_form', '__return_false' ); |
searchwp_live_search_get_search_form_engine Definisci il motore di ricerca da utilizzare quando si abilita automaticamente la ricerca dal vivo sui moduli generati da get_search_form(). Il valore predefinito è 'default'.
Nota: applicabile solo con SearchWP installato e attivato
| <?php | |
| // only applies when SearchWP is active | |
| function my_searchwp_live_search_get_search_form_engine() { | |
| return 'my_supplemental_engine'; | |
| } | |
| add_filter( 'searchwp_live_search_get_search_form_engine', 'my_searchwp_live_search_get_search_form_engine' ); |
searchwp_live_search_get_search_form_config Definisci la configurazione da utilizzare quando si abilita automaticamente la ricerca dal vivo sui moduli generati da get_search_form(). Il valore predefinito è 'default'.
Nota: applicabile solo con SearchWP installato e attivato
| <?php | |
| // only applies when SearchWP is active | |
| function my_searchwp_live_search_get_search_form_config)() { | |
| return 'my_config'; | |
| } | |
| add_filter( 'searchwp_live_search_get_search_form_config', 'my_searchwp_live_search_get_search_form_config' ); |
searchwp_live_search_configs Aggiungi le tue configurazioni, che controllano le impostazioni per il motore di ricerca da utilizzare, il ritardo della ricerca, i caratteri minimi, il posizionamento del riquadro dei risultati e le opzioni dello spinner. Le configurazioni sono memorizzate come array associativo, quindi puoi facoltativamente sovrascrivere i valori nella chiave default, o aggiungere i tuoi e usarli quando imposti l'attributo data-swpconfig sul tuo input di ricerca.
Questa è la configurazione predefinita:
Nota: il valore predefinito per i caratteri minimi è 3 (che è lo stesso di SearchWP stesso) ma le impostazioni di configurazione per Live Search sono parametri separati e non vengono aggiornati quando parametri simili di SearchWP sono stati personalizzati.
| <?php | |
| $configs = array( | |
| 'default' => array( // 'default' config | |
| 'engine' => 'default', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 500, // wait 500ms before triggering a search | |
| 'min_chars' => 3, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'parent_el' => 'body', // selector of the parent element for the results container | |
| 'results' => array( | |
| 'position' => 'bottom', // where to position the results (bottom|top) | |
| 'width' => 'auto', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 5 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ) | |
| ); |
Puoi modificare i valori di questi valori predefiniti, o aggiungere le tue configurazioni separate e avere più configurazioni disponibili per te:
| <?php | |
| function my_searchwp_live_search_configs( $configs ) { | |
| // override some defaults | |
| $configs['default'] = array( | |
| 'engine' => 'default', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 400, // wait 500ms before triggering a search | |
| 'min_chars' => 5, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'parent_el' => 'body', // selector of the parent element for the results container | |
| 'results' => array( | |
| 'position' => 'bottom', // where to position the results (bottom|top) | |
| 'width' => 'auto', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 5 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ); | |
| // add an additional config called 'my_config' | |
| $configs['my_config'] = array( | |
| 'engine' => 'supplemental', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 300, // wait 500ms before triggering a search | |
| 'min_chars' => 2, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'results' => array( | |
| 'position' => 'top', // where to position the results (bottom|top) | |
| 'width' => 'css', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 0 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ); | |
| return $configs; | |
| } | |
| add_filter( 'searchwp_live_search_configs', 'my_searchwp_live_search_configs' ); |
searchwp_live_search_base_styles Imposta se viene applicato il CSS predefinito per il posizionamento del riquadro dei risultati. NOTA: questo è separato dall'aspetto visivo dei risultati della ricerca e controlla solo il posizionamento. Il valore predefinito è true, per disabilitare:
| <?php | |
| add_filter( 'searchwp_live_search_base_styles', '__return_false' ); |
searchwp_live_search_posts_per_page Controlla quanti risultati vengono restituiti. Il valore predefinito è 7, per cambiare:
| <?php | |
| function my_searchwp_live_search_posts_per_page() { | |
| return 20; // return 20 results | |
| } | |
| add_filter( 'searchwp_live_search_posts_per_page', 'my_searchwp_live_search_posts_per_page' ); |
