Come utilizzare i modelli di directory dei membri per creare una directory utente

Pubblicato: 2023-01-25

I modelli di directory dei membri ti consentono di visualizzare facilmente un'enorme quantità di informazioni sul tuo sito WordPress in un modo bello e ben ordinato.

La funzione di una directory di elenchi di utenti è quella di gestire il tuo database online (ad es. personale, aziende nella tua rete, specialisti di argomenti o qualsiasi altra via di mezzo). Le directory dei membri (elenchi degli utenti) forniscono ai tuoi visitatori funzioni di ricerca e filtro facili da navigare. Le directory creano opportunità di networking e commerciali e consentono alle persone di connettersi e partecipare alla tua comunità. Inoltre, ci sono anche molti vantaggi SEO e di marketing!

In questo tutorial, utilizzeremo uno dei 5 modelli di directory dei membri di Profile Builder pre-creati per creare una directory dei membri sofisticata, bella e, soprattutto, utile. Con i nostri modelli intuitivi, non hai bisogno di alcuna conoscenza di programmazione. Forniremo istruzioni dettagliate per la creazione di una directory utente, personale o aziendale impeccabile.

Perché ho bisogno di un plug-in di directory per l'elenco degli utenti con modelli di directory dei membri?

È possibile creare un elenco di informazioni manuali o tabelle di informazioni per il tuo sito, ma è difficile presentare elenchi in modo utile. Se i tuoi elenchi sono lunghi e complessi, devi aggiungere una funzione di ordinamento o filtro, altrimenti i tuoi utenti non saranno in grado di ottenere ciò di cui hanno bisogno. Ed è un incubo tenere aggiornati gli elenchi manuali!

Un plug-in per l'elenco degli utenti correttamente integrato fornisce directory dei membri che sono molto più facili da mantenere rispetto a tabelle ed elenchi, ma possono anche servirti in altri modi. Puoi creare diverse directory di membri, in diverse parti del tuo sito web, con pochi clic. Ancora più importante, il plug-in Profile Builder è in realtà una combinazione di 4 importanti funzioni di WordPress:

  • La capacità di ottenere le informazioni di cui hai bisogno dai tuoi utenti tramite moduli utente,
  • e utilizzare le informazioni per gestire gli utenti e i loro ruoli e capacità,
  • tutto fatto senza compromettere la sicurezza del tuo sito,
  • pur essendo in grado di visualizzare magnificamente informazioni utili attraverso le directory dei membri.

Istruzioni su come creare una directory dei membri utilizzando i modelli di directory dei membri

In questa sezione, faremo un esempio passo dopo passo dell'utilizzo di uno dei modelli di directory dei membri di Profile Builder per creare un elenco di utenti.

Passaggio 1: installa, configura e registra Profile Builder Pro

Avrai bisogno di un'installazione aggiornata di WordPress e di un tema adatto. Per questo tutorial, useremo il tema Hello Elementor. Chiederemo ai venditori di piante di fornire il loro campo di specializzazione, quindi utilizzeremo tali informazioni per visualizzare un elenco filtrato di venditori di piante specializzati.

Avrai anche bisogno del plug-in Profile Builder PRO. Inizia scegliendo il piano Profile Builder più adatto alle tue esigenze. Dopo la registrazione e il pagamento, riceverai un'e-mail di conferma dell'acquisto.

Accedi al tuo account Cozmoslabs. Vai alla scheda Download . Scarica i file compressi Profile Builder Main e Pro sul tuo computer. Successivamente, vai alla pagina Plugin sulla dashboard di WordPress. Carica entrambi gli archivi sul tuo sito web uno alla volta. Fai clic su Installa e attiva ogni volta.

