Dritti all’obiettivo con un Ajax live search su WordPress, per filtrare velocemente Articoli e Pagine

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.

5 commenti su Dritti all’obiettivo con un Ajax live search su WordPress, per filtrare velocemente Articoli e Pagine

  1. 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/  

    1. 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!

  2. 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?

  3. 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?

    1. Ciao Manuel! In teoria fai prima a sostituire il form che hai con quello del tutorial! 👍

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *