Andiamo a creare un sistema di ricerca rapida dei posts o dei custom post type in Ajax per WordPress, utilizzando jQuery. Il bottone di ricerca presente in questo sito per intenderci.
Tramite WP_query sarete in grado di pianificare la vostra ricerca e mirarla a determinati posts o, nel caso vogliate, una ricerca dedicata ai soli prodotti in WooCommerce.
Questo non esclude anche la possibilità di associare questa funzione anche ai vostri Custom Post Type.
Questo tutorial è adatto per qualsiasi tema WordPress, vediamo anzitutto il codice HTML e PHP per la struttura di base. Dovrete creare un file all’interno del vostro tema, potete chiamarlo live-search.php e dentro vi sarà il codice visuale che utilizzerete nel vostro front-end.
Questo file andrà incluso tramite la funzione di WordPress get_template_part nella zona che più vi interessa, solitamente un box di ricerca è visibile nella header del vostro sito.
Fatto questo dovrete includere nel vostro file function.php la seguente funzione che si occuperà appunto di effettuare la query ai vostri posts o custom post type. Come anticipato, potrete cambiare i vostri parametri alla WP_query.
Inserita la funzione live_search() andiamo ora a creare un file scripts.js che possiamo inserire in qualsiasi sottocartella del tema di WordPress o anche nella cartella principale del tema ed andiamo ad inserire il seguente codice jQuery:
Ovviamente il codice di cui sopra è basato su un CSS particolare che potete includere separatamente con un wp_enqueue_style oppure inserirlo nel vostro style.css. Il codice CSS è il seguente:
Ora non dobbiamo fare altro che includere il nostro file scripts.js e farlo dialogare con la funzione ajax_url di WordPress per trasmettere i dati in tempo reale. Per fare questo localizzeremo la variabile JavaScript nel file nel seguente modo:
Il tutorial è quindi giunto al termine, ma vi ricordo che potrete poi personalizzare tutto lo stile CSS e la lista dei risultati nel modo che più vi aggrada. Ora avete una ricerca live di tutti i vostri articoli sul vostro sito, che a parer mio, trovo comodissima da usare per trovare subito quello che si stava cercando senza dover ricaricare la pagina del vostro browser.
UPDATE con Return alla ricerca
Grazie all’utente Lorenzo, ho aggiunto la possibilità di mandare l’utente, alla pagina di ricerca standard di WordPress e per farlo potete aggiungere questi codici.
Codice per il file JavaScript
Questo invece il codice PHP da aggiungere, questo codice si occupa di restituire la url di ricerca
Ciao mi piace questa funzione, mi presento sono un principiante e sto cercando di integrare un Forum già attivo sulla piattaforma Forumcommunity con un sito in wordpress che sto implementando. Per avere delle funzionalità che in quel forum non ci sono. Questo tuo codice mi interessa perchè lo vorrei implementare per un archivio di basi musicali karaoke (circa 40000) che ho su file excel e che ho trasportato in tabella mysql nel database di wordpress. Vorrei poter usare questo live search percercare Autori e Titoli nelle tabelle che sono 4 differenziate per tipoligia. In modo da usarlo come motore di ricerca. Volevo sapere se potevi aitarmi in questo. Ho trovato altri esempi in giro se vuoi ti faccio alcuni esempi ho fatto esperimenti ma ancora ad oggi non sono riuscito ad integrarli nel mio sito e a farli funzionare. Questo è il mio sito https://love4music.altervista.org/
Ciao Dario, la tua richiesta è fattibile, quello che però ti posso consigliare è di usare una libreria adatta allo scopo e che gestisca anche 10 volte tante le richieste, per stare sicuri.
Nel tuo caso il mio consiglio è quello di usare la libreria VUE.js oppure Angular o React. Io preferisco il primo per una questione meramente di documentazione e di struttura del codice. A te la scelta! In rete, e nel sito di vue, trovi tantissimi esempi per realizzare quello che vuoi!
Purtroppo non sono pratico di quello che dici come ti dicevo sono principiante conosci qualcosa come codice già pronto che magari con qualche modifica possa integrarlo nel mio sito?
Ciao tutorial molto interessante e vorrei applicarlo ad un sito dove è già presente il form di ricerca ma non la ricerca live, il sito in questione tratta soggiorni nel sud Italia implementato con un tema per hotel Booking, cosa mi consiglieresti di fare? Provo ad usare il tutorial?
Ciao Manuel! In teoria fai prima a sostituire il form che hai con quello del tutorial! 👍
Ciao, figata!
volevo chiedere una info, è possibile fare in modo che funzioni la ricerca live, ma una volta digitata la parola premendo invio si vada anche nella pagina standard di ricerca wordpress?
Ciao Lorenz, quello che vuoi fare tu non ha molto senso perché la ricerca ajax live evita proprio quella pagina!
eh lo so, ma in alcuni casi ho riscontrato problemi con alcuni utenti che per abitudine cliccano Invio, per quello che chiedevo se magari con l’aggiunta di una piccola funzione si potesse avviare il risultato di ricerca in pagina all’invio.
Si ora capisco la tua richiesta, si può fare ma va implementato. Appena ho tempo vedo di inserire
OK grazie. Tu credo possa vedere la mia email, sentiamoci pure li per una questione di compenso essendo una richiesta mia personale. Grazie