Una volta impostato sul tuo pannello WordPress, dovrai registrare la versione PRO per avere accesso a tutte le funzionalità. Vai su Profile Builder → Registra versione per creare una connessione tra il tuo sito web e Profile Builder PRO registrando il tuo sito. Usa la chiave o SR (numero di serie) che appare nella scheda Licenze nella pagina del tuo account Cozmoslabs. Se hai bisogno di aiuto con la registrazione, dai un'occhiata a questa documentazione dettagliata.

L'immagine 1 mostra la pagina dell'account Cozmoslabs con una chiave SR per creare una connessione tra il tuo sito Web e i modelli di directory dei membri di Profile Builder PRO
Immagine 1: accedi al tuo account Cozmoslabs. Usa la chiave SR per creare una connessione tra il tuo sito web e Profile Builder Pro

Passo 2: Personalizza la tua pagina di registrazione

Come altri plugin avanzati (ad esempio WooCommerce), il plugin Profile Builder può creare automaticamente nuove pagine. Fare clic sul pulsante Crea pagine modulo . Creerà le tue pagine Modifica profilo, Accedi e Registrati e ti porterà alla scheda Pagine sulla dashboard di WordPress. Le tue nuove pagine Modifica profilo, Accesso e Registrazione saranno perfettamente integrate con l'aspetto grafico del tuo sito web. Per verificare, fai clic sul pulsante Visualizza che appare al passaggio del mouse.

In alternativa, il modo più rapido per identificare le pagine di Profile Builder è accedere alla pagina principale di Profile Builder e fare clic sul grande pulsante blu "Visualizza pagine modulo" . Puoi anche navigare su Pagine → Tutte le pagine .

L'immagine 2 mostra dove fare clic sul pulsante "Visualizza pagine del modulo" per vedere le pagine di Profile Builder pre-create che devono essere utilizzate dai modelli di directory dei membri
Immagine 2: fai clic sul pulsante "Visualizza pagine modulo" per visualizzare le pagine di Profile Builder pre-create utilizzate da tutti i modelli di directory dei membri

Se non riesci a trovare la pagina di registrazione predefinita o desideri aggiungere una nuova pagina di registrazione, puoi crearne una nuova. Basta copiare lo shortcode della pagina di registrazione dalla pagina Campi modulo e incollarlo su una pagina vuota.

Un'altra scorciatoia è selezionare il blocco Registro di Profile Builder (o qualsiasi altro modulo utente) dal menu dei blocchi Gutenberg.

L'immagine 3 mostra dove selezionare il modulo di registrazione di Profile Builder dal menu dei blocchi di Gutenberg
Immagine 3: selezionare il modulo di registrazione di Profile Builder dal menu dei blocchi di Gutenberg

Nota: Ricorda che puoi personalizzare sia la pagina di registrazione che il modulo di registrazione stesso. La tua pagina di registrazione dovrebbe contenere tutte le informazioni pertinenti per assicurarti che gli utenti capiscano per cosa si stanno registrando. Il modulo di registrazione nella pagina di registrazione dovrebbe contenere i campi utili per il tuo modello di business e la tua scheda utente.

Nel passaggio successivo, personalizzerai il modulo di registrazione pre-creato aggiungendo i campi desiderati in modo specifico, rimuovendo i campi ridondanti e aggiungendo campi e regole con valori speciali per impedire azioni non autorizzate.

Personalizza i moduli

Passare alla scheda del dashboard Profile Builder → Form Fields . Viene visualizzata una richiesta di attivazione dei componenti aggiuntivi dell'elenco utenti. Se perdi la richiesta, puoi accedere alla pagina Componenti aggiuntivi per attivare i componenti aggiuntivi. Ti consigliamo di attivare i componenti aggiuntivi Elenco utenti, Moduli registrazione multipla e Moduli modifica profilo multiplo prima di iniziare a personalizzare il tuo primo modulo.

Cominciamo a personalizzare il modulo predefinito e pre-creato!

I nuovi moduli, per impostazione predefinita, includeranno tutti i campi che personalizzi durante questo passaggio. Puoi creare moduli nuovi o diversi accedendo alla pagina Moduli di registrazione di Profile Builder e facendo clic su Aggiungi nuovo .

