Comment ajouter des cartes Bing à votre site Web WordPress

Si, pour une raison quelconque, vous recherchez une alternative à Google Maps, Bing Maps est le choix évident.

Vous pouvez vous demander quelle est la différence, et la réponse est – pas grand-chose. Bing et Google proposent tous deux des cartes précises et correctes. Que pourriez-vous demander de plus? Eh bien, d’une part, Bing offre une résolution plus élevée, ce qui rend Bing Maps meilleur pour trouver son chemin dans les endroits exigus. Cela signifie également que cela peut être mieux pour les ordinateurs de bureau, lorsque la haute résolution peut vraiment entrer en jeu.

De plus, certaines personnes veulent simplement éviter Google partout où elles le peuvent, et la réponse de Microsoft à Google Maps, étant fonctionnellement très similaire, représente la solution parfaite.

Il existe deux façons simples d’ajouter Bing Maps à votre site Web WordPress. L’un implique le propre générateur de code de Bing, et un autre un plugin gratuit et un compte Bing. Nous allons vous montrer les deux.

Commençons!

Comment ajouter des cartes Bing à l’aide d’un code d’intégration

La première chose à faire est d’aller au Cartes Bing site Web et trouvez l’emplacement que vous voulez.

Dans le Suite menu, trouvez le Intégrer une carte commander.

Vous verrez un nouvel onglet vous permettant de personnaliser la carte que vous souhaitez intégrer.

Nous laisserons toutes les options sur leurs valeurs par défaut, mais il suffit de dire que vous avez plusieurs options ici. Vous pouvez changer le Taille de la carte quelle que soit la taille et le rapport hauteur/largeur de votre choix (avec un minimum de 250 et un maximum de 800 pixels). Vous pouvez également modifier le Type de carte dans statique, qui peut se charger un peu plus vite que la valeur par défaut déplaçable, ce qui permet à vos visiteurs de zoomer et de se déplacer. Les Styles de carte le menu vous permet de basculer entre la valeur par défaut route et aérien (photo) vues. Enfin, vous pouvez basculer Agrandir le plan et Obtenir des directions liens.

Cela fait, cliquez sur le Générer le code bouton.

Copiez le code généré et vous êtes prêt.

Ensuite, nous allons vous montrer comment intégrer ce code dans un article.

Si vous utilisez le Gutenberg éditeur de blocs, c’est très simple. Ouvrez une publication et cliquez sur le signe + pour choisir un bloc. Choisir la HTML personnalisé bloquer.

Ensuite, collez le code généré dans votre bloc.

Et votre carte apparaîtra dans votre publication, aussi simple que cela !

Au cas où vous utilisez Élémentor, la procédure est sensiblement la même. Sélectionnez simplement le HTML personnalisé widget dans votre menu de gauche, faites-le glisser là où vous le souhaitez sur la page et collez le code que vous avez obtenu de Bing.

Et avec le Classique éditeur, c’est encore plus simple, même si vous perdez une partie de la qualité WYSIWYG fournie par Elementor : assurez-vous d’avoir le texte l’onglet sélectionné, puis collez le code à l’endroit où vous souhaitez qu’il apparaisse dans un article ou une page.

Comment ajouter des cartes Bing à l’aide d’un plugin

Ce qui précède fonctionne très bien pour une carte simple. Mais supposons que vous opérez à partir d’un éventail d’emplacements différents, ou que vous souhaitiez ajouter des épingles ou des formes, pour vous approprier une carte Bing. Vous pouvez faire tout cela, et plus encore, avec un plugin. Nous allons vous aider à démarrer sur l’un des plus communs – une bonne solution globale néanmoins.

Le plugin que nous utiliserons est Carte WP Bing Pro. Vous devrez l’installer et l’activer. Si vous n’êtes pas sûr de ce qu’est un plugin WordPress ou de la façon d’installer et d’activer un plugin WordPress, nous avons des tutoriels pour cela.

Ensuite, vous devez créer un compte Bing afin d’obtenir une clé API. Pour ce faire, visitez bingmapsportal.com et S’identifier.

Connectez-vous avec les données de votre compte Microsoft et cliquez sur Oui, créons un nouveau compte ! Vous serez redirigé vers le formulaire de création de compte, que vous devez remplir avec vos données avant de cliquer sur le Créer bouton. Après avoir créé le compte, accédez à Mon compte/Mes clés.

