Как разместить сайдбар над товарами в мобильной версии?

Как разместить сайдбар над товарами в мобильной версии?

Содержание

Зачем размещать сайдбар над товарами в мобильной версии?

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

1. Удобство навигации

  • Сайдбар вверху = быстрый доступ к фильтрам.
    Пользователь сразу видит варианты сортировки, категории или фильтры, не прокручивая страницу.
  • Пример:
  • В интернет-магазине сайдбар содержит фильтры по цене, размеру, цвету.
  • Если он вверху, пользователь может сразу уточнить выбор, а не скроллить вбок.

2. Уменьшение “лишних” действий

  • На десктопе сайдбар слева/справа — норма, но на мобильном он:
  • Съедает полезную ширину экрана (товары отображаются узко).
  • Может скрываться за гамбургер-меню, из-за чего пользователи его не замечают.
  • Размещение вверху делает его очевидным и легко доступным.

3. Лучшая совместимость с мобильными паттернами

  • Большинство мобильных сайтов (Ozon, WB, Яндекс Маркет, AliExpress) размещают фильтры над товарами или в выпадающем меню.
  • Пользователи привыкли к такому расположению и интуитивно ищут фильтры вверху.

4. Улучшение SEO (косвенно)

  • Яндекс и Google учитывают удобство мобильного интерфейса (Mobile-First Indexing).
  • Если фильтры скрыты или неудобны, пользователи быстрее покидают сайт, что увеличивает отказы и ухудшает ранжирование.

Переходим к практике.

Задача: Левый сайтбар должен отображаться над основным блоком в мобильной версии

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

  1. Через CSS (рекомендуется)
    Добавьте в style.css вашей дочерней темы (или через “Дополнительный CSS” в кастомайзере) следующий код:
@media (max-width: 768px) {
  /* Меняем порядок отображения сайдбара и контента */
  #left-sidebar {
    order: -1; /* Flexbox-порядок (если контейнер flex) */
  }
  
  /* Или, если используется стандартная верстка: */
  .site-main {
    display: flex;
    flex-direction: column;
  }
  
  .inside-left-sidebar {
    margin-bottom: 20px; /* Отступ снизу */
  }
}
  1. Через PHP (меняем HTML-структуру)
    Если CSS недостаточно, можно изменить порядок вывода сайдбара в functions.php или шаблоне.

Вариант 1: Использование хука wp_head + CSS

add_action('wp_head', function() {
  if (wp_is_mobile()) {
    echo '<style>#left-sidebar { order: -1; }</style>';
  }
});

Вариант 2: Полная перестановка через хуки (если сайдбар выводится отдельно)

Если сайдбар подключается через get_sidebar(), можно переопределить его вывод:

// В файле шаблона (например, page.php или single.php)
if (wp_is_mobile()) {
  get_sidebar('left'); // Сначала сайдбар
  get_template_part('content'); // Потом контент
} else {
  // Стандартный вывод
  get_template_part('content');
  get_sidebar('left');
}

Лучший вариант — CSS с @media, так как он не требует изменения PHP и работает на всех устройствах. Если нужен более сложный контроль, можно комбинировать с PHP-проверкой wp_is_mobile().

Итог:


Размещение сайдбара над товарами на мобильных — это:
✅ Удобство (фильтры под рукой).
✅ Экономия места (товары занимают всю ширину).
✅ Следование трендам (как у лидеров eCommerce).

Рекомендуется протестировать на реальных пользователях (A/B-тест), чтобы убедиться в росте конверсии.