Nota: il modulo predefinito non viene visualizzato in questa pagina. Per modificare questo modulo predefinito originale, vai alla pagina dei campi del modulo Profile Builder.

Il tuo modulo di registrazione deve contenere i campi di cui hai bisogno come manager aziendale. In questo esempio, vogliamo modificare il modulo per chiedere ai dichiaranti di fornire il loro campo di specializzazione nel commercio di piante, l'ubicazione e le informazioni di contatto per creare una directory aziendale per i membri.

Profile Builder include alcuni campi predefiniti di base per ogni modulo di registrazione. Li vedrai se scorri verso il basso la pagina. Fare clic sul pulsante Elimina accanto ai campi che si desidera rimuovere. Per iniziare ad aggiungere nuovi campi, fai clic sulla freccia nel campo del menu Seleziona un'opzione e scorri il menu a comparsa per l'elenco dei campi da cui puoi scegliere.

L'immagine 4 mostra dove fare clic su "Seleziona un'opzione". I campi di base predefiniti vengono visualizzati nella colonna di sinistra del menu a discesa del selettore di campi del modulo utilizzato da tutti i modelli di directory dei membri
Immagine 4: fare clic su "Seleziona un'opzione". I campi di base predefiniti vengono visualizzati nella colonna di sinistra del menu a discesa del selettore di campi modulo

Scegli i campi desiderati e personalizzali come desideri prima di fare clic sul pulsante Aggiungi campo . In questo esempio, abbiamo aggiunto il titolo del campo 'Campo specializzato' , scelto il tipo di campo a selezione multipla e aggiunto alcune opzioni (cactus, arbusti, alberi, ecc.).

L'immagine 5 mostra il titolo del campo appena aggiunto "Campo specialista", scegliendo il tipo di campo Seleziona e aggiungendo alcune opzioni.
Immagine 5: Aggiunto il titolo del campo "Campo specialistico", scelto il tipo di campo Seleziona e aggiunte alcune opzioni

Nella fase successiva, imparerai come visualizzare le informazioni da tutti questi campi in una directory di membri o in un elenco di utenti per rendere le informazioni utili ai visitatori del tuo sito web.

Passaggio 3. Crea un elenco di utenti WordPress

Come accennato nel passaggio 2, dovrai abilitare il componente aggiuntivo Elenco utenti prima di andare oltre. Ti consigliamo di attivare i componenti aggiuntivi Elenco utenti, Moduli registrazione multipla e Moduli modifica profilo multiplo .

L'immagine 6 mostra dove attivare i componenti aggiuntivi per utilizzare i modelli di directory dei membri
Immagine 6: Per utilizzare i modelli di directory dei membri, devi prima abilitare il componente aggiuntivo "Elenco utenti".

Nella dashboard di WordPress, cerca Elenco utenti nella scheda Generatore di profili. Cliccaci sopra. Nella pagina dell'elenco degli utenti, vedrai un elenco di utenti predefinito master già pronto, pubblicato, chiamato Userlisting con lo shortcode [wppb-list-users name="userlisting"]

Se non conosci gli elenchi utente, ti consigliamo di non modificare questo elenco in quanto può fungere da utile riferimento per le impostazioni predefinite mentre impari. Inoltre, sii cauto nell'usare questo elenco principale per visualizzare tutte le informazioni sul tuo sito web senza aggiungere filtri.

Fai clic sul pulsante Aggiungi nuovo in alto e dai un titolo al tuo elenco utenti (directory membri).

NOTA: se non riesci a trovare il pulsante Aggiungi nuovo , assicurati di aver attivato i componenti aggiuntivi necessari (Elenco utenti, Moduli di registrazione multipli e Moduli modifica profilo multipli)

