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

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

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

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

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

Создание базового шорткода с функцией cyrtolat_shortcode_adaptive

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

function cyrtolat_shortcode_adaptive($atts, $content = null) {
    $atts = shortcode_atts(array(
        'class' => '',
    ), $atts, 'cyrtolat_adaptive');

    return '<div class="cyrtolat-adaptive ' . esc_attr($atts['class']) . '">' . do_shortcode($content) . '</div>';
}
add_shortcode('cyrtolat_adaptive', 'cyrtolat_shortcode_adaptive');

Этот шорткод создаёт <div> с классом cyrtolat-adaptive и дополнительным классом, если он передан через атрибут class. Внутрь можно вставлять любой контент, включая другие шорткоды.

Пример использования шорткода

В редакторе WordPress вставьте:

[cyrtolat_adaptive class="custom-block"]
Ваш контент здесь
[/cyrtolat_adaptive]

Это выведет блок с классами cyrtolat-adaptive custom-block.

Добавление CSS для адаптивного отображения

Чтобы блок корректно отображался на разных устройствах, нужно добавить CSS. Вот пример базовых стилей:

.cyrtolat-adaptive {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .cyrtolat-adaptive {
        padding: 10px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .cyrtolat-adaptive {
        padding: 8px;
        font-size: 12px;
    }
}

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

Расширение функционала: добавление параметров шорткода

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

Расширим функцию шорткода:

function cyrtolat_shortcode_adaptive($atts, $content = null) {
    $atts = shortcode_atts(array(
        'class' => '',
        'bgcolor' => '#f9f9f9',
        'align' => 'left',
    ), $atts, 'cyrtolat_adaptive');

    $style = 'background-color: ' . esc_attr($atts['bgcolor']) . '; text-align: ' . esc_attr($atts['align']) . '; padding: 15px; border-radius: 5px;';

    return '<div class="cyrtolat-adaptive ' . esc_attr($atts['class']) . '" style="' . $style . '">' . do_shortcode($content) . '</div>';
}
add_shortcode('cyrtolat_adaptive', 'cyrtolat_shortcode_adaptive');

Теперь вы можете указывать цвет фона и выравнивание при вызове шорткода:

[cyrtolat_adaptive bgcolor="#e0f7fa" align="center"]
Текст внутри адаптивного блока
[/cyrtolat_adaptive]

Пример использования шорткода для вывода адаптивной таблицы

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

В редакторе:

[cyrtolat_adaptive class="responsive-table"]
<table>
    <thead>
        <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
    </thead>
    <tbody>
        <tr><td>Данные 1</td><td>Данные 2</td></tr>
    </tbody>
</table>
[/cyrtolat_adaptive]

Добавьте CSS для адаптивности таблицы:

.cyrtolat-adaptive.responsive-table {
    overflow-x: auto;
}

.cyrtolat-adaptive.responsive-table table {
    width: 100%;
    border-collapse: collapse;
}

.cyrtolat-adaptive.responsive-table th, .cyrtolat-adaptive.responsive-table td {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: left;
}

Полезные плагины для создания и управления шорткодами

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

• Shortcoder — позволяет создавать свои шорткоды с HTML, JavaScript и PHP.
• Shortcode Ultimate — набор готовых шорткодов с возможностью настройки.
• WP Shortcode by MyThemeShop — простой и удобный плагин для вставки элементов.

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

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

При создании шорткодов важно соблюдать несколько правил:

• Используйте esc_attr() и esc_html() для экранирования входных данных.
• Не позволяйте выполнять произвольный PHP-код в шорткоде, если вы не уверены в безопасности.
• Тестируйте шорткод на разных устройствах и браузерах.
• Добавляйте CSS через отдельный файл или через функцию wp_enqueue_style().

Пример подключения стилей для шорткода:

function cyrtolat_enqueue_styles() {
    wp_enqueue_style('cyrtolat-adaptive-style', get_template_directory_uri() . '/css/cyrtolat-adaptive.css');
}
add_action('wp_enqueue_scripts', 'cyrtolat_enqueue_styles');