Если вам нужно организовать каталог карт на сайте WordPress, который будет автоматически обновляться и удобно управляться из админки, плагин Yelly — отличное решение. В этой статье мы разберем, как создать такой каталог с помощью Yelly, а также дополним функционал кастомным кодом для расширенной фильтрации и вывода.
Что такое Yelly и зачем он нужен для каталога карт
Yelly — это плагин для WordPress, который позволяет создавать интерактивные карты с маркерами, категориями и поиском. В отличие от статичных изображений, карты через Yelly можно динамически наполнять, фильтровать и отображать на любых страницах.
Основные преимущества использования Yelly для каталога карт:
- Удобное создание и редактирование карт через админку WordPress.
- Возможность добавлять метки с описаниями, ссылками и пользовательскими полями.
- Категоризация карт и меток для удобного фильтра и навигации.
- Поддержка AJAX для динамического обновления контента без перезагрузки страницы.
Для наших целей мы создадим каталог с несколькими картами, каждая из которых имеет набор маркеров, и реализуем вывод с возможностью фильтрации по категориям.
Установка и базовая настройка плагина Yelly
Для начала установите плагин Yelly из репозитория WordPress или скачайте с официального сайта WPShop. После активации перейдите в раздел «Yelly» в админке.
Создайте новую карту, задайте название и добавьте маркеры. Для каждого маркера можно указать название, описание, координаты и назначить категорию. Категории задаются в разделе «Категории маркеров».
Таким образом, вы создадите первую карту с маркерами и категориями. Но для каталога нам нужно вывести все карты и дать пользователям возможность фильтровать их.
Создаем автоматический вывод каталога карт с фильтрацией
Для удобства мы сделаем вывод каталога через кастомный шорткод с параметрами. Этот шорткод будет выводить все карты Yelly с их маркерами и фильтром по категориям.
Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:
function yellyru_render_map_catalog($atts) {
$atts = shortcode_atts(array('category' => ''), $atts, 'yelly_catalog');
// Получаем карты через WP_Query
$maps = get_posts(array(
'post_type' => 'yelly_map',
'numberposts' => -1
));
if(empty($maps)) {
return '<p>Карт не найдено.</p>';
}
$output = '<div class="yelly-catalog">';
foreach($maps as $map) {
// Получаем маркеры карты
$markers = get_post_meta($map->ID, 'yelly_markers', true);
if(empty($markers)) continue;
// Фильтрация маркеров по категории, если указана
if($atts['category']) {
$markers = array_filter($markers, function($marker) use($atts) {
return in_array($atts['category'], $marker['categories']);
});
}
if(empty($markers)) continue;
$output .= '<h3>'.esc_html($map->post_title).'</h3>';
$output .= '<ul class="yelly-markers-list">';
foreach($markers as $marker) {
$output .= '<li><strong>'.esc_html($marker['title']).'</strong><br>'.esc_html($marker['description']).'</li>';
}
$output .= '</ul>';
}
$output .= '</div>';
return $output;
}
add_shortcode('yelly_catalog', 'yellyru_render_map_catalog');Этот шорткод [yelly_catalog category="slug_kategorii"] выводит все карты с маркерами, отфильтрованными по категории. Если параметр category не указан, выводятся все маркеры.
Расширяем функционал: динамическая AJAX-фильтрация карт
Чтобы сделать каталог удобнее, добавим AJAX-фильтрацию, чтобы посетители могли выбирать категории без перезагрузки страницы.
Для этого создадим форму выбора категории и скрипт, который будет подгружать результаты через AJAX.
HTML формы и контейнер для вывода
В шаблоне или через шорткод добавьте следующий блок:
<div id="yelly-filter">
<select id="yelly-category-select">
<option value="">Все категории</option>
<?php
$cats = get_terms(array('taxonomy' => 'yelly_marker_category', 'hide_empty' => false));
foreach($cats as $cat) {
echo '<option value="'.esc_attr($cat->slug).'">'.esc_html($cat->name).'</option>';
}
?>
</select>
</div>
<div id="yelly-catalog-container"></div>JavaScript для AJAX-запроса
Добавьте в футер темы или через wp_enqueue_script свой файл с этим кодом:
jQuery(document).ready(function($){
function yellyru_load_catalog(category) {
$.ajax({
url: yellyru_ajax_object.ajax_url,
type: 'POST',
data: {
action: 'yellyru_load_catalog',
category: category
},
success: function(response) {
$('#yelly-catalog-container').html(response);
}
});
}
$('#yelly-category-select').on('change', function() {
var cat = $(this).val();
yellyru_load_catalog(cat);
});
// Загрузка всех при инициализации
yellyru_load_catalog('');
});PHP обработчик AJAX-запроса
Добавьте в functions.php или плагин:
function yellyru_ajax_load_catalog() {
$category = sanitize_text_field($_POST['category'] ?? '');
echo yellyru_render_map_catalog(array('category' => $category));
wp_die();
}
add_action('wp_ajax_yellyru_load_catalog', 'yellyru_ajax_load_catalog');
add_action('wp_ajax_nopriv_yellyru_load_catalog', 'yellyru_ajax_load_catalog');Не забудьте локализовать скрипт, чтобы передать AJAX URL:
function yellyru_enqueue_scripts() {
wp_enqueue_script('yellyru-script', get_template_directory_uri() . '/js/yellyru.js', array('jquery'), null, true);
wp_localize_script('yellyru-script', 'yellyru_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php')
));
}
add_action('wp_enqueue_scripts', 'yellyru_enqueue_scripts');Примеры полезных плагинов для улучшения каталога
Для расширения функционала каталога карт с Yelly можно использовать следующие плагины из WPShop:
- Clearfy Pro — оптимизация и ускорение загрузки сайта, что важно при работе с интерактивными картами.
- WPRemark — позволяет добавлять отзывы и комментарии к картам и меткам.
- ABC Pagination — удобная пагинация для больших каталогов.
Использование этих плагинов сделает ваш каталог более удобным, быстрым и функциональным.
Заключение: советы по созданию и поддержке каталога карт
При создании каталога карт на WordPress с помощью Yelly важно тщательно планировать структуру данных, чтобы потом легко масштабировать и управлять содержимым. Используйте категории и метаданные для гибкой фильтрации.
Регулярно обновляйте плагин Yelly и сопутствующие инструменты для безопасности и совместимости с новыми версиями WordPress. Для оптимизации скорости загрузки применяйте кеширование и минимизацию скриптов.
Надеюсь, это руководство поможет вам быстро создать удобный автоматический каталог карт, который будет радовать пользователей и легко управляться через админку WordPress.