L'immagine 7 mostra come aggiungere un nuovo elenco di utenti con il titolo Plant Specialists, Contributors selezionati e Subscribers utilizzando i campi comuni a tutti i modelli di directory dei membri
Immagine 7: aggiungere un nuovo elenco di utenti con il titolo Specialisti impianti, contributori selezionati e abbonati

Personalizza le impostazioni dell'elenco utenti

In questo esempio, abbiamo utilizzato il titolo dell'elenco usato "Specialisti di piante" e abbiamo ristretto i ruoli da visualizzare a "Contributori" e "Iscritti". Dopo aver assegnato un titolo alla tua scheda utente, scorri un po' verso il basso fino alle altre impostazioni di base . Puoi scegliere quali ruoli utente includere e come verranno visualizzati nell'elenco degli utenti.

Ad esempio, puoi nascondere l'elenco degli utenti agli utenti che non hanno effettuato l'accesso in modo che solo le persone che hanno effettuato l'accesso possano vedere la directory. Se si seleziona Visibile solo agli utenti che hanno effettuato l'accesso , viene visualizzata un'ulteriore opzione di menu in cui è possibile selezionare ulteriormente se deve essere visibile a tutti gli utenti che hanno effettuato l'accesso o a clienti, abbonati, ecc. Spuntare la casella "*" per rendere è visibile a tutti gli utenti che hanno effettuato l'accesso, ma sii cauto nell'esporre informazioni sensibili a tutti gli utenti.

L'immagine 8 mostra dove selezionare le opzioni per rendere visibile l'elenco degli utenti a tutti o solo agli utenti selezionati
Immagine 8: selezionare le opzioni per rendere visibile l'elenco degli utenti a tutti o solo agli utenti selezionati

Personalizza i menu sfaccettati

La sezione successiva della pagina è Menu sfaccettati. Aggiungere facet significa scegliere quali filtri saranno disponibili nella tua pagina di elenco utenti. La maggior parte degli utenti ha abbastanza familiarità con l'utilizzo dei filtri sui siti di shopping. Quindi, puoi aggiungere lo stesso tipo di filtri a cui sono abituati, per aiutarli a ottenere le informazioni di cui hanno bisogno dal tuo sito. Ad esempio, puoi consentire loro di filtrare i risultati di ricerca per località, campo di specializzazione, età, ecc.

Aggiungeremo un filtro per ordinare i membri in base alla loro specialità vegetale, quindi abbiamo digitato "Specialità" come etichetta che vogliamo visualizzare sulla pagina. Per questo esempio di menu sfaccettato, abbiamo scelto Seleziona multiplo come tipo di facet, poiché desideri che le persone siano in grado di selezionare più opzioni contemporaneamente. Nel campo Facet Meta , abbiamo utilizzato il menu a discesa per selezionare il campo "Specialist In" come fonte per il filtro (Facet Meta).

Fare clic su Aggiungi voce . Ripeti gli stessi passaggi per aggiungere tutti i filtri di cui hai bisogno. Non appena si fa clic su Aggiungi voce , il nuovo filtro verrà visualizzato nel riepilogo del filtro (facet) appena sotto il pulsante Aggiungi voce.

L'immagine 9 mostra come aggiungere la sfaccettatura "Specialità vegetale" come etichetta utilizzando "seleziona più" tra le opzioni utilizzate da tutti i modelli di directory dei membri
Immagine 9: aggiungi la sfaccettatura "Specialità vegetale" come etichetta utilizzando "seleziona più"

Ecco come appariranno i filtri sul front-end:

Menu sfaccettati sul front-end

Personalizza le impostazioni di ricerca

Successivamente, scegli come Profile Builder dovrebbe individuare le informazioni per far funzionare la barra di ricerca. Questa sezione si trova appena sotto la sezione Menu sfaccettati in questa stessa pagina. Scegli le funzioni di ricerca spuntando o deselezionando le informazioni che desideri scansionare quando un visitatore cerca una parola chiave nella barra di ricerca.

