Come consentire agli utenti di filtrare post e pagine in WordPress (3 metodi)

Una libreria di contenuti in crescita è spesso segno di un sito WordPress sano. Ma più contenuti non significano sempre un'esperienza migliore. Soprattutto quando i visitatori non riescono a trovare ciò che cercano.

Abbiamo visto questo accadere su molti blog in crescita: tonnellate di ottimi post, ma nessun modo semplice per i visitatori di filtrarli, così se ne vanno frustrati.

Ciò significa che aggiungere filtri ai tuoi post e pagine non è solo un bel extra. È un must se vuoi mantenere i visitatori coinvolti.

Quando le persone possono ordinare rapidamente i tuoi contenuti per categoria, tag, data o persino campi personalizzati, è molto più probabile che rimangano ed esplorino.

Abbiamo dedicato molto tempo alla ricerca e al test di diverse soluzioni di filtraggio per affrontare questo problema. In questa guida, ti illustreremo 3 dei modi più semplici ed efficaci per consentire agli utenti di filtrare post e pagine in WordPress utilizzando SearchWP, WPCode e il plugin Search & Filter.

Perché aggiungere una funzionalità di filtraggio per i tuoi post e pagine WordPress?

Hai mai visitato un sito web WordPress stracolmo di contenuti, solo per faticare a trovare ciò di cui hai bisogno? Questa può essere un'esperienza frustrante per gli utenti e farli abbandonare completamente il tuo sito.

In definitiva, questo può influire negativamente sulla SEO poiché i motori di ricerca considerano l'esperienza utente un fattore di ranking. Un sito web con alti tassi di rimbalzo e basso coinvolgimento potrebbe essere considerato meno prezioso dai motori di ricerca.

Fortunatamente, esiste una soluzione semplice: implementare una funzionalità di ricerca e filtro sul tuo sito WordPress. Questo potente strumento consente agli utenti di restringere i contenuti in base a criteri specifici, rendendo un gioco da ragazzi trovare ciò che stanno cercando.

Una funzionalità di ricerca e filtro non è utile solo per i blog WordPress. È ideale anche per siti come forum con migliaia di discussioni. In questo modo, gli utenti possono cercare la discussione giusta per argomento, data o autore.

Oppure, se hai un sito di podcast, gli ascoltatori possono cercare il loro episodio preferito utilizzando la funzionalità.

Tenendo conto di ciò, ti mostreremo 3 metodi semplici per consentire agli utenti di filtrare post e pagine sul tuo sito WordPress. Puoi utilizzare i collegamenti rapidi qui sotto per passare al metodo preferito:

• Metodo 1: Filtra post e pagine con SearchWP (Consigliato)
• Metodo 2: Filtra post e pagine con codice personalizzato (Avanzato)
• Metodo 3: Filtra post e pagine con il plugin Search & Filter (Gratuito)
• Suggerimento bonus: aggiungi la ricerca Ajax live al tuo sito WordPress

Pronto? Iniziamo subito!

Metodo 1: Filtra post e pagine con SearchWP (Consigliato)

SearchWP è un potente plugin di ricerca per WordPress ed è la nostra raccomandazione principale per aggiungere funzionalità di filtro al tuo sito web. È molto intuitivo, il che lo rende un'ottima scelta per i principianti.

Ecco una guida passo passo su come utilizzare SearchWP per creare un modulo di ricerca personalizzato con opzioni di filtro.

Passaggio 1: Installa e configura SearchWP

Innanzitutto, dovrai installare e attivare il plugin SearchWP. Se sei nuovo a questo, abbiamo una guida utile su come installare un plugin WordPress.

Una volta attivato, puoi andare su SearchWP » Impostazioni. Quindi, nella scheda 'Generale', inserisci la tua chiave di licenza per attivarla.

Ora, andiamo su SearchWP » Algoritmo. Qui puoi modificare il motore di ricerca predefinito o crearne uno aggiuntivo.

Il motore predefinito consente agli utenti di cercare tra pagine, post, file multimediali e commenti, il che è ottimo per un tipico blog WordPress.

