Как создать адаптивный shortcode в WordPress: практические примеры и код

Автор: Андрей Комаров | Опубликовано: 29.11.2025

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

Что такое адаптивный shortcode и зачем он нужен

Адаптивный shortcode — это шорткод, который меняет своё отображение и поведение в зависимости от размера экрана и устройства пользователя. Например, он может показывать меньше элементов на мобильных устройствах, изменять структуру вывода или подгружать разные стили и скрипты.

Без адаптивности контент, вставленный через shortcode, может выглядеть некорректно: выходить за границы экрана, иметь слишком мелкие кнопки или плохо читать информацию. Поэтому адаптивность — важная часть UX на современном сайте.

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

Создание базового адаптивного шорткода: пошаговое руководство

Регистрация шорткода в WordPress

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

function wpsnippets_adaptive_gallery_shortcode($atts) {
    $atts = shortcode_atts(array(
        'images' => '', // Список ID изображений через запятую
    ), $atts, 'adaptive_gallery');

    if (empty($atts['images'])) {
        return '<p>Нет изображений для отображения.</p>';
    }

    $image_ids = explode(',', $atts['images']);
    $output = '<div class="wpsnippets-adaptive-gallery">';
    foreach ($image_ids as $id) {
        $img_url = wp_get_attachment_url(trim($id));
        if ($img_url) {
            $output .= '<div class="gallery-item"><img src="' . esc_url($img_url) . '" alt="" /></div>';
        }
    }
    $output .= '</div>';

    return $output;
}
add_shortcode('adaptive_gallery', 'wpsnippets_adaptive_gallery_shortcode');

Этот код создаёт простой вывод блока с изображениями. Но пока он не адаптивен — все картинки выведутся в ряд без стилей.

Добавление адаптивных стилей для шорткода

Чтобы сделать галерею адаптивной, нужно добавить CSS, который будет менять расположение элементов в зависимости от ширины экрана. Лучше всего подключать стили через функцию wp_enqueue_style, но для примера добавим стили прямо в шорткод.

function wpsnippets_adaptive_gallery_shortcode($atts) {
    $atts = shortcode_atts(array(
        'images' => '',
    ), $atts, 'adaptive_gallery');

    if (empty($atts['images'])) {
        return '<p>Нет изображений для отображения.</p>';
    }

    $image_ids = explode(',', $atts['images']);

    $style = '<style>
    .wpsnippets-adaptive-gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .wpsnippets-adaptive-gallery .gallery-item img {
        width: 100%;
        height: auto;
        display: block;
    }
    @media (max-width: 768px) {
        .wpsnippets-adaptive-gallery {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 480px) {
        .wpsnippets-adaptive-gallery {
            grid-template-columns: 1fr;
        }
    }
    </style>';

    $output = $style . '<div class="wpsnippets-adaptive-gallery">';
    foreach ($image_ids as $id) {
        $img_url = wp_get_attachment_url(trim($id));
        if ($img_url) {
            $output .= '<div class="gallery-item"><img src="' . esc_url($img_url) . '" alt="" /></div>';
        }
    }
    $output .= '</div>';

    return $output;
}
add_shortcode('adaptive_gallery', 'wpsnippets_adaptive_gallery_shortcode');

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

Добавление интерактивности: адаптивный слайдер на базе плагина Swiper.js

Подключение библиотеки Swiper.js

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

Подключать библиотеки лучше через wp_enqueue_script и wp_enqueue_style в функционале темы или плагина:

function wpsnippets_enqueue_swiper() {
    wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css');
    wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'wpsnippets_enqueue_swiper');

Модификация шорткода под слайдер

Теперь изменим вывод шорткода, чтобы на узких экранах галерея превращалась в слайдер Swiper:

function wpsnippets_adaptive_gallery_shortcode($atts) {
    $atts = shortcode_atts(array(
        'images' => '',
    ), $atts, 'adaptive_gallery');

    if (empty($atts['images'])) {
        return '<p>Нет изображений для отображения.</p>';
    }

    $image_ids = explode(',', $atts['images']);

    ob_start();
    ?>
    <style>
    .wpsnippets-adaptive-gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .wpsnippets-adaptive-gallery .gallery-item img {
        width: 100%;
        height: auto;
        display: block;
    }
    @media (max-width: 768px) {
        .wpsnippets-adaptive-gallery {
            display: none;
        }
        .wpsnippets-swiper {
            display: block;
        }
    }
    @media (min-width: 769px) {
        .wpsnippets-swiper {
            display: none;
        }
    }
    </style>

    <div class="wpsnippets-adaptive-gallery">
    <?php foreach ($image_ids as $id) {
        $img_url = wp_get_attachment_url(trim($id));
        if ($img_url) : ?>
            <div class="gallery-item"><img src="<?php echo esc_url($img_url); ?>" alt="" /></div>
        <?php endif; 
    } ?>
    </div>

    <!-- Swiper слайдер для мобильных -->
    <div class="wpsnippets-swiper swiper">
      <div class="swiper-wrapper">
      <?php foreach ($image_ids as $id) {
        $img_url = wp_get_attachment_url(trim($id));
        if ($img_url) : ?>
          <div class="swiper-slide"><img src="<?php echo esc_url($img_url); ?>" alt="" /></div>
      <?php endif; 
      } ?>
      </div>
      <!-- Навигация -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-pagination"></div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        if (window.innerWidth <= 768) {
            const swiper = new Swiper('.wpsnippets-swiper', {
                loop: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        }
    });
    </script>
    <?php

    return ob_get_clean();
}
add_shortcode('adaptive_gallery', 'wpsnippets_adaptive_gallery_shortcode');

Этот код выводит две версии галереи: сетку для десктопов и слайдер Swiper для экранов шириной 768px и меньше. При загрузке страницы на мобильном устройстве инициализируется слайдер с навигацией и пагинацией.

Использование плагинов для адаптивных шорткодов

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

Shortcodes Ultimate — универсальный плагин с большим набором адаптивных шорткодов, включая слайдеры и галереи.
Responsive Lightbox & Gallery — отличный плагин для создания адаптивных галерей с поддержкой шорткодов.
WP Slick Slider and Image Carousel — плагин для удобного создания слайдеров с адаптивным дизайном.

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

Советы по оптимизации адаптивных шорткодов в WordPress

Создавая адаптивные шорткоды, учитывайте следующие моменты:

Минимизируйте подключение стилей и скриптов. Используйте условное подключение и загружайте только то, что нужно на текущей странице.
Используйте CSS Grid и Flexbox. Эти современные технологии позволяют легко реализовать адаптивные макеты без лишних скриптов.
Оптимизируйте изображения. Загружайте изображения подходящего размера и используйте атрибуты srcset и sizes для адаптивной загрузки.
Тестируйте на разных устройствах. Проверяйте работу шорткода на мобильных, планшетах и десктопах, чтобы убедиться в корректности отображения.

Правильный подход к созданию адаптивных шорткодов повысит удобство пользователей и улучшит SEO вашего сайта.

Заключение: адаптивность как стандарт для шорткодов

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

На wpsnippets.ru вы всегда найдёте практические примеры и готовые решения для WordPress — продолжайте изучать, экспериментировать и улучшать свои проекты!

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