In questo articolo, ti mostrerò come aggiungere una mappa di Google Maps reattiva a una pagina Web di WordPress (ad esempio per una pagina di contatto) senza utilizzare un plug-in. Userò WordPress 6.0 per questo tutorial, così come il tema Twenty Twenty Two, che è il tema predefinito per questa versione di WordPress.
La funzione Google Maps ti consente di visualizzare la posizione della tua attività su una mappa interattiva, consentendo ai visitatori del sito di visualizzare facilmente dove ti trovi e interagire con la mappa per vedere cos'altro c'è intorno a te, ottenere indicazioni stradali, ecc. Mostra ai visitatori del sito che sei un'azienda locale e hai una sede fisica reale. È molto comune per le aziende avere una mappa nella pagina dei contatti.
Ci sono tonnellate di plug-in di Google Maps là fuori, ma molti di essi sono goffi e richiedono il pagamento per le funzionalità complete del plug-in o un account sviluppatore Google con passaggi complicati che producono un risultato tutt'altro che desiderabile.
Detto questo, c'è un modo davvero semplice per aggiungere Google Maps alle tue pagine WordPress 6.0 senza plug-in e senza un mucchio di passaggi complicati. Immergiamoci.
Passaggio 1: crea un blocco HTML
Per cominciare, accedi all'area di amministrazione del tuo sito WordPress e vai alla sezione "Pagine" (freccia rossa nell'immagine sopra).
Fai clic sulla pagina in cui desideri aggiungere la funzionalità di Google Maps (puoi fare clic sul nome della pagina, nel mio caso "Contatto" - freccia blu nell'immagine sopra - o semplicemente fare clic su "Modifica" sotto il nome della pagina).
Se stai utilizzando un tema a blocchi come Twenty Twenty Two, ora sarai all'interno dell'Editor blocchi per la tua pagina. Scorri verso il basso fino alla posizione in cui desideri inserire la mappa.
Quindi, fai clic sull'icona "+" (l'"Inseritore di blocchi" - freccia rossa nell'immagine sopra) per inserire un blocco.
Cerca "Gruppo" nel campo di ricerca (delineato in verde nella foto) e fai clic per aggiungere il blocco del gruppo (freccia rossa). Ciò ti consentirà di aggiungere alcune impostazioni personalizzate all'elemento di blocco.
Ad esempio, fai clic sull'opzione "Modifica allineamento" (freccia rossa) e seleziona "Larghezza intera" (freccia verde). Questo renderà la larghezza del blocco che conterrà la nostra mappa interattiva di Google Maps a tutta larghezza.
Quindi, fai clic sul grande pulsante "+" all'interno del gruppo (freccia rossa nella foto sopra). Cerca "HTML" nella barra di ricerca (delineata in verde) e fai clic sul blocco "HTML personalizzato" (freccia blu).
Vedrai che ora dice "Scrivi html..." (freccia rossa). Qui è dove aggiungeremo la nostra mappa.
Passaggio 2: genera Google Maps Embed HTML
Ora dovremo generare la nostra mappa con Google Maps. Per fare ciò, apri una nuova scheda del browser e accedi a Google.com se non è il tuo browser di ricerca predefinito.
Quindi, digita l'indirizzo che desideri visualizzare sulla mappa. Per questo esempio, userò l'Empire State Building (freccia rossa). Puoi utilizzare l'indirizzo esatto della tua attività per questa parte (ad es. numero civico, via, città, stato e codice postale, o qualsiasi altra cosa digitata per gli indirizzi internazionali se non ti trovi negli Stati Uniti).
Fai clic sull'immagine della mappa che appare per il tuo indirizzo nella pagina dei risultati del motore di ricerca (freccia rossa nell'immagine: sarà al centro della pagina o a destra, a seconda che tu abbia digitato un indirizzo o il nome di un posto, come ho fatto io).
Il tuo indirizzo apparirà ora come indicatore sulla mappa a schermo intero (freccia rossa nell'immagine sopra). Vedrai anche diverse icone sotto l'indirizzo o il titolo del luogo che hai cercato. Queste icone includono "Indicazioni stradali", "Salva", "Nei dintorni", "Invia a telefono" e "Condividi". Fare clic sull'icona "Condividi" (freccia blu).
Nella scheda "Condividi" visualizzata, fai clic sulla scheda "Incorpora una mappa" (freccia blu nella foto sopra).
In questa scheda vedrai un'anteprima del tuo widget Google Maps incorporato. C'è un menu a discesa delle dimensioni sul lato sinistro del codice (freccia verde): puoi selezionare una taglia predefinita o scegliere "Personalizzata" per impostare la tua taglia. Seleziono l'opzione "Personalizzata" (freccia rossa).
Qui vedrai le dimensioni per la mia mappa personalizzata. Imposterò l'altezza, o la prima dimensione, su 1200 (freccia rossa). Lascerò la larghezza impostata su 600. Puoi fare clic su "Anteprima dimensione reale" (freccia verde) per mostrare la mappa in una nuova finestra pop-up a grandezza intera (assicurati di disabilitare eventuali blocchi pop-up se li hai acceso per non bloccare la finestra). Esci dalla finestra di anteprima una volta terminato.
Quindi, fai clic sul link "Copia HTML" (freccia blu). Questo è il codice che porteremo nella nostra pagina WordPress.
Passaggio 3: incolla il codice HTML nella pagina di WordPress
Torna alla scheda del browser che contiene il tuo sito Web WordPress. Fai clic sul blocco HTML vuoto dove dice "Scrivi HTML qui..." e incolla il codice (freccia rossa) premendo ctrl+v sulla tastiera (cmd+v su un mac).
Se fai clic sull'opzione "Anteprima" nella barra degli strumenti Blocca (freccia rossa), ora vedrai la tua mappa visualizzata sulla tua pagina (freccia verde). Fare nuovamente clic sull'opzione "HTML" per tornare al codice HTML (freccia blu).
Abbiamo la nostra mappa incorporata nella nostra pagina, ma non è reattiva, il che significa che se visualizziamo la mappa su uno schermo più piccolo, come un tablet o un telefono, non regolerà le sue dimensioni per adattarla allo schermo. Per risolvere questo problema, dobbiamo aggiungere uno stile personalizzato al codice HTML.
Passaggio 4: rendi Google Maps reattivo
sarò utilizzando il codice che ho ricevuto da questo sito web per rendere reattivo l'incorporamento di Google Maps. Scorri verso il basso fino alla sezione denominata "Come incorporare Google Maps in modo reattivo" (freccia rossa). Quindi, scorri verso il basso fino al secondo set di codici (freccia blu).
Copia tutto da “ ” to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).
Torna su WordPress. Fare clic con il mouse all'inizio del codice HTML per inserire questo nuovo codice all'inizio (freccia rossa). Premi ctrl+v per incollare il codice.
Infine, fai clic alla fine del codice HTML (freccia rossa) e digita " ” per chiudere tutto. Fondamentalmente quello che hai appena fatto è stato racchiudere il tuo codice HTML in uno stile personalizzato. Questo stile indica al browser del visitatore di ridimensionare la mappa in base alle dimensioni della finestra in cui la stanno visualizzando.
Passaggio 5: regola le proporzioni della mappa interattiva
C'è un'ultima cosa che dobbiamo fare: scorrere indietro fino all'inizio del codice fino a visualizzare "padding-bottom: 75%;" (freccia Rossa). Questo pezzo di codice determina le proporzioni della mappa.
Poiché ho ridimensionato la mia mappa a 1200 x 600, ha un rapporto di aspetto 2:1. Per questo, devo cambiare la percentuale in "50%" (freccia rossa).
Se non sei sicuro di quale percentuale dovresti usare per la tua mappa, prendi semplicemente le proporzioni (es. 16:9) e dividi il secondo numero per il primo per ottenere la tua percentuale (9 diviso per 16 è 56.25%).
Fai clic su "Aggiorna" per applicare le modifiche (freccia blu nell'immagine sopra), quindi fai clic su "Visualizza pagina" nell'angolo in basso a sinistra per vedere il risultato.
Ora dovresti vedere il tuo widget di Google Maps visualizzato (freccia rossa nell'immagine sopra).
Puoi testare la reattività riducendo le dimensioni del tuo browser, quindi scorrendo indietro fino all'area della pagina web che contiene la mappa.
Questo è tutto per questo tutorial! Se ti è piaciuto e vuoi imparare a creare da zero il tuo sito Web WordPress professionale, puoi iscriverti a my Corso WordPress 6.0 per non programmatori su Udemy, o dai un'occhiata ai miei altri tutorial!
