Jak dodać mapę do swojej strony kontaktowej WordPress

Opublikowany: 2022-09-15

Zakładając, że chcesz się zapoznać z dodawaniem mapy do strony kontaktowej WordPress: Dodanie mapy do strony kontaktowej WordPress to świetny sposób na wizualne przedstawienie swojej lokalizacji odwiedzającym. Istnieje kilka różnych sposobów dodawania mapy do strony kontaktowej, w zależności od typu mapy, której chcesz użyć i od tego, jak bardzo chcesz kontrolować wygląd mapy. W tym artykule pokażemy, jak dodać mapę do swojej strony kontaktowej WordPress za pomocą widżetu Mapy Google.

W tej sekcji pokażemy, jak utworzyć stronę kontaktową i stronę z mapą w WordPress za pomocą wtyczki formularza kontaktowego 7 i naszego szablonu kontaktowego motywu. Wtyczka Contact Form 7 musi być zainstalowana i aktywowana w Twojej witrynie WordPress, aby działała. Czego potrzebuję, aby umieścić element iframe Map osadzony w programie Google Maps Visual Composer? Oto, jak możesz utworzyć stronę kontaktową i mapę z motywami WordPress. Obsługa klienta jest świadczona 24 godziny na dobę, siedem dni w tygodniu przez nagrodzonych Visualmodo pracowników. Aby znaleźć szerokość/długość geograficzną i przekonwertować swój adres na szerokość/długość geograficzną, przejdź na stronę http://www.latlong.net/convert-address-to-lat-long.html. Ponadto musisz utworzyć klucz interfejsu API Map Google, aby wprowadzić pole opcji mapy kontaktów na swoim komputerze.

Czy mogę dodać mapę do WordPressa?

Źródło: Mapbox

Dzięki WordPress możesz łatwo dodać Mapy Google do swojej witryny. Po prostu skopiuj kod lokalizacji znaleziony w Mapach Google po ich otwarciu i wprowadź swój adres w polu Mapy Google , a następnie wklej go do edytora WordPress.

Najlepszym sposobem na dodanie map do WordPressa jest zrobienie tego w prosty sposób. Wtyczki można użyć do ręcznego dodania Mapy Google do Twojej witryny lub samodzielnego utworzenia. Google API jest wymagane przez prawie wszystkie wtyczki map Google, które będę omawiać. Przejdź do określonej sekcji lub przeczytaj cały artykuł, klikając poniższy link. Omówimy szeroką gamę wtyczek, które będą wymagały klucza API. Ograniczając to, będziesz mógł uniemożliwić innym korzystanie z Twojego klucza API na stronach WordPress. Zalecam wyłączenie wtyczek i po prostu wstawienie obrazu Google Maps do swojej witryny.

Wtyczka WP Google Maps ułatwia dodawanie map Google do postów i stron WordPress. Możesz w kilka minut utworzyć miniaturę mapy z lightboxem dla Map Google za pomocą widżetów Map Google dla Map Google. Wśród dostępnych funkcji znajdują się niestandardowe rozmiary map Google, typy map (np. mapy drogowe), schematy kolorów i niestandardowe ikony pinezek map. Supsystic Ultimate Maps obsługuje alternatywne opcje map, takie jak Bing Maps, OpenStreetMap, Leaflet, Mapbox i Thunderforest, oprócz Bing Maps. Wtyczka wykorzystuje usługi Mapbox, takie jak Studio Styles i biblioteka GL JS. Możesz użyć wtyczki Interactive Geo Maps, aby utworzyć witrynę WordPress wyświetlającą interaktywne mapy. Możesz łatwo mapować lokalizacje sklepów za pomocą wtyczki WP Store Locator.

Wtyczki umożliwiają dostosowanie wyglądu mapy, dostarczanie niestandardowych etykiet dla pól wprowadzania i filtrowanie wyników według promienia. Dodanie Map Google do witryny WordPress za pomocą skrótów jest proste dzięki elastycznej mapie. Wtyczka Stellar Places dostępna w Android Market ma na celu pomóc w tworzeniu, zarządzaniu i wyświetlaniu lokalizacji w Mapach Google. Zawiera również funkcję usuwania znaczników metodą „przeciągnij i upuść” oraz nieograniczoną liczbę map do wyboru. Zapisany plik KML może również zawierać współrzędne centrum, adresy i adresy URL do wyświetlania mapy.

Jak utworzyć niestandardową mapę Google w WordPress?

Po kliknięciu Wtyczki dodaj nową funkcję. Wpisz nazwę Snazzy Maps w polu wyszukiwania, jeśli szukasz wtyczki. Po znalezieniu wystarczy kliknąć przycisk Instaluj, a zostanie on aktywowany. Teraz można uzyskać do niego dostęp w zakładce Wygląd.

