Blog di SearchWP

Tutorial, suggerimenti e risorse di WordPress per aiutarti a far crescere la tua attività

Come creare filtri per campi personalizzati in WordPress

I campi personalizzati sono un modo potente per visualizzare informazioni aggiuntive su un sito WordPress.

Ad esempio, puoi usarli per memorizzare dettagli come SKU del prodotto, colore, ingredienti della ricetta o prezzi immobiliari.

Tuttavia, mostrare questi dati ai visitatori in un modo con cui possano interagire è spesso una sfida.

È qui che la creazione di un filtro per i tuoi campi personalizzati aiuta gli utenti a restringere i risultati e a trovare esattamente ciò di cui hanno bisogno. Fortunatamente, esiste un modo semplice per consentire agli utenti di ordinare i contenuti in base a questi dati personalizzati.

In questo articolo, ti mostreremo come creare filtri per campi personalizzati in WordPress.

Perché i filtri per campi personalizzati sono importanti per il tuo sito?

Sappiamo per esperienza che i campi personalizzati sono ottimi per memorizzare dati aggiuntivi. Ma quei dati sono inutili se i visitatori non possono usarli per ordinare i contenuti.

Immagina di provare ad acquistare una maglietta online ma di dover fare clic su ogni singolo prodotto solo per vedere se è disponibile nella tua taglia. Questo è esattamente ciò che accade quando non hai filtri collegati ai tuoi campi personalizzati.

Prendiamo come esempio un sito web immobiliare. Potresti usare campi personalizzati per memorizzare il numero di camere da letto o la metratura totale di una casa.

Senza un filtro per quei campi, una famiglia alla ricerca di una casa con tre camere da letto deve scorrere ogni singolo annuncio di monolocale.

Lo stesso vale per un blog di cucina. Spesso vediamo campi personalizzati utilizzati per dettagli specifici come il conteggio delle calorie o il tempo di preparazione.

Se un visitatore desidera un pasto veloce da 30 minuti, non dovrebbe dover leggere lunghe ricette per cotture lente per trovarne una.

I visitatori vogliono trovare le cose velocemente. Se non possono filtrare per prezzo, posizione o ingredienti specifici, probabilmente abbandoneranno il tuo sito.

L'aggiunta di questi filtri specifici colma il divario tra i dati aggiuntivi e l'esperienza utente. Trasforma un elenco disordinato in un catalogo organizzato.

Ora, vediamo come puoi impostare facilmente un filtro per campi personalizzati in WordPress.

Crea filtri per campi personalizzati in WordPress

Il metodo più semplice per aggiungere filtri per campi personalizzati è utilizzare un plugin come WPFilters.

WPFilters - Il Miglior Plugin di Filtraggio per WordPress

WPFilters è il plugin di filtraggio più capace, facile da usare per i principianti, che ti consente di aggiungere filtri in stile Amazon al tuo sito WordPress.

Ti consente di creare set di filtri personalizzati basati su categorie, tag o dati personalizzati e posizionarli ovunque sul tuo sito.

Ciò consente ai tuoi visitatori di approfondire i tuoi contenuti per trovare esattamente ciò di cui hanno bisogno in pochi secondi.

WPFilters è realizzato dallo stesso team dietro SearchWP. Questo ci dà la certezza che funzionerà perfettamente con i nostri risultati di ricerca.

Con WPFilters, puoi trasformare un semplice campo di testo in checkbox, menu a discesa, slider di intervallo, pulsanti radio e altri filtri. Questo mette il potere dei tuoi dati personalizzati direttamente nelle mani dei tuoi visitatori.

Ora, vediamo come puoi usarlo per creare filtri per campi personalizzati sul tuo sito.

Passaggio 1: Installa e Attiva WPFilters

Innanzitutto, dovrai visitare il sito web di SearchWP per ottenere la tua copia di WPFilters.

Una volta registrato, accedi alla tua area account e fai clic sulla scheda Download.

Scarica i file zip del plugin WPFilters

Qui, fai clic sul pulsante Download WPFilters per salvare il file sul tuo computer. Ti consigliamo inoltre di copiare subito la chiave di licenza in modo da averla pronta per dopo.

Successivamente, devi caricare e installare il plugin sul tuo sito. Se sei nuovo a questo, consulta questa guida su come installare un plugin di WordPress.

Dopo l'attivazione, apparirà la procedura guidata di configurazione. Fai clic sul pulsante ‘Inizia’ per completare la configurazione iniziale.