D'altra parte, il motore di ricerca aggiuntivo può utilizzare altre fonti come categorie, tag, tipi di post personalizzati e tassonomie personalizzate. Questo può essere utile per creare un modulo di ricerca e filtro per contenuti non di blog, come un filtro prodotti eCommerce per siti WooCommerce.

Per questo tutorial, ci atterremo al motore predefinito e ne modificheremo semplicemente le impostazioni. Per farlo, puoi fare clic su 'Fonti e impostazioni'.

Poiché stiamo creando una funzione di ricerca e filtro per filtrare post e pagine, includeremo solo pagine e post come fonti per il motore di ricerca di WordPress.

Abbiamo anche abilitato la funzione 'Radici delle parole chiave', che consente a SearchWP di mostrare risultati anche se la parola chiave non corrisponde perfettamente.

Una volta soddisfatto delle impostazioni, puoi semplicemente fare clic su 'Fatto'.

Passaggio 2: Affina il tuo motore di ricerca

Ora vedrai una sezione per tutte le fonti che hai selezionato (nel nostro caso, solo post e pagine).

Ogni fonte ha dei cursori per la 'Rilevanza degli attributi applicabili'. Questi cursori determinano quanto peso SearchWP attribuisce a ciascun attributo nel classificare i risultati della ricerca.

In termini più semplici, il contenuto che corrisponde strettamente a un attributo con peso elevato apparirà più in alto nei risultati di ricerca.

Ad esempio, se attribuisci più peso all'attributo 'Contenuto del post' rispetto all'attributo 'Titolo del post', SearchWP darà priorità ai risultati in cui il termine di ricerca appare all'interno del contenuto stesso.

Puoi regolare questi cursori in base alle tue preferenze.

Puoi anche fare clic su 'Aggiungi/Rimuovi attributi'.

Questo farà apparire un popup per includere o eliminare altri attributi.

Ad esempio, potresti includere tassonomie personalizzate o campi personalizzati per renderli ricercabili.

Un'altra potente funzionalità è la possibilità di creare regole che includono o escludono contenuti specifici dai risultati di ricerca.

Per fare ciò, fai semplicemente clic sul pulsante 'Modifica regole'.

Questa impostazione ti consente di filtrare contenuti irrilevanti o evidenziare categorie specifiche.

Nel popup successivo, puoi fare clic su 'Aggiungi regola'.

Ora, fai semplicemente clic sul menu a discesa e scegli 'Mostra solo voci se' o 'Escludi voci se'.

Quindi, puoi scegliere se escludere o includere il contenuto se fa parte di una tassonomia specifica, è stato pubblicato entro un certo intervallo di date o ha un certo ID.

Per aggiungere un'altra regola, fai semplicemente clic sul pulsante 'Aggiungi regola' e ripeti lo stesso processo descritto sopra. Quando sei soddisfatto di come sono impostate le regole, procedi e fai clic su 'Fatto'.

Puoi ripetere lo stesso processo per le altre origini delle voci di ricerca, se necessario.

Quando sei soddisfatto del motore di ricerca, puoi tornare in cima alla pagina e fare clic su 'Salva'.

SearchWP ricostruirà ora l'indice, il che potrebbe richiedere alcuni minuti.

Una volta visualizzato 'Stato indice 100%', significa che SearchWP ha indicizzato tutti i tuoi contenuti e le regole per il motore di ricerca.

Passaggio 3: Crea un modulo di ricerca personalizzato

Ora che il motore di ricerca è configurato, creiamo un modulo di ricerca intuitivo con opzioni di filtro.

Per iniziare, andiamo su SearchWP » Moduli di ricerca, e poi clicchiamo su ‘Aggiungi nuovo.’

Nella schermata successiva, la prima cosa da fare è dare un nome riconoscibile al tuo modulo.

Questo è solo per il tuo riferimento interno, quindi il nome può essere qualsiasi cosa sia facile da ricordare per te.

Quindi, sceglierai un layout.

Per questo tutorial, utilizzeremo l'opzione 'Combinato', poiché fornisce il maggior numero di menu di filtro.

