Ricerca facile Autosuggest in WordPress - Tutorial

Creare una barra di ricerca con il suggerimento automatico in WordPress è sorprendentemente facile, veloce e gratuito. Ecco il nostro tutorial su come farlo.

Perché dovresti anche dedicare del tempo ad aggiungere la ricerca automatica a WordPress? Prima di tutto, risparmierai tempo. I visitatori del tuo blog lo apprezzeranno di più perché rende la loro vita più facile fornendo un facile accesso alle informazioni che cercano all'interno del comfort del tuo sito. C'è un motivo per cui Google e altri strumenti di ricerca orientati alle informazioni utilizzano questo tipo di funzionalità.

Nota: la ricerca automatica all'interno di WordPress può anche essere definita " ricerca live ajax ". Inoltre, poiché WooCommerce utilizza lo stesso database di WP e i prodotti sono semplicemente un tipo di post personalizzato, questo tutorial funzionerà anche per il popolare plug-in di e-commerce.

Di cosa avrai bisogno

Avrai bisogno di un gestore di frammenti di codice, della possibilità di copiare e incollare e del plug-in Live Search (gratuito nel repository).

Dovremmo notare quanto segue: qualsiasi modulo che utilizza <?php get_search_form() ?> , funzionerà automaticamente con questa soluzione e non richiederà i due passaggi successivi. Salta a questa sezione se scegli quel percorso.

Tuttavia, questo non è il caso di molti temi, page builder e altri strumenti. Elementor e Oxygen non utilizzano questo modulo integrato offerto da WordPress (quindi i loro utenti possono facilmente modellarli in termini di dimensioni, carattere e colore). Quindi, per ottenere una barra di ricerca con completamento automatico su Elementor, Oxygen, la maggior parte degli altri page builder e molti temi, segui i passaggi descritti di seguito.

Anche se lo aggiungi tramite PHP, come mostrato sopra, senza alcun CSS, rimarrai con un modulo di ricerca senza stile. Tuttavia, se hai accesso ai file/modelli del tuo tema, questo è un modo praticabile per ottenere un modulo di ricerca sul tuo sito. Questo utilizzerà il markup standard di WordPress, quindi puoi regolare il CSS di seguito.

Preferiamo il metodo seguente, poiché puoi modificare lo stile e le classi, aggiungere elementi speciali, inviare utenti a endpoint di ricerca personalizzati e altro ancora: stai costruendo questa cosa da zero.

Il PHP

Per prima cosa, costruiamo questo modulo di ricerca. Puoi aggiungere ulteriori input, classi CSS, segnaposto e altro. Se mantieni il codice esattamente com'è, il CSS associato lavorerà insieme all'HTML. A seconda di come stai creando un sito Web, puoi semplicemente incollarlo nella struttura effettiva del modello in cui desideri che una barra di ricerca di completamento automatico finisca OPPURE segui il percorso 2.

Il percorso 2 è probabilmente quello che utilizzerà la maggior parte dei proprietari di siti. Invece di usare questo codice HTML e PHP grezzo, lo convertiremo in uno shortcode che lo rende molto più compatibile con WordPress. In questo modo, puoi incollarlo in Gutenberg, in qualsiasi generatore di pagine che desideri e altro ancora. Ci sono alcuni modi per farlo; descriveremo in dettaglio un metodo facile ma a pagamento e un metodo più difficile, ma più semplice.

Modalità a pagamento (facile)

Pick up Scripts Orginizer, un plug-in WordPress premium che semplifica la gestione del codice sul tuo sito Web WordPress (recensione). Dopo l'installazione, vai su Scripts Organizer -> Importa, che si trova nel menu di amministrazione della barra laterale.