L'immagine 10 mostra dove selezionare le impostazioni di "ricerca" utilizzate da tutti i modelli di directory dei membri per il nuovo elenco di utenti
Immagine 10: selezionare le impostazioni di "ricerca" per il nuovo elenco utenti

Crea la tua directory utilizzando i modelli di directory dei membri

La sezione finale è dove scegli un modello di directory dei membri e personalizzi il formato e il modo in cui desideri che l'elenco appaia sul front-end del tuo sito web. Come saprai, la standardizzazione del design e della formattazione di diversi elementi nel tuo sito Web può richiedere ore. Ecco perché Profile Builder ti offre 5 temi predefiniti per la tua pagina di elenco utenti.

C'è un tema predefinito, più altri 4 temi personalizzati. Ognuno rappresenta il modo migliore per visualizzare rispettivamente tabelle, griglie, caselle o elenchi. Quando passi il mouse su ciascuno di essi, vedrai un pulsante per visualizzare in anteprima il tema e uno per attivarlo .

Ogni modello include una visualizzazione della directory dei membri (Elenco utenti) che appare come un elenco ordinato sul tuo sito Web, oltre a una singola pagina per ogni voce nell'elenco dei membri. È qui che visualizzerai le informazioni approfondite per ciascun membro.

L'immagine 11 mostra come visualizzare in anteprima, quindi attivare i temi dei modelli di directory dei membri
Immagine 11: anteprima, quindi attivazione di un tema dei modelli di directory dei membri

I modelli di directory di appartenenza sono un ottimo punto di partenza, ma puoi personalizzare ulteriormente ogni tema. Per ora, scegli semplicemente quello che ritieni abbia un aspetto migliore e si adatti meglio al tipo di informazioni che stai cercando di visualizzare. Puoi passare facilmente a un tema diverso e l'HTML e il CSS si aggiorneranno automaticamente al nuovo stile.

Il modello predefinito mostra solo una funzione di ordinamento minimalista, quindi, per questo esempio, abbiamo utilizzato il modello Tablesi per illustrare i suoi pulsanti di filtro prominenti e il campo di ricerca della directory.

Personalizza le informazioni utente da visualizzare utilizzando i tag

Per personalizzare le informazioni che desideri vengano visualizzate nella tua directory dei membri, scorri verso il basso per vedere la sottointestazione "Modello di elenco di tutti gli utenti" . Sembra così:

L'immagine 12 mostra un riepilogo delle informazioni sull'elenco degli utenti HTML da visualizzare
Immagine 12: Riepilogo delle informazioni sull'elenco degli utenti HTML da visualizzare

NOTA: il modello di elenco per tutti gli utenti serve per personalizzare la directory dei membri (elenco degli utenti) come visualizzato sul tuo sito web. Il modello di elenco per utente singolo serve per personalizzare i dettagli del singolo membro quando le persone fanno clic sul pulsante "Altro" nella directory dei membri. Ci arriveremo presto!).

Se sei d'accordo con i campi di visualizzazione predefiniti, puoi semplicemente lasciare tutto così com'è. Se desideri aggiungere o rimuovere informazioni dalla directory utenti, troverai tutti i tag Profile Builder disponibili per ogni tipo di elenco sul lato destro della colonna di visualizzazione a destra. In questo esempio, abbiamo rimosso il "numero di post" dal modello di directory dei membri eliminando le righe appropriate come si può vedere in questa immagine:

L'immagine 13 mostra come una colonna di intestazione "numero di post" è stata rimossa dalle colonne predefinite dei modelli di directory dei membri
Immagine 13: rimozione della colonna di intestazione dei modelli di directory di appartenenza predefinita "numero di post" dalla directory dei membri

Infine, personalizziamo come vogliamo che appaiano le singole voci quando i visitatori fanno clic sul pulsante "Altro" o "Visualizza" nella directory dei membri. Scorri verso il basso fino al modello di elenco per utente singolo .