Ora, puoi scorrere verso il basso fino alla sezione 'Stile personalizzato' e selezionare entrambe le opzioni 'Ricerca per categoria' e 'Ricerca avanzata'. Questo assicura che il tuo modulo includa tutte le funzionalità di filtro.

Puoi facoltativamente scegliere 'Ricerca rapida' se desideri aggiungere alcuni termini di ricerca suggeriti sotto la barra di ricerca.

Quindi, nel menu 'Motore', selezionerai il motore di ricerca che hai creato in precedenza.

Per quanto riguarda 'Risultati', puoi scegliere quale pagina dei risultati di ricerca utilizzare: i risultati predefiniti di WordPress o la versione di SearchWP.

In 'Tipo di ricerca', selezioniamo 'Post' e 'Pagine'.

Sotto, puoi aggiungere i nomi delle categorie che desideri includere nel menu di filtro.

Per 'Etichetta campo', inserisci un testo segnaposto che appare nel campo di ricerca, come 'Cosa stai cercando?'.

Se hai selezionato 'Ricerca rapida' in precedenza, puoi includere i termini che gli utenti potrebbero cercare comunemente in 'Elementi di ricerca rapida'.

In 'Filtro/i di ricerca avanzata', scegli semplicemente quali opzioni di filtro vuoi offrire agli utenti, come 'Autori', 'Tipi di post' o 'Tag'.

Infine, in 'Stile modulo' e 'Stile pulsante', personalizza l'aspetto del modulo di ricerca per adattarlo al design del tuo sito web.

Puoi cambiare i colori, i font e le forme del modulo di ricerca.

Una volta che tutto è impostato, puoi scorrere di nuovo verso l'alto.

Quindi, è ora di fare clic su 'Salva' per creare il tuo modulo di ricerca.

Passaggio 4: Incorpora il modulo di ricerca e filtro

Il plugin SearchWP ti permette di incorporare facilmente il modulo di ricerca nel front-end del tuo sito web, ad esempio nella tua homepage o nelle aree pronte per i widget. Qui, ti mostreremo come aggiungerlo a una pagina utilizzando l'editor a blocchi di WordPress e il blocco Modulo di ricerca.

Innanzitutto, puoi aprire la pagina o il post in cui desideri aggiungere il modulo. Quindi, facciamo clic sull'icona '+ Aggiungi blocco' e cerchiamo 'Modulo di ricerca'.

Nella barra laterale 'Impostazioni blocco', procedi e scegli il modulo che hai creato dal menu a discesa.

Infine, fai semplicemente clic su 'Pubblica' o 'Aggiorna' per vedere il modulo di ricerca in tempo reale.

Per ulteriori informazioni, puoi consultare queste guide passo passo:

• Come aggiungere un modulo di ricerca in un post di WordPress
• Come aggiungere una barra di ricerca al menu di WordPress

In alternativa, puoi visualizzare il modulo utilizzando uno shortcode.

Per fare ciò, dovrai trovare lo shortcode per il tuo modulo specifico andando su SearchWP » Moduli di ricerca e copiando il codice nella colonna 'Shortcode'.

Abbiamo una guida su come aggiungere shortcode in WordPress se hai bisogno di aiuto.

Con il modulo di ricerca e le opzioni di filtro in posizione, i tuoi visitatori possono ora trovare facilmente i contenuti che stanno cercando sul tuo sito web.

Questo non solo migliora l'esperienza utente, ma può anche incoraggiarli a esplorare diverse categorie e scoprire altri dei tuoi preziosi contenuti.

Metodo 2: Filtra post e pagine con codice personalizzato (Avanzato)

Il metodo successivo utilizzerà codice personalizzato. Per i principianti, questo processo potrebbe sembrare intimidatorio, ma abbiamo provato e testato il codice per assicurarci che funzioni senza problemi con il tuo sito web.

Inoltre, utilizzeremo WPCode, che è il miglior plugin per snippet di codice sul mercato. Questo plugin rende sicuro inserire codice personalizzato senza dover interagire direttamente con i file del tuo sito web, riducendo così la probabilità di danneggiare il tuo sito.