Scarica questo file (un'esportazione di tutto ciò che è menzionato di seguito), importalo e salta ad afferrare lo shortcode.

Una volta nella sezione CSS personalizzata, passa alla sezione parziale SCORG, scarica quel JSON, importa, installa il plug-in di ricerca live e diventa operativo.

Puoi anche seguire i passaggi manuali. Per iniziare, crea una nuova voce:

Ora, esegui quanto segue:

1. Dagli un titolo
2. Abilita interruttore blocco codice: attivato
3. Posizione dello script: codice breve
4. Copia/incolla il codice PHP/HTML dall'alto.
5. Mantieni tutte le altre impostazioni predefinite e fai clic su Pubblica

Dovrebbe essere così quando hai finito ️.

Prendi lo shortcode che verrà visualizzato all'interno della voce dello script in basso a sinistra dell'editor di codice o nella pagina di elenco dello snippet di codice:

Prendi questo shortcode e inseriscilo ovunque con Gutenberg, TINYMCE, Elementor Shortcode Widget o qualsiasi altro metodo specifico per shortcode.

Ora vai al passaggio due e aggiungi il CSS al tuo sito.

Via libera (leggermente più difficile)

Installa il plug-in di frammenti di codice gratuito. Scarica il seguente snippet di codice e importalo nel tuo sito web:

Questo file può anche essere importato in Advanced Scripts (essenzialmente una versione premium e più semplice di Code Snippet) e persino in Script Organizer.

Quindi, aggiungi la ricerca utilizzando il seguente shortcode sul tuo frontend:

Indipendentemente da come si aggiunge la ricerca, se si utilizza l'HTML e il PHP sottostanti di questa sezione, il CSS nella sezione successiva gli darà uno stile gradevole.

Il CSS

Se mantieni intatte la struttura e le classi, aggiungi semplicemente questo CSS personalizzato al tuo sito Web per ottenere un modulo di ricerca ben strutturato con la funzionalità di completamento automatico.

Nota: questo codice non è compatibile con il metodo <?php get_search_form() ?> per inserire una barra di ricerca. Tuttavia, a seconda del tuo tema, inserire un modulo di ricerca in questo modo significa che erediterà gli stili del tuo tema.

Puoi aggiungere questo CSS all'utilità di creazione di pagine, tramite Aspetto -> Personalizza -> CSS aggiuntivo o utilizzando SCORG.

Suggeriamo SCORG. Aggiungi un nuovo parziale CSS, incolla il codice e pubblicalo (o importa questo file). Passa allo Shortcode Snippet creato nel passaggio precedente, vai alla sezione "SCSS Partials Manager" e seleziona mostra , cerca il titolo di quel parziale e selezionalo. Aggiornalo. Ora, ovunque posizioni lo shortcode, verrà caricato anche il CSS. Verrà caricato solo dove si trova lo shortcode, non globalmente , il che è ottimo per le prestazioni.

Ora, tutto ciò di cui abbiamo bisogno è la salsa magica.

La salsa magica (SearchWP Live Ajax Search)

Questo è un plug-in incredibile realizzato dal team dietro la suite di plug-in SearchWP. È gratuito e nel repository di WordPress. Invece di complesse strutture di codice, possiamo installarlo e ottenere una ricerca in tempo reale attiva e funzionante in meno di un minuto.

Una volta installato, fai clic sul modulo di ricerca che hai inserito con shortcode, codice grezzo o uno che utilizza l'inserto PHP nativo di WordPress e dovresti vedere il seguente comportamento:

Ecco fatto, hai finito! Goditi un modulo di ricerca sul tuo sito Web WordPress che completerà automaticamente le ricerche degli utenti utilizzando la tecnologia AJAX.

Espandi su questa ricerca dal vivo in WordPress

SearchWP Live Ajax Search è un plugin gratuito che ti permette di fare come suggerisce il nome: aggiungi Live Ajax Search. Funzionerà con o senza la raccolta premium di SearchWP e le estensioni associate. Se non stai utilizzando SearchWP, utilizzerà il motore di ricerca WP standard.

La ricerca standard di WordPress ordina in base alla rilevanza (in passato non era così - selvaggia!) esaminando il titolo di un post, quindi il contenuto. Ma questo è ancora Elementor e ci sono opzioni migliori là fuori. In effetti, abbiamo scritto un altro articolo che discute di alternative migliori, che puoi leggere qui: Soluzioni di ricerca migliori per WordPress

Tuttavia, poiché Live Search è realizzato da Search WP, utilizzerà automaticamente quel motore se installato. Search WP è superiore in quanto include derivazione delle parole chiave, corrispondenze più accurate, indicizzazione dei documenti, supporto per WooCommerce, personalizzazione dell'algoritmo e altro ancora. Ti consigliamo vivamente di creare la tua ricerca live e di utilizzare le altre funzionalità del plug-in premium per offrire risultati di ricerca ancora migliori.

Se stai cercando un'alternativa a SearchWP, Ivory Search è un plug-in a basso costo che offre funzionalità simili e un LTD! Questo plug-in Live Search (WP Search Autocomplete) dovrebbe funzionare immediatamente con Ivory Search. Puoi utilizzare anche altri motori di ricerca; Secondo i documenti, tutto ciò che devi fare è:

Aggiungi il seguente attributo input del modulo: data-swpengine="supplemental" sostituendo 'supplemental' con il nome del motore di ricerca desiderato.

Elenco delle domande frequenti

Ancora più facile con l'ossigeno

Non è un segreto che amiamo Oxygen Builder, quindi ecco un modo ancora più semplice per aggiungere AJAX Live Search (completamento automatico) con quello strumento.

Nota: questo tutorial e questo plug- in non funzioneranno con il widget del modulo di ricerca di ossigeno, perché, come menzionato in una sezione precedente, non utilizza il metodo PHP standard per inserire un modulo di ricerca, né include l'attributo di dati necessario.

Semplici passi:

1. Aggiungi il blocco di codice dove vuoi il modulo di ricerca, incolla il PHP che trovi di seguito (o incolla gli shortcode Hydrogen che renderanno automaticamente il blocco del codice).
2. Aggiungi CSS che trovi di seguito a Oxygen Global CSS, cambia come desideri (principalmente colori).
3. Installa e attiva il plug-in Live Search, gratuito su repository qui.
4. Crogiolarsi nella gloria della ricerca dal vivo.

Poiché siamo in grado di inserire PHP direttamente nei modelli e nelle pagine con il Page Builder, possiamo semplicemente incollare il seguente PHP in un blocco di codice, aggiungere il CSS tramite le impostazioni globali e chiamarlo una notte (assicurati di aver aggiunto il plug-in di ricerca in tempo reale, disponibile qui).

Puoi anche copiare/incollare i seguenti codici brevi di idrogeno (se hai Hydrogen Pack (recensito qui)).

Basta fare clic su copia, installare Hydrogen e incollare nella pagina. I CSS verranno inclusi nel blocco di codice.

Infine, usa il CSS (tratto da sopra):

Suggeriamo di inserire questo CSS tramite il CSS globale di Oxygen.

Ecco come dovrebbe essere il risultato finale:

Se vuoi riutilizzare questa parte, puoi anche semplicemente trasformarla in una parte riutilizzabile. Finché hai installato il plug-in Live Search, dovresti essere a posto con una bella barra di ricerca AJAX per i tuoi visitatori.

<?php get_search_form() ?>

Oppure, usa semplicemente il codice sopra se non hai bisogno di una personalizzazione avanzata (inclusa ma non limitata a soluzioni di ricerca migliori rispetto alla ricerca principale di WP). Naturalmente, poiché possiamo utilizzare codici brevi in ​​questo generatore di pagine, puoi anche seguire la metà superiore di questo tutorial che ti guiderà attraverso la creazione di un codice breve da utilizzare sul front-end del tuo sito web.

Conclusione

Nel 2022 è più importante che mai offrire ai tuoi utenti un'esperienza eccezionale e gli strumenti di cui hanno bisogno per accedere ai contenuti che desiderano. Questo articolo ha presentato diversi metodi per installare la ricerca Ajax live di WordPress su un sito Web in meno di 15 minuti.

Esistono diversi metodi descritti qui in modo da poter scegliere di utilizzarlo sui file modello di tema, generare codici brevi compatibili con i costruttori di pagine e incorporare ancora più metodi. Il plugin utilizzato per ottenere la funzionalità di ricerca in tempo reale è completamente gratuito e ben progettato.

Qualsiasi domanda? Sentiti libero di lasciarli nella sezione commenti qui sotto.