Come permettere agli utenti di filtrare le pagine e i post in WordPress (3 metodi)

Volete permettere agli utenti di filtrare le pagine e i post sul vostro sito web WordPress?

Spesso gli utenti visitano il vostro sito web alla ricerca di un tipo specifico di contenuto. Forse sono interessati ai vostri ultimi tutorial o alle recensioni dei prodotti. Non sarebbe utile se potessero facilmente filtrare i vostri contenuti per trovare esattamente quello che stanno cercando?

In questo articolo vi mostreremo come permettere agli utenti di filtrare le pagine e i post di WordPress utilizzando una pratica funzione di ricerca e filtro.

Perché aggiungere una caratteristica di filtro per le pagine e i post di WordPress?

Vi è mai capitato di visitare un sito web stracolmo di contenuti, ma di non riuscire a trovare quello che vi serve? Questa può essere un’esperienza frustrante per gli utenti e indurli ad abbandonare completamente il sito.

In definitiva, questo può avere un impatto negativo sulla SEO, poiché i motori di ricerca considerano l’esperienza dell’utente un fattore di ranking. Un sito web con un’alta frequenza di rimbalzo e un basso engagement potrebbe essere considerato meno valido dai motori di ricerca.

Fortunatamente c’è una soluzione semplice: implementare una caratteristica di ricerca e filtro sul vostro sito web WordPress. Questo potente strumento consente agli utenti di restringere i contenuti in base a criteri specifici, rendendo più facile trovare ciò che stanno cercando.

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

Oppure, se avete un sito di podcast, gli ascoltatori possono cercare l’episodio che preferiscono utilizzando la caratteristica.

Tenendo conto di ciò, vediamo 3 metodi semplici per consentire agli utenti di filtrare le pagine e i post sul vostro sito WordPress. Potete usare i link rapidi qui sotto per passare al metodo che preferite:

Metodo 1: Filtrare le pagine e i post con SearchWP (consigliato)

SearchWP è un potente plugin di ricerca per WordPress ed è il nostro consiglio in alto per aggiungere funzionalità di filtro al vostro sito web. È molto facile da usare, 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.

Passo 1: Installare e impostare SearchWP

Per prima cosa, è necessario installare e attivare il plugin SearchWP. Se siete alle prime armi, abbiamo una guida utile su come installare un plugin di WordPress.

Una volta attivato, andare su SearchWP ” Impostazioni. Nella scheda “Generale” inserire la chiave di licenza per attivarla.

A questo punto, si può andare su SearchWP ” Algoritmo. Qui è possibile modificare il motore di ricerca predefinito o crearne uno aggiuntivo.

Il motore predefinito consente agli utenti di effettuare ricerche tra pagine, post, media e commenti, il che va bene per un tipico blog WordPress.

D’altra parte, il motore di ricerca aggiuntivo può utilizzare altre fonti come Categorie, Tag, Post Type personalizzati e tassonomie personalizzate. Questo può essere utile per creare un modulo di ricerca e filtro per contenuti diversi dal blog, come un filtro per prodotti e-commerce per siti web WooCommerce.

Per questa esercitazione, ci atterremo al motore predefinito e regoleremo semplicemente le sue impostazioni. Per farlo, fare clic su “Sorgenti e impostazioni”.

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

Abbiamo anche abilitato la caratteristica “Keyword Stems”, che abilita SearchWP a mostrare i risultati anche se la parola chiave non ha una corrispondenza perfetta.

Una volta soddisfatti delle impostazioni, fare clic su “Fatto”.

Fase 2: messa a punto del motore di ricerca

A questo punto, verrà visualizzata una sezione per tutte le fonti selezionate (nel nostro caso, solo Pagine e Pubblicazioni).

Ogni fonte ha dei cursori per la “Rilevanza dell’attributo applicabile”. Questi cursori determinano il peso che SearchWP attribuisce a ciascun attributo nel classificare i risultati della ricerca.

In termini più semplici, i contenuti che corrispondono strettamente a un attributo ad alta ponderazione appariranno più in alto nei risultati della ricerca.

Ad esempio, se si attribuisce all’attributo “Contenuto della pubblicazione” un peso maggiore rispetto all’attributo “Titolo della pubblicazione”, SearchWP darà priorità ai risultati della ricerca che appaiono all’interno del contenuto stesso.