Vous devrez remplir un formulaire de demande pour créer une clé. Une fois cela fait, vous pouvez créer une clé en cliquant sur le bouton Créer bouton.

Vous pouvez maintenant le copier à partir du tableau ci-dessous.

Ensuite, vous devez configurer le plugin. Utilisez le menu de gauche de votre tableau de bord WordPress pour accéder à WP Bing Map Pro/WP Bing Map Pro.

Le plugin s’ouvrira sur l’écran Cartes. Mais d’abord, nous voulons jeter un oeil à la réglages généraux filtrer. Vous devez coller la clé que vous avez copiée dans le CLÉ API case et cliquez sauvegarder.

Clique le + pour ajouter une carte et nommez-la. Nous l’avons nommé Notre emplacement. Puis clique sauvegarder.

Maintenant, nous avons un shortcode pour Notre emplacement. Copier ce shortcode dans un bloc de shortcode rendra une carte du monde. Il faut donc le réduire un peu. Disons que notre emplacement est près du pont du 6 octobre au Caire, en Égypte. Nous allons commencer à éditer la carte en cliquant sur le bouton éditer.

Nous allons faire un panoramique et un zoom sur la carte pour trouver notre emplacement. Vous pouvez utiliser la fonction de recherche sur le site Web de Bing pour le faire pour votre emplacement, ou vous pouvez utiliser le Latitude du centre de la carte et Carte Centre Longitude commandes. Nous ressentons un Zoom de 15 nous convient.

Ici, vous pouvez également modifier la carte Titre, les dimensions (Largeur et Hauteur), ainsi que de choisir parmi les six types de carte. Une fois fait, nous allons sauvegarder notre Carte. Vous pouvez également copier l’image de la carte dans votre presse-papiers en cliquant sur le bouton Capturer une vue de carte bouton.

Si vous souhaitez épingler votre position sur la carte, vous devrez jeter un œil à l’écran Épingles. Clique le + bouton signer pour ajouter une épingle.

Ensuite, vous devez modifier votre code PIN en lui donnant un Nom de la broche, une option Adresse (ou définissez-le à l’aide des coordonnées de Latitude et Longitude), choisissez ou téléchargez un Icône pour cela, et sauvegarder ce.

Pour le voir sur votre carte, retournez à la Plans l’écran, puis accédez à l’écran d’édition pour Notre emplacement. Vous y trouverez le Épingles de la carte languette. Pour ajouter une épingle à une carte, recherchez l’épingle que vous voulez (Siège social dans notre cas), et cliquez sur le Ajouter icône.

Une fois que vous revenez au Carte onglet, vous trouverez votre épingle collée à la carte. Vous devez sauvegarder ton Carte et copiez le shortcode [ourlocation] pour une utilisation ultérieure.

Si vous utilisez l’éditeur de blocs Gutenberg et que vous souhaitez afficher votre carte dans le cadre d’un article, ajoutez un nouveau bloc de code court en cliquant sur le signe + et en choisissant un bloc shortcode. Pâte [ourlocation] dans son domaine.

Et maintenant, votre carte sera affichée dans le cadre d’un article ou d’une page.

Si vous utilisez un autre éditeur de page, la procédure est à peu près la même que celle décrite ci-dessus : pour Elementor, sélectionnez le Petit code widget dans le menu de gauche, faites-le glisser où vous le souhaitez sur votre page ou dans votre message, et collez le shortcode de votre carte dans le champ Shortcode.

Si vous utilisez l’éditeur classique, définissez simplement votre entrée sur du texte et collez le shortcode. WordPress fera le reste pour vous.

En conclusion

Comme vous l’avez vu, afficher une carte Bing sur votre site Web est très simple et ne prend quasiment pas de temps. Si vous recherchez une carte simple, vous pouvez simplement l’intégrer à l’aide du code généré par Bing Maps. Si, d’un autre côté, vous recherchez une solution complexe pour, disons, une gamme d’emplacements dans différentes villes, pays ou même dans le monde, si vous cherchez à ajouter des épingles, des lignes ou des formes pour rendre votre carte plus informative pour votre visiteurs, nous vous suggérons de vous créer un compte Bing et un plugin tel que WP Bing Map Pro et d’utiliser ses fonctions de personnalisation – à peine abordées dans cet article – pour créer une carte ou un ensemble de cartes qui conviennent à votre marque et au style de votre site Web. Suite.