Alcuni dei nostri brand partner utilizzano WPCode per aggiungere e gestire snippet di codice personalizzati, e lo adorano. L'abbiamo anche testato e abbiamo scoperto che funziona eccezionalmente bene. Puoi saperne di più sulle nostre esperienze nella nostra recensione completa di WPCode.

Il primo passo è installare e attivare WPCode. Per maggiori informazioni, puoi consultare la nostra guida su come installare un plugin di WordPress.

Una volta fatto, puoi andare su Snippet di codice » + Aggiungi snippet nella tua area di amministrazione di WordPress.

Quindi, selezioniamo 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' e clicchiamo sul pulsante 'Usa snippet'.

Ora, ci sono 2 tipi di snippet di codice che devi aggiungere. Esaminiamoli uno per uno:

Aggiungere un codice di filtro di WordPress

Questo codice dice a WordPress di filtrare i risultati di ricerca dell'utente in base alle opzioni che ha selezionato nel modulo di ricerca. Funzionerà con un altro snippet di codice che crea il modulo di ricerca, di cui parleremo più avanti.

Innanzitutto, devi dare un nome al tuo nuovo snippet. Può essere qualcosa di semplice come 'Filtro di ricerca WordPress'.

Quindi, dovrai cambiare il 'Tipo di codice' in 'Snippet PHP'.

Successivamente, copia semplicemente il seguente codice e incollalo nella casella 'Anteprima codice':

function wpb_filter_posts($query) {
if ($query->is_main_query() && $query->is_search) {

// Category filter
if (isset($_GET['category'])) {
$category = get_category_by_slug($_GET['category']);
if ($category) {
$query->set('cat', $category->term_id);
}
}

// Published date filter based on URL structure
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$url_parts = explode('/', trim($url_path, '/'));
if (count($url_parts) >= 4 && is_numeric($url_parts[0]) && is_numeric($url_parts[1]) && is_numeric($url_parts[2])) {
$year = $url_parts[0];
$month = $url_parts[1];
$day = $url_parts[2];
$query->set('date_query', array(
array(
'year' => $year,
'month' => $month,
'day' => $day,
),
));
}

// Include posts without categories or tags
$query->set('post_status', 'publish');
$query->set('post_type', 'post');
$query->set('posts_per_page', -1);

// Include post types
if (isset($_GET['post_type']) && $_GET['post_type'] == 'page') {
$query->set('post_type', array('page'));
} else {
$query->set('post_type', array('post', 'page', 'custom_post_type'));
}
}
}

add_action('pre_get_posts', 'wpb_filter_posts');

Questo snippet di codice verifica se l'utente ha scelto dei filtri nel modulo di ricerca. Ad esempio, se viene selezionato un filtro di categoria, il codice può identificare quella categoria e mostrare solo i post ad essa appartenenti.

Può anche filtrare i risultati per data cercando l'anno, il mese e il giorno specifici scelti dall'utente.

Infine, il codice controlla e filtra i risultati in base al fatto che l'utente desideri vedere solo post, pagine o tutti i tipi di post (inclusi i tipi di post personalizzati).

Con il codice incollato, scorri verso il basso fino alla sezione 'Inserisci Posizione'. Per impostazione predefinita, il 'Metodo di Inserimento' sarà 'Inserimento Automatico' e la Posizione sarà 'Esegui Ovunque'.

Puoi lasciare queste impostazioni così come sono in modo che il codice possa essere aggiunto al file functions.php del tuo tema WordPress e funzionare correttamente.

Quindi, attiva semplicemente lo snippet di codice e fai clic su 'Salva Snippet'.

Aggiungere un Codice Modulo di Ricerca WordPress

Il codice successivo creerà un modulo di ricerca personalizzato, che potrai incorporare in seguito utilizzando uno shortcode.

Puoi aggiungere codice personalizzato utilizzando WPCode ripetendo gli stessi passaggi. Quindi, puoi nominare questo codice 'Modulo di Ricerca WordPress' e cambiare il tipo di codice in 'Snippet PHP'.