È possibile regolare questi cursori in base alle proprie preferenze.

È anche possibile fare clic su “Aggiungi/rimuovi attributi”.

In questo modo si aprirà una finestra a comparsa per includere o eliminare altri attributi.

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

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

Per farlo, basta fare clic sul pulsante “Modifica regole”.

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

Nel popup successivo, fare clic su “Aggiungi regola”.

A questo punto, basta un menu a discesa e scegliere “Mostra solo le voci se” o “Escludi le voci se”.

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

Per aggiungere un’altra regola, basta fare clic sul pulsante “Aggiungi regola” e ripetere la stessa procedura descritta sopra. Quando si è soddisfatti dell’impostazione delle regole, fare clic su “Fatto”.

Ora è possibile ripetere la stessa procedura per le altre fonti di ricerca.

Quando si è soddisfatti del motore di ricerca, tornare in alto nella pagina e fare clic su “Salva”.

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

Quando si vede “Stato dell’indice 100%”, significa che SearchWP ha indicizzato tutti i contenuti e le regole per il motore di ricerca.

Passo 3: Creare un modulo di ricerca personalizzato

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

Andate su SearchWP ” Moduli di ricerca e fate clic su “Aggiungi nuovo”.

Innanzitutto, date al vostro modulo un nome riconoscibile.

Questo è solo un riferimento interno, quindi il nome può essere qualsiasi cosa facile da ricordare.

Quindi, scegliere un layout.

Per questa esercitazione, utilizzeremo l’opzione “Combinato”, in quanto fornisce il maggior numero di menu di filtro.

A questo punto, scorrere giù fino alla sezione “Personalizza” e selezionare le opzioni “Ricerca per categoria” e “Ricerca avanzata”. Questo assicura che il modulo includa tutte le caratteristiche di filtro.

È possibile scegliere in opzione “Ricerca rapida” se si desidera aggiungere alcuni termini di ricerca suggeriti sotto la barra di ricerca.

Quindi, nel menu “Motore”, selezionare il motore di ricerca creato in precedenza.

Per quanto riguarda i “Risultati”, è possibile scegliere quale pagina di risultati della ricerca utilizzare: i risultati predefiniti di WordPress o la versione di SearchWP.

In “Tipo di ricerca”, selezionate Post e Pagine.

In basso, è possibile aggiungere i nomi delle categorie che si desidera includere nel menu dei filtri.

Per l’etichetta del campo, inserire un testo segnaposto che appaia nel campo di ricerca, come “Cosa stai cercando?”.

Se si è selezionato “Ricerca rapida” in precedenza, è possibile includere negli elementi di ricerca rapida i termini che gli utenti potrebbero comunemente cercare.

In “Filtro/i di ricerca avanzato/i”, è sufficiente scegliere le opzioni di filtro che si desidera offrire agli utenti, come ad esempio Autori, Tipi di contenuto o Tag.

Infine, in ‘Stile modulo’ e ‘Stile pulsante’, si può personalizzare l’aspetto del modulo di ricerca in corrispondenza del design del sito web.

È possibile modificare i colori, i font e le forme del modulo di ricerca.

Una volta impostato il tutto, scorrere verso l’alto.

Quindi, fare clic su “Salva” per creare il modulo di ricerca.

Passo 4: incorporare il modulo di ricerca e filtro

Il plugin SearchWP consente di incorporare facilmente il modulo di ricerca sul frontend del sito web, ad esempio sulla homepage o nelle aree pronte per i widget. Qui dimostreremo l’aggiunta a una pagina di ricerca utilizzando l’editor a blocchi di WordPress e il modulo di ricerca.

Per prima cosa, aprire la pagina o la pubblicazione a cui si vuole aggiungere il modulo. Quindi, fare clic sull’icona “+ Aggiungi blocco” e cercare “Modulo di ricerca”.

Nella barra laterale Impostazioni blocco, scegliere il modulo creato dal menu a discesa.

Infine, pubblicare o aggiornare la pagina per visualizzare il modulo di ricerca.

Per ulteriori informazioni, potete selezionare queste guide passo-passo:

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

In alternativa, è possibile visualizzare il modulo tramite uno shortcode.

Per farlo, trovare lo shortcode per il modulo specifico andando su SearchWP ” Search Forms e copiare il codice nella colonna ‘Shortcode’.