In questo esempio, aggiungeremo un'altra etichetta nelmodello per utente singolo (l'elenco del profilo della persona), l'etichetta "Specialista in".Basta evidenziare e copiare il tag "Specialista" e il tag da destra e incollarlo a sinistra.

L'immagine 14 mostra che il campo "specialista" creato su misura ha sostituito il campo "soprannome" predefinito dei modelli di directory dei membri
Immagine 14: Aggiunta sezione 'Specialista in' con campo 'specialista' personalizzato

Correggi gli errori con la funzione di ripristino

Possono verificarsi errori, soprattutto quando si effettuano molte personalizzazioni. Fortunatamente, puoi ripristinare le impostazioni predefinite per un nuovo inizio. Puoi reimpostare le impostazioni generali di elenco utenti, il modello di elenco per tutti gli utenti o il modello di elenco per utente singolo oppure puoi iniziare da zero reimpostando tutto. Basta scorrere indietro fino alla sezione dei modelli di directory dei membri. Passa il mouse sopra il tema attivo. Fare clic sul pulsante Reimposta dati e selezionare l'impostazione o le impostazioni che si desidera reimpostare.

L'immagine 15 mostra dove selezionare il tipo di dati che si desidera reimpostare nei modelli di directory dei membri
Immagine 15: seleziona il tipo di dati che desideri reimpostare nei modelli di directory dei membri che hai utilizzato.

Passaggio 4: pubblicazione dei modelli di directory dei membri

Quando sei soddisfatto delle tue personalizzazioni, premi il pulsante Pubblica in alto. Questo genererà uno shortcode per la tua scheda utente, che puoi incollare o inserire tramite i blocchi Gutenberg su qualsiasi pagina del tuo sito.

E: Ta-Daa! Ecco come appare la tua nuova directory di appartenenza sul front-end del sito web. Nota i pulsanti di filtro prominenti dei modelli di directory dei membri di Tablesi. Se non ti piace l'aspetto, scegli semplicemente un modello diverso.

L'immagine 16 della schermata mostra l'aspetto dell'elenco della directory degli utenti sul tuo sito Web quando si utilizzano i modelli di directory dei membri
Immagine 16: Ecco come appare la directory sul tuo sito web utilizzando i modelli di directory dei membri

L'immagine successiva mostra l'aspetto di una pagina di informazioni su un singolo utente quando si utilizza uno dei modelli di directory di appartenenza. I visitatori del tuo sito possono accedere a questa pagina facendo clic sul pulsante "Visualizza" o "Altro" nell'elenco delle directory.

L'immagine 17 mostra l'aspetto di una singola pagina di informazioni utente quando si utilizzano i modelli di directory dei membri
Immagine 17: Ecco come appare una pagina di informazioni utente individuale.

Conclusione

Il plug-in Profile Builder Pro rende molto semplice elencare i tuoi utenti in un modo che aggiunge valore reale al tuo sito. I modelli predefiniti sia per i moduli di registrazione degli utenti che per la visualizzazione degli elenchi degli utenti ti faranno risparmiare tempo (e denaro!). Profile Builder Pro ti offre 5 modelli di directory dei membri facili da usare che sono garantiti per aggiungere nuove opportunità di monetizzazione per la tua attività.

Porta il tuo sito Web a un nuovo livello con pochi clic: scarica Profile Builder Pro proprio qui!

Generatore di profili Pro

Crea bellissimi moduli di registrazione e profilo front-end con campi personalizzati. Configura le directory dei membri, i reindirizzamenti personalizzati, personalizza le e-mail degli utenti e altro ancora utilizzando il plug-in di gestione degli utenti tutto in uno.

Ottieni il plug-in

Oppure scarica la versione GRATUITA

Hai utilizzato Profile Builder per creare una o più directory di membri o directory aziendali per il tuo sito web? Aiuta gli altri a massimizzare il potenziale del loro sito web. Condividi la tua esperienza nella sezione commenti qui sotto!