Ora, puoi incollare lo snippet di codice qui sotto nella casella 'Anteprima Codice':

function wpb_filter_posts_form() {
$categories = get_categories();
$tags = get_tags();
$post_types = get_post_types(array('public' => true));
$output = '<form action="' . home_url('/') . '" method="get">';
$output .= '<input type="search" name="s" placeholder="Search...">';

// Category dropdown
$output .= '<select name="category">';
$output .= '<option value="" selected>All Categories</option>';
foreach ($categories as $category) {
$output .= '<option value="' . $category->slug . '">' . $category->name . '</option>';
}
$output .= '</select>';

// Tag dropdown
$output .= '<select name="tag">';
$output .= '<option value="" selected>All Tags</option>';
foreach ($tags as $tag) {
$output .= '<option value="' . $tag->slug . '">' . $tag->name . '</option>';
}
$output .= '</select>';

// Post type dropdown
$output .= '<select name="post_type">';
$output .= '<option value="all" selected>All Post Types</option>';
foreach ($post_types as $post_type) {
$post_type_object = get_post_type_object($post_type);
$output .= '<option value="' . $post_type . '">' . $post_type_object->label . '</option>';
}
$output .= '</select>';

// Year dropdown
$output .= '<select name="year">';
$output .= '<option value="">Select Year</option>';
for ($year = date('Y'); $year >= 2000; $year--) {
$output .= '<option value="' . $year . '">' . $year . '</option>';
}

$output .= '</select>';
// Month dropdown
$output .= '<select name="month">';
$output .= '<option value="">Select Month</option>';
for ($month = 1; $month <= 12; $month++) {
$output .= '<option value="' . sprintf('%02d', $month) . '">' . date('F', mktime(0, 0, 0, $month, 1)) . '</option>';
}
$output .= '</select>';

// Day dropdown
$output .= '<select name="day">';
$output .= '<option value="">Select Day</option>';
for ($day = 1; $day <= 31; $day++) {
$output .= '<option value="' . sprintf('%02d', $day) . '">' . $day . '</option>';
}
$output .= '</select>';
$output .= '<input type="submit" value="Search">';
$output .= '</form>';
return $output;
}

add_shortcode('wpb_filter_posts_form', 'wpb_filter_posts_form');

Questo codice crea uno shortcode chiamato [wpb_filter_posts_form], che aggiungerà un modulo che consente agli utenti di cercare nel tuo sito. Il modulo include una barra di ricerca per parole chiave e diversi menu a discesa per il filtraggio.

Il codice recupera categorie, tag e tipi di post disponibili dal tuo sito per i menu a tendina della barra di ricerca. Gli utenti possono scegliere categorie, tag o tipi di post specifici per restringere i risultati della ricerca.

Inoltre, il codice include menu a tendina per anno, mese e giorno per un filtraggio ancora più preciso per data. Infine, aggiunge un pulsante di invio per avviare la ricerca con i filtri scelti.

Come nel codice precedente, puoi lasciare invariate le impostazioni di ‘Metodo di inserimento’. Quindi, attiva semplicemente il codice e salvalo.

Incorporare lo Shortcode del Modulo di Ricerca

A questo punto, puoi aggiungere lo shortcode [wpb_filter_posts_form] a un post, una pagina, un template del tema o un'area pronta per i widget. Per maggiori informazioni, puoi consultare la nostra guida su come aggiungere shortcode in WordPress.

In questo caso, aggiungeremo lo shortcode a una pagina di ricerca personalizzata. Se vuoi fare lo stesso, procedi e crea una nuova pagina in WordPress.

Quindi, personalizza la pagina di ricerca utilizzando qualsiasi tipo di blocco di cui hai bisogno. Ad esempio, puoi aggiungere immagini o testo per istruire i lettori su come utilizzare la barra di ricerca.

Dopodiché, puoi semplicemente fare clic sul pulsante ‘+ Aggiungi Blocco’ e selezionare il blocco ‘Shortcode’.

Una volta fatto, inserisci semplicemente lo shortcode [wpb_filter_posts_form] nel campo appropriato.