Abbiamo una guida su come add-on di shortcode in WordPress se avete bisogno di aiuto.

Grazie al modulo di ricerca e alle opzioni di filtro, i visitatori possono trovare facilmente i contenuti che cercano sul vostro sito web.

Questo non solo migliora l’esperienza dell’utente, ma può anche incoraggiarlo a esplorare diverse categorie e a scoprire altri contenuti di valore.

Metodo 2: Filtrare le pagine e i post con un codice personalizzato (avanzato)

Il prossimo metodo prevede l’utilizzo di un codice personalizzato. Per i principianti, questo processo può sembrare intimidatorio, ma abbiamo provato e testato il codice per assicurarci che funzioni senza problemi con il vostro sito web.

Inoltre, utilizzeremo WPCode, che è il miglior plugin per gli snippet di codice sul mercato. Questo plugin rende sicuro l’inserimento di codice personalizzato senza intervenire direttamente sui file del sito web, in modo da ridurre le probabilità di rottura del sito.

Il primo passo è installare WPCode. Per maggiori informazioni, potete selezionare la nostra guida su come installare un plugin di WordPress.

Una volta fatto ciò, andare su Code Snippets ” + Add Snippet nell’area di amministrazione di WordPress. Quindi, selezionare “Aggiungi il tuo codice personalizzato (Nuovo snippet)” e fare clic sul pulsante “Usa snippet”.

Ora, ci sono due tipi di snippet di codice da aggiungere. Esaminiamoli uno per uno:

Aggiunta di un codice per il filtro di WordPress

Questo codice indica a WordPress di filtrare i risultati della ricerca dell’utente in base alle opzioni selezionate nel modulo di ricerca. Funzionerà con un altro frammento di codice responsabile della creazione del modulo di ricerca, di cui parleremo più avanti.

Innanzitutto, è necessario dare un nome al nuovo snippet. Può essere qualcosa di semplice come “Filtro di ricerca WordPress”.

Quindi, modificare il tipo di codice in “Snippet PHP”.

Quindi, copiare il codice seguente e incollarlo 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 frammento di codice verifica se l’utente ha scelto qualche filtro nel modulo di ricerca. Ad esempio, se è stato selezionato un filtro per categoria, il codice può identificare tale categoria e mostrare solo le pubblicazioni che vi appartengono.

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

Infine, il codice seleziona e filtra i risultati in base al fatto che l’utente voglia vedere solo i post, le pagine o tutti i post type (compresi i post type personalizzati).

Una volta incollato il codice, scorrere giù fino alla sezione “Posizione di inserimento”. Come predefinito, il metodo di inserimento sarà “Inserisci automaticamente” e la posizione sarà “Esegui ovunque”.

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

Quindi, attivare lo snippet di codice e fare clic su “Salva snippet”.

Aggiunta del codice del modulo di ricerca di WordPress

Il codice successivo creerà un modulo di ricerca personalizzato, che in seguito si potrà incorpora con uno shortcode.

Tutto ciò che dovete fare è ripetere gli stessi passaggi per aggiungere codice personalizzato usando WPCode come prima. Poi, potete chiamare questo codice “Modulo di ricerca WordPress” e cambiare il tipo di codice in “Snippet PHP”.

A questo punto, incollate il frammento di codice qui sotto nel riquadro dell’anteprima del 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 aggiunge un modulo che consente agli utenti di effettuare ricerche sul sito. Il modulo include una barra di ricerca per parole chiave e diversi menu a discesa per i filtri.

Il codice recupera le categorie, i tag e i post type / tipi di contenuto disponibili sul sito per i menu a discesa della barra di ricerca. Gli utenti possono scegliere categorie, tag o tipi di contenuto specifici per restringere i risultati della ricerca.

Inoltre, il codice include menu a discesa per l’anno, il mese e il giorno per un filtro ancora più preciso in base alla data. Infine, aggiunge un pulsante di invio per avviare la ricerca con i filtri scelti.

Come nel codice precedente, è possibile lasciare invariate le impostazioni del Metodo di inserimento. Quindi, attivare il codice e salvarlo.

Incorporazione dello shortcode del modulo di ricerca

