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

Автор: Дмитрий Комаров | Опубликовано: 05.11.2025

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

Что такое шорткод и зачем он нужен в WordPress

Шорткод — это специальная метка в квадратных скобках, например [wpdigest_gallery], которую WordPress заменяет на определенный динамический контент при выводе страницы. Они позволяют добавлять сложные элементы, например галереи, формы, кнопки, без прямого редактирования темы или плагинов. Это упрощает управление сайтом и ускоряет разработку.

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

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

Начнем с простого примера: создадим шорткод, который выводит блок с текстом и кнопкой, и сделаем его адаптивным с помощью CSS.

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

function wpdigest_responsive_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'button_text' => 'Нажми меня',
        'button_link' => '#'
    ), $atts, 'wpdigest_button');

    $html = '<div class="wpdigest-responsive-box">';
    $html .= '<p>'.do_shortcode($content).'</p>';
    $html .= '<a href="'.esc_url($atts['button_link']).'" class="wpdigest-button">'.esc_html($atts['button_text']).'</a>';
    $html .= '</div>';

    return $html;
}
add_shortcode('wpdigest_button', 'wpdigest_responsive_shortcode');

Этот шорткод [wpdigest_button button_text="Подробнее" button_link="https://example.com"]Ваш текст здесь[/wpdigest_button] создаст блок с текстом и кнопкой.

Стилизация и адаптивность через CSS

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

.wpdigest-responsive-box {
    padding: 15px;
    background-color: #f5f8fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    max-width: 600px;
    margin: 20px auto;
    box-sizing: border-box;
    text-align: center;
}
.wpdigest-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}
.wpdigest-button:hover {
    background-color: #005177;
}
@media (max-width: 480px) {
    .wpdigest-responsive-box {
        padding: 10px;
    }
    .wpdigest-button {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 0;
    }
}

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

Расширение шорткода: добавление параметров и динамического контента

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

function wpdigest_responsive_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'button_text' => 'Нажми меня',
        'button_link' => '#',
        'button_color' => '#0073aa'
    ), $atts, 'wpdigest_button');

    $button_style = 'background-color:' . esc_attr($atts['button_color']) . ';';

    $html = '<div class="wpdigest-responsive-box">';
    $html .= '<p>'.do_shortcode($content).'</p>';
    $html .= '<a href="'.esc_url($atts['button_link']).'" class="wpdigest-button" style="'. $button_style .'">'.esc_html($atts['button_text']).'</a>';
    $html .= '</div>';

    return $html;
}

Теперь можно использовать шорткод так:

[wpdigest_button button_text="Купить" button_link="https://shop.example.com" button_color="#e74c3c"]Уникальное предложение[/wpdigest_button]

Это позволит пользователям сайта легко менять внешний вид и ссылки, не вникая в код.

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

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

Shortcodes Ultimate — мощный набор готовых шорткодов с адаптивной версткой и множеством настроек.
WPBakery Page Builder — визуальный конструктор, позволяющий создавать адаптивные блоки и использовать шорткоды.
Elementor — еще один популярный конструктор с поддержкой кастомных шорткодов и адаптивных настроек.

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

Отладка и тестирование адаптивности шорткодов

После создания шорткода важно тщательно проверить его на разных устройствах и браузерах. Используйте инструменты разработчика в браузерах (Chrome DevTools, Firefox Developer Tools), чтобы проверить, как шорткод ведет себя при разных разрешениях экрана.

Обратите внимание на такие моменты:

Корректное отображение текста и кнопок
Отступы и размеры блоков
Удобство нажатия на элементы на мобильных устройствах
Время загрузки (избегайте тяжелых стилей и скриптов)

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

Заключение

Создание адаптивного шорткода в WordPress — отличная возможность сделать сайт удобнее и функциональнее для посетителей. С помощью простого PHP-кода и CSS можно реализовать гибкий компонент, который будет отлично смотреться на любых устройствах. Используйте приведенные примеры как основу и расширяйте функционал под свои задачи. Также рассмотрите мощные плагины для более сложных сценариев.