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

Автор: София Фролова | Опубликовано: 27.12.2025

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

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

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

Адаптивные блоки позволяют:

Сохранять читабельность текста;
Поддерживать правильное соотношение и масштаб изображений;
Избегать горизонтальной прокрутки;
Улучшать восприятие информации и дизайн.

Далее рассмотрим, как технически реализовать такой блок на WordPress.

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

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

HTML-разметка

Пример простой структуры блока:

<div class="wplog-adaptive-block">
  <div class="wplog-image">
    <img src="https://example.com/image.jpg" alt="Описание изображения" />
  </div>
  <div class="wplog-text">
    <h3>Заголовок блока</h3>
    <p>Это пример текста рядом с картинкой, который адаптируется под размеры экрана.</p>
  </div>
</div>

CSS для адаптивности

Далее добавим стили, которые обеспечат адаптивное поведение блока:

.wplog-adaptive-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.wplog-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.wplog-image {
  flex: 1 1 300px;
  max-width: 40%;
}
.wplog-text {
  flex: 1 1 300px;
  max-width: 55%;
}

@media (max-width: 768px) {
  .wplog-adaptive-block {
    flex-direction: column;
    gap: 10px;
  }
  .wplog-image, .wplog-text {
    max-width: 100%;
  }
}

Подключить CSS можно в файле стилей темы или через кастомный CSS в админке.

Вывод блока в шаблоне

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

function wplog_render_adaptive_block($image_url, $title, $text) {
    echo '<div class="wplog-adaptive-block">';
    echo '<div class="wplog-image"><img src="' . esc_url($image_url) . '" alt="' . esc_attr($title) . '" /></div>';
    echo '<div class="wplog-text"><h3>' . esc_html($title) . '</h3><p>' . esc_html($text) . '</p></div>';
    echo '</div>';
}

Вызовите функцию в нужном месте темы, передав URL картинки, заголовок и текст.

Альтернативный способ: использование плагинов для создания адаптивных блоков

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

Плагин Gutenberg и кастомные блоки

Из коробки Gutenberg позволяет создавать колонки с изображениями и текстом. Для расширения функционала можно использовать плагин Gutenberg Blocks by Kadence или Quizle от WPSHOP.RU, который предлагает удобные адаптивные блоки с гибкими настройками.

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

С помощью ACF можно создать кастомные поля для изображений и текста и вывести их в шаблоне с адаптивным CSS, подобным приведённому выше. Это удобно для сайтов с часто меняющимся контентом.

Практические советы по оптимизации адаптивных блоков

Сжатие и оптимизация изображений

Чтобы блок загружался быстро, используйте плагины оптимизации изображений, например Clearfy Pro или сторонние решения, которые уменьшают размер без потери качества.

Lazy load для изображений

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

function wplog_render_adaptive_block($image_url, $title, $text) {
    echo '<div class="wplog-adaptive-block">';
    echo '<div class="wplog-image"><img src="' . esc_url($image_url) . '" alt="' . esc_attr($title) . '" loading="lazy" /></div>';
    echo '<div class="wplog-text"><h3>' . esc_html($title) . '</h3><p>' . esc_html($text) . '</p></div>';
    echo '</div>';
}

Проверка на разных устройствах

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

Заключение по теме создания адаптивных блоков

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