В этой статье я покажу вам, как добавить адаптивную карту Google Maps на веб-страницу WordPress (например, на страницу контактов) без использования плагина. Я буду использовать WordPress 6.0 для этого урока, а также тему Twenty Twenty Two, которая является темой по умолчанию для этой версии WordPress.
Функция Google Maps позволяет отображать местоположение вашей компании на интерактивной карте, позволяя посетителям сайта легко видеть, где вы находитесь, и взаимодействовать с картой, чтобы видеть, что еще находится вокруг вас, прокладывать маршруты и т. д. Она демонстрирует посетителям сайта что вы местный бизнес и имеете реальное, физическое местонахождение. Компании очень часто размещают карту на своей странице контактов.
Существует множество плагинов Google Maps, но многие из них неуклюжи и требуют либо оплаты за все функции плагина, либо учетной записи разработчика Google со сложными шагами, которые дают менее чем желаемый результат.
При всем при этом существует действительно простой способ добавить Карты Google на страницы WordPress 6.0 без плагинов и множества сложных шагов. Давайте углубимся в это.
Шаг 1. Создайте блок HTML
Для начала войдите в админку своего сайта WordPress и перейдите в раздел «Страницы» (красная стрелка на изображении выше).
Нажмите на страницу, на которую вы хотите добавить функцию Google Maps (вы можете нажать на название страницы, в моем случае «Контакты» — синяя стрелка на изображении выше — или просто нажать «Изменить» под названием страницы).
Если вы используете блочную тему, такую как Twenty Twenty Two, теперь вы окажетесь в редакторе блоков для своей страницы. Прокрутите вниз до места, куда вы хотите вставить карту.
Затем нажмите значок «+» («Вставка блоков» — красная стрелка на изображении выше), чтобы вставить блок.
Найдите «Группа» в поле поиска (обведено зеленым на фото) и нажмите, чтобы добавить групповой блок (красная стрелка). Это позволит вам добавить некоторые пользовательские настройки к блочному элементу.
Например, нажмите «Изменить выравнивание» (красная стрелка) и выберите «Полная ширина» (зеленая стрелка). Это сделает ширину блока, который будет содержать нашу интерактивную карту Google Maps, полной шириной.
Далее нажмите большую кнопку «+» внутри группы (красная стрелка на фото выше). Найдите «HTML» в строке поиска (обведено зеленым) и нажмите на блок «Пользовательский HTML» (синяя стрелка).
Вы увидите, что теперь он говорит «Написать html…» (красная стрелка). Здесь мы добавим нашу карту.
Шаг 2. Создайте HTML-код для вставки Google Maps
Теперь нам нужно сгенерировать нашу карту с помощью Google Maps. Для этого откройте новую вкладку браузера и перейдите на Google.com, если это не ваш поисковый браузер по умолчанию.
Затем введите адрес, который вы хотите отобразить на карте. В этом примере я буду использовать Эмпайр Стейт Билдинг (красная стрелка). Вы можете использовать точный адрес вашей компании для этой части (т. е. номер дома, улица, город, штат и почтовый индекс — или любой другой адрес, который вы вводите для международных адресов, если вы не в США).
Нажмите на изображение карты, которое появляется для вашего адреса на странице результатов поисковой системы (красная стрелка на изображении — она будет либо в середине страницы, либо справа, в зависимости от того, ввели ли вы адрес или имя место, как я).
Теперь ваш адрес появится в виде маркера на полноэкранной карте (красная стрелка на изображении выше). Вы также увидите несколько значков под адресом или названием места, которое вы искали. Эти значки включают «Маршруты», «Сохранить», «Рядом», «Отправить на телефон» и «Поделиться». Нажмите на значок «Поделиться» (синяя стрелка).
На появившейся вкладке «Поделиться» нажмите на вкладку «Встроить карту» (синяя стрелка на фото выше).
На этой вкладке вы увидите предварительный просмотр вашего встроенного виджета Google Maps. В левой части кода есть раскрывающийся список размеров (зеленая стрелка) — вы можете выбрать готовый размер или выбрать «Пользовательский», чтобы установить свой собственный размер. Я выберу опцию «Пользовательский» (красная стрелка).
Здесь вы увидите размеры моей пользовательской карты. Я установлю высоту или первое измерение на 1200 (красная стрелка). Я оставлю ширину равной 600. Вы можете нажать «Просмотр фактического размера» (зеленая стрелка), чтобы отобразить карту в новом всплывающем окне в полном размере (убедитесь, что вы отключили блокировщики всплывающих окон, если они у вас есть). включен, чтобы не загораживать окно). Выйдите из окна предварительного просмотра, когда закончите.
Затем нажмите ссылку «Копировать HTML» (синяя стрелка). Это код, который мы поместим на нашу страницу WordPress.
Шаг 3: Вставьте HTML-код на страницу WordPress
Вернитесь на вкладку браузера, содержащую ваш веб-сайт WordPress. Нажмите на пустой блок HTML, где написано «Напишите HTML здесь…», и вставьте код (красная стрелка), нажав Ctrl+V на клавиатуре (cmd+v на Mac).
Если вы нажмете опцию «Предварительный просмотр» на панели инструментов блока (красная стрелка), вы увидите, что ваша карта отображается на вашей странице (зеленая стрелка). Нажмите на опцию «HTML», чтобы вернуться к HTML-коду (синяя стрелка).
У нас есть наша карта, встроенная в нашу страницу, но она не адаптируется — это означает, что если мы просматриваем карту на меньшем экране, например, на планшете или телефоне, она не изменит свой размер в соответствии с размером экрана. Чтобы исправить это, нам нужно добавить некоторые пользовательские стили в HTML-код.
Шаг 4. Сделайте Карты Google адаптивными
Я буду используя код, который я получил с этого сайта чтобы сделать вставку Google Maps отзывчивой. Прокрутите вниз до раздела «Как быстро встроить карты Google» (красная стрелка). Затем прокрутите вниз до второго набора кода (синяя стрелка).
Скопируйте все из « ” 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).
Вернитесь к WordPress. Щелкните мышью в самом начале HTML-кода, чтобы вставить этот новый код в начало (красная стрелка). Нажмите ctrl+v, чтобы вставить код.
Наконец, щелкните в самом конце HTML-кода (красная стрелка) и введите « », чтобы закрыть все. По сути, то, что вы только что сделали, заключает ваш HTML-код в пользовательский стиль. Этот стиль указывает браузеру посетителя изменить размер карты в зависимости от размера окна, в котором он ее просматривает.
Шаг 5: Настройте соотношение сторон интерактивной карты
Осталось сделать еще одну вещь — прокрутить код вверх, пока не увидите «padding-bottom: 75%;» (Красная стрелка). Этот фрагмент кода определяет соотношение сторон карты.
Поскольку я изменил размер своей карты на 1200 x 600, у нее соотношение сторон 2:1. Для этого мне нужно изменить процент на «50%» (красная стрелка).
Если вы не уверены, какой процент вы должны использовать для своей карты, просто возьмите соотношение сторон (например, 16:9) и разделите второе число на первое, чтобы получить процентное соотношение (9 разделить на 16, равно 56.25%).
Нажмите «Обновить», чтобы применить изменения (синяя стрелка на изображении выше), затем нажмите «Просмотр страницы» в левом нижнем углу, чтобы увидеть результат.
Теперь вы должны увидеть виджет Google Maps (красная стрелка на изображении выше).
Вы можете проверить скорость отклика, уменьшив размер окна браузера, а затем прокрутив страницу до той области веб-страницы, где есть карта.
Вот и все! Если вам понравилось и вы хотите узнать, как сделать свой собственный профессиональный веб-сайт WordPress с нуля, вы можете зарегистрироваться в моем Курс WordPress 6.0 для непрограммистов на Udemy, или ознакомьтесь с другими моими уроками!