Jak dodać ikonę mapy do WordPressa?

Dodanie ikony mapy do WordPressa to proces dwuetapowy. Najpierw musisz znaleźć ikonę mapy, którą lubisz i pobrać ją na swój komputer. Po drugie, musisz przesłać ikonę mapy do swojej witryny WordPress i dodać ją do swojego menu.

Niestandardowe ikony znaczników to doskonały sposób na spersonalizowanie mapy witryny. Tutaj znajdziesz trzy sposoby wykorzystania niestandardowych znaczników na mapie. Wszystkie kategorie ikon, znaczników specyficznych i nowych znaczników można zmienić. Jeśli masz ochotę na przygodę, możesz otrzymać bezpłatny zestaw ikon Map Google. Następnie w sekcji Dodaj nową kategorię kliknij przycisk Dodaj nową kategorię. Możesz wybrać ikonę znacznika, wprowadzając jej adres URL lub przesyłając obraz do Biblioteki mediów za pomocą przycisku Prześlij obraz. Przełącznik Retina Ready można włączyć, jak pokazano na poniższym zrzucie ekranu, jeśli wybierzesz ikonę, której chcesz użyć.

Strona kontaktowa z mapą HTML

Strona kontaktowa z mapą html to doskonały sposób na zapewnienie odwiedzającym kontaktu z Tobą. Pozwala im wypełnić formularz swoim imieniem, adresem e-mail i wiadomością. Zawiera również mapę, dzięki czemu mogą zobaczyć, gdzie się znajdujesz.

W tym ćwiczeniu zakodujesz mapę iframe , a także przejrzysz pojęcia, których nauczyłeś się na poprzednich lekcjach, oglądając wideo. Używamy elementu iframe w długim fragmencie kodu, aby załadować inną stronę HTML wewnątrz ramki na naszej stronie HTML. Na początek będziemy musieli utworzyć element formularza, który zawinie wszystkie formularze wejściowe w naszym komentarzu do formularza kontaktowego. Aby stworzyć funkcjonalny element formularza otwierającego, musimy dodać dwa elementy. Pierwszą czynnością, jaką podejmujemy, jest wysłanie przez formularz informacji wejściowych. Gdy użytkownik próbuje przesłać formularz bez podania swojego imienia i nazwiska, używamy wymaganego atrybutu w wierszu 4, aby go powiadomić. Aby przesłać formularz, wymagany atrybut musi być obecny.

Ta funkcjonalność jest dla nas wbudowana w HTML5. Kiedy wprowadzimy nasze ostatnie dane w linii 11, pojawi się przycisk formularza do przesłania. Tekst, który pojawia się po kliknięciu przycisku przesyłania, można zobaczyć w atrybucie wartości.

Jak dodać mapę Google w stopce WordPress

Logując się na konto administratora swojej witryny, możesz wprowadzić kod Google Map Code, a także dane Google Maps. Pod obszarem widżetów 1 znajdziesz obszar stopki 1. Możesz również użyć widżetu stopki Obszar drugi lub Widget stopki Obszar trzeci.

Mapy Google to najpopularniejsza aplikacja nawigacyjna dostępna na wszystkich platformach. Jeśli masz adres sklepu fizycznego, dodanie Map Google do witryny WordPress może ułatwić użytkownikom znajdowanie Twoich lokalizacji, takich jak biuro lub sklep detaliczny. Możesz go również użyć do poprawienia widoczności witryny w wyszukiwarce i przyciągnięcia do niej większego ruchu. Korzystanie z All in One SEO (AIOSEO) to najskuteczniejszy sposób dodania Map Google do Twojej witryny. Korzystając z niego, możesz poprawić swoje rankingi SEO bez konieczności kodowania czegokolwiek. Po skonfigurowaniu AIOSEO możesz dodać jedną lokalizację lub wiele lokalizacji do Map Google i wyświetlić je. Jeśli masz więcej niż jedną lokalizację fizyczną, musisz włączyć opcję „Wiele lokalizacji” na karcie „Lokalizacja” lokalnego SEO.

Google Maps Platform jest dostępna bezpłatnie dla wszystkich, a pierwsze 300 USD wydawane jest na zasadzie płatności zgodnie z rzeczywistym użyciem. Nie będą pobierać żadnych opłat, jeśli nie dokonasz ręcznej zamiany na płatne konto. Po utworzeniu klucza interfejsu API Map Google musisz edytować ustawienia mapy w AIOSEO Local SEO. Proces obejmuje blok, skrót, widżet lub kod PHP w Mapach Google . Umożliwia także dodanie niestandardowego znacznika do mapy i wybór spośród różnych stylów mapy. Po zweryfikowaniu ustawień możesz rozpocząć publikowanie strony. Sekcja Wygląd Twojej witryny WordPress może służyć do dodawania Map Google do swojej witryny.

