Как автоматизировать создание и обновление панорамных галерей в WordPress

Панорамные галереи становятся всё более популярным способом показать объекты, помещения или пейзажи в формате 360 градусов. В WordPress можно создавать такие галереи вручную, но если у вас много панорамных изображений или вы хотите регулярно обновлять галереи, лучше автоматизировать процесс. В этой статье разберём, как создать и обновлять панорамные галереи автоматически с помощью плагинов и собственного кода.

Почему автоматизация панорамных галерей важна для WordPress

Если у вас сайт с большим количеством панорамных фото, например, для агентства недвижимости, туризма или музея, вручную добавлять и обновлять галереи становится неудобно и долго. Автоматизация позволяет:

• Экономить время на загрузке и размещении изображений.
• Обеспечить единообразие оформления галерей.
• Автоматически обновлять содержимое при добавлении новых панорам.
• Минимизировать ошибки и забывания при обновлении.

Для реализации нам понадобятся плагины с поддержкой панорам и подключение к файловой системе или внешнему хранилищу, откуда мы будем брать новые изображения.

Выбор плагина для панорамных галерей с автоматизацией

Среди популярных плагинов для 360-градусных изображений можно выделить:

• WPVR (WordPress Virtual Tour) — удобный плагин с поддержкой 360-градусных туров и возможностью импортировать изображения пакетно.
• iPanorama 360 — платный плагин с визуальным редактором, подходит для создания интерактивных панорам.
• 360 Panorama — бесплатный плагин с базовыми функциями, хорош для простых проектов.

Для автоматизации обновления галерей рекомендуем WPVR, так как он поддерживает API и импорт из папки на сервере.

Пример автоматического импорта панорам с помощью WPVR

WPVR позволяет создавать туры из заранее загруженных панорамных изображений. Чтобы автоматизировать обновление, можно загружать новые панорамы в определённую папку и запускать скрипт импорта.

Создание собственного решения для автоматизации с помощью кода

Если вам нужна тонкая настройка, можно написать скрипт, который будет:

• Сканировать папку с новыми панорамными изображениями.
• Создавать новые записи или обновлять существующие в кастомном типе постов «панорамы».
• Генерировать шорткод или JSON-конфигурацию для отображения галереи.

Пример функции wpeditor_create_update_panorams()

function wpeditor_create_update_panorams() {
    $upload_dir = wp_upload_dir();
    $panorama_dir = $upload_dir['basedir'] . '/panoramas';

    if (!is_dir($panorama_dir)) {
        return; // Папка с панорамами не найдена
    }

    $files = scandir($panorama_dir);
    foreach ($files as $file) {
        if (in_array(pathinfo($file, PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png'])) {
            $image_path = $panorama_dir . '/' . $file;
            $title = pathinfo($file, PATHINFO_FILENAME);

            // Проверяем, есть ли уже пост с таким заголовком
            $existing = get_page_by_title($title, OBJECT, 'panorama');

            if (!$existing) {
                // Создаём новый пост
                $post_id = wp_insert_post([
                    'post_title' => $title,
                    'post_type' => 'panorama',
                    'post_status' => 'publish'
                ]);

                if ($post_id) {
                    // Добавляем изображение как миниатюру
                    $attachment_id = wpeditor_attach_image_to_post($image_path, $post_id);
                    set_post_thumbnail($post_id, $attachment_id);
                }
            }
        }
    }
}

function wpeditor_attach_image_to_post($file_path, $post_id) {
    $filetype = wp_check_filetype(basename($file_path), null);

    $attachment = array(
        'post_mime_type' => $filetype['type'],
        'post_title'     => sanitize_file_name(basename($file_path)),
        'post_content'   => '',
        'post_status'    => 'inherit'
    );

    $attach_id = wp_insert_attachment($attachment, $file_path, $post_id);
    require_once(ABSPATH . 'wp-admin/includes/image.php');
    $attach_data = wp_generate_attachment_metadata($attach_id, $file_path);
    wp_update_attachment_metadata($attach_id, $attach_data);

    return $attach_id;
}

Эта функция проверяет папку wp-content/uploads/panoramas, ищет новые изображения и создаёт под них записи кастомного типа panorama. Также она устанавливает миниатюру.

Регистрация кастомного типа постов для панорам

function wpeditor_register_panorama_cpt() {
    register_post_type('panorama', [
        'labels' => [
            'name' => 'Панорамы',
            'singular_name' => 'Панорама'
        ],
        'public' => true,
        'has_archive' => true,
        'supports' => ['title', 'thumbnail']
    ]);
}
add_action('init', 'wpeditor_register_panorama_cpt');

Отображение панорамной галереи с использованием шорткода

Для вывода сгенерированных панорам можно создать шорткод, который будет выводить все опубликованные панорамы с поддержкой 360-градусного просмотра через библиотеку Three.js или готовый JS-плагин.

Пример шорткода wpeditor_panoramas_gallery

function wpeditor_panoramas_gallery_shortcode() {
    $args = [
        'post_type' => 'panorama',
        'posts_per_page' => -1
    ];
    $query = new WP_Query($args);

    $output = '<div class="wpeditor-panoramas-gallery">';

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $thumb_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
            $output .= '<div class="panorama-item" data-image="' . esc_url($thumb_url) . '"></div>';
        }
    } else {
        $output .= '<p>Панорамные изображения не найдены.</p>';
    }
    wp_reset_postdata();

    $output .= '</div>';

    // Подключаем JS для инициализации 360 просмотра
    wp_enqueue_script('panorama-viewer', 'https://cdn.jsdelivr.net/npm/panolens@0.12.0/build/panolens.min.js', [], null, true);
    wp_add_inline_script('panorama-viewer', "
        document.addEventListener('DOMContentLoaded', function() {
            var items = document.querySelectorAll('.panorama-item');
            items.forEach(function(el) {
                var panorama = new PANOLENS.ImagePanorama(el.getAttribute('data-image'));
                var viewer = new PANOLENS.Viewer({ container: el });
                viewer.add(panorama);
            });
        });
    ");

    return $output;
}
add_shortcode('wpeditor_panoramas_gallery', 'wpeditor_panoramas_gallery_shortcode');

Дополнительные рекомендации по работе с панорамными галереями

Для улучшения UX и производительности соблюдайте следующие рекомендации:

• Оптимизируйте панорамные изображения по размеру и формату (например, WebP).
• Используйте lazy loading для загрузки панорам по мере прокрутки страницы.
• Добавляйте подписи и метаданные к панорамам для SEO и удобства пользователей.
• Если используете WPVR или другой плагин, настройте автоматический импорт из облачного хранилища (Google Drive, Dropbox) через API.

Использование плагина Clearfy Pro для оптимизации

Для оптимизации загрузки и кэширования панорам можно применить плагин Clearfy Pro. Он поможет отключить ненужные скрипты на страницах с галереями и ускорить загрузку.

В итоге вы получаете полностью автоматизированный процесс добавления и обновления панорамных галерей в WordPress, что сэкономит время и повысит качество сайта.