Vai al contenuto principale

Come aggiungere mappe interattive al tuo sito Web WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Se si utilizza un servizio come Google Maps, devi solo scegliere una posizione e incorporare la mappa nel tuo sito web. Tuttavia, non puoi modificare le mappe al volo e nemmeno i tuoi colleghi possono farlo, il che è spesso necessario per i progetti di collaborazione.

È qui che entrano in gioco le mappe interattive. Ti consentono di posizionare marcatori mobili che tutti i membri del tuo team possono modificare. 

In questo tutorial, parleremo di quando questo tipo di carta torna utile. Inoltre, ti mostreremo come aggiungerli in due modi a WordPress.

Ma prima di iniziare, prenditi il ​​tempo per dare un'occhiata Come installare un tema WordPressQuanti plugin dovrei installare su WordPress.

Quindi, mmettiamoci al lavoro!

Cos'è una mappa interattiva (e quando usarla?)

L'aggiunta di una mappa a un sito Web è piuttosto semplice. Strumenti come Google Maps ti consente di incorporare mappe nelle tue pagine in pochi minuti. Il vantaggio di questo approccio è che i visitatori possono spostarsi sulle mappe, ingrandire, rimpicciolire, ecc.

Questi tipi di mappe sono più interattivi delle semplici immagini, ma non ti consentono di apportare modifiche dopo averle aggiunte al tuo sito web.

D'altro canto, le mappe interattive consentono a te (e in alcuni casi, ai tuoi colleghi) di aggiungere nuovi marcatori, icone, testo e altro ancora. Immagina, ad esempio, di pianificare una riunione per i membri del tuo sito web. È possibile configurare una mappa con più pin per suggerire posizioni.

Scopri a proposito Plugin 5 WordPress per aggiungere la geolocalizzazione al tuo blog

Puoi anche utilizzare una mappa interattiva in modo che i tuoi utenti possano condividere le loro posizioni o navigare verso i luoghi che desiderano visitare. Per essere più precisi, si tratta di applicazioni di nicchia. Tuttavia, le mappe interattive  peuvent  essere utile in un'ampia varietà di situazioni. 

Inoltre, non sono necessariamente più difficili da aggiungere rispetto alle loro controparti.

Come aggiungere mappe interattive al tuo sito WordPress

Quando si tratta di mappe interattive, puoi incorporarne una sul tuo sito Web o utilizzare un plug-in per aiutarti a farlo. Il primo approccio è più semplice, ma i plugin spesso racchiudono molte più funzionalità, come ci si potrebbe aspettare. Esaminiamo l'approccio del plugin per mostrare quali sono queste funzionalità.

1. Usa il plugin Mappe Marker Pro

Usa Map Maker Pro

Il plugin Mappe Marker Pro è una soluzione premium one-stop per l'aggiunta di mappe a WordPress. Offre dozzine di funzioni avanzate, come quelle che ti consentono di visualizzare mappe di più reparti e di aggiungere un numero virtualmente illimitato di indicatori alle tue mappe e organizzarle. Inoltre, i visitatori possono filtrare i tipi di indicatori che vogliono vedere sulle tue mappe.

Altre cose divertenti che puoi fare usando questo plugin sono l'aggiunta di informazioni sulla distanza e sul percorso tra i marker. Puoi persino condividere la tua posizione in tempo reale attraverso la mappa del tuo sito web, se sei propenso a farlo. La configurazione del plug-in può richiedere un po 'di tempo, data la ricchezza di funzionalità che offre. 

Tuttavia, non è così difficile come potresti immaginare. 

Per iniziare, configura e attiva il plugin come faresti con qualsiasi altro. Se sei nuovo su WordPress, scoprilo Come installare un plugin in WordPress

Una volta che il plugin è pronto, devi aggiungere una nuova mappa o layer, cosa che puoi fare dalla scheda Maps Marker Pro> Aggiungi un nuovo livello. Qui, imposta un nome che puoi riconoscere per il tuo livello e inserisci la posizione che desideri venga visualizzato, proprio come faresti con qualsiasi altro strumento di mappatura online:

Aggiungi un nuovo livello

Ora puoi regolare le dimensioni e il livello di zoom che desideri impostare come predefinito, utilizzando il menu a sinistra. C'è anche un'opzione chiamata Cluster di indicatori , che mostrerà un'icona con il numero di marker in un'area se si ingrandisce troppo, come nell'esempio seguente:

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Visualizza un indicatore

l'opzione Cerca marcatori, d'altra parte è abbastanza esplicito. Può essere utile se vuoi includere ulteriori informazioni sui tuoi marcatori:

Elenco dei marker

Ora scorri verso il basso e trova l'opzione « Aggiungi un nuovo marker su questo livello« . Nella schermata successiva, sarai in grado di definire un nome e una posizione per il tuo marker, utilizzando la stessa mappa della precedente.

Scopri anche Come comprimere e ridimensionare le immagini su WordPress

Puoi anche scegliere un'icona e impostare il testo a comparsa per il tuo marcatore. Apparirà quando i visitatori cliccano sul marcatore stesso o lo selezionano da un elenco se hai scelto di includerlo.

In ogni caso, non dimenticare di premere il pulsante pubblicare una volta che hai finito. Dopo aver aggiunto alcuni marker, il tuo livello iniziale dovrebbe essere simile a questo:

Esempio di uno strato su un blocco

Quando sei pronto per aggiungere la tua nuova mappa interattiva a una delle tue pagine, dovresti utilizzare un file shortcode. Scorri fino all'inizio della scheda Modifica livello  e cerca il suo ID corrispondente:

