Добавление интерактивных карт на сайт WordPress — это отличный способ улучшить визуальное восприятие информации, показать расположение объектов или маршруты. Однако стандартных решений часто недостаточно для создания уникальных карт с кастомным дизайном и поведением. В этой статье мы рассмотрим, как с помощью плагина Yelly и немного кода добавить уникальные карты в WordPress, которые будут выделять ваш сайт.
Почему стоит использовать Yelly для карт в WordPress
Плагин Yelly — это мощный инструмент для интеграции интерактивных карт в WordPress без необходимости глубоких знаний JavaScript и API популярных картографических сервисов. Он поддерживает кастомизацию маркеров, всплывающих подсказок, слоёв и многое другое.
Основные преимущества Yelly:
- Простота настройки через визуальный интерфейс.
- Поддержка нескольких карт на одной странице.
- Возможность добавлять свои SVG-маркеры и кастомные стили.
- Оптимизация производительности за счёт ленивой загрузки.
Если стандартных опций плагина недостаточно, можно расширить функционал с помощью PHP и JavaScript.
Создание уникальной карты с кастомными маркерами
Рассмотрим пример, как создать карту с уникальными маркерами, которые будут не просто точками, а кастомными иконками с анимацией.
Шаг 1. Создаём карту через Yelly
После установки и активации плагина перейдите в раздел его настроек и создайте новую карту. Добавьте основные точки с геокоординатами.
Шаг 2. Добавляем кастомные SVG-маркеры
Для кастомных маркеров создадим SVG-иконки. Например, создадим простой красный маркер с анимацией пульсации.
function yellyru_custom_svg_marker() {
return '<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="10" fill="red">
<animate attributeName="r" values="10;15;10" dur="2s" repeatCount="indefinite" />
</circle>
</svg>';
}Эту функцию можно использовать при генерации маркеров через JavaScript.
Шаг 3. Подключаем кастомные маркеры на карту
Вставляем кастомный код JavaScript, который будет использовать SVG, возвращаемый из PHP, для маркеров.
add_action('wp_footer', 'yellyru_add_custom_marker_script');
function yellyru_add_custom_marker_script() {
if (!is_page('page-with-map')) return; // Замените на ID или slug страницы с картой
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
const mapInstance = window.yellyMaps && window.yellyMaps[0]; // Получаем первую карту Yelly
if (!mapInstance) return;
const svgMarker = `<?php echo yellyru_custom_svg_marker(); ?>`;
// Добавим кастомный маркер в координаты 55.751244, 37.618423 (Москва)
const customMarker = mapInstance.addMarker({
position: { lat: 55.751244, lng: 37.618423 },
icon: {
url: 'data:image/svg+xml;base64,' + btoa(svgMarker),
scaledSize: { width: 30, height: 30 }
},
title: 'Кастомный маркер Yelly'
});
});
</script>
<?php
}Этот код добавит на карту маркер с нашей SVG-иконкой и анимацией.
Расширение функционала карты: фильтрация и динамическое обновление
Часто требуется не просто вывести карту с маркерами, а добавить интерактивность — фильтры по категориям, динамическое обновление точек без перезагрузки страницы.
Фильтрация маркеров по категориям
Для реализации фильтрации создадим простой интерфейс с чекбоксами и обновим отображаемые маркеры в зависимости от выбранных категорий.
<div id="yelly-filter">
<label><input type="checkbox" value="restaurants" checked> Рестораны</label>
<label><input type="checkbox" value="parks" checked> Парки</label>
</div>Далее в JS нужно отслеживать изменение состояния чекбоксов и обновлять маркеры:
document.getElementById('yelly-filter').addEventListener('change', function() {
const checkedCategories = Array.from(this.querySelectorAll('input[type=checkbox]:checked')).map(cb => cb.value);
// Предполагаем, что у нас есть массив всех маркеров с полем category
mapInstance.clearMarkers();
allMarkers.forEach(markerData => {
if (checkedCategories.includes(markerData.category)) {
mapInstance.addMarker(markerData);
}
});
});Динамическое обновление маркеров через AJAX
Чтобы не загружать сразу все точки, можно подгружать маркеры по AJAX в зависимости от области карты.
Пример AJAX-запроса в WordPress для получения маркеров:
add_action('wp_ajax_yellyru_get_markers', 'yellyru_get_markers_callback');
add_action('wp_ajax_nopriv_yellyru_get_markers', 'yellyru_get_markers_callback');
function yellyru_get_markers_callback() {
$bounds = isset($_POST['bounds']) ? $_POST['bounds'] : null;
if (!$bounds) wp_send_json_error('Нет данных о границах');
// Пример выборки маркеров из БД по границам
$markers = yellyru_get_markers_within_bounds($bounds);
wp_send_json_success($markers);
}
function yellyru_get_markers_within_bounds($bounds) {
// Здесь логика выборки из БД по координатам и фильтрам
return [
[
'position' => ['lat' => 55.75, 'lng' => 37.61],
'title' => 'Пример маркера',
'category' => 'restaurants'
]
];
}В JS нужно отправлять координаты видимой области карты и обновлять маркеры на карте из полученного ответа.
Лучшие практики и советы при работе с картами в WordPress
При работе с интерактивными картами важно учитывать производительность, безопасность и удобство пользователя.
Оптимизация загрузки карт
Используйте ленивую загрузку карт только при скролле до блока с картой. Это уменьшит время первой загрузки страницы.
Обработка ошибок и fallback
Всегда добавляйте обработчики ошибок при загрузке данных и показывайте пользователю понятные сообщения в случае проблем.
Безопасность AJAX-запросов
Используйте нонсы WordPress для защиты AJAX-запросов от CSRF-атак. Передавайте и проверяйте их в PHP-обработчиках.
Заключение
С помощью плагина Yelly и кастомного кода вы можете создать на WordPress по-настоящему уникальные и интерактивные карты, которые будут соответствовать индивидуальным требованиям вашего сайта. Используйте SVG-маркеры, динамическую подгрузку и фильтры, чтобы улучшить пользовательский опыт и выделиться среди конкурентов.
Для скачивания плагина и подробной документации посетите страницу Yelly на WPSHOP.