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

Автор: Николай Ершов | Опубликовано: 10.11.2025

Почему важно создавать адаптивные блоки с изображениями

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

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

Мы покажем, как сделать это с помощью кастомного кода, а также рассмотрим полезные плагины, которые помогут ускорить процесс.

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

Регистрация шорткода в functions.php

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

function wpinfo_adaptive_image_block_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'img' => '',
        'alt' => 'Image',
        'title' => '',
        'content' => '',
    ), $atts, 'wpinfo_image_block');

    if (empty($atts['img'])) {
        return '<div>No image provided.</div>';
    }

    $html = '<div class="wpinfo-adaptive-image-block">';
    $html .= '<div class="wpinfo-image-container">';
    $html .= '<img src="' . esc_url($atts['img']) . '" alt="' . esc_attr($atts['alt']) . '" />';
    $html .= '</div>';

    if (!empty($atts['title']) || !empty($atts['content'])) {
        $html .= '<div class="wpinfo-text-container">';
        if (!empty($atts['title'])) {
            $html .= '<h3>' . esc_html($atts['title']) . '</h3>';
        }
        if (!empty($atts['content'])) {
            $html .= '<p>' . esc_html($atts['content']) . '</p>';
        }
        $html .= '</div>';
    }

    $html .= '</div>';

    return $html;
}
add_shortcode('wpinfo_image_block', 'wpinfo_adaptive_image_block_shortcode');

Этот шорткод выводит блок с картинкой и текстом. Можно использовать так:

[wpinfo_image_block img="https://example.com/image.jpg" alt="Описание" title="Заголовок" content="Текст под картинкой"]

Стилизация блока для адаптивности

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

.wpinfo-adaptive-image-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.wpinfo-image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.wpinfo-image-container {
    flex: 1 1 300px;
    min-width: 250px;
}

.wpinfo-text-container {
    flex: 2 1 400px;
}

@media (max-width: 768px) {
    .wpinfo-adaptive-image-block {
        flex-direction: column;
        gap: 10px;
    }

    .wpinfo-text-container {
        text-align: center;
    }
}

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

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

Плагин Advanced Custom Fields (ACF) и Gutenberg

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

Кроме того, с ACF можно создавать кастомные блоки для редактора Gutenberg, что позволит контент-менеджерам добавлять адаптивные блоки с картинками без вмешательства в код.

Плагин Kadence Blocks

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

Плюс, Kadence Blocks поддерживает расширенные опции для выравнивания, отступов и анимаций, что делает блоки ещё более привлекательными.

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

Использование srcset и sizes для адаптивных изображений

WordPress с версии 4.4 автоматически добавляет атрибуты srcset и sizes к изображениям, что помогает браузерам выбирать подходящий размер картинки в зависимости от экрана пользователя.

Если вы создаёте блок вручную, убедитесь, что используете функцию wp_get_attachment_image(), которая генерирует необходимые атрибуты. В нашем шорткоде можно заменить обычный <img> на следующий вызов:

function wpinfo_adaptive_image_block_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'img_id' => 0,
        'alt' => 'Image',
        'title' => '',
        'content' => '',
    ), $atts, 'wpinfo_image_block');

    if (empty($atts['img_id'])) {
        return '<div>No image provided.</div>';
    }

    $img_html = wp_get_attachment_image($atts['img_id'], 'large', false, array('alt' => $atts['alt']));

    $html = '<div class="wpinfo-adaptive-image-block">';
    $html .= '<div class="wpinfo-image-container">' . $img_html . '</div>';

    if (!empty($atts['title']) || !empty($atts['content'])) {
        $html .= '<div class="wpinfo-text-container">';
        if (!empty($atts['title'])) {
            $html .= '<h3>' . esc_html($atts['title']) . '</h3>';
        }
        if (!empty($atts['content'])) {
            $html .= '<p>' . esc_html($atts['content']) . '</p>';
        }
        $html .= '</div>';
    }

    $html .= '</div>';

    return $html;
}
add_shortcode('wpinfo_image_block', 'wpinfo_adaptive_image_block_shortcode');

Тогда в шорткоде передавайте ID вложения, например: [wpinfo_image_block img_id="123" alt="Описание" title="Заголовок" content="Текст"].

Оптимизация изображений для скорости загрузки

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

Smush — автоматическая компрессия и lazy load.
Imagify — продвинутая оптимизация с разными уровнями сжатия.
WebP Express — конвертация в формат WebP для лучшей компрессии.

Правильная оптимизация ускорит загрузку страниц и улучшит пользовательский опыт.

Тестирование и отладка адаптивных блоков с изображениями

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

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

Если блок используется часто, создайте unit-тесты или интеграционные тесты, используя инструменты типа PHPUnit или Codeception, чтобы убедиться, что изменения в коде не ломают адаптивность.

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