Share
Ce veți creaDacă sunteți ca mine, utilizați Google Maps pentru a adăuga hărți pe site-urile dvs. WordPress de ani de zile, dar uneori sunteți puțin frustrat în legătură cu lipsa opțiunilor de personalizare.
În acest tutorial, vă voi arăta cum să utilizați o alternativă - un plugin WordPress numit MapSVG care vă permite să adăugați hărți interactive pe site-ul dvs. Puteți personaliza apoi hărțile dvs. cu culori, substituenți și popovers și le permiteți utilizatorilor să le caute.
Vă voi arăta cum să configurați o hartă utilizând pluginul, cum să îl personalizați și cum să îl adăugați la o pagină din site-ul dvs..
Pentru a urma acest tutorial, veți avea nevoie de:
Puteți crea o hartă de oriunde în lume, dar pentru acest tutorial o să creez o hartă a Regatului Unit, de unde sunt și să o marchez cu locurile mele preferate de vacanță aici. Cine știe, te pot inspira!
Primul lucru pe care trebuie să-l faceți este să vă conectați la API-ul Google Maps, astfel încât pluginul să poată adăuga marcaje pentru fiecare locație.
Pentru a obține o cheie API, accesați consola dezvoltatorului Google și urmați instrucțiunile de acolo. Nu voi trece prin ele în detaliu, deoarece Google vă va conduce prin pași și ei se pot schimba până când veți citi acest lucru.
Va trebui să activați următoarele în panoul de control Google API (nu în ecranele de pluginuri din administratorul site-ului dvs.):
Odată ce ați făcut acest lucru, copiați cheia dvs. API Google și reveniți la site-ul dvs. În ecranul principal MapSVG, selectați Google API buton. Inserați cheia API și salvați-o.
Acum sunteți gata să creați o hartă.
Pentru a crea o hartă, faceți clic pe MapSVG în meniul de administrare, apoi faceți clic pe Noua hartă SVG în partea din stânga sus a ecranului. De aici, puteți selecta o listă de hărți SVG care apar împreună cu pluginul. Începeți să introduceți numele țării în care doriți o hartă și pluginul va fi completat automat pentru dvs..
După ce ați selectat țara dvs., pluginul va genera automat o hartă pentru a vă personaliza:
Începeți prin a da un nume în Titlu în partea dreaptă, faceți clic pe Salvați , apoi puteți începe personalizarea.
Atunci când importați pentru prima dată harta dvs., va fi negru pe un fundal gri. Să customizăm asta.
Click pe colorate din meniul derulant din pagina de editare a hărții, pentru a accesa ecranul de editare a culorilor.
Acum, petreceți puțin timp ajustând culorile din hartă utilizând selectorul de culori. Puteți personaliza culoarea de fundal, culoarea de bază pentru regiunile dvs., culoarea de margine, culoarea de hover, culoarea selectată și multe altele.
Când editați stările hover și selectate, puteți seta o culoare personalizată sau utilizați strălucire setarea pentru a utiliza o versiune mai strălucitoare sau duller de bază de culoare.
Voi folosi o paletă de blues, așa că harta mea nu arată prea înfricoșătoare.
Iată cum arată harta mea cu un județ selectat și altul în starea de hover:
Puteți, de asemenea, să modificați culorile fiecărei regiuni, pentru a vă oferi mai multă viziune pentru hartă. Faceți acest lucru dând clic pe Editați regiunile deasupra hărții sau Regiuni în meniul principal. Selectați fiecare regiune și apoi selectați selectorul de culori din partea dreaptă a listei de regiuni. Este logic să aveți toate codurile hexagonale pentru culorile stocate în altă parte, astfel încât să le puteți copia și să le lipiți.
Din nou, stau cu paleta mea de blues:
Luați ceva timp pentru a le schimba. Partea dificilă constă în aranjarea culorilor, astfel încât județele sau statele vecine sunt în culori diferite!
Acum, că ați făcut-o pe harta dvs. așa cum doriți, este timpul să adăugați câmpuri pe care le puteți utiliza pentru marcatorii dvs. Faceți acest lucru folosind Bază de date opțiune din meniul derulant.
Faceți clic pe Editați câmpurile în partea de sus a panoului pentru a începe să adăugați câmpuri. Voi adăuga următoarele pentru marcajele mele:
Puteți adăuga orice doriți. Acordați-vă timp pentru a vă gândi la ce fel de informații vor vizita persoanele dvs. site-ul dvs. despre locațiile de pe hartă. De exemplu, dacă cartografiați birourile companiei dvs., oamenii vor dori un nume și o adresă și, eventual, informații despre ce fel de afacere se ocupă de birou sau despre orele de deschidere.
Câmpul esențial este Marker-fără aceasta, nu veți putea adăuga acești markeri pe hartă.
Puteți utiliza o serie de tipuri de câmpuri din casetele de text pentru a selecta câmpuri, ceea ce înseamnă că puteți predefini tipurile de locații pe care le adăugați și le utilizați. Pentru o afacere cu amănuntul, aceasta înseamnă că ați putea selecta care dintre locațiile dvs. sunt magazine mari, în afara orașelor sau buticuri mici, de exemplu.
Când editați câmpul, puteți adăuga text de ajutor pentru alte persoane care editează câmpul și puteți specifica dacă câmpul va putea fi căutat. Este logic să aveți la dispoziție cât mai mult conținut de text posibil.
Acum, pentru partea distractivă!
Harta dvs. este configurată și aveți câmpurile bazei de date, dar trebuie să adăugați acele marcatori.
În primul rând, trebuie să adăugați datele din locațiile dvs. în baza de date. Selectează Bază de date din lista drop-down dacă nu sunteți deja în ea, apoi faceți clic pe + semnează în partea dreaptă sus pentru a adăuga fiecare locație la rândul său.
Continuați să adăugați până când le aveți pe toate. Aici sunt ale mele:
Acum că aveți locațiile din baza de date, este timpul să adăugați marcatorul pentru fiecare.
Pentru fiecare locație, începeți să introduceți adresa în Marker camp. Pluginul va sugera automat o locație pe măsură ce tastați:
Selectați locul potrivit din lista pe care plugin-ul dvs. vă oferă și apoi salvați locația. Repetați acest lucru pentru toate locațiile din baza dvs. de date.
După ce ați terminat, lista dvs. de locații va arăta astfel:
Acum aveți harta, locațiile și toate marcatorii. Dar nu ați terminat încă! Următorul pas este să configurați popovers. În acest fel, când cineva văd harta, poate să se deplaseze peste locațiile pe care le-ați adăugat și să vedeți descrierea și imaginea dvs. (sau orice altceva pe care l-ați adăugat pe harta dvs.).
Selectează acţiuni din meniul derulant. Derulați în jos până la Clic pe marcator și verificați Afișați popup Caseta de bifat. Asigurați-vă că este această cutie - sunt câteva dintre ele pe acest ecran, pentru diferite popovers.
Odată ce ați făcut acest lucru, trebuie să configurați șablonul pentru popovers. Apasă pe DB Object popover template link pentru a afișa un panou de editare gol. Va trebui să populați acest lucru utilizând o combinație de câmpuri HTML și câmpuri din plugin.
Iată marcajele pe care le folosesc în a mea:
Nume
Descriere
#exista imagini/fiecare
Textul din interiorul bretelelor va fi același text care a fost configurat ca titlul câmpului pentru fiecare dintre câmpurile pe care le-ați adăugat la baza de date. Dacă nu vă puteți aminti ce ați adăugat, reveniți la Bază de date și vor fi rubricile din listă.
Singurul tip de câmp care este diferit este imaginile. Aici trebuie să adăugați substituentul pentru a prelua sursa pentru miniatură. Codul de mai sus trece prin orice imagini adăugate în câmpul de imagini, deci dacă adăugați mai multe, toate vor fi afișate. Pentru mai multe detalii, consultați documentația pluginului.
Încercați să faceți clic pe unul dintre marcatori și veți vedea un popup:
Sfat: dacă nu vedeți un pop-up, este posibil să fiți pentru că ați verificat greșit Afișați popup sau editează un șablon greșit. Asigurați-vă că caseta de selectare pe care ați verificat-o a fost în Clic pe marcator secțiunea din acţiuni și că șablonul pe care îl editați este DB Object popover template. Puteți selecta șabloane din lista derulantă din Template-uri fila.
Pentru ca utilizatorii să poată vedea detaliile locațiilor dvs. și să caute conținutul în hartă, va trebui să configurați directorul utilizat pentru căutare și să vă asigurați că căutarea este activată.
Mergeți la Director tab. În Director comutați, selectați Pe. Sub Sursă de date, Selectați Bază de date.
Faceți clic pe Element de director șablon pentru a edita șablonul utilizat pentru director. Va trebui să adăugați câmpurile într-un mod similar celui pe care l-ați făcut atunci când adăugați popovers, cu excepția cazului în care utilizați doar substituenții și nu există cod HTML. Doar adaug Nume, dar poate doriți să includeți mai multe.
Notă: dacă nu doriți ca o listă de locații să apară lângă hartă, comutați Director la de pe și nu vă faceți griji cu privire la șablon.
Acum, apăsați pe Salvați pentru a salva harta. Este timpul să-l adăugați la o pagină din site-ul dvs..
Deschideți (sau creați) pagina pe care o adăugați la hartă.
Unde doriți să apară harta, faceți clic pe Introduceți MapSVG pictogramă, care arată ca un marcaj negru.
Selectați harta pe care doriți să o inserați din listă, iar pluginul va adăuga un scurtcod pe pagina dvs. pentru a afișa harta. Acum salvați pagina dvs. și testați-o.
Iată harta mea:
Și când selectez una dintre locații, iată-l:
Utilizarea pluginului MapSVG vă oferă o modalitate de a adăuga hărți pe site-ul dvs. cu mai multe opțiuni de personalizare decât să încorporați pur și simplu o hartă Google. Dacă doriți ca harta să arate ca o hartă Google, dar să includă popovers și director, puteți face acest lucru.
Acest tutorial a demonstrat o modalitate de a crea o hartă folosind pluginul. Pentru a afla despre toate caracteristicile sale și pentru a vedea cum puteți adăuga hărți personalizate puternice, consultați documentația.
Accentsconagua