W tym artykule pokażę, jak dodać responsywną mapę Google Maps do strony WordPress (tj. do strony Kontakt) bez użycia wtyczki. W tym samouczku będę używał WordPressa 6.0, a także motywu Twenty Twenty Two, który jest domyślnym motywem tej wersji WordPressa.
Funkcja Mapy Google umożliwia wyświetlanie lokalizacji Twojej firmy na interaktywnej mapie, dzięki czemu odwiedzający witrynę mogą łatwo zobaczyć, gdzie się znajdujesz i wchodzić w interakcję z mapą, aby zobaczyć, co jeszcze jest wokół Ciebie, uzyskać wskazówki itp. Pokazuje odwiedzającym witrynę że prowadzisz lokalną firmę i masz rzeczywistą, fizyczną lokalizację. Firmy bardzo często mają mapę na swojej stronie kontaktowej.
Istnieje mnóstwo wtyczek Google Maps, ale wiele z nich jest nieporęcznych i wymaga zapłaty za pełne funkcje wtyczki lub konta programisty Google ze skomplikowanymi krokami, które dają mniej niż pożądane wyniki.
Biorąc to wszystko pod uwagę, istnieje naprawdę prosty sposób na dodanie Map Google do stron WordPress 6.0 bez wtyczek i bez wielu skomplikowanych kroków. Zanurzmy się w to.
Krok 1: Utwórz blok HTML
Na początek zaloguj się do obszaru administracyjnego witryny WordPress i przejdź do sekcji „Strony” (czerwona strzałka na powyższym obrazku).
Kliknij stronę, do której chcesz dodać swoją funkcję Mapy Google (możesz kliknąć nazwę strony, w moim przypadku „Kontakt” – niebieska strzałka na powyższym obrazku – lub po prostu kliknij „Edytuj” pod nazwą strony).
Jeśli używasz motywu blokowego, takiego jak Twenty Twenty Two, znajdziesz się teraz w Edytorze bloków dla swojej strony. Przewiń w dół do lokalizacji, w której chcesz wstawić mapę.
Następnie kliknij ikonę „+” („Block Inserter” – czerwona strzałka na powyższym obrazku), aby wstawić blok.
Wyszukaj „Grupa” w polu wyszukiwania (zaznaczonym na zielono na zdjęciu) i kliknij, aby dodać blok grupy (czerwona strzałka). Umożliwi to dodanie niestandardowych ustawień do elementu bloku.
Na przykład kliknij opcję „Zmień wyrównanie” (czerwona strzałka) i wybierz „Pełna szerokość” (zielona strzałka). Dzięki temu szerokość bloku, który będzie zawierał naszą interaktywną mapę Google Maps, będzie mieć pełną szerokość.
Następnie kliknij duży przycisk „+” w grupie (czerwona strzałka na powyższym zdjęciu). Wyszukaj „HTML” na pasku wyszukiwania (zaznaczonym na zielono) i kliknij blok „Niestandardowy HTML” (niebieska strzałka).
Zobaczysz, że teraz mówi „Write html…” (czerwona strzałka). Tutaj dodamy naszą mapę.
Krok 2: Wygeneruj osadzony kod HTML w Mapach Google
Teraz musimy wygenerować naszą mapę za pomocą Map Google. Aby to zrobić, otwórz nową kartę przeglądarki i przejdź do Google.com, jeśli nie jest to domyślna przeglądarka wyszukiwania.
Następnie wpisz adres, który chcesz wyświetlić na mapie. W tym przykładzie użyję Empire State Building (czerwona strzałka). W tej części możesz użyć dokładnego adresu swojej firmy (tj. numeru ulicy, ulicy, miasta, województwa i kodu pocztowego – lub dowolnego innego wpisu dla adresów międzynarodowych, jeśli nie znajdujesz się w USA).
Kliknij obraz mapy, który pojawia się dla Twojego adresu na stronie wyników wyszukiwania (czerwona strzałka na obrazku – będzie to albo na środku strony, albo po prawej stronie, w zależności od tego, czy wpisałeś adres, czy nazwę miejsce, tak jak ja).
Twój adres pojawi się teraz jako znacznik na mapie pełnoekranowej (czerwona strzałka na powyższym obrazku). Zobaczysz też kilka ikon pod adresem lub tytułem wyszukiwanego miejsca. Ikony te obejmują „Wskazówki”, „Zapisz”, „W pobliżu”, „Wyślij na telefon” i „Udostępnij”. Kliknij ikonę „Udostępnij” (niebieska strzałka).
Na wyświetlonej karcie „Udostępnij” kliknij kartę „Umieść mapę” (niebieska strzałka na powyższym zdjęciu).
Na tej karcie zobaczysz podgląd umieszczonego widżetu Map Google. Po lewej stronie kodu znajduje się menu rozmiaru (zielona strzałka) – możesz wybrać gotowy rozmiar lub wybrać „Niestandardowy”, aby ustawić własny rozmiar. Wybiorę opcję „Niestandardowa” (czerwona strzałka).
Tutaj zobaczysz wymiary mojej mapy niestandardowej. Ustawię wysokość lub pierwszy wymiar na 1200 (czerwona strzałka). Zostawię szerokość ustawioną na 600. Możesz kliknąć „Podgląd rzeczywistego rozmiaru” (zielona strzałka), aby wyświetlić mapę w nowym wyskakującym okienku w pełnym rozmiarze (upewnij się, że wyłączyłeś wszelkie blokowania wyskakujących okienek, jeśli je masz włączony, aby uniknąć blokowania okna). Po zakończeniu wyjdź z okna podglądu.
Następnie kliknij link „Kopiuj HTML” (niebieska strzałka). To jest kod, który wprowadzimy na naszą stronę WordPress.
Krok 3: Wklej kod HTML do strony WordPress
Wróć do karty przeglądarki zawierającej Twoją witrynę WordPress. Kliknij pusty blok HTML, w którym jest napisane „Napisz tutaj HTML…” i wklej kod (czerwona strzałka), naciskając ctrl + v na klawiaturze (cmd + v na komputerze Mac).
Jeśli klikniesz opcję „Podgląd” na pasku narzędzi Blokuj (czerwona strzałka), zobaczysz teraz swoją mapę na swojej stronie (zielona strzałka). Kliknij ponownie opcję „HTML”, aby powrócić do kodu HTML (niebieska strzałka).
Nasza mapa jest osadzona na naszej stronie, ale nie jest ona responsywna – co oznacza, że jeśli oglądamy mapę na mniejszym ekranie, takim jak tablet lub telefon, nie dopasuje jej rozmiaru do ekranu. Aby to naprawić, musimy dodać niestandardowy styl do kodu HTML.
Krok 4: Spraw, aby Mapy Google były responsywne
będę używając kodu, który dostałem z tej strony aby osadzanie Map Google było responsywne. Przewiń w dół do sekcji oznaczonej „Jak odpowiednio osadzić Mapy Google” (czerwona strzałka). Następnie przewiń w dół do drugiego zestawu kodu (niebieska strzałka).
Skopiuj wszystko z „ ” 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).
Wróć do WordPressa. Kliknij myszą na samym początku kodu HTML, aby wstawić nowy kod na początku (czerwona strzałka). Naciśnij ctrl+v, aby wkleić kod.
Na koniec kliknij na sam koniec kodu HTML (czerwona strzałka) i wpisz „ ”, aby wszystko zamknąć. Zasadniczo to, co właśnie zrobiłeś, to opakowanie kodu HTML w niestandardowy styl. Ta stylizacja nakazuje przeglądarce odwiedzającego zmianę rozmiaru mapy na podstawie rozmiaru okna, w którym ją przegląda.
Krok 5: Dostosuj proporcje interaktywnej mapy
Jest jeszcze jedna rzecz, którą musimy zrobić – przewiń z powrotem na górę kodu, aż zobaczysz „padding-bottom: 75%;” (czerwona strzała). Ten fragment kodu określa proporcje mapy.
Ponieważ zmieniłem rozmiar mojej mapy do 1200 x 600, ma ona proporcje 2:1. W tym celu muszę zmienić procent na „50%” (czerwona strzałka).
Jeśli nie jesteś pewien, jakiego procentu użyć dla swojej mapy, po prostu weź proporcje (np. 16:9) i podziel drugą liczbę przez pierwszą, aby otrzymać procent (9 podzielone przez 16 to 56.25%).
Kliknij „Aktualizuj”, aby zastosować zmiany (niebieska strzałka na powyższym obrazku), a następnie kliknij „Wyświetl stronę” w lewym dolnym rogu, aby zobaczyć wynik.
Powinieneś teraz zobaczyć swój widżet Map Google (czerwona strzałka na powyższym obrazku).
Możesz przetestować responsywność, zmniejszając rozmiar przeglądarki, a następnie przewijając z powrotem do obszaru strony internetowej, na którym znajduje się mapa.
To wszystko w tym samouczku! Jeśli Ci się spodobało i chcesz nauczyć się tworzyć od podstaw własną profesjonalną stronę WordPress, możesz zapisać się na mój Kurs WordPress 6.0 dla osób niebędących programistami na Udemylub sprawdź moje inne samouczki!