A questo punto, è possibile aggiungere lo shortcode [wpb_filter_posts_form] a una pagina, a un template del tema o a un’area per widget. Per maggiori informazioni, potete selezionare la nostra guida su come add-on gli shortcode in WordPress.

In questo caso, aggiungeremo lo shortcode a una pagina di ricerca personalizzata. Se volete fare lo stesso, create una nuova pagina in WordPress.

Quindi, personalizzate la pagina di ricerca utilizzando qualsiasi tipo di blocco necessario. Ad esempio, si possono aggiungere immagini o testo per add-on sull’uso della barra di ricerca.

Quindi, fare clic sul pulsante “+ Aggiungi blocco” e selezionare il blocco “Shortcode”.

Una volta fatto, basta inserire lo shortcode [wpb_filter_posts_form] nel campo appropriato.

Per rendere effettive le modifiche, premere il pulsante Pubblica, Aggiorna o Salva.

Ora dovrebbe apparire il nuovo modulo di ricerca personalizzato.

Ecco come appare sul nostro sito web dimostrativo:

Metodo 3: Filtrare le pagine e i post con il plugin Cerca e filtra (gratuito)

L’ultimo metodo consiste nell’utilizzare il plugin Search & Filter, disponibile gratuitamente. È un’ottima opzione se state cercando un modo semplice e veloce per abilitare la caratteristica di ricerca e filtro sulla pagina del vostro blog WordPress.

Si tratta di installare e attivare il filtro di ricerca Ricerca e filtro plugin. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, il plugin aggiunge all’area di amministrazione di WordPress una nuova voce di menu con l’etichetta “Cerca e filtra”. Facendo clic su di essa si accede alla pagina di utilizzo del plugin con una documentazione dettagliata su come utilizzarlo.

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

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

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

L’aspetto interessante del plugin è che è possibile personalizzare le opzioni di filtro disponibili modificando i tag shortcode.

Ad esempio, se si desidera includere i campi categoria, tag, post type e data nella barra di ricerca, è necessario utilizzare questo shortcode:

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

Ecco come si presenta:

Se non si vogliono usare menu a discesa, si possono usare anche checkbox e aggiungere etichette per ogni campo.

Nello shortcode qui sotto, diciamo al plugin di visualizzare la barra di ricerca con i checkbox per le opzioni di categoria:

[searchandfilter head="Seleziona categorie:" types="checkbox" fields="categoria"]

Verificate l’esempio seguente:

Inoltre, è possibile indicare al plugin di utilizzare checkbox per alcune opzioni di filtro e menu a discesa per altre in uno shortcode.

Questo è lo shortcode che abbiamo utilizzato per includere i post type, le categorie e i tag nella barra di ricerca. Abbiamo chiesto al plugin di utilizzare dei checkbox per l’opzione post type / tipo di contenuto:

[searchandfilter headings="Post type, Category, Tag" types="checkbox, select, select" fields="post_types,category,post_tag"]

Per ulteriori modi di utilizzare lo shortcode, si consiglia di fare riferimento alla documentazione del plugin.

Suggerimento bonus: Aggiungere la ricerca live AJAX al proprio sito WordPress

Ora che sapete come permettere agli utenti di filtrare le pagine e i post, potete fare un ulteriore passo avanti e migliorare l’esperienza di ricerca con la ricerca live AJAX.

La ricerca Live Ajax utilizza la tecnologia in tempo reale per visualizzare i risultati della ricerca mentre gli utenti digitano le loro query. Ciò significa che non è più necessario attendere che la pagina si aggiorni. I risultati appariranno istantaneamente, rendendo il processo di ricerca molto più veloce e comodo per i vostri visitatori.

Un’esperienza di ricerca più veloce consente di trattenere gli utenti sul sito più a lungo, aumentando le pagine viste e riducendo la frequenza di rimbalzo.

La buona notizia è che potete aggiungere facilmente questa funzionalità al vostro sito con un plugin gratuito chiamato SearchWP Live Ajax Search. Per maggiori informazioni, potete leggere il nostro tutorial su come add-onare la ricerca live Ajax al vostro sito web.

Speriamo che questo articolo vi abbia aiutato a capire come permettere agli utenti di filtrare le pagine e i post in WordPress. Potreste anche voler selezionare la nostra guida su come creare una directory web in WordPress e la nostra scelta di plugin WordPress indispensabili per far crescere il vostro sito web.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.