Procedura guidata di configurazione di WPFilters

Passaggio 2: Crea un Nuovo Elemento Filtro

Per iniziare, naviga semplicemente su WPFilters » Elements dal tuo pannello di controllo di WordPress.

Quindi, fai clic sul pulsante Aggiungi nuovo per iniziare a creare il tuo filtro.

Aggiungi un nuovo elemento in WPFilters

Da qui, dovresti dare un nome chiaro al tuo filtro in alto. Questo ti aiuta a tenere traccia delle cose se prevedi di creare più filtri in seguito.

Successivamente, guarda la sezione Tipo di campo. Puoi scegliere come vuoi che appaia il filtro, ad esempio caselle di controllo, un menu a discesa, uno slider o pulsanti di opzione.

Crea il tipo di filtro che desideri

Ad esempio, uno slider funzionerà meglio se vuoi che i visitatori filtrino per prezzo, una casella di controllo è ottima per ordinare gli articoli utilizzando più opzioni, o un menu a discesa per selezionare un marchio.

Puoi anche consentire agli utenti di filtrare per parole chiave specifiche utilizzando il campo di filtro di ricerca.

Passaggio 3: Collega il filtro a un campo personalizzato

Ora, devi dire al filtro da dove prendere le sue informazioni. Per farlo, scorri semplicemente verso il basso fino alla sezione Origine dati.

Quindi, fai clic sul menu a discesa e scorri fino alla sezione Campo personalizzato. Da qui, puoi scegliere quale campo personalizzato desideri utilizzare per creare un filtro.

Scegli i campi personalizzati da filtrare

Ad esempio, puoi scegliere prezzo, colore, marchi, peso, lunghezza e altri attributi del prodotto.

WPFilters funziona anche perfettamente con plugin per campi personalizzati come Advanced Custom Fields (ACF). Puoi facilmente creare un filtro per qualsiasi campo ACF sul tuo sito.

Passaggio 4: Personalizza le Impostazioni del Filtro

Dopo aver collegato l'origine dati, devi rendere il filtro gradevole per i visitatori personalizzandolo.

Puoi iniziare scorrendo verso il basso fino alla sezione Contenitore per modificare il comportamento della casella del filtro.

Ad esempio, abilitare l'opzione ‘Mostra titolo’ consente agli utenti di sapere cosa stanno filtrando, come “Intervallo di prezzo” o “Ingredienti”.

Oppure puoi attivare l'opzione ‘Espandibile’ per consentire agli utenti di nascondere il filtro per risparmiare spazio. Ci piace anche usare l'opzione ‘Orizzontale’ per posizionare le scelte una accanto all'altra invece che in un lungo elenco verticale.

Modifica le impostazioni del contenitore per i filtri

Successivamente, guarda la sezione Elementi sottostante per controllare le scelte specifiche nell'elenco.

Qui, puoi abilitare ‘Conteggio elementi’ per mostrare esattamente quanti risultati esistono per ogni opzione, il che aiuta a impostare le aspettative degli utenti. Di solito suggeriamo di mantenere Disattivato Mostra vuoto in modo che i tuoi visitatori non perdano tempo a fare clic su opzioni che portano a zero risultati.

Modifica le impostazioni degli elementi per i filtri

Una volta che sei soddisfatto di come appare tutto, scorri semplicemente verso l'alto e fai clic sul pulsante Salva in alto a destra.

Vedrai anche un'anteprima del filtro dei campi personalizzati nel pannello a sinistra.

Salva il tuo filtro per campi personalizzati

Passaggio 5: Visualizza il filtro campi personalizzati sul tuo sito

La cosa migliore di WPFilters è che puoi inserire il tuo nuovo filtro ovunque sul tuo sito web.

Vediamo come puoi aggiungere il filtro a una pagina e alla barra laterale del tuo sito.

1. Aggiunta del filtro campi personalizzati a una pagina

Il plugin offre un'opzione di incorporamento integrata durante la creazione del filtro. Fai semplicemente clic sul pulsante 'Incorpora' nell'angolo in alto a destra.

Incorpora filtro per campi personalizzati

Successivamente, si aprirà una finestra popup in cui potrai scegliere tra diverse opzioni di incorporamento.

Puoi scegliere tra il blocco Gutenberg, uno shortcode o codice PHP se sei uno sviluppatore.

Incorpora filtri di ricerca

