Как создать адаптивный shortcode в WordPress для вывода контента

Автор: Степан Орлов | Опубликовано: 09.11.2025

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

Что такое shortcode и зачем создавать адаптивные shortcodes

Shortcode — это специальный тег в квадратных скобках, который WordPress преобразует в динамический контент при выводе страницы. Например, [gallery] или [video]. Создавая собственные shortcodes, вы можете расширить функциональность сайта и упростить работу с контентом для авторов.

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

Создание базового shortcode в WordPress

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

function wplesson_hello_shortcode($atts) {
    $atts = shortcode_atts(
        array('name' => 'Гость'), $atts, 'wplesson_hello'
    );
    return '<div class="wplesson-hello">Привет, ' . esc_html($atts['name']) . '!</div>';
}
add_shortcode('wplesson_hello', 'wplesson_hello_shortcode');

Теперь в редакторе WordPress можно вставить [wplesson_hello name="Иван"], и на сайте появится приветствие: «Привет, Иван!».

Добавление адаптивности с помощью CSS

Чтобы shortcode выглядел хорошо на любых устройствах, добавим стили. Вставьте в файл стилей темы (style.css) или используйте функцию для добавления inline-стилей:

.wplesson-hello {
    padding: 10px 15px;
    background-color: #f0f8ff;
    border-radius: 5px;
    font-size: 1.2em;
    max-width: 100%;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    .wplesson-hello {
        font-size: 1em;
        padding: 8px 10px;
    }
}

Это обеспечит читаемость текста и адекватные отступы на экранах разной ширины.

Пример сложного адаптивного shortcode: вывод галереи с возможностью кастомизации

Рассмотрим создание shortcode для вывода адаптивной галереи с изображениями, где можно задать количество колонок и размер изображений.

Добавьте следующий код в functions.php:

function wplesson_gallery_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'ids' => '',
            'columns' => 3,
            'size' => 'medium',
        ), $atts, 'wplesson_gallery'
    );

    if (empty($atts['ids'])) {
        return '<p>Пожалуйста, укажите ID изображений через атрибут ids.</p>';
    }

    $ids = explode(',', $atts['ids']);
    $columns = intval($atts['columns']);
    $columns = max(1, min($columns, 6)); // Ограничим кол-во колонок от 1 до 6

    $output = '<div class="wplesson-gallery">';
    foreach ($ids as $id) {
        $img = wp_get_attachment_image($id, $atts['size']);
        if ($img) {
            $output .= '<div class="wplesson-gallery-item">' . $img . '</div>';
        }
    }
    $output .= '</div>';

    // Добавим стили для адаптивности и колонок
    $output .= '<style>
.wplesson-gallery {
  display: grid;
  grid-template-columns: repeat(' . $columns . ', 1fr);
  gap: 10px;
}
.wplesson-gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  display: block;
}
@media (max-width: 768px) {
  .wplesson-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .wplesson-gallery {
    grid-template-columns: 1fr;
  }
}
</style>';

    return $output;
}
add_shortcode('wplesson_gallery', 'wplesson_gallery_shortcode');

Использование shortcode в записи может выглядеть так:

[wplesson_gallery ids="34,56,78,90" columns="4" size="thumbnail"]

Этот shortcode выведет галерею из указанных ID изображений, распределенную в 4 колонки, с адаптивным переходом к 2 и 1 колонкам на малых экранах.

Советы по улучшению адаптивных shortcode

Оптимизация загрузки

Для улучшения скорости загрузки используйте оптимизированные размеры изображений и lazy loading. WordPress поддерживает lazy loading по умолчанию для изображений, добавляя атрибут loading="lazy". Вы можете дополнительно контролировать это в вашем shortcode.

Поддержка кастомных стилей

Для гибкости дайте возможность пользователю задавать дополнительные CSS-классы через атрибуты shortcode. Это позволит подстраиваться под дизайн сайта без изменения кода.

Использование JavaScript для интерактивности

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

Пример расширения: добавление lightbox к галерее

Для создания красивого всплывающего окна при клике на изображение можно интегрировать библиотеку lightbox. Вот пример подключения lightbox2:

Подключите CSS и JS lightbox в functions.php:

function wplesson_enqueue_lightbox() {
    wp_enqueue_style('lightbox-css', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css');
    wp_enqueue_script('lightbox-js', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wplesson_enqueue_lightbox');

Измените shortcode для добавления ссылки с атрибутом data-lightbox:

function wplesson_gallery_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'ids' => '',
            'columns' => 3,
            'size' => 'medium',
        ), $atts, 'wplesson_gallery'
    );

    if (empty($atts['ids'])) {
        return '<p>Пожалуйста, укажите ID изображений через атрибут ids.</p>';
    }

    $ids = explode(',', $atts['ids']);
    $columns = intval($atts['columns']);
    $columns = max(1, min($columns, 6));

    $output = '<div class="wplesson-gallery">';
    foreach ($ids as $id) {
        $thumb = wp_get_attachment_image($id, $atts['size']);
        $full = wp_get_attachment_image_src($id, 'full');
        if ($thumb && $full) {
            $output .= '<div class="wplesson-gallery-item"><a href="' . esc_url($full[0]) . '" data-lightbox="wplesson-gallery">' . $thumb . '</a></div>';
        }
    }
    $output .= '</div>';

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

    return $output;
}

Так вы получите адаптивную галерею с поддержкой просмотра полноразмерных изображений в красивом всплывающем окне.

Выводы и рекомендации

Создание адаптивных shortcode в WordPress — это несложно и позволяет гибко управлять контентом. Используйте CSS Grid или Flexbox для раскладки, учитывайте мобильные устройства, добавляйте кастомизацию и интерактивность.

На сайте wplesson.ru вы можете использовать эти примеры для расширения функционала и улучшения пользовательского опыта.