Il passo successivo è premere il pulsante ‘Pubblica’, ‘Aggiorna’ o ‘Salva’ per rendere effettive le tue modifiche.

Ora dovresti vedere il tuo nuovo modulo di ricerca personalizzato.

Ecco come appare sul nostro sito demo:

Metodo 3: Filtra post e pagine con il plugin Search & Filter (Gratuito)

L'ultimo metodo consiste nell'utilizzare il plugin Search & Filter, disponibile gratuitamente. È un'ottima opzione se stai cercando un modo rapido e semplice per abilitare la funzionalità di ricerca e filtro sulla tua pagina del blog di WordPress.

Quello che devi fare è installare e attivare il plugin Search & Filter. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, il plugin aggiungerà una nuova voce di menu chiamata 'Search & Filter' alla tua area di amministrazione di WordPress. Cliccandoci sopra verrai indirizzato alla pagina di utilizzo del plugin con la documentazione dettagliata su come usarlo.

Il plugin Search & Filter è dotato di uno shortcode che accetta diversi parametri per visualizzare le opzioni di filtro. Puoi utilizzare questo shortcode in un post, una pagina o all'interno di un widget di testo:

[searchandfilter fields="search,category,post_tag"]

Questo visualizzerà le opzioni di filtro con i campi di ricerca, categoria e tag:

La cosa interessante del plugin è che puoi personalizzare quali opzioni di filtro sono disponibili modificando i tag dello shortcode.

Ad esempio, se desideri includere i campi categoria, tag, tipo di post e data nella barra di ricerca, dovrai utilizzare questo shortcode:

[searchandfilter fields="search,category,post_tag,post_types,post_date"]

Ecco come appare:

Se non vuoi utilizzare menu a discesa, puoi anche utilizzare le caselle di controllo e aggiungere etichette per ogni campo.

Nello shortcode qui sotto, stiamo dicendo al plugin di visualizzare la barra di ricerca con caselle di controllo per le opzioni di categoria:

[searchandfilter headings="Seleziona categorie:" types="checkbox" fields="category"]

Si prega di consultare l'esempio qui sotto:

Inoltre, puoi dire al plugin di utilizzare le caselle di controllo per alcune opzioni di filtro e menu a discesa per altre in un unico shortcode.

Questo è lo shortcode che abbiamo utilizzato per includere tipi di post, categorie e tag nella barra di ricerca. Abbiamo chiesto al plugin di utilizzare le caselle di controllo per l'opzione tipi di post:

[searchandfilter headings="Tipo di post, Categoria, Tag" types="checkbox, select, select" fields="post_types,category,post_tag"]

Sentiti libero di fare riferimento alla documentazione del plugin per ulteriori modi di utilizzare lo shortcode.

Suggerimento bonus: aggiungi la ricerca Ajax live al tuo sito WordPress

Ora che sai come permettere agli utenti di filtrare post e pagine, puoi fare un passo avanti e migliorare l'esperienza di ricerca con la ricerca Ajax live.

La ricerca Ajax live utilizza la tecnologia in tempo reale per visualizzare i risultati della ricerca mentre gli utenti digitano le loro query. Ciò significa che non dovrai più aspettare che una pagina si aggiorni. I risultati appariranno istantaneamente, rendendo il processo di ricerca molto più veloce e conveniente per i tuoi visitatori.

Un'esperienza di ricerca più veloce significa che puoi mantenere gli utenti più a lungo sul tuo sito, aumentando le visualizzazioni di pagina e riducendo il tasso di rimbalzo.

La buona notizia è che puoi aggiungere facilmente questa funzionalità al tuo sito con un plugin gratuito chiamato SearchWP Live Ajax Search. Puoi leggere il nostro tutorial su WordPress su come aggiungere la ricerca Ajax live al tuo sito WordPress per maggiori informazioni.

Speriamo che questo articolo ti abbia aiutato a imparare come consentire agli utenti di filtrare post e pagine in WordPress. Potresti anche voler consultare la nostra guida su come creare una directory web e le nostre scelte esperte di plugin di ricerca per WordPress per migliorare la ricerca del tuo sito.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.