Share
Ce que vous allez créerSi vous êtes comme moi, vous utilisez Google Maps pour ajouter des cartes à vos sites WordPress depuis des années, mais vous êtes parfois un peu frustré par le manque d'options de personnalisation..
Dans ce tutoriel, je vais vous montrer comment utiliser un plugin WordPress alternatif appelé MapSVG qui vous permet d'ajouter des cartes interactives à votre site. Vous pouvez ensuite personnaliser vos cartes avec des couleurs, des espaces réservés et des popovers, et laisser vos utilisateurs les rechercher.
Je vous expliquerai comment configurer une carte à l'aide du plug-in, comment la personnaliser et comment l'ajouter à une page de votre site..
Pour suivre ce tutoriel, vous aurez besoin de:
Vous pouvez créer une carte de n’importe où dans le monde, mais pour ce didacticiel, je vais créer une carte du Royaume-Uni, comme c’est d’où je viens, et la marquer ici avec mes lieux de vacances préférés. Qui sait, je peux vous inspirer!
La première chose à faire est de vous connecter à l'API Google Maps afin que le plug-in puisse ajouter des marqueurs pour chacun de vos emplacements..
Pour obtenir une clé API, accédez à la console de développeur Google et suivez les instructions fournies. Je ne les détaillerai pas en détail car Google vous expliquera les étapes à suivre. Elles pourraient changer à la lecture de cet article..
Vous devez activer les éléments suivants dans le panneau de configuration de l'API Google (et non dans les écrans de plug-ins de l'administrateur de votre site):
Une fois que vous avez terminé, copiez votre clé API Google et revenez sur votre site. Sur l’écran principal de MapSVG, sélectionnez le API Google bouton. Collez dans votre clé API et enregistrez.
Maintenant vous êtes prêt à créer une carte.
Pour créer une carte, cliquez sur le bouton MapSVG lien dans votre menu d'administration, puis cliquez sur Nouvelle carte SVG en haut à gauche de l'écran. À partir de là, vous pouvez choisir dans une liste de cartes SVG fournies avec le plugin. Commencez à taper le nom du pays dont vous voulez une carte, et le plugin se remplira automatiquement pour vous.
Une fois que vous avez sélectionné votre pays, le plugin générera automatiquement une carte que vous pourrez personnaliser:
Commencez par lui donner un nom dans le Titre champ situé à droite, cliquez sur le bouton sauvegarder bouton, puis vous pouvez commencer à le personnaliser.
Lorsque vous importez votre carte pour la première fois, celle-ci sera noire sur un fond gris. Personnalisons cela.
Cliquer sur Couleurs dans le menu déroulant de la page d'édition de carte, pour accéder à l'écran d'édition de couleur.
Passez maintenant un peu de temps à peaufiner les couleurs de votre carte à l’aide des sélecteurs de couleurs. Vous pouvez personnaliser la couleur d'arrière-plan, la couleur de base de vos régions, la couleur de la bordure, la couleur de survol, la couleur sélectionnée et plus encore..
Lorsque vous modifiez le survol et les états sélectionnés, vous pouvez définir une couleur personnalisée ou utiliser la Luminosité réglage pour utiliser une version plus lumineuse ou plus terne de la couleur de base.
Je vais utiliser une palette de bleus pour que ma carte ne soit pas trop criarde.
Voici à quoi ressemble ma carte avec un comté sélectionné et un autre dans l'état de survol:
Vous pouvez également modifier les couleurs de différentes régions pour donner à votre carte plus d’intérêt visuel. Faites cela en cliquant sur Editer les régions au dessus de la carte ou Les régions dans la liste déroulante principale. Sélectionnez chaque région, puis sélectionnez le sélecteur de couleur à droite de la liste des régions. Il est logique de stocker tous les codes hexadécimaux de vos couleurs ailleurs pour pouvoir les copier et les coller..
Encore une fois, je m'en tiens à ma palette de blues:
Prenez le temps de les modifier. La partie délicate consiste à organiser les couleurs de manière à ce que les comtés ou les États voisins soient de couleurs différentes.!
Maintenant que votre carte a l'apparence que vous souhaitez, il est temps d'ajouter des champs que vous pouvez utiliser pour vos marqueurs. Vous faites cela en utilisant le Base de données option dans le menu déroulant.
Clique sur le Editer les champs icône en haut du volet pour commencer à ajouter des champs. Je vais ajouter ce qui suit pour mes marqueurs:
Vous pouvez ajouter ce que vous voulez. Prenez le temps de réfléchir au type d'informations que les visiteurs de votre site voudront connaître sur les emplacements de votre carte. Par exemple, si vous cartographiez les bureaux de votre entreprise, les utilisateurs voudront un nom, une adresse et éventuellement des informations sur le type d'entreprise géré par ce bureau ou sur ses heures d'ouverture..
Le domaine essentiel est Marqueur-sans cela, vous ne pourrez pas ajouter ces marqueurs à votre carte.
Vous pouvez utiliser une gamme de types de champs depuis les zones de texte pour sélectionner des champs, ce qui signifie que vous pouvez prédéfinir les types d’emplacement que vous ajoutez et les utiliser. Pour une entreprise de vente au détail, cela signifie que vous pouvez sélectionner les grands magasins, les magasins situés en dehors de la ville ou les petites boutiques, par exemple..
Lorsque vous modifiez le champ, vous pouvez ajouter un texte d'aide pour les autres personnes qui le modifient, et vous pouvez spécifier si le champ sera interrogeable. Il est logique d’avoir le maximum de contenu textuel consultable..
Maintenant pour la partie amusante!
Votre carte est entièrement configurée et vous avez les champs de la base de données, mais vous devez toujours ajouter ces marqueurs..
Tout d'abord, vous devez ajouter les données de vos emplacements dans la base de données. Sélectionnez le Base de données onglet de la liste déroulante si vous n'y êtes pas déjà, puis cliquez sur le bouton + signe en haut à droite pour ajouter chaque endroit à tour de rôle.
Continuez à ajouter jusqu'à ce que vous les ayez tous. Voici les miens:
Maintenant que vous avez les emplacements dans la base de données, il est temps d'ajouter le marqueur pour chacun.
Pour chaque emplacement, commencez à taper l'adresse dans le champ Marqueur champ. Le plugin suggérera automatiquement un emplacement au fur et à mesure que vous tapez:
Sélectionnez le bon emplacement dans la liste fournie par le plug-in, puis enregistrez votre position. Répétez cette opération pour tous les emplacements de votre base de données..
Une fois que vous avez terminé, votre liste d'emplacements ressemblera à ceci:
Vous avez maintenant votre carte, vos positions et tous vos marqueurs. Mais vous n'êtes pas encore fini! L'étape suivante consiste à configurer les popovers. Ainsi, lorsque quelqu'un visualise la carte, il peut survoler les emplacements que vous avez ajoutés et voir votre description et votre image (ou tout ce que vous avez ajouté à votre propre carte)..
Sélectionnez le actes onglet dans le menu déroulant. Faites défiler jusqu'à la Clic de marqueur section et vérifier la Montrer popover case à cocher. Assurez-vous que c'est cette boîte-il y en a quelques-uns sur cet écran, pour différents popovers.
Une fois que vous avez fait cela, vous devez configurer le modèle pour les popovers. Clique le Lien de modèle de popover d'objet de base de données pour afficher un volet d'édition vide. Vous devrez renseigner ceci en utilisant une combinaison de HTML et de champs du plugin..
Voici le balisage que j'utilise dans le mien:
prénom
la description
#each images/chaque
Le texte à l'intérieur des accolades sera le même texte que celui qui a été défini comme titre de champ pour chacun des champs que vous avez ajoutés à la base de données. Si vous ne vous souvenez plus de ce que vous avez ajouté, retournez à la Base de données onglet et ils seront les en-têtes dans la liste.
Le type de champ qui est différent est celui des images. Ici, vous devez ajouter l’espace réservé pour récupérer le source de la vignette. Le code ci-dessus parcourt toutes les images ajoutées au champ images. Ainsi, si vous en ajoutez plusieurs, elles seront toutes affichées. Pour plus d'informations à ce sujet, voir la documentation du plugin.
Maintenant, essayez de cliquer sur l’un des marqueurs et vous verrez un popover:
Conseil: Si vous ne pouvez pas voir une popover, c'est peut-être parce que vous avez coché la mauvaise Montrer popover ou modifiez le mauvais modèle. Assurez-vous que la case que vous avez cochée était dans le Clic de marqueur section de la actes onglet et que le modèle que vous modifiez est Modèle popover d'objet de base de données. Vous pouvez sélectionner des modèles dans la liste déroulante du menu Modèles languette.
Pour que les utilisateurs puissent voir les détails de vos positions et rechercher le contenu de votre carte, vous devez configurer le répertoire utilisé pour la recherche et vous assurer que la recherche est activée..
Aller au Annuaire languette. dans le Annuaire bascule, sélectionnez Sur. Sous La source de données, sélectionner Base de données.
Clique sur le Élément de répertoire lien de modèle pour modifier le modèle utilisé pour le répertoire. Vous devrez ajouter vos champs de la même manière que vous avez fait lors de l'ajout des fenêtres popovers, sauf que cette fois-ci, vous n'utilisez que des espaces réservés et aucun code HTML. Je ne fais qu'ajouter prénom, mais vous voudrez peut-être inclure plus.
Remarque: si vous ne souhaitez pas qu'une liste d'emplacements apparaisse à côté de votre carte, activez / désactivez cette option. Annuaire à De et ne vous inquiétez pas du modèle.
Maintenant frappé le sauvegarder bouton pour enregistrer votre carte. Il est temps de l'ajouter à une page de votre site.
Ouvrir (ou créer) la page à laquelle vous ajouterez la carte.
Où vous voulez que la carte apparaisse, cliquez sur le bouton Insérer MapSVG icône qui ressemble à un marqueur noir.
Sélectionnez la carte que vous souhaitez insérer dans la liste et le plug-in ajoutera un code court à votre page pour afficher la carte. Maintenant, enregistrez votre page et testez-la.
Voici ma carte:
Et lorsque je sélectionne l'un des emplacements, voici le popover:
L'utilisation du plug-in MapSVG vous permet d'ajouter des cartes à votre site avec beaucoup plus d'options de personnalisation que l'intégration d'une carte Google. Si vous souhaitez que votre carte ressemble à une carte Google mais inclue les popovers et le répertoire, vous pouvez le faire..
Ce tutoriel a montré une manière de créer une carte en utilisant le plugin. Pour en savoir plus sur toutes ses fonctionnalités et voir comment ajouter des cartes personnalisées puissantes, consultez la documentation..
Accentsconagua