Вопрос или проблема
Я ищу способ реализовать этот код на своем сайте wordpress как можно эффективнее
https://developers.google.com/maps/documentation/javascript/styling
и я хочу, чтобы JS загружался только на постах/страницах, где я буду использовать карту. Не могу понять, с чего начать!
ИЗМЕНЕНИЕ:
А что если я использую часть enqueue внутри функции? Это хорошая конструкция?
function x_shortcode_google_map( $atts, $content = null ) {
extract( shortcode_atts( array(
'id' => '',
'class' => '',
'style' => '',
'lat' => '',
'lng' => '',
'drag' => '',
'zoom' => '',
'zoom_control' => '',
'height' => '',
'hue' => '',
'no_container' => '',
'api_key' => ''
), $atts, 'x_google_map' ) );
static $count = 0; $count++;
$id = ( $id != '' ) ? $id : 'x-google-map-' . $count;
$class = ( $class != '' ) ? 'x-map x-google-map ' . esc_attr( $class ) : 'x-map x-google-map';
$style = ( $style != '' ) ? 'style="' . $style . '"' : '';
$height = ( $height != '' ) ? 'style="padding-bottom: ' . $height . ';"' : '';
$no_container = ( $no_container == 'true' ) ? '' : ' with-container';
$js_params = array(
'lat' => ( $lat != '' ) ? $lat : '40.7056308',
'lng' => ( $lng != '' ) ? $lng : '-73.9780035',
'drag' => ( $drag == 'true' ),
'zoom' => ( $zoom != '' ) ? $zoom : '12',
'zoomControl' => ( $zoom_control == 'true' ),
'hue' => ( $hue != '' ) ? $hue : '',
);
$data = cs_generate_data_attributes( 'google_map', $js_params );
$script_url="https://maps.googleapis.com/maps/api/js";
if ( $api_key ) {
$api_key = esc_attr( $api_key );
$script_url = add_query_arg( array( 'key' => $api_key ), $script_url );
}
wp_register_script( 'cs-google-maps', $script_url );
wp_enqueue_script( 'cs-google-maps' );
$output = "<div id=\"{$id}\" class=\"{$class}{$no_container}\" {$data} {$style}><div class=\"x-map-inner x-google-map-inner\" {$height}></div>" . do_shortcode( $content ) . "</div>";
return $output;
}
add_shortcode( 'x_google_map', 'x_shortcode_google_map' );
Прежде всего, правильно подключите JS API Google Maps. ищите функцию, которая подключена к wp_enqueue_scripts и wp_enqueue_script() для подключения Google Maps API
function wp_mk_scripts() {
if ( is_singular() ) {
wp_enqueue_script( 'wp-mk-maps-js', 'https://maps.googleapis.com/maps/api/js', array( 'jquery' ), null, true );
wp_enqueue_script( 'wp-mk-gmaps-function', get_stylesheet_directory_uri() . '/js/maps.js', array( 'jquery' ), null, true );
}
}
add_action( 'wp_enqueue_scripts', 'wp_mk_scripts' );
затем в файле theme_folder/js/maps.js вставьте код карты между тегами <script></script> в Стиль Google Maps
Теперь вызовите <div id="map"></div> в любом месте шаблона, чтобы отобразить карту.
Ответ или решение
Внедрение Google Maps на WordPress: Подробное Руководство
Внедрение карт Google в ваш сайт на WordPress — задача, которая может показаться сложной, но с правильным подходом это достаточно легко реализовать. В данном руководстве мы рассмотрим, как корректно подключить JavaScript-код Google Maps на страницы или в посты вашего сайта, чтобы он загружался только тогда, когда это необходимо.
Шаг 1: Подключение Google Maps API
Прежде всего, вам нужно зарегистрироваться в Google Cloud и получить API-ключ для Google Maps. После получения ключа вы можете перейти к его подключению в ваш WordPress.
- Создайте функцию для подключения скриптов и добавьте её к хуку
wp_enqueue_scripts. Эта функция позволит загружать скрипты Google Maps только на страницах, где они используются.
function wp_enqueue_google_maps() {
if ( is_singular() ) { // Проверяем, является ли страница одиночным постом или страницей
$api_key = 'ВАШ_API_КЛЮЧ'; // Замените на ваш ключ
wp_enqueue_script( 'google-maps-api', 'https://maps.googleapis.com/maps/api/js?key=' . $api_key, array(), null, true );
wp_enqueue_script( 'custom-maps', get_template_directory_uri() . '/js/maps.js', array('google-maps-api'), null, true );
}
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_google_maps' );Шаг 2: Создание JavaScript-файла
Создайте файл maps.js в папке вашего шаблона, в каталоге js. В этом файле будет содержаться логика инициализации карты.
function initMap() {
var mapOptions = {
center: { lat: 40.7056308, lng: -73.9780035 },
zoom: 12,
draggable: true, // Перетаскивание карты
styles: [ /* Ваши стили карты */ ] // Стили из документации Google
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.7056308, -73.9780035),
map: map,
title: 'Место'
});
}
// Убеждаемся, что функция будет вызвана только после загрузки скрипта
google.maps.event.addDomListener(window, 'load', initMap);Шаг 3: Использование Shortcode
Теперь добавьте возможность использования шорткода для создания карты в контенте ваших постов и страниц.
function x_shortcode_google_map( $atts ) {
$atts = shortcode_atts( array(
'id' => 'map',
'lat' => '40.7056308',
'lng' => '-73.9780035',
'zoom' => '12',
), $atts );
// Создаем HTML-код для отображения карты
return '<div id="' . esc_attr($atts['id']) . '" style="width: 100%; height: 400px;"></div>';
}
add_shortcode('google_map', 'x_shortcode_google_map');Теперь вы можете использовать шорткод [google_map] в любом месте на вашем сайте, чтобы вставить карту.
Шаг 4: SEO Оптимизация
- Используйте соответствующие заголовки и подзаголовки (H1, H2, H3) для улучшения восприятия и индексации.
- Добавляйте атрибуты
altк изображениям и<time>к дате, если у вас есть интерактивные элементы. - Убедитесь, что у вашего кода есть минимальная задержка загрузки, что улучшает пользовательский опыт и SEO.
Заключение
Внедрение Google Maps на ваш WordPress-сайт — это не только полезный функционал, но и способ улучшить пользовательский опыт. Следуя данному руководству, вы сможете эффективно интегрировать карты в ваш сайт и настроить их так, чтобы они загружались только на страницах, где это необходимо.