Dans cet article, je vais vous montrer comment ajouter une carte Google Maps responsive à une page Web WordPress (c'est-à-dire pour une page de contact) sans utiliser de plugin. J'utiliserai WordPress 6.0 pour ce tutoriel, ainsi que le thème Twenty Twenty Two, qui est le thème par défaut de cette version de WordPress.
La fonctionnalité Google Maps vous permet d'afficher l'emplacement de votre entreprise sur une carte interactive, permettant aux visiteurs du site de voir facilement où vous vous trouvez et d'interagir avec la carte pour voir ce qui se trouve autour de vous, obtenir des directions, etc. Elle montre aux visiteurs du site que vous êtes une entreprise locale et que vous disposez d'un emplacement réel et physique. Il est très courant que les entreprises aient une carte sur leur page de contact.
Il existe des tonnes de plugins Google Maps, mais beaucoup d'entre eux sont maladroits et nécessitent soit un paiement pour les fonctionnalités complètes du plugin, soit un compte Google Developer avec des étapes compliquées qui produisent un résultat moins que souhaitable.
Tout cela étant dit, il existe un moyen très simple d'ajouter Google Maps à vos pages WordPress 6.0 sans plugins et sans un tas d'étapes compliquées. Plongeons-y.
Étape 1 : Créer un bloc HTML
Pour commencer, connectez-vous à la zone d'administration de votre site WordPress et accédez à la section "Pages" (flèche rouge dans l'image ci-dessus).
Cliquez sur la page à laquelle vous souhaitez ajouter votre fonctionnalité Google Maps (vous pouvez cliquer sur le nom de la page, dans mon cas "Contact" - flèche bleue dans l'image ci-dessus - ou simplement cliquer sur "Modifier" sous le nom de la page).
Si vous utilisez un thème de bloc comme Twenty Twenty Two, vous serez maintenant dans l'éditeur de blocs de votre page. Faites défiler jusqu'à l'endroit où vous souhaitez insérer votre carte.
Ensuite, cliquez sur l'icône "+" (le "Block Inserter" - flèche rouge dans l'image ci-dessus) pour insérer un bloc.
Recherchez "Groupe" dans le champ de recherche (encadré en vert sur la photo) et cliquez pour ajouter le bloc de groupe (flèche rouge). Cela vous permettra d'ajouter des paramètres personnalisés à l'élément de bloc.
Par exemple, cliquez sur l'option « Changer l'alignement » (flèche rouge) et sélectionnez « Pleine largeur » (flèche verte). Cela rendra la largeur du bloc qui contiendra notre carte interactive Google Maps pleine largeur.
Ensuite, cliquez sur le gros bouton "+" à l'intérieur du groupe (flèche rouge sur la photo ci-dessus). Recherchez « HTML » dans la barre de recherche (encadré en vert) et cliquez sur le bloc « HTML personnalisé » (flèche bleue).
Vous verrez maintenant qu'il est écrit "Write html…" (flèche rouge). C'est ici que nous ajouterons notre carte.
Étape 2 : Générer le code HTML intégré de Google Maps
Nous allons maintenant devoir générer notre carte avec Google Maps. Pour ce faire, ouvrez un nouvel onglet de navigateur et accédez à Google.com s'il ne s'agit pas de votre navigateur de recherche par défaut.
Tapez ensuite l'adresse que vous souhaitez afficher sur votre carte. Pour cet exemple, j'utiliserai l'Empire State Building (flèche rouge). Vous pouvez utiliser l'adresse exacte de votre entreprise pour cette partie (c'est-à-dire le numéro de rue, la rue, la ville, l'état et le code postal - ou tout ce que vous tapez pour les adresses internationales si vous n'êtes pas aux États-Unis).
Cliquez sur l'image de la carte qui apparaît pour votre adresse dans la page des résultats du moteur de recherche (flèche rouge dans l'image - elle se trouvera soit au milieu de la page, soit à droite, selon que vous avez tapé une adresse ou le nom de un endroit, comme moi).
Votre adresse apparaîtra maintenant sous forme de marqueur sur la carte en plein écran (flèche rouge dans l'image ci-dessus). Vous verrez également plusieurs icônes sous l'adresse ou le titre du lieu que vous avez recherché. Ces icônes incluent "Itinéraire", "Enregistrer", "À proximité", "Envoyer au téléphone" et "Partager". Cliquez sur l'icône "Partager" (flèche bleue).
Dans l'onglet "Partager" qui apparaît, cliquez sur l'onglet "Intégrer une carte" (flèche bleue sur la photo ci-dessus).
Dans cet onglet, vous verrez un aperçu de votre widget Google Maps intégré. Il y a une liste déroulante de taille sur le côté gauche du code (flèche verte) - vous pouvez sélectionner une taille prédéfinie ou choisir "Personnalisé" pour définir votre propre taille. Je sélectionne l'option "Personnalisé" (flèche rouge).
Ici, vous verrez les dimensions de ma carte personnalisée. Je vais définir la hauteur, ou la première dimension, sur 1200 (flèche rouge). Je laisserai la largeur définie sur 600. Vous pouvez cliquer sur "Aperçu en taille réelle" (flèche verte) pour afficher la carte dans une nouvelle fenêtre contextuelle en taille réelle (assurez-vous de désactiver les bloqueurs de fenêtres contextuelles si vous en avez activé pour éviter de bloquer la fenêtre). Quittez la fenêtre d'aperçu une fois que vous avez terminé.
Ensuite, cliquez sur le lien "Copier HTML" (flèche bleue). C'est le code que nous apporterons dans notre page WordPress.
Étape 3 : Coller le code HTML sur la page WordPress
Revenez à l'onglet du navigateur qui contient votre site Web WordPress. Cliquez sur le bloc HTML vide où il est écrit "Écrivez HTML ici…" et collez le code (flèche rouge) en appuyant sur ctrl + v sur votre clavier (cmd + v sur un mac).
Si vous cliquez sur l'option "Aperçu" dans la barre d'outils des blocs (flèche rouge), vous verrez maintenant votre carte affichée sur votre page (flèche verte). Cliquez à nouveau sur l'option "HTML" pour revenir au code HTML (flèche bleue).
Notre carte est intégrée à notre page, mais elle n'est pas réactive - ce qui signifie que si nous visualisons la carte sur un écran plus petit, comme une tablette ou un téléphone, sa taille ne s'adaptera pas à l'écran. Pour résoudre ce problème, nous devons ajouter un style personnalisé au code HTML.
Étape 4 : Rendre Google Maps responsive
je serai en utilisant le code que j'ai obtenu de ce site Web pour rendre l'intégration de Google Maps responsive. Faites défiler jusqu'à la section intitulée "Comment intégrer Google Maps de manière réactive" (flèche rouge). Ensuite, faites défiler jusqu'au deuxième ensemble de codes (flèche bleue).
Copiez tout de " ” 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).
Revenez sur WordPress. Cliquez avec votre souris tout au début du code HTML pour insérer ce nouveau code au début (flèche rouge). Appuyez sur ctrl+v pour coller votre code.
Enfin, cliquez à la toute fin du code HTML (flèche rouge) et tapez « ” pour tout fermer. Fondamentalement, ce que vous venez de faire est d'envelopper votre code HTML dans un style personnalisé. Ce style indique au navigateur du visiteur de redimensionner la carte en fonction de la taille de la fenêtre dans laquelle il la visualise.
Étape 5 : Ajustez le format d'image de la carte interactive
Il y a une dernière chose que nous devons faire - faites défiler vers le haut du code jusqu'à ce que vous voyiez "padding-bottom : 75 % ;" (flèche rouge). Ce morceau de code détermine le rapport d'aspect de la carte.
Parce que j'ai redimensionné ma carte à 1200 x 600, elle a un rapport hauteur/largeur de 2:1. Pour cela, je dois changer le pourcentage en "50%" (flèche rouge).
Si vous n'êtes pas sûr du pourcentage à utiliser pour votre carte, prenez simplement le format d'image (c'est-à-dire 16:9) et divisez le deuxième nombre par le premier pour obtenir votre pourcentage (9 divisé par 16 donne 56.25 %).
Cliquez sur "Mettre à jour" pour appliquer vos modifications (flèche bleue dans l'image ci-dessus), puis cliquez sur "Afficher la page" dans le coin inférieur gauche pour voir le résultat.
Vous devriez maintenant voir votre widget Google Maps affiché (flèche rouge dans l'image ci-dessus).
Vous pouvez tester la réactivité en réduisant la taille de votre navigateur, puis en revenant à la zone de la page Web contenant la carte.
C'est tout pour ce tutoriel ! Si vous l'avez aimé et que vous souhaitez apprendre à créer votre propre site Web WordPress professionnel à partir de zéro, vous pouvez vous inscrire à mon Cours WordPress 6.0 pour les non-codeurs sur Udemy, ou consultez mes autres tutoriels !
