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

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.

Lascia un commento

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

Usando questo sito, accetti l’uso dei cookies.

Accetto