C'è anche un'opzione per aggiungere il filtro a una pagina esistente o crearne una nuova.

Ad esempio, supponiamo che tu voglia utilizzare il 'Blocco Gutenberg' e aggiungerlo a una nuova pagina.

Inserisci il nome per la nuova pagina dei filtri

Successivamente, dovrai inserire il nome della nuova pagina e quindi fare clic sul pulsante 'Iniziamo'.

Il tuo filtro campi personalizzati verrà quindi precaricato sulla nuova pagina e potrai visualizzarlo nell'editor di contenuti di WordPress.

Anteprima del filtro per campi personalizzati nell'editor

Successivamente, puoi fare clic sul pulsante 'Pubblica' nell'angolo in alto a destra.

D'altra parte, puoi anche posizionare manualmente il blocco WPFilters su qualsiasi pagina o articolo.

Per iniziare, apri semplicemente la pagina o l'articolo in cui desideri che appaia il filtro, fai clic sul pulsante più (+) per aggiungere un nuovo blocco e cerca l'elemento WPFilters Element.

Aggiungi blocco WPFilters

Successivamente, dovrai selezionare il filtro che hai appena creato dal pannello delle impostazioni.

Fai semplicemente clic sul menu a discesa sotto l'opzione 'Seleziona elemento' e scegli il tuo filtro.

Seleziona filtro elemento

Al termine, fai clic sul pulsante 'Salva'.

2. Aggiunta del filtro campi personalizzati alla barra laterale

Puoi anche aggiungere il filtro alla barra laterale del tuo sito web. Questo è un ottimo modo per mantenere i filtri visibili agli utenti in modo che possano ordinare e trovare rapidamente il prodotto o il contenuto giusto.

Per iniziare, puoi andare su Aspetto » Widget dalla tua bacheca di WordPress. Tieni presente che questo passaggio potrebbe differire a seconda del tema di WordPress che stai utilizzando.

Successivamente, scorri verso il basso fino alla sezione della barra laterale e fai clic sul segno ‘+’ per aggiungere il blocco widget Elemento WPFilters.

Aggiungi il blocco widget dell'elemento WPFilters alla barra laterale di WooCommerce

Da qui, puoi selezionare il filtro campi personalizzati che hai creato dal pannello delle impostazioni sulla destra.

Fai semplicemente clic sul menu a discesa ‘Seleziona Elemento’ e scegli il tuo filtro.

Seleziona filtro intervallo

Al termine, vai avanti e fai clic sul pulsante Aggiorna.

Ora, visita la pagina per vedere il filtro campi personalizzati in azione.

Ad esempio, ecco come appaiono diversi filtri per campi personalizzati nel nostro negozio online demo.

Visualizza filtro campi personalizzati in WooCommerce

FAQ sui filtri per campi personalizzati

1. Posso usare i filtri per i dati di Advanced Custom Fields (ACF)?

Sì, assolutamente. Usiamo ACF su molti dei nostri siti e WPFilters funziona perfettamente con esso.

2. Posso aggiungere più di un filtro per campi personalizzati a una pagina?

Assolutamente. Puoi creare elementi filtro separati per campi diversi, come uno per "Colore" e un altro per "Taglia". Per renderli più visibili, puoi impilarli nella tua barra laterale in modo che gli utenti possano restringere i risultati passo dopo passo.

3. Ho bisogno di conoscere il codice per configurare questo?

Per niente. Il vantaggio principale dell'utilizzo di WPFilters è che gestisce il lavoro tecnico per te. Ti aiuta a impostare filtri avanzati semplicemente navigando nei menu, senza toccare un singolo file PHP.

I filtri dei campi personalizzati cambiano il modo in cui i visitatori interagiscono con i tuoi dati.

Speriamo che questo tutorial ti abbia aiutato a imparare come crearli in WordPress senza alcuna codifica. Potresti anche voler consultare le nostre guide su come aggiungere la ricerca live al tuo sito e come cercare per categoria in WooCommerce.

Pronto a offrire ai tuoi visitatori un modo migliore per ordinare i contenuti? Puoi iniziare con WPFilters qui.

avatar autore
Aazim Akhtar

Crea Oggi Stesso una Migliore Esperienza di Ricerca WordPress

Non perdere mai più visitatori a causa di risultati di ricerca inutili. SearchWP rende la creazione della tua ricerca intelligente WordPress veloce e facile.

Get SearchWP Now
Icona di motori di ricerca multipli