Salva gli identificatori della carta

Ora, posiziona il shortcode [mapsmarker layer = "X"] nel tuo post o pagina. Non dimenticare di sostituire il segnaposto  dall'ID del tuo "livello" in anticipo, tuttavia.

La tua carta ora dovrebbe essere operativa sul tuo sito web! Ancora più importante, tu o chiunque altro del tuo team puoi modificarlo e aggiungere nuovi marcatori in qualsiasi momento, senza lasciare la dashboard.

2. Utilizzo della funzione Incorpora incorporata di Google Map

Google Maps non ha davvero bisogno di presentazioni: è un servizio che ti consente di estrarre mappe da tutto il mondo per condividere luoghi con altre persone, trovare indirizzi e persino condividere la tua posizione. Quando si tratta di siti web, ci sono molti modi per incorporare Google Maps nelle tue pagine. Salva mappe con google map

Tuttavia, la maggior parte delle carte offre una quantità limitata di interattività. Ti permettono di navigare attraverso di essi, ingrandire, uscire e modificare la visualizzazione, ma non di più.

Il fatto è che Google Maps offre molte più funzioni rispetto alla semplice mappatura. Ad esempio, puoi anche aggiungere più marcatori, misurare le distanze e includere indicazioni stradali nelle tue mappe. Per provare queste funzionalità, vai a Google mie mappe e fare clic sul pulsante  + Crea una nuova mappa  :

Crea una mappa su google map

Nella schermata successiva, definisci un titolo per la tua mappa e il suo primo livello, su cui costruiremo. Ora trova la posizione che desideri condividere utilizzando la barra di ricerca di Google Map nella parte superiore dello schermo:

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Nuova mappa e posizione della mappa Google

Mentre esegui lo zoom avanti, puoi utilizzare il simbolo dell'indicatore nella parte superiore dello schermo per iniziare a evidenziare le posizioni sulla mappa. Basta fare clic nel punto in cui desideri posizionare il contrassegno, quindi impostare un nome e un'icona per esso:

Aggiungi un indicatore alla tua nuova mappa.

Una volta che hai più marcatori, puoi tracciare delle linee tra loro per visualizzare le distanze:

Visualizza una distanza tra due punti sulla mappa

Quando la tua carta è pronta, fai clic sul pulsante Condividi nel menu a sinistra. Lì, modifica le impostazioni di accesso  de privato  à pubblico :

Definisci l'accesso alla carta

Puoi anche invitare i membri del team a utilizzare le loro e-mail, in modo che possano accedere immediatamente alla mappa:

Mappa per la collaborazione con i partner

In ogni caso, dovresti sempre incorporare la tua nuova carta sul tuo sito web. Puoi farlo facendo clic sull'icona dei tre punti accanto al titolo della mappa e facendo clic sull'opzione Incorpora questa mappa  :

Incorpora la mappaOra puoi copiare e incollare il codice di incorporamento nelle tue pagine. La tua nuova carta apparirà ovunque la posizionerai. Inoltre, i tuoi colleghi potranno modificarlo e aggiungere nuovi marker tramite Google Maps, se necessario.

Scopri anche alcuni plugin WordPress premium  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Ultimate Math Captcha

Ultimate Math Captcha è un plugin captcha di WordPress di alta qualità che è efficiente al 100%. Consente di aggiungere captcha matematici su login, registrazione, recupero password, commenti, WooCommerce, Easy Digital Download e moduli bbPress di WordPress.Ultimo plugin wordpress per la matematica

Le sue caratteristiche includono: installazione e configurazione facili, aggiunta di captcha a molti moduli, supporto per più captcha matematici sulla stessa pagina, personalizzazione dei messaggi di errore e molti altri.

Download | DemoWeb hosting

2. Gateway di pagamento standard PayPal per moduli Ninja

PayPal Standard Gateway per Ninja Forms ti consente di creare moduli che si integrano perfettamente con il gateway di pagamento PayPal. Potrai creare moduli d'ordine personalizzati e ricevere pagamenti utilizzando account Paypal standard.

Gateway di pagamento standard Paypal per moduli ninja

Le sue caratteristiche principali sono: integrazione facile e veloce, integrazione IPN, possibilità di attivare / disattivare il gateway PayPal su singoli moduli, supporto per pagamenti regolari, ecc.

Download | Demo |  Web hosting

3. Gravity Forms - Elenca e modifica

Con questo plug-in WordPress premium, è possibile modificare o eliminare le voci inviate nei moduli del tuo sito Web. Una funzionalità che manca molto nel plugin Gravity Forms, motivo per cui questa estensione è stata creata.Elenco moduli gravità modifica plugin wordpress inserisci tabelle modulo blog sito grafica

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Tra le sue caratteristiche citeremo tra le altre: la mmodifica e salvataggio dei dati registrati, ilsoppressione dei dati inseriti, ilmodifica e cancellazione di articoli già pubblicati, iPerfetta integrazione con i plugin jQuery Datatables e Forme di gravità, ilupport della logica condizionale, simple e veloce da installare, e molto altro.

Download Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

Conclusione

Ecco ! Questo è tutto per questo tutorial, spero che ti permetta di creare mappe interattive in WordPress. Non esitare a condividi con i tuoi amici sui tuoi social network preferiti

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Se hai suggerimenti o commenti, lasciali nella nostra sezione commentaires.

... 

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
8 azioni
quota4
Tweet2
Enregistrer2