Вспомогательная панель или сайтбар довольно удобная штука. В нее мы можем поместить множество необходимых модулей и виджетов по функционалу сайта: от формы поиска до ленты Instagram. Сайтбар размещен справа либо слева от области основного контента (в некоторых случаях бывают оба).
Складывание сайтбара в мобильной версии
Ранее в мобильной версии я просто скрывал сайтбар. Но в некоторых случаях в сайтбаре располагается элемент важного функционала сайта (например фильтр woocommerce). Если сайтбар расположен справа. то в мобильной версии, при ширине блоков 100% он будет под основным контентом. А что делать если в десктопной версии сайтбар находится слева? А в мобильно нужно чтобы он был внизу? Или наоборот: сайтбар находится справа, но нам нужно чтобы в моб. версии он выводился до основного контента?!
Решение: делать последовательность верстки как должно быть в мобильной версии, при складывании. А блокам (основному и сайтбару) задать соответствующие float: left и float: right c указанием необходимой ширины в процентах.
С технологией CSS flexbox данные манипуляции стало делать проще. Благодаря свойству order можно спокойно менять расположение сайтбара.
Проверка активен ли сайтбар
Если в сайтбаре есть хоть один виджет — значит он активен. Проверка:
<?php if( is_active_sidebar( 'filter-group' ) ) : ?> <div class="widget"> <h3 class="headwidget">Фильтр по товарам</h3> <?php dynamic_sidebar( 'filter-group' ); ?> </div> <?php endif; ?>
filter-group — название сайтбара
Проверка активен ли виджет (т.е. отображается ли он во фронтенде).
[site-socialshare]
