/ Дизайн / Сайтбар

Сайтбар

HIT

14.10.2018

2043

Вспомогательная панель или сайтбар довольно удобная штука. В нее мы можем поместить множество необходимых модулей и виджетов по функционалу сайта: от формы поиска до ленты 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]
  • Похожие записи
  • Комментарии
  • Вложения
Фильтры Woocommerce

Фильтры Woocommerce

В базовую комплектацию Woocommerce входит набор виджетов для фильтрации товаров. Но данные виджеты необходимо несколько доработать. WooCommerce Навигация по слоям В этом виджете необходимо задать атрибут товара по которому будет Читать далее »

/ /
Виджет подкатегорий

Виджет подкатегорий

Реализация виджета текущих подкатегорий и если есть родительская категория выводить и ее с отдельным стилем. Неплохое решение для навигации: в этом случае целесообразно в основном блоке выводить все записи категории Читать далее »

Виджеты

Виджеты

Виджеты — это модули с различным функционалом для добавления в специальную область sitebar. Одним из основных преимуществ данного решения является скорость и простота настройки. Виджет для изображения Если вставить изображение Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Сайтбар
Предоплата товара
Рекомендации для васПредоплата товараOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.