Ecco una guida passo passo per creare un sito directory usando il tema Ollie per WordPress:
- Installa il tema Ollie
- Installa e configura GeoDirectory
- Progetta il sito directory usando il tema OllieWP e Gutenberg Editor
GeoDirectory è completamente compatibile con i temi a blocchi FSE come Ollie, quindi in questo caso non avremo bisogno di un page builder o di un plugin aggiuntivo per i blocchi.
GeoDirectory offre una soluzione robusta e flessibile per creare una directory online dinamica con qualsiasi tema o page builder.
In questo tutorial mostreremo come costruire un sito directory con il tema OllieWP in combinazione con il plugin GeoDirectory.
Questo duo consente agli utenti di integrare facilmente funzionalità basate sulla posizione geografica, personalizzare i 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 OllieWP
Dobbiamo installare un tema e, per questo tutorial, installerai il OllieWP Tema.
Vai su Aspetto >> Temi
Seleziona Aggiungi nuovo, Installa, e Attiva il OllieWP Tema.
2. Installa GeoDirectory
Infine, devi installare GeoDirectory.
Vai su Plugin >> Aggiungi nuovo, cerca GeoDirectory. Installalo e attivalo, e avremo completato l'installazione dei plugin.
3. 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 Philadelphia 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 OllieWP 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 OllieWP Suite di strumenti.
1. OllieWP 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 > Editor > Pages > Home e clicca sul pulsante di modifica.
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.
Il Menu di navigazione
Dopo aver creato e aggiunto il logo, vai su Aspetto > Editor, e crea il tuo menu.
Clicca sui menu in alto e rimuovi tutti quelli esistenti.
Ora aggiungiamo un blocco colonne con un layout a due colonne.
Nella colonna sinistra aggiungi il blocco logo del sito.
Clicca sul contenitore dell'intestazione principale e dalle impostazioni del blocco imposta Sfondo: #FFFFF
Nella colonna di destra aggiungi il menu di navigazione.
Abbiamo aggiunto i seguenti link di navigazione principali e alcuni link di navigazione secondari:
- Home
- Chi siamo
- Blog
- Luoghi e aggiungi luoghi
- Profilo
- Login/out
Il blocco Login/out mostrerà solo i link di Login e Logout in base allo stato di accesso dell'utente.
Il Contenuto
Inizierò a costruire questa pagina da zero utilizzando il OllieWP e i blocchi Gutenberg.
Vai su Aspetto > Editor > Design > Pages e clicca sul pulsante per modificare la home page.
abbiamo bisogno di un hero header nella homepage; per farlo, rimuoviamo tutto il contenuto di questa pagina e aggiungiamo un Copri blocco.
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).
aggiungeremo le seguenti impostazioni in questo blocco cover
Contenuto: 1200
Ampio: 100
Opacità: 50
Padding e Margine: 0
Altezza minima del cover: 600
Ora aggiungiamo un tag header all'interno di questo blocco cover con il
Testo: Trova il Miglior Ristorante a Philadelphia
daremo anche al tag header una classe aggiuntiva ( heading-text-center ) per aggiungere uno stile.
Ora aggiungiamo il seguente stile nel personalizzatore del tema.
.heading-text-center{ text-align:center; }
Ora aggiungiamo il GD > search blocco sotto questo titolo.
sotto di esso, aggiungiamo dello spazio usando un blocco spaziatore con un'Altezza di: 60
Ora aggiungiamo una colonna vuota e inseriamo il GD > Categories blocco al suo interno.
Imposta le opzioni del blocco come segue
Tipo di design: Sfondo immagine
Elementi per riga: 3
Abilita Usa Immagine Categoria
Puoi impostare l'immagine per una categoria modificando la categoria da wp-admin -> places -> Place Categories.
Ogni categoria ha un'opzione per impostare un'immagine predefinita
Sotto la sezione hero, aggiungi un'altra Colonna 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
Ora aggiungiamo una Colonna vuota con Contenuto e Larghezza al 100.
Aggiungi il GD > Map blocco al suo interno e mantieni le impostazioni predefinite.
Clicca sul Footer e OllieWP mette già a disposizione alcuni modelli di Footer predefiniti. Ne sto selezionando uno.
Congratulazioni! La tua homepage è completata.
2. OllieWP Design delle pagine Annunci e Ricerca del sito Directory
Ora devi progettare due pagine essenziali per qualsiasi 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 Aspetto > Editor > Design > Modelli e clicca su Modifica GD Archive modello di pagina
Rimuovi tutto il contenuto da questo GD Archive template di pagina.
Ora aggiungiamo una riga vuota.
Al suo interno aggiungi un layout a due colonne
Ora nel contenitore di sinistra trascineremo i widget correlati alla pagina Archivio GD come GD > Loop Action, GD > Loop, GD > Loop Pagination, e GD > Search in cima, in modo che l'utente possa effettuare ricerche dalla pagina di 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 100vh.
Aggiungi il seguente stile nel personalizzatore del tema da Aspetto => Personalizza => Aggiungi CSS
.geodir-archive .geodir-listings .geodir_location_listing{ overflow-y: scroll; max-height: 100vh; padding-right: 15px; }
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. OllieWP Design della pagina di inserzione singola del sito web di directory
Per modificare e personalizzare la pagina GD Detail, puoi andare su Aspetto > Editor > Design > Modelli e clicca su Modifica GD Single template di pagina.
Aggiungi una colonna vuota
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 aggiungiamo una riga vuota con
Contenuto: 1200
Ampio: 100
aggiungi due colonne al suo interno.
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.
Dopo averlo fatto il nostro Pagina di dettaglio dell'inserzione è stata completata.
Aggiungere funzionalità Premium al tuo OllieWP 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.
Dai il via al tuo progetto di sito directory con questi consigli: Crea oggi un sito directory.
Le possibilità sono infinite.