Creare un sito web di directory con il tema Generatepress
Ecco una guida passo dopo passo per costruire un sito directory utilizzando il tema Generatepress e il plugin Generatepress blocks:
- Installa il tema Generatepress
- Installa e configura GeoDirectory
- Installa il GenerateBlocks plugin
- Progetta il sito web Directory usando il Generatepress tema e il Gutenberg Editor
Generatepress Tema in combinazione con il Plugin GeoDirectory e un GenerateBlocks Plugin, offre una soluzione robusta e flessibile per creare una directory online dinamica.
Questo trio consente agli utenti di integrare facilmente funzionalità basate sulla posizione, personalizzare il layout e incorporare blocchi di contenuto interattivi, garantendo un'esperienza utente intuitiva e coinvolgente.
Con questo approccio integrato, sviluppatori web e designer possono realizzare con facilità un sito directory di livello professionale, su misura per mercati di nicchia specifici o per esigenze di comunità più ampie.
Vediamo nel dettaglio come farlo.
In questo tutorial vedremo come:
Installazione del tema e dei plugin.
1. Installa il tema Generatepress
Dobbiamo installare un tema e, per questo tutorial, installerai il Generatepress Tema.
Vai su Aspetto >> Temi
Seleziona Aggiungi nuovo, Installa, e Attiva il Generatepress Tema.
2. Installa GenerateBlocks plugin
Il plugin Gutenberg predefinito non è sufficiente per personalizzare un template, quindi installeremo il GenerateBlocks plugin.
Questo plugin fornisce GenerateBlocks personalizzati, migliori rispetto ai blocchi predefiniti, che ti aiuteranno a progettare i template delle pagine.
Vai su Plugin >> Aggiungi nuovo.
Cerca GenerateBlocks. Installalo e attivalo.
Puoi saltare tutti i passaggi della Procedura guidata di configurazione.
3. Installa GeoDirectory
Infine, devi installare GeoDirectory.
Vai su Plugin >> Aggiungi nuovo, cerca GeoDirectory. Installalo e attivalo, e avremo completato l'installazione dei plugin.
4. Procedura guidata di installazione di GeoDirectory
Per GeoDirectory, dovrai completare la Procedura guidata di configurazione per impostare la chiave API di Google Maps e importare alcuni annunci di esempio.
Scelta del sistema di mappe (Google Maps o OpenStreetMap)
Nel primo passaggio della procedura guidata puoi scegliere tra due sistemi di mappe: Google Maps e Open Street Maps (che non richiede una chiave API).
In questo tutorial selezioniamo OpenStreetMaps.
Nel caso in cui desideri selezionare Google Maps, segui questi passaggi aggiuntivi.
Clicca sul pulsante Genera chiave e segui i passaggi di questo guida per generare una chiave API valida.
I passaggi essenziali sono:
- Abilitare le chiavi.
- Creare o selezionare un progetto esistente.
- Ottenere la chiave.
- Attivare un account di fatturazione.
- Limitare la chiave API (in modo che possa essere utilizzata solo dall'URL del tuo sito web)
Riguardo al punto quattro: è un requisito obbligatorio. Tuttavia, ti verranno addebitati costi solo se superi la soglia, che è di $200/mese.
Questo credito gratuito è più che sufficiente per il 99% delle directory.
Impostazione della città predefinita
Successivamente, imposterai la posizione predefinita. Questa è la città per cui viene creata la directory.
Imposteremo New York come città predefinita.
Puoi usare qualsiasi posizione di cui hai bisogno.
Se hai bisogno di aggiungere annunci in più di una città, avrai bisogno del componente aggiuntivo Location Manager.
Aggiunta di funzionalità extra
In questo passaggio installeremo UsersWP, un plugin di accesso utenti che consente agli utenti di registrarsi e accedere al tuo sito web.
È necessario per consentire agli utenti di aggiungere e modificare le proprie inserzioni. Creerà inoltre profili utente dove potranno trovare le proprie inserzioni, recensioni e molto altro.
Installeremo anche Ninja Forms in modo che tutte le inserzioni abbiano un modulo di contatto che invia email direttamente ai proprietari delle inserzioni.
AyeCode Connect non è obbligatorio per questo tutorial. È principalmente necessario se desideri aggiungere componenti aggiuntivi premium di GeoDirectory e installarli direttamente dalla dashboard di WordPress.
Aggiunta di dati di esempio
L'ultimo passaggio per completare la procedura guidata di installazione è l'aggiunta di alcune inserzioni di esempio. Verranno aggiunte anche categorie di inserzioni che potrai modificare in seguito in base alle tue esigenze.
Non aggiungerai i widget della barra laterale e le voci di menu adesso, poiché lo faremo più avanti.
Progetta il Generatepress Sito web Directory
Ora che abbiamo installato il tema e i plugin e completato la configurazione preliminare di GeoDirectory, possiamo iniziare a progettare il nostro sito directory con Generatepress Suite di strumenti.
1. Generatepress Design della pagina Home della Directory
Puoi creare una nuova pagina o utilizzarne una creata da WordPress per impostazione predefinita, come la Pagina di esempio.
Vai su Pagine, modifica la Pagina di esempio e rinominala Home, oppure crea una nuova pagina a questo scopo.
Successivamente, vai su Aspetto > Personalizza > Impostazioni Homepage e seleziona la tua Home.
Il Logo
Prima di tutto, avremo bisogno di un logo per il nostro sito web.
Non devi investire in un designer per abbozzare la prima versione del tuo logo.
Uno degli errori più grandi che puoi commettere quando avvii una nuova directory è investire troppo tempo e denaro prima di testare la compatibilità del prodotto con il mercato.
Puoi creare un logo in cinque minuti con un'app come Canva, economica e sorprendentemente efficace.
Per un MVP (minimum viable product), un logo realizzato con Canva sarà più che sufficiente.
Ci sono diversi modelli di logo tra cui scegliere, e non importa se il tuo logo iniziale non è così perfetto e originale come pensi dovrebbe essere.
Se il tuo progetto prende piede, potrai sempre investire per migliorarlo o cambiarlo radicalmente in seguito.
Un logo mediocre non è mai la causa principale del fallimento di un progetto.
Dopo aver progettato il tuo logo, vai su Aspetto > Personalizza > Intestazione, clicca Logo > Seleziona Logo, e carica il tuo file PNG. Salta il ritaglio (o ritaglia l'immagine secondo necessità), in Layout Logo seleziona l'opzione Logo e clicca su pubblica.
Il Menu di navigazione
Dopo aver creato e aggiunto il logo, vai su Aspetto > Menu, e crea il tuo menu.
Aggiungi i collegamenti necessari (dalla colonna sinistra alla colonna destra) e salva. Nella sezione Impostazioni Menu > Posizione di visualizzazione, puoi selezionare l'opzionePrincipale».
Se vuoi, puoi fare in modo che lo stesso menu appaia nel footer oppure creare un altro menu da visualizzare lì.
In questo esempio, avremo solo il menu di navigazione nell'intestazione.
Abbiamo aggiunto sette link di navigazione principali e alcuni link di sotto-navigazione:
- Home
- Chi siamo
- Blog
- Luoghi e aggiungi luoghi
- Profilo
- Accedi
- Logout
Il link di accesso (dagli endpoint di UsersWP) verrà visualizzato solo per gli utenti non connessi, mentre i link di disconnessione, account e profilo appariranno solo per gli utenti connessi.
La Tipografia
Ora definiamo la Tipografia per il font e la dimensione del testo del sito. Sto impostando una Famiglia di font, uno Spessore del font e una Dimensione del font globali che verranno applicati a tutto il testo del sito.
andremo su Aspetto > Personalizza > Tipografia > Corpo. Imposteremo il Famiglia di font: Poppines Categoria: sans-serif e Variante: 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic
Il Contenuto
Inizierò a costruire questa pagina da zero utilizzando il GenerateBlocks plugin.
abbiamo bisogno di un'intestazione hero nella homepage, per questo aggiungiamo un blocco Griglia fornito dal GenerateBlocks plugin.
imposteremo l'allineamento del blocco su wide.
Nelle impostazioni della Griglia, imposta il layout su
Layout barra laterale: Nessuna barra laterale
Widget piè di pagina: Predefinito
Contenitore contenuto: Larghezza intera
Disabilita elemento: Titolo contenuto
Larghezza elemento griglia: 100
Poi, controlla le impostazioni del blocco e imposta l'URL dell'immagine di sfondo.
Per la sezione Hero, abbiamo bisogno di un'immagine e ne scaricheremo una gratuita da Pexels.com (Grazie, @rachel-claire).
Nelle impostazioni di spaziatura, padding 100px sui margini superiore e inferiore.
Ora aggiungiamo un tag intestazione per inserire del testo.
Testo: Trova i migliori ristoranti a Philadelphia
Dimensione: Piccola
Aspetto: Piccolo Grassetto
Colore testo: #FFFFFF
All'interno della stessa Griglia, aggiungeremo il GD > Search blocco con padding in alto e in basso di 200px.
Ora aggiungeremo una griglia vuota sotto l'intestazione hero e inseriremo il GD > Categories blocco in quella griglia.
Imposta le opzioni del blocco come segue
Tipo di design: Sfondo immagine
Elementi per riga: 3
Abilita Usa Immagine Categoria
Puoi impostare un'immagine per una categoria modificandola da wp-admin -> places -> Place Categories.
Ogni categoria ha un'opzione per impostare un'immagine predefinita
Non ho trovato alcuna impostazione funzionante in Generateblocks per trasformare la griglia nel layout del contenuto. Aggiungeremo il home-container classe alla griglia padre della categoria.
Sotto la sezione hero, aggiungi un'altra Griglia cliccando sull'icona più e aggiungi i GD > Listings blocchi lì.
Ora eseguiremo alcune impostazioni necessarie in questo GD > Listings blocco. Imposteremo l'ordinamento: recenti
Analogamente al blocco categoria, aggiungeremo la home-container classe alla griglia padre delle Ultime Inserzioni.
Ora aggiungiamo una griglia vuota e inseriamo al suo interno il blocco GD > Mappa, mantenendo le impostazioni predefinite.
Analogamente agli altri, aggiungeremo la home-container classe alla griglia padre di GD > Mappa.
Infine, aggiungi il seguente CSS nel personalizzatore del tema da Aspetto => Personalizza => Aggiungi CSS
.home-container{ max-width:1200px; margin:auto; }
Congratulazioni! La tua homepage è completata.
2. Generatepress Design delle pagine Annunci e Ricerca del sito Directory
Ora devi progettare due pagine essenziali per qualsiasi directory.
La pagina delle inserzioni (archivio generale, categorie, tag) e la pagina dei risultati di ricerca.
GeoDirectory le crea di default con un layout generale. In questo tutorial personalizzeremo un po' il layout di queste pagine.
Le pagine degli annunci e di ricerca sono quasi identiche, quindi la creiamo una volta sola e copiamo il layout sull'altra pagina.
Abbiamo deciso che il layout della pagina degli annunci avrebbe avuto gli annunci a sinistra e, a destra, una mappa fissa che mostra la posizione precisa degli annunci.
È molto semplice.
Pagina degli annunci
Vai su Geodirectory > Settings > General > Pages > Clicca su modifica del template di pagina GD Archive
Rimuovi tutto il contenuto da questo GD Archive template di pagina.
imposteremo le impostazioni della pagina come segue
Layout barra laterale: Nessuna barra laterale
Widget piè di pagina: Predefinito
Contenitore contenuto: Larghezza intera
Ora aggiungi una griglia vuota con due colonne.
Nel contenitore di sinistra, trascineremo i widget correlati alla pagina archivio GD, come GD > Azione Loop, GD > Loop, GD > Paginazione Loop e GD > Ricerca in cima, così l'utente potrà effettuare ricerche dalla pagina archivio.
Nella colonna destra trascineremo il blocco GD > Map blocco.
manterremo tutte le impostazioni predefinite per il GD > Map. diamogli un po' di altezza; ho deciso di impostare un'altezza di 150vh.
Per rendere il layout della pagina archivio a piena larghezza, aggiungeremo il seguente CSS nel personalizzatore del tema da Aspetto => Personalizza => Aggiungi CSS
.geodir-archive .container.grid-container{ max-width:100%; } .geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{ overflow-y: scroll; max-height: 100vh; }
Ora, dopo questo, la pagina Archivio Annunci è pronta.
Un'altra opzione è utilizzare il blocco GD > Archivio Semplice come spiegato in questo tutorial su come Costruire un sito web di directory con Elementor.
Per la pagina di ricerca, ripetiamo lo stesso processo.
Pagina di ricerca
Vai su Geodirectory > Settings > General > Pages > Clicca su modifica del template di pagina GD Search
Rimuovi tutto il contenuto da questo GD Search template di pagina.
Copia tutto il contenuto della pagina GD Archive e incollalo nella pagina GD Search.
Ora le nostre pagine GD Search e GD Archive sono pronte.
3. Generatepress Design della pagina di inserzione singola del sito web di directory
Per modificare e personalizzare la pagina GD Detail, puoi andare su Geodirectory > Impostazioni > General > Pages > Clicca su modifica del template di pagina GD Detail.
In questo template, troverai già dei contenuti predefiniti generati da Geodirectory.
rimuoveremo tutto questo contenuto predefinito e aggiungeremo una nuova Griglia.
Prima aggiungiamo un carosello di immagini in cima alla pagina Dettaglio Annuncio. Trascineremo il GD > Post Image blocco in questo contenitore con le seguenti impostazioni
Limite immagini: 10
Limite visualizzazione: 3
Tipo di output: Slider
Avvio automatico: Attiva
Ora aggiungeremo un ulteriore blocco Griglia vuoto al di sotto, con un layout a due colonne.
aggiungeremo una classe (single-details-container ) a questa Griglia dalle impostazioni del blocco.
Ora aggiungiamo tutti gli shortcode necessari della pagina Dettaglio GD nella colonna sinistra, uno alla volta.
Che include GD > Tassonomie Singolo, GD > Tab Singolo e GD > Precedente/Successivo Singolo.
Nella colonna di destra, aggiungeremo GD > Author Action e GD > Output Location blocco.
Infine, aggiungi il seguente CSS nel personalizzatore del tema da Aspetto => Personalizza => Aggiungi CSS
.single-details-container { max-width: 1200px; margin: auto !important; } .single-gd_place .entry-content{ margin:0px; }
Dopo averlo fatto il nostro Pagina di dettaglio dell'inserzione è stata completata.
Aggiungere funzionalità Premium al tuo Generatepress Sito web Directory
Se lo desideri, ora puoi aggiungere funzionalità premium alla tua directory, come:
- Annunci a pagamento: con il componente aggiuntivo GeoDirectory Listing Price Manager puoi impostare i prezzi per l'inserimento degli annunci. Per ogni fascia di prezzo, puoi abilitare/disabilitare funzionalità come: limitare il numero di immagini per gli annunci gratuiti consentendone di più per quelli a pagamento. Permettere un numero maggiore o minore di tag e categorie. Abilitare o disabilitare campi personalizzati specifici. Inviare descrizioni più lunghe o più brevi.
- Claim Listings: Questa è una funzionalità fondamentale per una directory in cui l'amministratore crea il database e invita i proprietari di attività a prendere il controllo dei loro annunci gratuiti. Il processo di rivendicazione dell'inserzione può includere la richiesta di un aggiornamento a un'inserzione a pagamento per assumere la titolarità dell'inserzione.
- Pubblicità: vendita di spazi pubblicitari è un'altra forma di monetizzazione di una directory online. Se hai molto traffico, puoi utilizzare reti pubblicitarie. In alternativa, puoi vendere spazi pubblicitari direttamente, consentendo alle attività di aggiungere banner in aree specifiche del tuo sito web oppure permettendo alle inserzioni di apparire come annunci, ad esempio, in cima ai risultati di ricerca organici.
Questi sono solo tre esempi. Tuttavia, un sito directory offre molti modi per guadagnare online.
Puoi creare un marketplace globale di articoli artigianali, vendere biglietti per eventi o vendere coupon sconto.
Potenzia il tuo sito web con queste strategie chiave: Strategie chiave per creare un sito web directory.
Le possibilità sono infinite.
Newsletter - Rimani aggiornato!
Ricevi le ultime notizie, consigli e contenuti esclusivi direttamente nella tua casella di posta.