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

Сайтбар

HIT

14.10.2018

1864

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

Проверка активен ли виджет (т.е. отображается ли он во фронтенде).

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Виджет подкатегорий

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

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

Виджет последних записей

Виджет последних записей

Создаем виджет последних записей, с миниатюрами. Вставить в текстовый виджет, posts_per_page — количество, category — если убрать, то будут все рубрики. Можно добавлять и другие параметры запроса. <ul class="lastpostvidget"> <?php Читать далее »

Создание виджета WP

Создание виджета WP

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

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

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

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