Как создать адаптивный блок с помощью CSS и JavaScript в WordPress

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

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

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

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

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

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

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

.wpfront-adaptive-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.wpfront-adaptive-block__image {
  flex: 1 1 300px;
  max-width: 300px;
}
.wpfront-adaptive-block__content {
  flex: 2 1 400px;
}

@media (max-width: 768px) {
  .wpfront-adaptive-block {
    flex-direction: column;
    align-items: flex-start;
  }
  .wpfront-adaptive-block__image {
    max-width: 100%;
  }
}

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

Добавление динамического поведения с JavaScript

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

Рассмотрим пример, когда при уменьшении ширины окна ниже 480px мы меняем текст внутри блока.

function wpfrontChangeTextOnResize() {
  const block = document.querySelector('.wpfront-adaptive-block__content');
  if (!block) return;
  if (window.innerWidth <= 480) {
    block.textContent = 'Это мобильный текст адаптивного блока';
  } else {
    block.textContent = 'Это текст для больших экранов адаптивного блока';
  }
}

window.addEventListener('resize', wpfrontChangeTextOnResize);
window.addEventListener('load', wpfrontChangeTextOnResize);

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

Интеграция адаптивного блока в WordPress через шорткод

Чтобы использовать адаптивный блок в WordPress, удобно создать шорткод. Ниже пример функции, которая регистрирует шорткод [wpfront_adaptive_block] для вывода нашего блока с примерным содержимым.

function wpfront_shortcode_adaptive_block() {
  ob_start();
  ?>
  <div class="wpfront-adaptive-block">
    <img src="https://via.placeholder.com/300" alt="Пример изображения" class="wpfront-adaptive-block__image" />
    <div class="wpfront-adaptive-block__content">Это текст для больших экранов адаптивного блока</div>
  </div>
  <script>
    function wpfrontChangeTextOnResize() {
      const block = document.querySelector('.wpfront-adaptive-block__content');
      if (!block) return;
      if (window.innerWidth <= 480) {
        block.textContent = 'Это мобильный текст адаптивного блока';
      } else {
        block.textContent = 'Это текст для больших экранов адаптивного блока';
      }
    }
    window.addEventListener('resize', wpfrontChangeTextOnResize);
    window.addEventListener('load', wpfrontChangeTextOnResize);
  </script>
  <?php
  return ob_get_clean();
}
add_shortcode('wpfront_adaptive_block', 'wpfront_shortcode_adaptive_block');

Добавьте этот код в файл functions.php вашей темы или в кастомный плагин. После этого можно вставлять блок в содержимое постов или страниц с помощью шорткода [wpfront_adaptive_block].

Использование плагинов для расширенной адаптивности

Если нужна более сложная адаптивность, можно использовать плагины. Например, Clearfy Pro позволяет оптимизировать загрузку скриптов и стилей, что важно для адаптивности. Также WPStories помогает создавать адаптивные сторис-блоки, которые отлично смотрятся на мобильных устройствах.

Для кастомных блоков также можно использовать My Popup — адаптивные всплывающие окна с гибкими настройками.

Советы по тестированию и отладке адаптивных блоков

Чтобы убедиться, что адаптивный блок работает корректно, рекомендуется:

• Тестировать на разных устройствах и браузерах.
• Использовать инструменты разработчика (DevTools) для проверки медиазапросов и поведения скриптов.
• Проверять скорость загрузки и минимизировать CSS и JavaScript.
• Обращать внимание на доступность (accessibility) — например, чтобы текст оставался читаемым.

Для упрощения тестирования можно временно добавить рамки или фоновые цвета к элементам блока, чтобы видеть их размеры и расположение.

Заключение

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