Creare un sito web di directory con il tema OceanWP
Come Creare un Sito Web Directory con OceanWP?
Ecco una guida passo-passo per costruire un Sito Web Directory usando il tema OceanWP:
- Installa il tema OceanWP
- Installa e configura GeoDirectory
- Installa il Plugin Spectra Gutenberg Blocks
- Progetta il Sito Web Directory usando il tema OceanWP e Gutenberg Editor
Il tema OceanWP, in combinazione con il Plugin GeoDirectory e un Plugin Gutenberg Blocks, 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 OceanWP
Dobbiamo installare un tema e, per questo tutorial, installerai il Tema OceanWP.
Vai su Aspetto >> Temi
Seleziona Aggiungi nuovo, Installa, e Attiva il Tema OceanWP.
2. Installa il plugin Spectra Blocks
Il plugin Gutenberg predefinito non è sufficiente per stilizzare un template, quindi installeremo il plugin Spectra Blocks. (dai un'occhiata a questo tutorial se vuoi creare un sito web directory con il Tema Astra e il Plugin Spectra)
Questo plugin fornisce blocchi Gutenberg personalizzati, migliori di quelli predefiniti, e ti aiuterà a progettare i template delle pagine.
Vai su Plugin >> Aggiungi nuovo.
Cerca Spectra Blocks. 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 Sito Web Directory con OceanWP
Ora che abbiamo installato il tema e i plugin e completato la configurazione preliminare di GeoDirectory, possiamo iniziare a progettare il nostro Sito Web Directory con il Tema OceanWP.
1. Design della Home Page del Sito Web Directory con OceanWP
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 iniziale (prodotto minimo funzionante), un logo realizzato con Canva è più che adeguato.
Canva offre una grande varietà di template per loghi, e va benissimo se il tuo primo logo non è perfetto o originale al 100%.
Man mano che il tuo progetto prende slancio, hai sempre la possibilità di perfezionare o rinnovare completamente il tuo logo.
Ricorda, il successo di un progetto non dipende dalla perfezione del suo logo.
Ora vai su Aspetto > Personalizza > Intestazione > Logo, clicca su Seleziona Logo, e carica il tuo file PNG. Salta il ritaglio (o ritaglia l'immagine secondo le tue esigenze) e clicca su pubblica. Puoi anche impostare l'altezza e la larghezza massima del logo se le sue dimensioni sono maggiori.
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
- Pagina di Ricerca
- Accedi
- Account > Profilo > Password dimenticata > Logout
Il link di accesso (dagli endpoint di UsersWP) sarà visibile solo agli utenti non autenticati, mentre i link di logout, account e profilo saranno visibili solo agli utenti autenticati.
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: Red Hat Text e Peso font: Normal: 400
e nelle impostazioni Aspetto > Personalizza > Tipografia > menu principale imposteremo Peso font: Medium 500, Dimensione font: 13px
Ora andremo su Aspetto > Personalizza > Opzioni Generali > Stile Generale Colore primario: #ff914d e Colore primario al passaggio del mouse: #ff731c
Il Contenuto
Inizierò a costruire questa pagina da zero utilizzando il plugin Spectra Blocks.
abbiamo bisogno di un header hero nella homepage; per farlo aggiungiamo un blocco contenitore fornito dal plugin Spectra Blocks.
Successivamente, clicca su Stile dalle schede in alto. Seleziona > Immagini come Tipo di sfondo.
Per la sezione Hero, abbiamo bisogno di un'immagine e ne scaricheremo una gratuita da Pexels.com (Grazie, @Kelly).
Fai clic sulla sezione aggiunta e seleziona Larghezza intera nell'opzione Larghezza contenuto, come mostrato nello screenshot qui sotto.
Dalla scheda Stile delle impostazioni del blocco contenitore, seleziona Ripeti su Nessuna ripetizione e Dimensione su Copri.
Trascina e rilascia un elemento Titolo all'interno dell'immagine hero.
È il momento di dare un titolo alla nostra immagine hero della Homepage.
Dalla scheda Stile, cambia il colore del testo in bianco (#FFFFFF) per migliorare il contrasto e la leggibilità.
In questo tutorial userò qualcosa di semplice come Ristoranti a New York
Non dimenticare di centrare il testo usando l'opzione di allineamento.
Per aggiungere la ricerca GD nell'intestazione della homepage, trascina il blocco GD > Search all'interno del contenitore hero.
Successivamente, aggiungi un'altezza minima a questo contenitore hero. La imposterò su 650 x 600 px in larghezza e altezza e imposta anche la larghezza del contenitore: Boxed e larghezza del contenuto: Boxed.
è il momento di rimuovere il titolo della pagina e lo spazio extra nella sezione dell'intestazione.
Clicca sull'icona O in alto a destra della pagina, basta cliccarci sopra. All'interno, nella sezione Generale imposta padding: disabilitato e nella selezione Titolo Titolo: disabilitato
È il momento di aggiungere altre sezioni necessarie alla home page; ora aggiungerò una sezione con gli annunci recenti.
Sotto la sezione hero, aggiungi un'altra container 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 aggiungeremo una CTA per attirare i proprietari di attività ad aggiungere le loro aziende. Aggiungeremo un contenitore vuoto e nelle impostazioni di stile.
impostiamo uno sfondo.
Ora aggiungiamo gli stili del contenitore:
Tipo di Overlay: Colore
Colore Overlay Immagine: #FF6900
Opacità Overlay: 0.3
Larghezza contenitore: Larghezza intera
Larghezza contenuto: Boxed
Ora aggiungeremo anche un Call To Action blocco fornito da Spectra all'interno di questo contenitore.
Tipografia per la sezione CTA.
Colore: #fffff
Dimensione font: 32px
aggiungiamo un po' di stile al pulsante.
Colore testo: #000000
Colore di sfondo: #FFFFFF
Raggio: 30px su tutti i lati
Padding: 10px, 30px, 10px, 30px
Cambiamo il testo del pulsante in Aggiungi Inserzione e il link alla pagina Aggiungi Inserzione.
Ora la nostra sezione CTA è completata. Aggiungeremo un'altra sezione: GD > Categories sezione sottostante.
Le impostazioni saranno le seguenti
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
Ecco fatto, ora aggiungiamo l'ultima sezione per la visualizzazione dei link ai social media. La chiameremo RESTA IN CONTATTO.
Aggiungi un nuovo contenitore vuoto con sfondo #000000.
Ora aggiungeremo un'intestazione in questo contenitore con Allineamento: Centro e Intestazione: H3
Inserirò il testo Rimani in Contatto
Colore: #ffffff
Dimensione font: 24px
Aggiungiamo ora un paragrafo sotto di essa per inserire del testo.
Aggiungi uno stile
Colore testo: #ffffff
Dimensione: Piccolo
Ora aggiungeremo il blocco icone social sotto di essa.
In questo blocco icone social aggiungi il seguente stile
Dimensione: 15px
Dimensione sfondo: 10px
Raggio del bordo: 100
Colore: #ffffff
Congratulazioni! La tua homepage è completata.
2. Design delle pagine Annunci e Ricerca del sito Directory OceanWP
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.
Ora aggiungi un contenitore 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 100vh.
Ora imposta semplicemente il contenitore principale a larghezza intera seguendo le istruzioni riportate nell'immagine qui sotto.
Ora imposteremo il template della pagina Archivio a larghezza intera
regoleremo anche la sezione stile intestazione per tutte le pagine dal Personalizzatore del tema > Opzioni generali > Impostazioni generali.
con Stile
Stile intestazione: Centrato
Padding: 20px
Colore di sfondo: #1e73be
Colore testo: #ffffff
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. Design della pagina singolo Annuncio del sito Directory OceanWP
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 tutti questi contenuti predefiniti e aggiungeremo un nuovo contenitore.
Prima aggiungiamo un carosello di immagini in cima alla pagina Dettaglio Annuncio. Trascineremo il GD > Post Image blocco in questo contenitore.
In questo blocco GD > Immagine, regola le seguenti impostazioni.
Limite immagini: 50
Limite visualizzazione: 2
Ora aggiungiamo un altro contenitore sotto questo contenitore, dove inseriremo gli altri blocchi necessari del pagina Geodirectory Detail.
Ora aggiungiamo uno per uno tutti gli shortcode GD Detail necessari. Tra questi troviamo GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.
È ora di aggiungere alcuni widget alla barra laterale. Andremo quindi su wp-admin > Aspetto > Widget.
Aggiungi il widget GD > Azione Autore nella barra laterale principale. Questo widget fornirà un Modifica, Elimina Annuncio.
Aggiungi un altro widget GD > Output Location. Questo widget mostrerà tutti i principali dettagli dell'annuncio che sono stati contrassegnati come visibili nella pagina di dettaglio.
Dopo aver fatto questo, la nostra Pagina di dettaglio dell'inserzione è stata completata.
Aggiungere funzionalità premium al tuo sito Directory OceanWP
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.
Fai risaltare il tuo sito directory seguendo questa guida: Crea un sito directory professionale.
Le possibilità sono infinite.
Newsletter - Rimani aggiornato!
Ricevi le ultime notizie, consigli e contenuti esclusivi direttamente nella tua casella di posta.