Ta kategoria obejmuje panele widżetów WordPress. Gdy klikniesz ”, pojawi się blok widżetu „AIO Local – Mapa” i będziesz mógł zobaczyć swoją lokalizację na ekranie widżetu. Następnie możesz wybrać ustawienia widżetu. Jeśli masz wiele lokalizacji, możesz dodać tytuł, zmienić szerokość i wysokość mapy lub dodać lokalizację do mapy.

Jak dodać skrót Google Map do WordPressa?

Sekcję Mapy Google w lewym menu WordPress można edytować, klikając Edytuj strony. Klikając przycisk Edytuj w krótkim kodzie Zaawansowanych Map Google , możesz cofnąć 2HOVER. Pojawi się nowe wyskakujące okno z ustawieniami Map Google. 4 Możesz ustawić krótki kod Google Maps na tej stronie na różne sposoby.

5 kroków do dodania mapy do witryny WordPress

Wybierz żądany motyw mapy. Liczba różnych dostępnych motywów mapy może utrudnić wybór takiego, który najlepiej pasuje do Twojej sytuacji. Najlepiej zacząć od motywu mapy opartego na WordPressie, który został już wbudowany w platformę. Alternatywnie możesz stworzyć własny motyw mapy lub znaleźć darmowy. Musi istnieć wybrany dostawca map. Wybrany dostawca map będzie wymagany po wybraniu motywu mapy. Fakt, że jest tak wielu dostawców sprawia, że ​​trudno jest wybrać tego, który jest odpowiedni dla Ciebie. Jeśli chcesz dokonać zakupu, powinieneś sprawdzić dostawców, aby uzyskać bezpłatne wersje próbne. Możesz umieścić kod w tym poście. Kliknij ikonę menu obok nazwy mapy w panelu edycji, aby dodać kod do umieszczenia na stronie lub posta. Musisz teraz skopiować i wkleić osadzony kod. Przejdź do mapy. Mapę wystarczy dodać do swojego posta lub strony tylko raz. Aby to zrobić, wybierz „Umieść tę mapę” z ikony mapy, a następnie dotknij jej. W kroku 3 zobaczysz skopiowany kod do umieszczenia na stronie. Po wklejeniu tego kodu do pola Kod do osadzania pojawi się pole Kod do osadzania. Jeśli mapa nie działa, wypróbuj ją. Po kliknięciu przycisku „Podgląd na żywo” mapa wyświetli się automatycznie i będziesz mógł stwierdzić, czy jest poprawna. Proces jest zakończony, jeśli wszystko pójdzie gładko.

Formularz kontaktowy Mapa gotowa

Mapa formularza kontaktowego to rodzaj formularza kontaktowego, który jest przeznaczony do użycia z mapą. Formularz zawiera pola na imię i nazwisko użytkownika, adres e-mail i wiadomość. Formularz zawiera również mapę obszaru, na którym znajduje się użytkownik. Mapa jest automatycznie wypełniana lokalizacją użytkownika, a użytkownik może wybrać konkretną lokalizację na mapie.

Wypełniając formularz kontaktowy, użytkownicy mogą od razu się z Tobą skontaktować. Formularz kontaktowy umożliwia zażądanie lub kontrolę informacji o użytkowniku. Prosty formularz kontaktowy może zwiększyć szanse na konwersję leada. Aby dodać Google Maps do formularza kontaktowego za pomocą Contact Form 7, musisz najpierw pobrać wtyczkę Google Maps Extension dla WordPress i postępować zgodnie z instrukcjami zawartymi w tym samouczku. Contact Form 7 to dobry wybór jako formularz kontaktowy przy tworzeniu Twojej strony internetowej. Możesz użyć tej wtyczki, aby szybko rozpocząć pracę, zwłaszcza jeśli dopiero zaczynasz kodować. Dodaj pole mapy do formularza CF7 za pomocą rozszerzenia Google Maps dla CF7.

Formularz kontaktowy 7 został wstępnie skonfigurowany z gotowym do użycia szablonem, który wygląda tak: Po kliknięciu przycisku Mapy Google pojawi się wyskakujące okienko, które wyświetli pole mapy z opcją dodania. Odwiedzający mogą znaleźć swoją lokalizację, umieszczając na niej znaczniki lub korzystając z funkcji wyszukiwania. Każdy formularz zawiera krótki kod, który służy do osadzenia go na stronie.